docs: move all components in Storybook to sit under Components (#5398)

* docs: move all components in Storybook to sit under Components * docs(KaizenProvider): rename docs dir to match component name * docs: rename docs dir to match component name * docs: remove usages of SbContent in Tooltip
cultureamp · Dec 17, 2024 · 4cbea6d · 4cbea6d
1 parent 580e319
commit 4cbea6d
Show file tree

Hide file tree

Showing 77 changed files with 159 additions and 264 deletions.
diff --git a/.changeset/witty-buckets-pull.md b/.changeset/witty-buckets-pull.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx
@@ -155,30 +155,20 @@ const preview = {
         const groupA = titleA.split('/')[0]
         const groupB = titleB.split('/')[0]
 
-        const groups = [
-          'Introduction',
-          'Guides',
-          'Actions',
-          'Containers',
-          'Illustrations',
-          'Layout',
-          'Overlays',
-          'Components',
-          'Pages',
-        ]
+        const groups = ['Introduction', 'Guides', 'Components', 'Pages']
         const groupDifference = groups.indexOf(groupA) - groups.indexOf(groupB)
         if (groupDifference !== 0) {
           // Sort stories of different groups manually by the groups array
           return groupDifference
         }
 
         // Sort Kaizen Provider to top
-        if (a.title.includes('Kaizen Provider')) {
+        if (a.title.includes('KaizenProvider')) {
           // If both are Kaizen Provider, do not sort
-          if (b.title.includes('Kaizen Provider')) return 0
+          if (b.title.includes('KaizenProvider')) return 0
           return -1
         }
-        if (b.title.includes('Kaizen Provider')) return 1
+        if (b.title.includes('KaizenProvider')) return 1
 
         const titleDifference = titleA.localeCompare(titleB, undefined, {
           numeric: true,

diff --git a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx b/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx
@@ -6,7 +6,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { ButtonGroup } from '../index'
 
 export default {
-  title: 'Components/Button Group',
+  title: 'Components/ButtonGroup',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx b/packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx
@@ -4,9 +4,7 @@ import { FilterButtonBase } from '~components/Filter/FilterButton/subcomponents/
 import { ButtonGroup } from '..'
 
 const meta = {
-  // Not to be nested until full KAIO migration
-  // title: "Components/Button/Button Group",
-  title: 'Components/Button Group',
+  title: 'Components/ButtonGroup',
   component: ButtonGroup,
   args: { children: undefined },
 } satisfies Meta<typeof ButtonGroup>

diff --git a/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx b/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { ErrorPage } from '../ErrorPage'
 
 export default {
-  title: 'Pages/Error Page',
+  title: 'Pages/ErrorPage',
   parameters: {
     a11y: {
       config: {

diff --git a/packages/components/src/ErrorPage/_docs/ErrorPage.stories.tsx b/packages/components/src/ErrorPage/_docs/ErrorPage.stories.tsx
@@ -3,7 +3,7 @@ import { statusCodes } from '../hooks'
 import { ErrorPage } from '../index'
 
 const meta = {
-  title: 'Pages/Error Page',
+  title: 'Pages/ErrorPage',
   component: ErrorPage,
 } satisfies Meta<typeof ErrorPage>
 

diff --git a/packages/components/src/Filter/FilterButton/_docs/FilterButton.stories.tsx b/packages/components/src/Filter/FilterButton/_docs/FilterButton.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { FilterButton } from '../FilterButton'
 
 const meta = {
-  title: 'Components/Filter Base/Filter Buttons/Filter Button',
+  title: 'Components/Filter Base/Filter Buttons/FilterButton',
   component: FilterButton,
   argTypes: {
     selectedValue: { type: 'string' },

diff --git a/packages/components/src/Filter/FilterButton/_docs/FilterButtonRemovable.stories.tsx b/packages/components/src/Filter/FilterButton/_docs/FilterButtonRemovable.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { FilterButtonRemovable } from '../FilterButtonRemovable'
 
 const meta = {
-  title: 'Components/Filter Base/Filter Buttons/Filter Button Removable',
+  title: 'Components/Filter Base/Filter Buttons/FilterButtonRemovable',
   component: FilterButtonRemovable,
   args: {
     triggerButtonProps: {

diff --git a/...ePicker/FilterDatePicker.spec.stories.tsx → ...r/_docs/FilterDatePicker.spec.stories.tsx b/...ePicker/FilterDatePicker.spec.stories.tsx → ...r/_docs/FilterDatePicker.spec.stories.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react'
 import { StoryObj } from '@storybook/react'
 import { expect, userEvent, within } from '@storybook/test'
 import { FilterButton, FilterButtonProps } from '~components/Filter/FilterButton'
-import { FilterDatePicker } from './FilterDatePicker'
+import { FilterDatePicker } from '../FilterDatePicker'
 
 export default {
-  title: 'Components/Filter Date Picker/Tests',
+  title: 'Components/FilterDatePicker/Tests',
   component: FilterDatePicker,
   parameters: {
     a11y: {

diff --git a/...es/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx b/...es/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx
@@ -11,7 +11,7 @@ import { FilterDatePickerField } from '../subcomponents/FilterDatePickerField'
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Filter Date Picker',
+  title: 'Components/FilterDatePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stories.tsx b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stories.tsx
@@ -16,7 +16,7 @@ import { disabledDaysControls } from './controls/disabledDaysControls'
 import { validationControls } from './controls/validationControls'
 
 const meta = {
-  title: 'Components/Filter Date Picker',
+  title: 'Components/FilterDatePicker',
   component: FilterDatePicker,
   argTypes: {
     ...defaultMonthControls,

diff --git a/...nts/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx b/...nts/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx
@@ -13,7 +13,7 @@ import { FilterDateRangePickerField } from '../subcomponents/FilterDateRangePick
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Filter Date Range Picker',
+  title: 'Components/FilterDateRangePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx
@@ -18,7 +18,7 @@ import { disabledDaysControls } from './controls/disabledDaysControls'
 import { validationControls } from './controls/validationControls'
 
 const meta = {
-  title: 'Components/Filter Date Range Picker',
+  title: 'Components/FilterDateRangePicker',
   component: FilterDateRangePicker,
   argTypes: {
     classNameOverride: {

diff --git a/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx b/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx
@@ -10,7 +10,7 @@ import { mockItems } from './MockData'
 const IS_CHROMATIC = isChromatic()
 
 const meta = {
-  title: 'Components/Filter Multi-Select',
+  title: 'Components/FilterMultiSelect',
   component: FilterMultiSelect,
   parameters: {
     docs: {

diff --git a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx
@@ -15,7 +15,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Filter Select',
+  title: 'Components/FilterSelect',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx
@@ -8,7 +8,7 @@ import { SelectOption } from '../types'
 import { groupedMockItems, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/Filter Select',
+  title: 'Components/FilterSelect',
   component: FilterSelect,
   argTypes: {
     ...renderTriggerControls,

diff --git a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx
@@ -9,7 +9,7 @@ import { GuidanceBlock, GuidanceBlockProps } from '../index'
 import { variantsMap } from '../types'
 
 export default {
-  title: 'Containers/GuidanceBlock',
+  title: 'Components/GuidanceBlock',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx
@@ -28,7 +28,7 @@ const defaultText = {
 }
 
 const meta = {
-  title: 'Containers/GuidanceBlock',
+  title: 'Components/GuidanceBlock',
   component: GuidanceBlock,
   args: {
     layout: 'default',

diff --git a/packages/components/src/Icon/_docs/Icon.docs.stories.tsx b/packages/components/src/Icon/_docs/Icon.docs.stories.tsx
@@ -7,7 +7,7 @@ import { AddIcon } from '../index'
 import styles from './icon.module.scss'
 
 const meta = {
-  title: 'Illustrations/Icon',
+  title: 'Components/Icon',
   component: AddIcon,
   args: {
     role: 'presentation',

diff --git a/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx b/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import * as ICONS from '~components/Icon'
 import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
 
 export default {
-  title: 'Illustrations/Icon',
+  title: 'Components/Icon',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx b/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx
@@ -5,7 +5,7 @@ import migrationFETBonus from './code-diffs/migration-fe-template-bonus.diff?raw
 import migrationFETToV1 from './code-diffs/migration-fe-template-to-v1.diff?raw'
 import migrationToV1 from './code-diffs/migration-to-v1.diff?raw'
 
-<Meta title="Components/Kaizen Provider/Installation" />
+<Meta title="Components/KaizenProvider/Installation" />
 
 # Kaizen Provider
 

diff --git a/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx b/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks'
 import { LinkTo } from '~storybook/components/LinkTo'
 
-<Meta title="Components/Kaizen Provider/Internationalization in Kaizen" />
+<Meta title="Components/KaizenProvider/Internationalization in Kaizen" />
 
 # Internationalization in Kaizen
 

diff --git a/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx b/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { LabelledMessage } from '../index'
 
 export default {
-  title: 'Components/Utilities/Labelled Message',
+  title: 'Components/LabelledMessage',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/LabelledMessage/_docs/LabelledMessage.stories.tsx b/packages/components/src/LabelledMessage/_docs/LabelledMessage.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { LabelledMessage } from '../LabelledMessage'
 
 const meta = {
-  title: 'Components/Utilities/Labelled Message',
+  title: 'Components/LabelledMessage',
   component: LabelledMessage,
   args: {
     label: 'Label',

diff --git a/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx b/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx
@@ -9,7 +9,7 @@ import { ConfirmationModal } from '../index'
 const IS_CHROMATIC = isChromatic()
 
 const meta = {
-  title: 'Components/Modals/Confirmation Modal',
+  title: 'Components/Modals/ConfirmationModal',
   component: ConfirmationModal,
   args: {
     isOpen: false,

diff --git a/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx b/packages/components/src/Modal/ContextModal/_docs/ContextModal.stories.tsx
@@ -11,7 +11,7 @@ import { ContextModal } from '../index'
 const IS_CHROMATIC = isChromatic()
 
 const meta = {
-  title: 'Components/Modals/Context Modal',
+  title: 'Components/Modals/ContextModal',
   component: ContextModal,
   args: {
     isOpen: false,

diff --git a/packages/components/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx b/packages/components/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx
@@ -6,7 +6,7 @@ import { expect, userEvent, within, waitFor } from '@storybook/test'
 import { GenericModal, ModalAccessibleLabel, ModalBody, ModalHeader } from '../index'
 
 const meta: Meta<typeof GenericModal> = {
-  title: 'Components/Modals/Generic Modal/Tests',
+  title: 'Components/Modals/GenericModal/Tests',
   component: GenericModal,
 }
 

diff --git a/packages/components/src/Modal/GenericModal/_docs/GenericModal.stories.tsx b/packages/components/src/Modal/GenericModal/_docs/GenericModal.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { GenericModal } from '../index'
 
 const meta = {
-  title: 'Components/Modals/Generic Modal',
+  title: 'Components/Modals/GenericModal',
   component: GenericModal,
   args: {
     children: 'Example content',

diff --git a/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx b/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx
@@ -22,7 +22,7 @@ const ExampleForm = (): JSX.Element => (
 )
 
 const meta = {
-  title: 'Components/Modals/Input Edit Modal',
+  title: 'Components/Modals/InputEditModal',
   component: InputEditModal,
   args: {
     isOpen: false,

diff --git a/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx b/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx
@@ -9,7 +9,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { SplitButton, SplitButtonProps } from '../index'
 
 export default {
-  title: 'Components/Buttons/SplitButton',
+  title: 'Components/SplitButton',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/SplitButton/_docs/SplitButton.stories.tsx b/packages/components/src/SplitButton/_docs/SplitButton.stories.tsx
@@ -8,7 +8,7 @@ import {
 import { SplitButton } from '../index'
 
 const meta = {
-  title: 'Components/Buttons/SplitButton',
+  title: 'Components/SplitButton',
   component: SplitButton,
   argTypes: {
     actionButtonProps: {

diff --git a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { TextArea } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/Text Area',
+  title: 'Components/Text Input controls/TextArea',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/TextArea/_docs/TextArea.stories.tsx b/packages/components/src/TextArea/_docs/TextArea.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { TextArea } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/Text Area',
+  title: 'Components/Text Input controls/TextArea',
   component: TextArea,
   parameters: {
     a11y: {

diff --git a/packages/components/src/TextAreaField/_docs/TextAreaField.stickersheet.stories.tsx b/packages/components/src/TextAreaField/_docs/TextAreaField.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { TextAreaField, TextAreaFieldProps } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/Text Area Field',
+  title: 'Components/Text Input controls/TextAreaField',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/TextAreaField/_docs/TextAreaField.stories.tsx b/packages/components/src/TextAreaField/_docs/TextAreaField.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { TextAreaField } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/Text Area Field',
+  title: 'Components/Text Input controls/TextAreaField',
   component: TextAreaField,
   args: {
     labelText: 'Label',

diff --git a/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx b/packages/components/src/TextField/_docs/TextField.stickersheet.stories.tsx
@@ -5,7 +5,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { TextField, TextFieldProps } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/Text Field',
+  title: 'Components/Text Input controls/TextField',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/TextField/_docs/TextField.stories.tsx b/packages/components/src/TextField/_docs/TextField.stories.tsx
@@ -4,7 +4,7 @@ import { Icon } from '~components/__future__/Icon'
 import { TextField } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/Text Field',
+  title: 'Components/Text Input controls/TextField',
   component: TextField,
   args: {
     labelText: 'Label',

diff --git a/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.stories.tsx b/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { VisuallyHidden } from '../index'
 
 const meta = {
-  title: 'Components/Visually Hidden',
+  title: 'Components/VisuallyHidden',
   component: VisuallyHidden,
   args: {
     children: '👋 Hello!',

diff --git a/packages/components/src/Workflow/_docs/ProgressStepper.stickersheet.stories.tsx b/packages/components/src/Workflow/_docs/ProgressStepper.stickersheet.stories.tsx
@@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSh
 import { ProgressStepper } from '../subcomponents'
 
 export default {
-  title: 'Layout/Workflow/Components/Progress Stepper',
+  title: 'Components/Workflow/Components/ProgressStepper',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

diff --git a/packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx b/packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx
@@ -3,7 +3,7 @@ import { Workflow } from '../'
 import { WorkflowControls } from './controls'
 
 const meta = {
-  title: 'Layout/Workflow/Components/Progress Stepper',
+  title: 'Components/Workflow/Components/ProgressStepper',
   component: Workflow.ProgressStepper,
   argTypes: {
     currentStepId: WorkflowControls.currentStepId,

diff --git a/packages/components/src/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/Workflow/_docs/Workflow.stories.tsx
@@ -28,7 +28,7 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: 'Layout/Workflow',
+  title: 'Components/Workflow',
   component: Workflow,
   argTypes: WorkflowControls,
   args: {