Why we need it
Generating the Changes in the API of components section in the migration guide will prevent unhandled breaking changes, improve our documentation, and speed up our work. We can use check-component-api script output to get the differences between versions.

Components should be in accordance with the design.

https://www.figma.com/file/54rgvRJfBBagt4F34rrp1s/Core-Component-Library?node-id=2956%3A78508

Changes highlights:

• Border radius of the chip’s outer shape is now defined with --border-radius-form token
• Adjusted space between text and icon (see in figma)
• Important: touch/click target size of the icon extended to be bigger (32px x 32px)
• Icon placed in upper corner (and not vertically centered) when chip has several lines

Currently, we are using FIGMA tokens to define letter spacing variables.
However, Figma uses percentage values that are not supported in CSS.
We should update a scraping script and adjust it to a CSS-supported unit.

Current variables values:

  --letter-spacing-medium: 2%;
  --letter-spacing-none: 0%;
  --letter-spacing-small: 1%;

Expected variables values:

  --letter-spacing-none: 0;
  --letter-spacing-small: 0.01em;
  --letter-spacing-medium: 0.02em;

• How our release process looks now. Describe it.
• How we can improve our release process.
  • What we can do automatically.

Create UiInsidePages (...try to find a better name for this component).

1. Change the name. UiMegaMenu isn't the best match.
2. Provide function to build "Mobile Menu" from Triage app design.
   
   
   or mobile head part from "Point on the body"
   
   
3. Add transition to slide between views.
4. Add the possibility to change/disable transition.
5. Add the possibility to change the view from the outside.

Components should be in accordance with the design.

• UiListItem with borders according to design
• UiListItem with padding according to design (mobile 12px 20px; desktop 12px)
  
  https://www.figma.com/file/54rgvRJfBBagt4F34rrp1s/Core-Component-Library?node-id=2651%3A67786
• UiListItem with Button in Suffix according to design.
  
• UiListItem with hover, active background according to design.
• UiListItem with ui-list-item--has-error according to design.
  
• Add story for UiList as Answer With Radio 3 State
• Add story for UiList as Condition

We have a few illustrations in the component-library

• agreement
• boy
• no-internet-illustration
• podium

sometimes we want to change the color of elements like agreement background etc.

let we name variables like --<illustration-name>-<element>-<svg-element>-<property> i.e. --agreement-padlock-rect-fill and --agreement-padlock-rect-fill

<rect x="50" y="36" width="24" height="24" rx="12" fill="var(--agreement-padlock-rect-fill, #FFC037)" stroke="var(--agreement-padlock-rect-stroke, #EBA100)" stroke-width="2"></rect>

keep hex property as default

Example

default boy.svg

custom boy.svg

Currently, UiButton and UiLink have href and to props. href for external links, and to for vue-router routes. IMO we should use one prop like link [string, object]

Files for the new component should be created in TypeScript, so the sample templates in the create-component script should be updated.

• The component.stories.js file should be updated to TS - component.stories.ts and should use the new recommended format for stories - CSF3.
• The component.spec.ts file should use stories args for unit testing.

Description
in a few places, we override properties like padding i.e.

  --popover-content-padding-block: #{functions.var($element + "-popover", padding-block, var(--space-8))};
  --popover-content-padding-inline: #{functions.var($element + "-popover", padding-inline, var(--space-8))};

Expected behavior
When we made CSS logical properties we have padding-inline and padding-inline-start and padding-inline-end
then it should be

  --button-padding-block:
    #{functions.var(
      $element,
      padding-block,
      functions.var($element, padding-block-start, var(--space-8))
      functions.var($element, padding-block-end, var(--space-8))
    )};
  --button-padding-inline:
    #{functions.var(
      $element,
      padding-inline,
      functions.var($element, padding-inline-start, var(--space-8))
      functions.var($element, padding-inline-end, var(--space-8))
    )};

Considered solution
To fix this issue we should use @mixin mixins.override-logical from this PR #77
Additional context
In #77 I fixed a few properties but I need to check component by component to fix this issue in other places (if they exist).

We can improve our docs by adding an addon to Storybook (https://storybook.js.org/addons/storybook-addon-pseudo-states/) that makes it easy to switch between CSS pseudo states of an element (:hover, :active, :focus).

• Create new directory in Getting Started call Design System
• create subpages
  • Default colors
  • Color Decisions
    • Property
    • Component
    • Concep
  • Typography
  • Layout
• use import variables from @/styles/colors.scss?raw` and parse it to object {name: '', value: ''} and list variables on page
  • use @storybook/components ArgsTable to display variables (we will use it in next step) https://github.com/ljcl/storybook-addon-cssprops/blob/main/packages/storybook-addon-cssprops/src/components/CssPropsTable/CssPropsTable.tsx here is the code to help you to do that

Problem

At the moment we're having reusable SFCs with <script setup lang="ts"> with wrongly exported types and/or interfaces. Interfaces and/or types exported from .vue and imported to .ts files lead to errors while running check:types script - tsc and vue-tsc.

Here's an example:

> @infermedica/[email protected] check:types /component-library
> tsc --noEmit & vue-tsc --noEmit

src/components/organisms/UiPhoneNumber/UiPhoneNumber.stories.ts:2:15 - error TS2614: Module '"*.vue"' has no exported member 'UiPhoneNumberProps'. Did you mean to use 'import UiPhoneNumberProps from "*.vue"' instead?

2 import type { UiPhoneNumberProps } from '@/components/organisms/UiPhoneNumber/UiPhoneNumber.vue';
                ~~~~~~~~~~~~~~~~~~


Found 1 error in src/components/organisms/UiPhoneNumber/UiPhoneNumber.stories.ts:2

Solution

We have several ways to fix this. Regarding many sources we could either:

• create another file in each of the component's directories and export component-related types from those files; these files could be named like:
  • types.ts [preferred]
  • or ComponentNameTypes.ts
  • or componentNameTypes.ts
• add another, parallel script tag aside current one, but without setup and only export from within those tags

• Add typescript to composables

Create organisms/UiMenu according to the design:
Menu

MenuItem

UiMenu

How to use

<UiMenu
 :items="Array"
 :class="['ui-menu-item--comfortable']"
/>
## UiMegaMenu

Draft of component

<UiListItem>
  <UiButton>
  <span class="__label">
    <slot/>
  </span>  
  <span class="__suffix">
    {{iconLabel}}
    <UiIcon>
  <span>
  </UiButton>
<UiListItem>

How to use

<UiMenuItem
  :icon="String, Object"
  :icon-visible="'default' | 'always', | 'never'"
  :icon-label="String"
  :class="['ui-menu-item--is-selected']"
>Label</UiMenuItem>

The new table component should be similar to the table in figma design files.

The table should consist of the following columns:

• an example that shows the changes
• name
• description
• default value
• control

Related to https://github.com/infermedica/component-library/pull/14/files#r986703788
@ArkadiuszKrzymienski please add a description for this issue :thank_you:

Why we need it
We want to trace components API changes to prevent unhandled breaking changes.

How we can do it

• We can use vue-docgen-api to scrap components (and _internal components) API (props, slots, emits).

• Make components iteration function reusable and allow to pass some callback to it (as single and as array of callbacks).

• Save results of vue-docgen-api to components-api-lock.json.

• Add script to detect diffs between components-api-lock.json on develop branch and on the current branch.

• Its only my proposal to solve this issue. Feel free to add improvements to my proposition.

Description
In autogenerated file src/styles/variables/typography.scss we have

  @media screen and (min-width: 768px) {
    --font-h1: var(--font-weight-default) var(--font-size-6) / var(--line-height-default) var(--font-family-heading);
    --font-h2: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
    --font-h3: var(--font-weight-default) var(--font-size-3) / var(--line-height-default) var(--font-family-heading);
  }

this fonts is dedicated to mobile. This file is autogenerated by update:css-variables. update:css-variables get values from Figma design.

Expected

...
--font-h1: var(--font-weight-default) var(--font-size-6) / var(--line-height-default) var(--font-family-heading);
--font-h2: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
--font-h3: var(--font-weight-default) var(--font-size-3) / var(--line-height-default) var(--font-family-heading);
--font-h4: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-heading);
--font-h5: var(--font-weight-thick) var(--font-size-1) / var(--line-height-2) var(--font-family-heading);
@media screen and (min-width: 768px) {
  --font-h1: var(--font-weight-default) var(--font-size-7) / var(--line-height-default) var(--font-family-heading);
  --font-h2: var(--font-weight-default) var(--font-size-5) / var(--line-height-default) var(--font-family-heading);
  --font-h3: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
}

Solution
You should only change the order. As you see in the design we have Desktop Mobile.

In CL we use the Mobile First approach.

Try to use all logical properties for padding, margin, text-align and borders
https://web.dev/learn/css/logical-properties/ Try to use flex and gap instead of margin to handle many cases.

Please create mixins to handle logical properties and remember to use CSS Var
If is possible use shorthand like margin-inline or padding-block

!!! Please create mixins and make changes in few components. Push it to CR and after approve add changes to other components.

Resolve and fix typescript errors

We want to use Storybook v7 now because we have a lot of changes to make in our docs. IMO this is the right moment to upgrade Storybook and start improvements.

A new approach for #101

How this feature will help us
Snapshotting should be disabled by default for all stories. Because the story writer can miss setting disableShanpshot and push to Chromatic worthless story. Story writers should enable snapshotting per story.

Considered solution
Enable snapshotting for the component

 parameters: {
    chromatic: { disableSnapshot: false },
  },

Additional context
This issue should have been added while rewriting the stories.

Defining props with pure interface and default values for them is now possible in vue. We should start using type-based declaration and withDefaults macro compiler to declare props.

• atoms
• molecules
• organism
• templates

New components should use TypeScript and withDefaults method to declare props

Description
stylelint can't anymore fix indent in css files; firma-to-css return output with strange formatting.

// Auto-generated file by update:css-variables script. Do not edit manually
html {--space-2: 0.125rem;
--space-4: 0.25rem;
--space-8: 0.5rem;
--space-12: 0.75rem;
--space-16: 1rem;
--space-20: 1.25rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-40: 2.5rem;
--space-48: 3rem;
--space-64: 4rem;
--space-96: 6rem;

--border-radius-button: 0.3125rem;
...
--opacity-medium: 0.5;}

Expected
We need content

• without empty new lines
• withe new line after html { and after last variable
• with expected indent 2 space

// Auto-generated file by update:css-variables script. Do not edit manually
html {
  --font-h1: var(--font-weight-default) var(--font-size-6) / var(--line-height-default) var(--font-family-heading);
  --font-h2: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
  --font-h3: var(--font-weight-default) var(--font-size-3) / var(--line-height-default) var(--font-family-heading);
  --font-h4: var(--font-weight-thick) var(--font-size-2) / var(--line-height-default) var(--font-family-heading);
  --font-h5: var(--font-weight-thick) var(--font-size-1) / var(--line-height-2) var(--font-family-heading);
    
  @media screen and (min-width: 768px) {
    --font-h1: var(--font-weight-default) var(--font-size-7) / var(--line-height-default) var(--font-family-heading);
    --font-h2: var(--font-weight-default) var(--font-size-5) / var(--line-height-default) var(--font-family-heading);
    --font-h3: var(--font-weight-default) var(--font-size-4) / var(--line-height-default) var(--font-family-heading);
  }
}

• update update:css-variables script to "update:css-variables": "node --experimental-fetch scripts/figma-to-css.mjs",

Description
We can use ui-link--small modifier for ui-link component

Expection
ui-link--small changes appearance of ui-link component
UiLik base of Button Text design

Solution

• Get ui-button--smal and adjust to ui-link--small
• Test it

Components should be in accordance with the design.

• UiAccordion
• UiMenu
• UiMultipleAnswer
• UiMultipleChoices
• UiStepper

Why we need it
We want to pass properties to nested components. e.g. Allow pass attributes to title UiHeading component.

How we can do it

• Add Attrs Props to nested components (in specific cases to HTML elements.)
• Allow overriding props in nested components e.g. tag props in nested UiText
• Add Attrs props subcategory to Args table
• Update docs updates if is required
• Update unit tests if is required

TypeScript helps detect errors during compilation before the code is executed. This way, we can avoid and reduce the risk of errors resulting from incorrect use of directives. TS also improves intellisense, which speeds up the code writing process.
All directives and UseDropdownItem composable should be rewritten in TypeScript.

Create new UiPhoneNumber control organism according to the designs:

After #63 we can try to allow change tokens from Storybook. Here you have a similar solution https://github.com/ljcl/storybook-addon-cssprops

Do the same things like ljcl/storybook-addon-cssprops XD

• save variables in local storage as object
• use variables from local storage, to show changes in all stories i.e. when you change --color-background-action it should be changed everywhere

• split output styles.scss to
  • colors.scss,
  • layouts.scss
  • and typography.scss
• move @mixin color and all @include color to default-colors.scss and forwart it in variables/index.scss
• add to scripts update:css-variables
• run update:css-variables and update variables if it's required

i.e.
to set the button border-radius we need to set 4 variables

--button-border-start-start-radius: 0;
--button-border-start-end-radius: 0;
--button-border-end-start-radius: 0;
--button-border-end-end-radius: 0;

maybe we can add some helper like mixin.border-radius($element, top right bottom left) work like mixin.use-logical to help users set it faster

How this feature will help us
Currently we are testing all stories. This approach is it is inefficient. When we test stories that look the same we are burn snapshots without any value. The most common case of such tests are stories "With slot...". ignoring these stories will save us free snapshots.

Considered solution
Add

 parameters: {
    chromatic: { disableSnapshot: true },
  },

to stories.
https://www.chromatic.com/docs/ignoring-elements

How does this issue help us

In Stories, we have a lot of inline styles because it is displayed in the story source. This way has a few limitations (we cant use media-queries for example). We want to move all inline styles (except decorators styles) to component-name.stories.scss files and display SCSS by custom Code Doc Block

Solution

https://github.com/infermedica/component-library/pull/50/files can be used as an example (UiLoader, UiInteractiveSVG, UiHeader, UiMenu)

• run test on pre_push
• run others scripts on pre-release script

How this feature will help us
Would be great to have cypress in our project. Cypress is a JavaScript-based testing tool that is designed to help developers write fast, reliable, and easy-to-maintain automated tests.

Why we need this feature

Component Library allow to make application faster. When we connect Infermedica API and Component Library we make a comprehensive solution to create an application using Infermedica API. We want to improve API Developer Experience with a set of functions to handle API reference. We want to handle all endpoints from API Reference.

ex.

import { 
  useSearch, 
  useTriage
} from './composable';

const { response, observations  } = useSearch({
  phrase,
  sex,
  age,
  max_results,
  types,
});
const {response, triageLevel, serious, rootCause, teleconsultationApplicable} = useTriage({
  sex,
  age,
  evidence,
  evaluatedAt,
  extras,
});

Things to do

• Create new project pnpm create vite boilerplate --template vue-ts
• Setup @infermedica/component-library https://main--639728541e2039caadfe5404.chromatic.com/?path=/docs/getting-started-development-guide-installation--docs
• Create Symptoms search from Triage component. Use static data.
  
• Fetch data for the Search component from API https://developer.infermedica.com/docs/v3/api Search endpoint
• Create .env

APP_ID,
APP_KEY,
MODEL,

• Move Search handling to composable useSearch({phrasem, sex, age: {value, unit}, max_results, types})
• Create compostables for other API Reference https://developer.infermedica.com/docs/v3/api and test it.

Components should be in accordance with the design.

• UiMultipleChoicesItem with an alert below the options of each item. By default, alert should display "Please select one answer" label.

https://www.figma.com/file/54rgvRJfBBagt4F34rrp1s/Core-Component-Library?node-id=165%3A22547

Get our internal project "Figma to CSS" from bitbucket and include it to Component Library
!!! get FIGMA_TOKNE from .env file and please don't push your FIGMA_TOKEN to repo

• remove prompt
• use Color Style Library id as projectId
• update everything (remove isDiff functionality)

The multiple answer component with enabled info buttons is not fully accessible for keyboard users. The info buttons cannot be accessed or clicked using keyboard navigation.

To fix this issue and improve accessibility, the following changes should be implemented:

• Remove the tabindex=-1 attribute from the info button
• Move the info button outside of the radio label element

All necessary types should be exported inside index.ts for a better developer experience.