Add migration guide to Storybook

.gitignore

@@ -19,6 +19,7 @@ docs/packages/
 docs/contributing/1-overview.mdx
 docs/contributing/*-contributing-*.mdx
 docs/introduction/*-changelog.mdx
+docs/introduction/*-migration.mdx
 
 # Packages #
 

MIGRATION.md

@@ -1,90 +1,4 @@
-# Migration <!-- omit in toc -->
-
-- [🤖 Automated migration](#-automated-migration)
-- [From v7.x to v8](#from-v7x-to-v8)
-  - [Redesigned buttons](#redesigned-buttons)
-    - [Custom styles](#custom-styles)
-    - [Disabled state](#disabled-state)
-  - [Black & white theme](#black--white-theme)
-  - [Removed components and props](#removed-components-and-props)
-  - [Other changes](#other-changes)
-- [From v6.x to v7](#from-v6x-to-v7)
-  - [Prerequisites](#prerequisites)
-  - [ES Modules](#es-modules)
-  - [CSS Modules](#css-modules)
-    - [Global styles](#global-styles)
-    - [Custom component styles](#custom-component-styles)
-    - [Design tokens](#design-tokens)
-    - [Utility classes](#utility-classes)
-  - [Component lifecycle](#component-lifecycle)
-  - [Removed @sumup/collector](#removed-sumupcollector)
-  - [Other changes](#other-changes-1)
-  - [Known issues](#known-issues)
-- [From v6.x to v6.3](#from-v6x-to-v63)
-  - [New semantic color tokens](#new-semantic-color-tokens)
-  - [Visual component changes](#visual-component-changes)
-  - [Other changes](#other-changes-2)
-- [From v5.x to v6](#from-v5x-to-v6)
-  - [No default component margins](#no-default-component-margins)
-  - [Form component consistency](#form-component-consistency)
-    - [Markup changes](#markup-changes)
-    - [The `Label` component was removed](#the-label-component-was-removed)
-    - [The `inline` prop was removed](#the-inline-prop-was-removed)
-    - [The `labelStyles` prop was removed](#the-labelstyles-prop-was-removed)
-    - [The `label` prop only accepts a string](#the-label-prop-only-accepts-a-string)
-    - [Improved `validationHint` for the `Checkbox` component](#improved-validationhint-for-the-checkbox-component)
-    - [Minor fixes](#minor-fixes)
-  - [Other changes](#other-changes-3)
-- [🤖 Codemods](#-codemods-jscodeshift)
-- [From v4.x to v5](#from-v4x-to-v5)
-  - [Explicit browser support](#explicit-browser-support)
-  - [New semantic color names](#new-semantic-color-names)
-    - [...in design tokens](#in-design-tokens)
-    - [...in component variants](#in-component-variants)
-  - [New notification components](#new-notification-components)
-  - [Required accessible labels](#required-accessible-labels)
-  - [Runtime errors for missing `noMargin` props](#runtime-errors-for-missing-nomargin-props)
-  - [The `ListItemGroup` replaces the `CardList`](#the-listitemgroup-replaces-the-cardlist)
-  - [Combined `LoadingButton` and `Button`](#combined-loadingbutton-and-button)
-  - [Other changes](#other-changes-4)
-- [From v3.x to v4](#from-v3x-to-v4)
-  - [Emotion 11](#emotion-11)
-    - [New package names](#new-package-names)
-    - [Better TypeScript support](#better-typescript-support)
-      - [Typing the theme](#typing-the-theme)
-    - [Compatibility with Storybook](#compatibility-with-storybook)
-  - [New brand icons](#new-brand-icons)
-    - [Overview of `@sumup/icons` v2](#overview-of-sumupicons-v2)
-    - [Migrating to `@sumup/icons` v2](#migrating-to-sumupicons-v2)
-- [From v2.x to v3](#from-v2x-to-v3)
-  - [Dependencies](#dependencies)
-  - [Accessibility](#accessibility)
-  - [New JSX transform](#new-jsx-transform)
-  - [Typography](#typography)
-    - [Typography component names](#typography-component-names)
-    - [Typography component variants](#typography-component-variants)
-    - [New sizes](#new-sizes)
-      - [Typography components `size` prop](#typography-components-size-prop)
-      - [Typography sizes mixins](#typography-sizes-mixins)
-    - [Heading `as` props](#heading-as-props)
-    - [Typography design tokens](#typography-design-tokens)
-  - [New modal and popover APIs](#new-modal-and-popover-apis)
-    - [Modal](#modal)
-    - [Popover](#popover)
-  - [Component heights](#component-heights)
-  - [Other changes](#other-changes-5)
-  - [Cleaning up](#cleaning-up)
-- [From v1.x to v2](#from-v1x-to-v2)
-  - [Library format](#library-format)
-  - [Peer dependencies](#peer-dependencies)
-  - [Font loading](#font-loading)
-  - [Forward custom props and refs](#forward-custom-props-and-refs)
-  - [Component static properties](#component-static-properties)
-  - [Removed components](#removed-components)
-  - [Renamed components](#renamed-components)
-  - [Changed components](#changed-components)
-  - [Utilities](#utilities)
-  - [Theme changes](#theme-changes)
+# Migration
 
 ## 🤖 Automated migration
 
@@ -1106,7 +1020,7 @@ In addition to its increased height, the `Button`'s default size was renamed fro
   | 12px | `peta` | `kilo` |
   | 16px | — | `mega` (new value) |
 - The **NotificationBanner** component has been renamed to **NotificationCard**. (🤖 _component-names-v3_)
-- Label prop names across components were harmonized to follow the _<description>Label_ pattern. (🤖 _label-prop-names_)
+- Label prop names across components were harmonized to follow the _Label_ pattern. (🤖 _label-prop-names_)
   - **CardHeader**: `labelCloseButton` 👉 `closeButtonLabel`
   - **Hamburger**: `labelActive` 👉 `activeLabel`, `labelInActive` 👉 `inactiveLabel`
   - **Tag**: `labelRemoveButton` 👉 `removeButtonLabel`

scripts/copy-docs.sh

@@ -19,5 +19,6 @@ done
 # CONTRIBUTING.md
 
 echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Introduction/Changelog\" />\n\n$(cat "./packages/circuit-ui/CHANGELOG.md")" | sed -r 's/# @sumup\/circuit-ui/# Changelog/g' | sed -r 's/ >=18/ {` >=18`}/g' | sed -r 's/ <18/ {` <18`}/g' > "./docs/introduction/5-changelog.mdx"
+echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Introduction/Migration\" />\n\n$(cat "./MIGRATION.md")" > "./docs/introduction/6-migration.mdx"
 echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Contributing/Overview\" />\n\n$(cat "./CONTRIBUTING.md")" > "./docs/contributing/1-overview.mdx"
 echo -e "import { Meta } from '../../.storybook/components';\n\n<Meta title=\"Contributing/Contributing Icons\" />\n\n$(cat "./packages/icons/CONTRIBUTING.md")" > "./docs/contributing/7-contributing-icons.mdx"