migrate breadcrumbs and change url paths to doc (#289)

* migrate breadcrumbs and change url paths to doc

* lint fix

src/components/breadcrumbs/BreadcrumbLink.tsx

@@ -9,6 +9,9 @@ export type BreadcrumbLinkProps = ClassNameProps &
       Partial<Pick<LinkComponentProps, 'href'>>
   }
 
+/**
+ * A link component that is commonly used for parent links inside a [Breadcrumbs](../?path=/docs/components-breadcrumbs--docs) component
+ */
 export function BreadcrumbLink({
   href,
   className,

src/components/breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,80 @@
+import {
+  Controls,
+  Markdown,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../.storybook/components'
+import { Breadcrumbs } from './Breadcrumbs'
+import { BreadcrumbLink } from './BreadcrumbLink'
+import { BreadcrumbsLoading } from './BreadcrumbsLoading'
+import { BreadcrumbText } from './BreadcrumbText'
+import { BreadcrumbLoading } from './BreadcrumbLoading'
+
+const meta = {
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Markdown>
+            These components render breadcrumbs, which can be used as a
+            secondary navigation that helps to see the users location.
+            Typically, you use the `BreadcrumbLink` component for the parent
+            links and the `BreadcrumbText` component for the current page. You
+            can use the `BreadcrumbLoading` component or the
+            `BreadcrumbsLoading` component to show a loading state.
+          </Markdown>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme
+            component="breadcrumbs"
+            items={[
+              'breadcrumbs',
+              'breadcrumbLink',
+              'breadcrumbText',
+              'breadcrumbLoading',
+            ]}
+          />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof Breadcrumbs>
+
+export default meta
+type Story = StoryObj<typeof Breadcrumbs>
+
+export const Default: Story = {
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <BreadcrumbLink href="#">Start</BreadcrumbLink>
+      <BreadcrumbLink href="#">User</BreadcrumbLink>
+      <BreadcrumbText>Settings</BreadcrumbText>
+    </Breadcrumbs>
+  ),
+}
+
+export const LoadingDefault: Story = {
+  render: () => (
+    <Breadcrumbs>
+      <BreadcrumbsLoading numberOfItems={3} />
+    </Breadcrumbs>
+  ),
+}
+
+export const LoadingCustom: Story = {
+  render: () => (
+    <Breadcrumbs>
+      <BreadcrumbLoading loadingBarProps={{ className: '!w-10' }} />
+      <BreadcrumbLoading />
+      <BreadcrumbText>Settings</BreadcrumbText>
+    </Breadcrumbs>
+  ),
+}

src/components/button/ButtonIcon.stories.mdx

@@ -68,7 +68,7 @@ React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButto
 
 <Theme component="button" items={['buttonIcon']} />
 
-Additionally, all the `button.modeVariantTone` themes are used. See [Button](/docs/components-button-button--default-story#theme).
+Additionally, all the `button.modeVariantTone` themes are used. See [Button](/docs/components-button-button--docs#theme).
 
 ## Mode
 

src/components/button/ButtonIconLink.stories.mdx

@@ -57,20 +57,20 @@ export const Template = ({ ...args }) => <ButtonIconLink {...args} />
 
 
 
-All themes are the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme).
+All themes are the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
 
 ## Mode
 
-The mode is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme).
+The mode is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
 
 ## Variants
 
-The variants are the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme).
+The variants are the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
 
 ## Size
 
-The size is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme).
+The size is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
 
 ## Tone
 
-The tone is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme).
+The tone is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).

src/components/button/ButtonLink.stories.mdx

@@ -76,7 +76,7 @@ AnchorHTMLAttributes<HTMLAnchorElement>
 
 
 
-All themes are the same as for the [Button](/docs/components-button-button--default-story#theme).
+All themes are the same as for the [Button](/docs/components-button-button--docs#theme).
 
 ## Examples
 
@@ -90,16 +90,16 @@ All themes are the same as for the [Button](/docs/components-button-button--defa
 
 ## Mode
 
-The mode is the same as for the [Button](/docs/components-button-button--default-story#size).
+The mode is the same as for the [Button](/docs/components-button-button--docs#size).
 
 ## Variants
 
-The variants are the same as for the [Button](/docs/components-button-button--default-story#variants).
+The variants are the same as for the [Button](/docs/components-button-button--docs#variants).
 
 ## Size
 
-The size is the same as for the [Button](/docs/components-button-button--default-story#size).
+The size is the same as for the [Button](/docs/components-button-button--docs#size).
 
 ## Tone
 
-The tone is the same as for the [Button](/docs/components-button-button--default-story#tone).
+The tone is the same as for the [Button](/docs/components-button-button--docs#tone).

src/components/button/SubmitButton.stories.mdx

@@ -24,7 +24,7 @@ export const Template = ({ children, ...args }) => (
 
 # SubmitButton
 
-The **_default values_** for variant, size, and tone can be found in the [Button Section](/docs/components-button-button--default-story).
+The **_default values_** for variant, size, and tone can be found in the [Button Section](/docs/components-button-button--docs).
 
 The submit button uses `React Hook Form` to automatically disable during submitting.
 

src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx

@@ -9,7 +9,7 @@ import { LoadingDescriptionItem } from './LoadingDescriptionItem'
 
 # LoadingDescriptionItem
 
-This component is used to show a loading [DescriptionItem](/docs/components-content-descriptionitem--default-story).
+This component is used to show a loading [DescriptionItem](/docs/components-content-descriptionitem--docs).
 
 export const Template = ({ ...args }) => <LoadingDescriptionItem {...args} />
 

src/components/form/CheckboxField.stories.mdx

@@ -8,7 +8,7 @@ import { Status } from './types'
 
 A checkbox field.
 
-It is composed of the primitives [Checkbox](../?path=/docs/components-form-primitive-checkbox--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+It is composed of the primitives [Checkbox](../?path=/docs/components-form-primitive-checkbox--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
 
 export const Template = ({ ...args }) => <CheckboxField {...args} />
 

src/components/form/CheckboxField.tsx

@@ -15,7 +15,7 @@ export type CheckboxFieldProps = Omit<CheckboxProps, 'tone'> &
 /**
  * A checkbox field.
  *
- * It is composed of the primitives [Checkbox](../?path=/docs/components-form-primitive-checkbox--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+ * It is composed of the primitives [Checkbox](../?path=/docs/components-form-primitive-checkbox--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
  */
 export const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>(
   function CheckboxField(

src/components/form/FormError.stories.mdx

@@ -6,7 +6,7 @@ import { FormError } from './FormError'
 
 # FormError
 
-This component is a variation of the [Alert](/docs/components-alert-alert--default-story) component.
+This component is a variation of the [Alert](/docs/components-alert-alert--docs) component.
 Its main purpose is to show an error in a form. The default style applies `col-span-2`, so that the error message is shown in one line in `SectionContentTwoColumn` forms.
 
 export const Template = ({ children, ...args }) => (

src/components/form/InputField.stories.mdx

@@ -11,7 +11,7 @@ import { FormVariant, Status } from './types'
 
 An input field independent of any form validation library.
 
-It is composed of the primitives [Input](../?path=/docs/components-form-primitive-input--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+It is composed of the primitives [Input](../?path=/docs/components-form-primitive-input--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
 
 export const Template = ({ ...args }) => <InputField {...args} />
 
@@ -107,7 +107,7 @@ export const Template = ({ ...args }) => <InputField {...args} />
     args={{
       label: 'Label',
       message: 'This is the message',
-      status: Status.invalid,
+      status: Status.Invalid,
     }}
   >
     {Template.bind({})}

src/components/form/InputField.tsx

@@ -22,7 +22,7 @@ export type InputFieldProps = Omit<InputProps, 'tone' | 'required'> &
 /**
  * An input field independent of any form validation library.
  *
- * It is composed of the primitives [Input](../?path=/docs/components-form-primitive-input--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+ * It is composed of the primitives [Input](../?path=/docs/components-form-primitive-input--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
  */
 export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
   function InputField(

src/components/form/RadioField.stories.mdx

@@ -8,7 +8,7 @@ import { Status } from './types'
 
 A radio field.
 
-It is composed of the primitives [Radio](../?path=/docs/components-form-primitive-radio--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+It is composed of the primitives [Radio](../?path=/docs/components-form-primitive-radio--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
 
 export const Template = ({ ...args }) => (
   <div className="space-y-4">

src/components/form/RadioField.tsx

@@ -15,7 +15,7 @@ export type RadioFieldProps = Omit<RadioProps, 'tone'> &
 /**
  * A radio field.
  *
- * It is composed of the primitives [Radio](../?path=/docs/components-form-primitive-radio--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+ * It is composed of the primitives [Radio](../?path=/docs/components-form-primitive-radio--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
  */
 export const RadioField = forwardRef<HTMLInputElement, RadioFieldProps>(
   function RadioField(

src/components/form/SelectField.stories.mdx

@@ -9,7 +9,7 @@ import { Status } from './types'
 
 A select field independent of any form validation library.
 
-It is composed of the primitives [Select](../?path=/docs/components-form-primitive-select--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+It is composed of the primitives [Select](../?path=/docs/components-form-primitive-select--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
 
 export const Template = ({ ...args }) => <SelectField {...args} />
 

src/components/form/SelectField.tsx

@@ -22,7 +22,7 @@ export type SelectFieldProps = Omit<SelectProps, 'tone'> &
 /**
  * A select field independent of any form validation library.
  *
- * It is composed of the primitives [Select](../?path=/docs/components-form-primitive-select--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+ * It is composed of the primitives [Select](../?path=/docs/components-form-primitive-select--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
  */
 export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
   function SelectField(

src/components/form/SelectMonthField.stories.mdx

@@ -8,7 +8,7 @@ import { SelectMonthField } from './SelectMonthField'
 
 A select field for months independent of any form validation library.
 
-It uses the [SelectField](../?path=/docs/components-form-selectfield--default-story) and [Option](../?path=/docs/components-form-primitive-option--default-story) components.
+It uses the [SelectField](../?path=/docs/components-form-selectfield--docs) and [Option](../?path=/docs/components-form-primitive-option--docs) components.
 
 export const Template = (args) => <SelectMonthField {...args} />
 

src/components/form/SelectMonthField.tsx

@@ -26,7 +26,7 @@ export type SelectMonthFieldProps = Omit<SelectFieldProps, 'children'>
 /**
  * A select field for months independent of any form validation library.
  *
- * It uses the [SelectField](../?path=/docs/components-form-selectfield--default-story) and [Option](../?path=/docs/components-form-primitive-option--default-story) components.
+ * It uses the [SelectField](../?path=/docs/components-form-selectfield--docs) and [Option](../?path=/docs/components-form-primitive-option--docs) components.
  */
 export const SelectMonthField = forwardRef<
   HTMLSelectElement,

src/components/form/SelectYearField.stories.mdx

@@ -7,7 +7,7 @@ import { SelectYearField } from './SelectYearField'
 
 A select field for years independent of any form validation library.
 
-It uses the [SelectField](../?path=/docs/components-form-selectfield--default-story) and [Option](../?path=/docs/components-form-primitive-option--default-story) components.
+It uses the [SelectField](../?path=/docs/components-form-selectfield--docs) and [Option](../?path=/docs/components-form-primitive-option--docs) components.
 
 With the props `from` and `to`, the corresponding start and end year can be set.
 

src/components/form/SelectYearField.tsx

@@ -9,7 +9,7 @@ export type SelectYearFieldProps = Omit<SelectFieldProps, 'children'> &
 /**
  * A select field for years independent of any form validation library.
  *
- * It uses the [SelectField](../?path=/docs/components-form-selectfield--default-story) and [Option](../?path=/docs/components-form-primitive-option--default-story) components.
+ * It uses the [SelectField](../?path=/docs/components-form-selectfield--docs) and [Option](../?path=/docs/components-form-primitive-option--docs) components.
  *
  * With the props `from` and `to`, the corresponding start and end year can be set.
  */

src/components/form/TextAreaField.stories.mdx

@@ -9,7 +9,7 @@ import { FormVariant, Status } from './types'
 
 A text area field independent of any form validation library.
 
-It is composed of the primitives [TextArea](../?path=/docs/components-form-primitive-textarea--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+It is composed of the primitives [TextArea](../?path=/docs/components-form-primitive-textarea--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
 
 export const Template = ({ ...args }) => <TextAreaField {...args} />
 

src/components/form/TextAreaField.tsx

@@ -22,7 +22,7 @@ export type TextAreaFieldProps = Omit<TextAreaProps, 'tone'> &
 /**
  * A text area field independent of any form validation library.
  *
- * It is composed of the primitives [TextArea](../?path=/docs/components-form-primitive-textarea--default-story), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story).
+ * It is composed of the primitives [TextArea](../?path=/docs/components-form-primitive-textarea--docs), [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs).
  */
 export const TextAreaField = forwardRef<
   HTMLTextAreaElement,