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

<Meta title="Releases/v0.10.x/v0.10.0/Migration Guide" />

<style>{`
  .table {
    display: grid;
    margin-bottom: 2rem;
  }

  .table {
    * {
      text-align: left;
    }
  }

  .table-header {
    font-weight: 600;
  }

  .table-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .table-cell {
    padding: 1rem;
    min-width: 150px;
  }

  .table-row {
    border-bottom: 1px solid var(--_c-light-primary);
  }

  a {
    color: #5ECE7B !important;
  }

  .alert {
    background: #efeded;
    padding: 1rem;
    margin: 0.5rem 0 1rem;
  }

  .tip {
    border-left: 5px solid #5ECE7B;
  }

	.warning {
		border-left: 5px solid #ffc107;
		background-color: #fff4d5;
	}
`}</style>

# v0.10.0 Migration Guide

- [SfImage](#sfimage)
  - [Props changes](#props-changes)
  - [New `srcsets` API](#srcsets-api)
  - [Alternative for `src` Object type](#src-object-type-replacement)
  - [Component-specific CSS Variables changes](#css-variables-changes)

For better performance and better DX (developer experience) in usage, we did major refactors for the following components:

## `SfImage`

From v0.10.0 onwards, `SfImage` is re-written completely with the a simpler API, both in CSS variables and component props. In order to migrate `SfImage` from earlier version, please refer to the following table:

### Props changes

<div class="table">
  <div class="table-column table-row">
    <div class="table-header table-cell">Props</div>
    <div class="table-header table-cell">Status</div>
    <div class="table-header table-cell">Changes</div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>src</code>
    </div>
    <div class="table-cell">
      Deprecate support for <code>Object</code> prop type
    </div>
    <div class="table-cell">
      <div>
        Use <code>src</code> for <code>string</code> <b>only</b>
      </div>
      <div>
        For <code>Object</code> see <code>srcsets</code>
      </div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>srcset</code>
    </div>
    <div class="table-cell">Deprecated.</div>
    <div class="table-cell">
      <div>
        Use <code>srcsets</code> instead. See <a href="#srcsets-api">API</a> for
        specific Object type for migration
      </div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>lazy</code>
    </div>
    <div class="table-cell">Deprecated.</div>
    <div class="table-cell">
      <div>
        Use <code>loading="lazy"</code> instead.
      </div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>rootMargin</code>
    </div>
    <div class="table-cell">Deprecated.</div>
    <div class="table-cell">
      <div>N/A</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>threshold</code>
    </div>
    <div class="table-cell">Deprecated.</div>
    <div class="table-cell">
      <div>N/A</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>width</code>
    </div>
    <div class="table-cell">
      Only accepts <code>number</code>
    </div>
    <div class="table-cell">
      <div>N/A</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>threshold</code>
    </div>
    <div class="table-cell">
      Only accepts <code>number</code>.
    </div>
    <div class="table-cell">
      <div>N/A</div>
    </div>
  </div>
</div>

### `srcsets` API

To support both cases - [responsive per breakpoints or per resolution](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images), we change the API syntax of `srcset` input as follow:

#### For breakpoints

**Before**

```js
srcset: [
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    media: "(max-width: 480px)",
    type: "image/webp",
  },
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    media: "(min-width: 480px) and (max-width: 720px)",
    type: "image/webp",
  },
  {
    src: "/assets/storybook/SfImage/product-216x326.jpg",
    media: "(min-width: 1240px)",
    type: "image/jpg",
  },
];
```

**In v0.10.0**

```js
srcsets: [
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    width: 109,
    breakpoint: 480,
  },
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    width: 720,
    breakpoint: 720,
  },
  {
    src: "/assets/storybook/SfImage/product-216x326.jpg",
    width: 1240,
    breakpoint: 1240,
  },
];
```

#### For resolutions support (v0.10.0+)

```js
srcsets: [
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    resolution: 1,
  },
  {
    src: "/assets/storybook/SfImage/product-216x326.jpg",
    resolution: 1.5,
  },
  {
    src: "/assets/storybook/SfImage/product-109x164.webp",
    resolution: 2,
  },
];
```

### `src` object type replacement

`src` no longer accepts `Object` as a valid input. To pass input as `Object`, use `srcsets` with the proper syntax instead.

**Before**

```js
src: {
  mobile: { url: "assets/storybook/SfGallery/productA.png" },
  desktop: { url: "assets/storybook/SfGallery/productA-desktop.png" },
}
```

**After**

```js
src: "assets/storybook/SfGallery/productA-desktop.png",
srcsets: {
  {
    src: "/assets/storybook/SfImage/productA.webp",
    breakpoint: 720,
  },
  {
    src: "/assets/storybook/SfImage/productA-desktop.jpg",
    breakpoint: 1240,
  },
}
```

<div class="alert warning">

Specifying the breakpoints is a better practice than relying on "mobile" and
"desktop".

</div>

<div class="alert tip">

We introduce [`SfCimage`](?path=/story/components-atoms-cloudinary-image--common) with [Cloudinary](https://cloudinary.com) built-in support and more advanced and better optimization for image usage.

</div>

### CSS Variables changes

Please refer to the below table for the deprecated variables and their alternative (if any).

<div class="table">
  <div class="table-column table-row">
    <div class="table-header table-cell">Variables</div>
    <div class="table-header table-cell">Status</div>
    <div class="table-header table-cell">Alternative?</div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--_image-height</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <code>--image-height</code>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--_image-width</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <code>--image-width</code>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--image-overlay-font</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <div>
        Use <code>--font-weight--light</code> for <code>font-weight</code>. Use{" "}
        <code>--font-family--secondary</code> for <code>font-family</code>.
      </div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--image-overlay-font-line-height</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <div>Use normal CSS selector.</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--image-overlay-font-size</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <div>Use normal CSS selector.</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--image-overlay-font</code>
    </div>
    <div class="table-cell">Deprecated</div>
    <div class="table-cell">
      <div>Use normal CSS selector.</div>
    </div>
  </div>
  <div class="table-column table-row">
    <div class="table-cell">
      <code>--gallery-thumb-width</code>
    </div>
    <div class="table-cell">
      Deprecated (also <code>.sf-gallery__thumb</code>)
    </div>
    <div class="table-cell">
      <div>N/A</div>
    </div>
  </div>
</div>

And the followings are planned be deprecated soon (from v0.11.0 onwards)

- `--image-overlay-padding`
- `--image-overlay-background`
- `--image-overlay-color`
- `--image-overlay-opacity`

## `SfFooter`

From v0.10.0 onwards, `SfFooter` has changed default design adjusted to figma look https://www.figma.com/file/N0Ct95cSAoODNv7zYS01ng/Storefront-UI-Design-System?node-id=4431%3A11564 and with '--\_c-dark-primary' background of menu items on mobile.
Also there was another step made to get rid of most of css variables which you can see in the table below.

### CSS Variables changes

All component specific CSS variables was removed so please use normal properties instead of following:

- `--_footer-column-width`
- `--footer-column-title-color`
- `--footer-column-title-padding`
- `--footer-column-title-background`
- `--footer-column-title-font`
- `--footer-column-title-font-weight`
- `--footer-column-title-font-size`
- `--footer-column-title-font-line-height`
- `--footer-column-title-font-family`
- `--footer-column-chevron-display`
- `--footer-column-item-padding`
- `--footer-display`
- `--footer-flex-wrap`
- `--footer-justify-content`
- `--footer-width`
- `--footer-margin`
- `--footer-padding`

Also there was flex based mechanism to set amount of columns in the footer passed by the prop.
It was replaced by grid styling set directly in the inline CSS like this:

```
<footer class="sf-footer">
    <div
      class="sf-footer__container"
      :style="{ 'grid-template-columns': ' 1fr'.repeat(column) }"
    >
      <slot />
    </div>
  </footer>
```

## Atoms refactored

As the better web performance is one of our main goals, we refactored components without additional logic into functional components:

- [SfArrow](?path=/story/components-atoms-arrow--common)
- [SfBadge](?path=/story/components-atoms-badge--primary)
- [SfChevron](?path=/story/components-atoms-chevron--common)
- [SfCircleIcon](?path=/story/components-atoms-circleicon--primary)
- [SfLoader](?path=/story/components-atoms-loader--loading)
- [SfOverlay](?path=/story/components-atoms-overlay--common)
- [SfPrice](?path=/story/components-atoms-price--common)
- [SfProperty](?path=/story/components-atoms-property--common)
- [SfTextarea](?path=/story/components-atoms-textarea--common)

So the example component is now looking like this:

```
<template functional>
  <div
    class="sf-badge"
    :style="[data.style, data.staticStyle]"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot />
  </div>
</template>
```