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

<Meta title="Releases/v0.10.x/v0.10.0/Change log" />

# v0.10.0

v0.10.0 contains API breaking changes and new features.

## 🚀 Features

- [SfCimage](?path=/story/components-atoms-cloudinary-image--common) - Advanced image component with built-in Cloudinary support, containing the following features:
  - Auto format and auto quality delivery per browser/device.
  - `placeholder` support with four types: `pixelate`, `vectorize`, `predominant` and `blur`.
  - `progressive` support.
  - Lazy loading support.
  - Accessibility auto-enforced by `alt` props.
- [SfCard](?path=/story/components-molecules-card--common) - component for displaying information with title, image and action button in a card view.
- [SfTile](?path=/story/components-molecules-tile--common) - component with title and background-image for displaying information in a tile view.
- [SfCategoryCard](?path=/story/components-molecules-category-card--common) - component for displaying information about categories in a cred view.
- Move configuration of fonts outside of StorefrontUI CSS Styling.
- Move utilities classes from helpers folder to global
- [SfHeroItem](?path=/story/components-organisms-hero--common) - new `link` prop.
- [SfCallToAction](?path=/story/components-molecules-call-to-action--common) - new `link` prop.
- [SfImage](?path=/story/components-atoms-image--common) - Enhancements
  - Placeholder supported with `placeholder`.
  - Reponsive with resolutions is supported with new `srcsets` props.
  - Accessibility auto-enforced by `alt` props.

## ❗ Refactor/ Breaking Changes

- [SfImage](?path=/story/components-atoms-image--common). See [Migration guide](/?path=/story/releases-v0-10-0-latest-migration-guide--page) for more details.
- [Checkout page](?path=/story/pages-checkout--common) with the new design.
- Deprecate `badgeLabel` and `hasBadgeLabel` props from `SfIcon`. Use `SfBadge` together with `SfIcon` instead.
- There are atom components refactored to functional components, Please see details in [Migration guide](/?path=/story/releases-v0-10-0-migration-guide--page).
- [SfFooter](?path=/story/components-organisms-footer--common) with the new design and removing CSS variable specific for the component. See [Migration guide](/?path=/story/releases-v0-10-0-latest-migration-guide--page) for more details.
- Font import is removed from CSS stylings. Please [import the desired font separately](?path=/story/setup-installation--page#install-custom-font).

## 🐛 Fixes

- SfPagination: fixed linkToPage if SfPagination has router
- SfProductCard: mobile category tile differs from the designs
- SfCarousel: it doesn't look good when there are less than 4 products
- SfHero: custom prev next not clickable
- Mobile pop-up with information after adding a product to the cart on product page
- SfMegaMenu typo in name of class inside scss for stories file
- SfPagination link is a number instead of URL
- Category page for mobile differs form figma design
- SfSelect with no outline when focused with keyboard
- SfBanner has no link prop and is not clickable on mobile
- SfTableHeading and SfTableRow causes SSR missmatch
- SfProductOption causes SSR missmatch
- SfComponentSelect wrong border color
- SfTextarea has wrong font
- SfColorPicker opacity affects SfColor
- SfFooter menu opens without clicking on it
- SfAddressPicker doesn't react to "selected" prop changes
- SfCollectedProduct remove button without background in SfSidebar
- SfSelect `v-model` doesn't work
- Property `isAddedToCart` on ProductCard doesn't change how item displays
- SfCardHorizontal size and color change from property to select
- SfProductCard isAddedToCart prop not changing icon
- SfPagination error on SSR
- SfCircleIcon in disabled state with color modifier
- SfArrow with transparent modifier on disbaled mode
- SfCarousel duplicates the slides
- SfInput - Auto complete preview makes labels overlap on input on hover.
- SfModal - Close button missing on mobile

## 🧹 Chores:

- Broken link in README.md
- Storybook upgraded to 6x and migration of our docs form VuePress to MDX
- Tailwind customization doesn't work as described
- Update links to Figma designs
- SfGallery error shows on Storybook when `enableZoom` is `true`
- Add typography, styleguides to storybook
- Add list of icons and sizes to SfIcon stories
- Disable warnings during creating docs for internal components
- Remove VuePress completely.