import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Releases/v0.9.x/v0.9.0/Change log" />

# v0.9.0

## What is new?

👉 Design refreshment adjusting to current style guide [figma](https://www.figma.com/file/N0Ct95cSAoODNv7zYS01ng/Storefront-UI-Design-System?node-id=0%3A1)

👉 Changes of global variables for typography

👉 Change of BEM modifiers for component states into seperate classes e.g. `--is-active` to `.is-active`

👉 Script to pull off library components to your project

👉 Two new component SfTextArea and SfAddressPicker

👉 `SfDropdown` with new API - opener button added

## Dependencies update

### Using NPM/Yarn

You can run the following command to auto update StorefrontUI version:

```bash
yarn add @storefront-ui/vue

#OR
npm i @storefront-ui/vue
```

### Manually

Alternatively, you can also update your `package.json` by manually setting your StorefrontUI version as below:

```json
dependencies: {
    "@storefront-ui/vue": "^0.9.0"
}
```

Then run `yarn` or `npm i` to re-install your local dependencies.

## Changes

### Font family

<table>
  <thead>
    <tr>
      <th colspan="3">Font family</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Before</td>
      <td>v0.8.0</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>--body-font-family-primary: "Roboto", serif</td>
      <td>--font-family-primary: "Roboto", serif</td>
      <td>--font-family--primary: "Roboto", serif </td>
    </tr>
    <tr>
      <td>--body-font-family-secondary: "Raleway", sans-serif</td>
      <td>--font-family-secondary: "Raleway", sans-serif</td>
      <td>--font-family--secondary: "Raleway", sans-serif</td>
    </tr>
  </tbody>
</table>

### Font sizes

<table>
  <thead>
    <tr>
      <th colspan="4">Font sizes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Before</td>
      <td>v0.6.4</td>
      <td>v0.7.0</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>$font-size-extra-small-mobile: 0.625rem</td>
      <td>undefined</td>
      <td>--font-2xs: 0.625rem</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>
        $font-size-extra-small-desktop: 0.75rem $font-size-small-mobile: 0.75rem{" "}
      </td>
      <td>--font-size-extra-small: 0.75rem </td>
      <td>--font-xs: 0.75rem </td>
      <td>-font-size--xs: 0.75rem </td>
    </tr>
    <tr>
      <td>
        $font-size-small-desktop: 0.875rem $font-size-regular-mobile: 0.875rem
      </td>
      <td>--font-size-small: 0.875rem</td>
      <td>--font-sm: 0.875rem </td>
      <td>--font-size--sm: 0.875rem</td>
    </tr>
    <tr>
      <td>$font-size-regular-desktop: 1rem $font-size-big-mobile: 1rem </td>
      <td>--font-size-regular: 1rem </td>
      <td>--font-base: 1rem</td>
      <td>--font-size--base: 1rem </td>
    </tr>
    <tr>
      <td>
        $font-size-big-desktop: 1.125rem $font-size-extra-big-mobile: 1.125rem
      </td>
      <td>--font-size-big: 1.125rem</td>
      <td>--font-lg: 1.125rem</td>
      <td>--font-size--lg: 1.125rem </td>
    </tr>
    <tr>
      <td>$font-size-extra-big-desktop: 1.5rem </td>
      <td>--font-size-extra-big: 1.5rem</td>
      <td>--font-size--xl: 1.5rem</td>
      <td>undefined</td>
    </tr>
  </tbody>
</table>

### Font weights

<table>
  <thead>
    <tr>
      <th colspan="4">Font weights</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Before</td>
      <td>v0.6.4</td>
      <td>v0.7.0</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>--body-font-weight-primary: 300 </td>
      <td>--font-weight-light: 300 </td>
      <td>--font-light: 300</td>
      <td>--font-weight--light: 300 </td>
    </tr>
    <tr>
      <td>--body-font-weight-secondary: 400</td>
      <td>--font-weight-regular: 400 </td>
      <td>--font-normal: 400 </td>
      <td>--font-weight--normal: 400</td>
    </tr>
    <tr>
      <td>-</td>
      <td>--font-weight-bold: 500 </td>
      <td>--font-medium: 500 </td>
      <td>--font-weight--medium: 500 </td>
    </tr>
    <tr>
      <td>- </td>
      <td>--font-weight-extra-bold: 600</td>
      <td>--font-semibold: 600 </td>
      <td>--font-weight--semibold: 600 </td>
    </tr>
    <tr>
      <td>-</td>
      <td>-</td>
      <td>--font-bold: 700 </td>
      <td>--font-weight--bold: 700</td>
    </tr>
    <tr>
      <td>-</td>
      <td>-</td>
      <td>--font-extra-bold: 800</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>-</td>
      <td>-</td>
      <td>--font-black: 900 </td>
      <td>undefined</td>
    </tr>
  </tbody>
</table>

### Props

<table>
  <thead>
    <tr>
      <th colspan="3">Props</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Component</td>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>subtitle</td>
      <td>description</td>
    </tr>
  </tbody>
</table>

### CSS Custom properties

<table>
  <thead>
    <tr>
      <th colspan="3">CSS Custom properties</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Component</td>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>--heading-subtitle-margin </td>
      <td>--heading-description-margin </td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>--heading-subtitle-color</td>
      <td>--heading-description-color </td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>--heading-subtitle-font-size </td>
      <td>--heading-description-font-si </td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>--heading-subtitle-font-family</td>
      <td>--heading-description-font-famil </td>
    </tr>
  </tbody>
</table>

### Slots

<table>
  <thead>
    <tr>
      <th colspan="3">Slots</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Component</td>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>SfHeading</td>
      <td>subtitle </td>
      <td>description</td>
    </tr>
  </tbody>
</table>

## Breakpoints

<table>
  <thead>
    <tr>
      <th colspan="2">Breakpoints</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>v0.7.0</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>.mobile-only</td>
      <td>.smartphone-only</td>
    </tr>
  </tbody>
</table>

## State classes

<table>
  <thead>
    <tr>
      <th colspan="2">State classes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>--is-active</td>
      <td>.is-active </td>
    </tr>
    <tr>
      <td>--is-disabled</td>
      <td>.is-disabled </td>
    </tr>
    <tr>
      <td>--is-current</td>
      <td>.is-current </td>
    </tr>
    <tr>
      <td>--has-error</td>
      <td>.has-error </td>
    </tr>
    <tr>
      <td>--h2</td>
      <td>.h2 </td>
    </tr>
    <tr>
      <td>--h3</td>
      <td>.h3 </td>
    </tr>
    <tr>
      <td>--h4</td>
      <td>.h4 </td>
    </tr>
    <tr>
      <td>--h5</td>
      <td>.h5 </td>
    </tr>
    <tr>
      <td>--h6</td>
      <td>.h6 </td>
    </tr>
    <tr>
      <td>--has-size</td>
      <td>.has-size </td>
    </tr>
    <tr>
      <td>--hidden</td>
      <td>.hidden </td>
    </tr>
    <tr>
      <td>--invalid</td>
      <td>.invalid </td>
    </tr>
    <tr>
      <td>--has-text</td>
      <td>.has-text </td>
    </tr>
    <tr>
      <td>--is-color</td>
      <td>.is-color </td>
    </tr>
    <tr>
      <td>--prev</td>
      <td>.prev </td>
    </tr>
    <tr>
      <td>--next</td>
      <td>.next </td>
    </tr>
    <tr>
      <td>--is-open</td>
      <td>.is-open </td>
    </tr>
    <tr>
      <td>--has-chevron</td>
      <td>.has-chevron </td>
    </tr>
    <tr>
      <td>--has-margin</td>
      <td>.has-margin </td>
    </tr>
    <tr>
      <td>--is-selected</td>
      <td>.is-selected </td>
    </tr>
    <tr>
      <td>--is-required</td>
      <td>.is-required </td>
    </tr>
    <tr>
      <td>--open</td>
      <td>.open </td>
    </tr>
    <tr>
      <td>--floating</td>
      <td>.is-floating </td>
    </tr>
    <tr>
      <td>--center</td>
      <td>.center </td>
    </tr>
    <tr>
      <td>--without-carousel</td>
      <td>.without-carousel </td>
    </tr>
    <tr>
      <td>--without-quantity</td>
      <td>.without-quantity </td>
    </tr>
    <tr>
      <td>--on-wishlist</td>
      <td>.on-wishlist </td>
    </tr>
    <tr>
      <td>--is-current</td>
      <td>.current </td>
    </tr>
  </tbody>
</table>

So now we can use it like this:

```css
.sf-component {
  .is-active {
    /*css stylings*/
  }
}
```

instead of

```css
.sf-component {
  &--is-active {
    /*css stylings*/
  }
}
```

This change follows [css guideline](https://github.com/chris-pearce/css-guidelines#state-hooks).

## Others

1. `SfRating` allows fractional rate.
2. `SfHeading` wrapped in `div`.
3. `SfSearchbar` button added on loupe icon so it is now active.
4. `SfSelect` scrollbar added to the native element.
5. Add `SfButtons` to `SfStoreLocator` to wrap whole store component and make it clickable.
6. `SfProductCard` with price range
7. `SfLink` change default colors to `--c-text`, `--c-primary` (in hover state) and `--c-link` (in active and visited states)

## Additions

### Components

1. `SfTextArea`
2. `SfAddressPicker`

### Props

<table>
  <thead>
    <tr>
      <th colspan="3">Props</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Component</td>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>SfIcon</td>
      <td> - </td>
      <td>coverage</td>
    </tr>
    <tr>
      <td>SfRating</td>
      <td> - </td>
      <td>icon</td>
    </tr>
  </tbody>
</table>

### Slots

<table>
  <thead>
    <tr>
      <th colspan="3">Slots</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Component</td>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td>SfDropdown</td>
      <td> - </td>
      <td>opener</td>
    </tr>
  </tbody>
</table>

### Components with data-testid

<table>
  <thead>
    <tr>
      <th colspan="2">Components with data-testid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Before</td>
      <td>v0.9.0</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfBreadcrumbs</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfBullets</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfColor</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfInput</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfQuantitySelector</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfMenuItem</td>
    </tr>
    <tr>
      <td> - </td>
      <td>SfHeader</td>
    </tr>
  </tbody>
</table>