# version 0.9.0

# What is new?

👉 Design refreshment adjusting to current style guide figma

👉 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

ℹī¸ For more details see our CHANGELOG.md

# Dependencies update

# Using NPM/Yarn

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

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:

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

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

# Changes

# Font family

Before v0.8.0 v0.9.0
--body-font-family-primary: "Roboto", serif --font-family-primary: "Roboto", serif --font-family--primary: "Roboto", serif
--body-font-family-secondary: "Raleway", sans-serif --font-family-secondary: "Raleway", sans-serif --font-family--secondary: "Raleway", sans-serif

# Font sizes

Before v0.6.4 v0.7.0 v0.9.0
$font-size-extra-small-mobile: 0.625rem undefined --font-2xs: 0.625rem undefined
$font-size-extra-small-desktop: 0.75rem
$font-size-small-mobile: 0.75rem
--font-size-extra-small: 0.75rem --font-xs: 0.75rem --font-size--xs: 0.75rem
$font-size-small-desktop: 0.875rem
$font-size-regular-mobile: 0.875rem
--font-size-small: 0.875rem --font-sm: 0.875rem --font-size--sm: 0.875rem
$font-size-regular-desktop: 1rem
$font-size-big-mobile: 1rem
--font-size-regular: 1rem --font-base: 1rem --font-size--base: 1rem
$font-size-big-desktop: 1.125rem
$font-size-extra-big-mobile: 1.125rem
--font-size-big: 1.125rem --font-lg: 1.125rem --font-size--lg: 1.125rem
$font-size-extra-big-desktop: 1.5rem --font-size-extra-big: 1.5rem --font-size--xl: 1.5rem undefined

# Font weights

Before v0.6.4 v0.7.0 v0.9.0
--body-font-weight-primary: 300 --font-weight-light: 300 --font-light: 300 --font-weight--light: 300
--body-font-weight-secondary: 400 --font-weight-regular: 400 --font-normal: 400 --font-weight--normal: 400
- --font-weight-bold: 500 --font-medium: 500 --font-weight--medium: 500
- --font-weight-extra-bold: 600 --font-semibold: 600 --font-weight--semibold: 600
- - --font-bold: 700 --font-weight--bold: 700
- - --font-extra-bold: 800 undefined
- - --font-black: 900 undefined

# Props

Component Before v0.9.0
SfHeading subtitle description

# CSS Custom properties

Component Before v0.9.0
SfHeading --heading-subtitle-margin --heading-description-margin
SfHeading --heading-subtitle-color --heading-description-color
SfHeading --heading-subtitle-font-size --heading-description-font-size
SfHeading --heading-subtitle-font-family --heading-description-font-family

# Slots

Component Before v0.9.0
SfHeading subtitle description

# Breakpoints

v0.7.0 v0.9.0
.mobile-only .smartphone-only

# State classes

Before v0.9.0
--is-active .is-active
--is-disabled .is-disabled
--is-current .is-current
--has-error .has-error
--h2 .h2
--h3 .h3
--h4 .h4
--h5 .h5
--h6 .h6
--has-size .has-size
--hidden .hidden
--invalid .invalid
--has-text .has-text
--is-color .is-color
--prev .prev
--next .next
--is-open .is-open
--is-selected .is-selected
--is-required .is-required
--open .is-open
--has-chevron .has-chevron
--has-margin .has-margin
--floating .is-floating
--center --center
--without-carousel .without-carousel
--without-quantity .without-quantity
--on-wishlist .on-wishlist
.is-current .current

So now we can use it like this:

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

instead of

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

This change follows css guideline.

# 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

Component Before v0.9.0
SfIcon - coverage
SfRating - icon

# Slots

Component Before v0.9.0 Info
SfDropdown - opener

# Components with data-testid

Before v0.9.0
- SfBreadcrumbs
- SfBullets
- SfCheckbox
- SfColor
- SfInput
- SfQuantitySelector
- SfMenuItem
- SfHeader