From b515db22d05f23596af9ba133de402df74604b1c Mon Sep 17 00:00:00 2001 From: Mollpo <97024183+mollpo@users.noreply.github.com> Date: Fri, 22 Sep 2023 09:21:01 +0200 Subject: [PATCH] migrate breadcrumbs and change url paths to doc (#289) * migrate breadcrumbs and change url paths to doc * lint fix --- src/components/breadcrumbs/BreadcrumbLink.tsx | 3 + .../breadcrumbs/Breadcrumbs.stories.mdx | 78 ------------------ .../breadcrumbs/Breadcrumbs.stories.tsx | 80 +++++++++++++++++++ src/components/button/ButtonIcon.stories.mdx | 2 +- .../button/ButtonIconLink.stories.mdx | 10 +-- src/components/button/ButtonLink.stories.mdx | 10 +-- .../button/SubmitButton.stories.mdx | 2 +- .../LoadingDescriptionItem.stories.mdx | 2 +- src/components/form/CheckboxField.stories.mdx | 2 +- src/components/form/CheckboxField.tsx | 2 +- src/components/form/FormError.stories.mdx | 2 +- src/components/form/InputField.stories.mdx | 4 +- src/components/form/InputField.tsx | 2 +- src/components/form/RadioField.stories.mdx | 2 +- src/components/form/RadioField.tsx | 2 +- src/components/form/SelectField.stories.mdx | 2 +- src/components/form/SelectField.tsx | 2 +- .../form/SelectMonthField.stories.mdx | 2 +- src/components/form/SelectMonthField.tsx | 2 +- .../form/SelectYearField.stories.mdx | 2 +- src/components/form/SelectYearField.tsx | 2 +- src/components/form/TextAreaField.stories.mdx | 2 +- src/components/form/TextAreaField.tsx | 2 +- .../form/ToggleSwitchField.stories.mdx | 2 +- src/components/form/ToggleSwitchField.tsx | 2 +- .../form/primitive/Checkbox/Checkbox.tsx | 2 +- .../form/primitive/FieldSet.stories.mdx | 2 +- .../form/primitive/FieldSet/FieldSet.tsx | 2 +- .../form/primitive/Option.stories.mdx | 2 +- src/components/form/primitive/Option.tsx | 2 +- .../form/primitive/Select.stories.mdx | 2 +- src/components/form/primitive/Select.tsx | 2 +- .../form/primitive/TextArea.stories.mdx | 2 +- src/components/form/primitive/TextArea.tsx | 2 +- .../actions/HeaderBackAction.stories.mdx | 2 +- .../actions/HeaderButtonIcon.stories.mdx | 2 +- .../actions/HeaderCloseAction.stories.mdx | 2 +- .../actions/HeaderLeftActionIcon.stories.mdx | 2 +- .../actions/HeaderRightActionIcon.stories.mdx | 2 +- src/components/link/TextLink.stories.mdx | 4 +- .../pagination/PaginationInMemory.stories.mdx | 2 +- .../PaginationPagesList.stories.mdx | 2 +- .../PaginationPagesListItem.stories.mdx | 2 +- .../pagination/PaginationRouter.stories.mdx | 2 +- .../react-hook-form/AutoSubmit.stories.mdx | 2 +- .../react-hook-form/CheckboxFormField.tsx | 2 +- .../react-hook-form/FieldSetFormField.tsx | 2 +- .../react-hook-form/InputFormField.tsx | 2 +- .../react-hook-form/NumberFormField.tsx | 2 +- .../RadioFormField.stories.mdx | 2 +- .../react-hook-form/RadioFormField.tsx | 2 +- .../react-hook-form/SelectFormField.tsx | 2 +- .../SelectItemFormField.tsx | 4 +- .../react-hook-form/SelectMonthFormField.tsx | 2 +- .../react-hook-form/SelectYearFormField.tsx | 2 +- .../react-hook-form/TextAreaFormField.tsx | 2 +- .../react-hook-form/ToggleSwitchFormField.tsx | 2 +- .../SectionContentListLoading.stories.mdx | 2 +- .../SectionContentLoadingDetails.stories.mdx | 2 +- .../SectionContentLoadingForm.stories.mdx | 2 +- .../Section/SectionContentMessage.stories.mdx | 4 +- .../Section/SectionContentTitle.stories.mdx | 2 +- .../SectionFooterWithActions.stories.mdx | 2 +- ...onFooterWithPaginationInMemory.stories.mdx | 4 +- ...tionFooterWithPaginationRouter.stories.mdx | 4 +- .../SectionFooterWithSubmit.stories.mdx | 2 +- .../SectionHeader/SectionHeader.stories.mdx | 2 +- .../SectionHeaderSpacer.stories.mdx | 2 +- .../SectionLoadingListItem.stories.mdx | 2 +- 69 files changed, 163 insertions(+), 158 deletions(-) delete mode 100644 src/components/breadcrumbs/Breadcrumbs.stories.mdx create mode 100644 src/components/breadcrumbs/Breadcrumbs.stories.tsx diff --git a/src/components/breadcrumbs/BreadcrumbLink.tsx b/src/components/breadcrumbs/BreadcrumbLink.tsx index 7eb64ccd..b018b587 100644 --- a/src/components/breadcrumbs/BreadcrumbLink.tsx +++ b/src/components/breadcrumbs/BreadcrumbLink.tsx @@ -9,6 +9,9 @@ export type BreadcrumbLinkProps = ClassNameProps & Partial> } +/** + * A link component that is commonly used for parent links inside a [Breadcrumbs](../?path=/docs/components-breadcrumbs--docs) component + */ export function BreadcrumbLink({ href, className, diff --git a/src/components/breadcrumbs/Breadcrumbs.stories.mdx b/src/components/breadcrumbs/Breadcrumbs.stories.mdx deleted file mode 100644 index 23571ecc..00000000 --- a/src/components/breadcrumbs/Breadcrumbs.stories.mdx +++ /dev/null @@ -1,78 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../.storybook/components' -import { - Breadcrumbs, - BreadcrumbsLoading, - BreadcrumbLink, - BreadcrumbText, - BreadcrumbLoading, -} from './' - - - -# Breadcrumbs - -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. - -export const Template = (args) => ( - - Start - User - Settings - -) - - - {Template.bind({})} - - -### Props of `Breadcrumb` - - - -## Loading default - -export const TemplateLoadingDefault = () => ( - -) - - - {TemplateLoadingDefault.bind({})} - - -## Loading Custom - -export const TemplateLoadingCustom = () => ( - - - - Settings - -) - - - {TemplateLoadingCustom.bind({})} - - - - - diff --git a/src/components/breadcrumbs/Breadcrumbs.stories.tsx b/src/components/breadcrumbs/Breadcrumbs.stories.tsx new file mode 100644 index 00000000..4175ab9d --- /dev/null +++ b/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: () => ( + <> + + <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> + ), +} diff --git a/src/components/button/ButtonIcon.stories.mdx b/src/components/button/ButtonIcon.stories.mdx index 4fdc721b..22ad5cb0 100644 --- a/src/components/button/ButtonIcon.stories.mdx +++ b/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 diff --git a/src/components/button/ButtonIconLink.stories.mdx b/src/components/button/ButtonIconLink.stories.mdx index 280c5646..0ac6cf9f 100644 --- a/src/components/button/ButtonIconLink.stories.mdx +++ b/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). diff --git a/src/components/button/ButtonLink.stories.mdx b/src/components/button/ButtonLink.stories.mdx index 362fcaf6..8397108c 100644 --- a/src/components/button/ButtonLink.stories.mdx +++ b/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). diff --git a/src/components/button/SubmitButton.stories.mdx b/src/components/button/SubmitButton.stories.mdx index 16de4a45..9a9f4da6 100644 --- a/src/components/button/SubmitButton.stories.mdx +++ b/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. diff --git a/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx b/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx index 31fea5de..b89250f9 100644 --- a/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx +++ b/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} /> diff --git a/src/components/form/CheckboxField.stories.mdx b/src/components/form/CheckboxField.stories.mdx index 7f1e6d46..1836da93 100644 --- a/src/components/form/CheckboxField.stories.mdx +++ b/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} /> diff --git a/src/components/form/CheckboxField.tsx b/src/components/form/CheckboxField.tsx index 61821d07..e7b58b43 100644 --- a/src/components/form/CheckboxField.tsx +++ b/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( diff --git a/src/components/form/FormError.stories.mdx b/src/components/form/FormError.stories.mdx index 15c1be0f..67ffc58b 100644 --- a/src/components/form/FormError.stories.mdx +++ b/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 }) => ( diff --git a/src/components/form/InputField.stories.mdx b/src/components/form/InputField.stories.mdx index f5dfbbe5..e736d6d0 100644 --- a/src/components/form/InputField.stories.mdx +++ b/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({})} diff --git a/src/components/form/InputField.tsx b/src/components/form/InputField.tsx index df92bf80..bf796728 100644 --- a/src/components/form/InputField.tsx +++ b/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( diff --git a/src/components/form/RadioField.stories.mdx b/src/components/form/RadioField.stories.mdx index ecc47094..0bc9e3bd 100644 --- a/src/components/form/RadioField.stories.mdx +++ b/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"> diff --git a/src/components/form/RadioField.tsx b/src/components/form/RadioField.tsx index 28bef6a1..046ce4de 100644 --- a/src/components/form/RadioField.tsx +++ b/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( diff --git a/src/components/form/SelectField.stories.mdx b/src/components/form/SelectField.stories.mdx index bb775f0a..41bfbee9 100644 --- a/src/components/form/SelectField.stories.mdx +++ b/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} /> diff --git a/src/components/form/SelectField.tsx b/src/components/form/SelectField.tsx index 426e6df5..710772ac 100644 --- a/src/components/form/SelectField.tsx +++ b/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( diff --git a/src/components/form/SelectMonthField.stories.mdx b/src/components/form/SelectMonthField.stories.mdx index 69f3d16c..164f05f8 100644 --- a/src/components/form/SelectMonthField.stories.mdx +++ b/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} /> diff --git a/src/components/form/SelectMonthField.tsx b/src/components/form/SelectMonthField.tsx index 251cde63..89c5a66f 100644 --- a/src/components/form/SelectMonthField.tsx +++ b/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, diff --git a/src/components/form/SelectYearField.stories.mdx b/src/components/form/SelectYearField.stories.mdx index 40bb09e2..7a16f41c 100644 --- a/src/components/form/SelectYearField.stories.mdx +++ b/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. diff --git a/src/components/form/SelectYearField.tsx b/src/components/form/SelectYearField.tsx index 9f8ca506..9d4e7d1f 100644 --- a/src/components/form/SelectYearField.tsx +++ b/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. */ diff --git a/src/components/form/TextAreaField.stories.mdx b/src/components/form/TextAreaField.stories.mdx index 6903f1ff..a6aac620 100644 --- a/src/components/form/TextAreaField.stories.mdx +++ b/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} /> diff --git a/src/components/form/TextAreaField.tsx b/src/components/form/TextAreaField.tsx index 9441407f..97143293 100644 --- a/src/components/form/TextAreaField.tsx +++ b/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, diff --git a/src/components/form/ToggleSwitchField.stories.mdx b/src/components/form/ToggleSwitchField.stories.mdx index 0810336c..0e21db24 100644 --- a/src/components/form/ToggleSwitchField.stories.mdx +++ b/src/components/form/ToggleSwitchField.stories.mdx @@ -8,7 +8,7 @@ import { Status } from './types' A toggle switch field. -It is composed of the primitives [ToggleSwitch](../?path=/docs/components-form-primitive-toggleswitch--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story). +It is composed of the primitives [ToggleSwitch](../?path=/docs/components-form-primitive-toggleswitch--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs). export const Template = ({ ...args }) => <ToggleSwitchField {...args} /> diff --git a/src/components/form/ToggleSwitchField.tsx b/src/components/form/ToggleSwitchField.tsx index 1eae2ea3..2356fd93 100644 --- a/src/components/form/ToggleSwitchField.tsx +++ b/src/components/form/ToggleSwitchField.tsx @@ -15,7 +15,7 @@ export type ToggleSwitchFieldProps = Omit<ToggleSwitchProps, 'tone'> & /** * A toggle switch field. * - * It is composed of the primitives [ToggleSwitch](../?path=/docs/components-form-primitive-toggleswitch--default-story) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--default-story). + * It is composed of the primitives [ToggleSwitch](../?path=/docs/components-form-primitive-toggleswitch--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs). */ export const ToggleSwitchField = forwardRef< HTMLInputElement, diff --git a/src/components/form/primitive/Checkbox/Checkbox.tsx b/src/components/form/primitive/Checkbox/Checkbox.tsx index 0d192871..e75cfdf8 100644 --- a/src/components/form/primitive/Checkbox/Checkbox.tsx +++ b/src/components/form/primitive/Checkbox/Checkbox.tsx @@ -37,7 +37,7 @@ export type CheckboxProps = Omit< /** * A themed checkbox input that can be used in controlled or uncontrolled mode. * - * It inherits styles from the primitive [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story). + * It inherits styles from the primitive [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs). */ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>( function Checkbox( diff --git a/src/components/form/primitive/FieldSet.stories.mdx b/src/components/form/primitive/FieldSet.stories.mdx index 47b03a3a..fab7fa41 100644 --- a/src/components/form/primitive/FieldSet.stories.mdx +++ b/src/components/form/primitive/FieldSet.stories.mdx @@ -8,7 +8,7 @@ import { FieldSet } from './FieldSet' A themed fieldset. -It inherits styles from the [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story). +It inherits styles from the [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs). The `indent` property can be used to control the indentation of the component (which may depend on its position and the components it contains). diff --git a/src/components/form/primitive/FieldSet/FieldSet.tsx b/src/components/form/primitive/FieldSet/FieldSet.tsx index cc12d097..c25a0099 100644 --- a/src/components/form/primitive/FieldSet/FieldSet.tsx +++ b/src/components/form/primitive/FieldSet/FieldSet.tsx @@ -19,7 +19,7 @@ export type FieldSetProps = React.DetailedHTMLProps< /** * A themed fieldset. * - * It inherits styles from the [InputLabel](../?path=/docs/components-form-primitive-inputlabel--default-story). + * It inherits styles from the [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs). * * The `indent` property can be used to control the indentation of the component (which may depend on its position and the components it contains). */ diff --git a/src/components/form/primitive/Option.stories.mdx b/src/components/form/primitive/Option.stories.mdx index 7e883c4f..9faf3dd1 100644 --- a/src/components/form/primitive/Option.stories.mdx +++ b/src/components/form/primitive/Option.stories.mdx @@ -7,7 +7,7 @@ import { Select } from './Select' # Option -A custom themed `option` element to be used with [Select](../?path=/docs/components-form-primitive-select--default-story). +A custom themed `option` element to be used with [Select](../?path=/docs/components-form-primitive-select--docs). export const Template = ({ ...args }) => <Option {...args} /> diff --git a/src/components/form/primitive/Option.tsx b/src/components/form/primitive/Option.tsx index 373bc733..b9d635f4 100644 --- a/src/components/form/primitive/Option.tsx +++ b/src/components/form/primitive/Option.tsx @@ -13,7 +13,7 @@ export type OptionProps = Omit< ModeProps & { children?: string | number | undefined | null } /** - * A custom themed `option` element to be used with [Select](../?path=/docs/components-form-primitive-select--default-story). + * A custom themed `option` element to be used with [Select](../?path=/docs/components-form-primitive-select--docs). */ export const Option = forwardRef(function Option( { value = '', mode = Mode.Light, className, children, ...props }: OptionProps, diff --git a/src/components/form/primitive/Select.stories.mdx b/src/components/form/primitive/Select.stories.mdx index 736066be..4bfd72a0 100644 --- a/src/components/form/primitive/Select.stories.mdx +++ b/src/components/form/primitive/Select.stories.mdx @@ -10,7 +10,7 @@ import { Select } from './Select' A themed `select` element. -It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--default-story). +It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). export const Template = ({ ...args }) => <Select {...args} /> diff --git a/src/components/form/primitive/Select.tsx b/src/components/form/primitive/Select.tsx index 54e08ce5..69c2e6ee 100644 --- a/src/components/form/primitive/Select.tsx +++ b/src/components/form/primitive/Select.tsx @@ -24,7 +24,7 @@ export type SelectProps = Omit< /** * A themed `select` element. * - * It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--default-story). + * It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). */ export const Select = forwardRef<HTMLSelectElement, SelectProps>( function Select( diff --git a/src/components/form/primitive/TextArea.stories.mdx b/src/components/form/primitive/TextArea.stories.mdx index b910163b..ead7f428 100644 --- a/src/components/form/primitive/TextArea.stories.mdx +++ b/src/components/form/primitive/TextArea.stories.mdx @@ -8,7 +8,7 @@ import { TextArea } from './TextArea' A themed `textarea` element. -It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--default-story). +It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). export const Template = ({ ...args }) => <TextArea {...args} /> diff --git a/src/components/form/primitive/TextArea.tsx b/src/components/form/primitive/TextArea.tsx index 3bc6b74f..b789fe1e 100644 --- a/src/components/form/primitive/TextArea.tsx +++ b/src/components/form/primitive/TextArea.tsx @@ -20,7 +20,7 @@ export type TextAreaProps = React.DetailedHTMLProps< /** * A themed `textarea` element. * - * It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--default-story). + * It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). */ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>( function TextArea( diff --git a/src/components/header/actions/HeaderBackAction.stories.mdx b/src/components/header/actions/HeaderBackAction.stories.mdx index 17610bec..dc9bb268 100644 --- a/src/components/header/actions/HeaderBackAction.stories.mdx +++ b/src/components/header/actions/HeaderBackAction.stories.mdx @@ -9,7 +9,7 @@ import { HeaderBackAction } from './HeaderBackAction' This component is used to add a `back action' on the left side of a header. -It leverages on the work of [ButtonIcon](/docs/components-button-buttonicon--default-story), which adds the icon, and [HeaderLeftArea](/docs/components-header-headerleftarea--default-story), which is in charge of the positioning. +It leverages on the work of [ButtonIcon](/docs/components-button-buttonicon--docs), which adds the icon, and [HeaderLeftArea](/docs/components-header-headerleftarea--docs), which is in charge of the positioning. export const Template = (args) => <HeaderBackAction {...args} /> diff --git a/src/components/header/actions/HeaderButtonIcon.stories.mdx b/src/components/header/actions/HeaderButtonIcon.stories.mdx index 34347230..1e634347 100644 --- a/src/components/header/actions/HeaderButtonIcon.stories.mdx +++ b/src/components/header/actions/HeaderButtonIcon.stories.mdx @@ -8,7 +8,7 @@ import { HeaderButtonIcon } from './HeaderButtonIcon' # HeaderButtonIcon -This component is used to add a [ButtonIcon](/docs/components-button-buttonicon--default-story) to the header, which changes the size based on a breakpoint. +This component is used to add a [ButtonIcon](/docs/components-button-buttonicon--docs) to the header, which changes the size based on a breakpoint. export const Template = (args) => <HeaderButtonIcon {...args} /> diff --git a/src/components/header/actions/HeaderCloseAction.stories.mdx b/src/components/header/actions/HeaderCloseAction.stories.mdx index bab6bec8..1fabf53a 100644 --- a/src/components/header/actions/HeaderCloseAction.stories.mdx +++ b/src/components/header/actions/HeaderCloseAction.stories.mdx @@ -13,7 +13,7 @@ import { HeaderCloseAction } from './HeaderCloseAction' This component is used to add a `close action' on the left side of a header. -It leverages on the work of [ButtonIcon](/docs/components-button-buttonicon--default-story), which adds the icon, and [HeaderLeftArea](/docs/components-header-headerleftarea--default-story), which is in charge of the positioning. +It leverages on the work of [ButtonIcon](/docs/components-button-buttonicon--docs), which adds the icon, and [HeaderLeftArea](/docs/components-header-headerleftarea--docs), which is in charge of the positioning. export const Template = (args) => <HeaderCloseAction {...args} /> diff --git a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx index d899ee6b..0a4e2cdc 100644 --- a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx +++ b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx @@ -13,7 +13,7 @@ import { HeaderLeftActionIcon } from './HeaderLeftActionIcon' This component is used to add a `ButtonIcon` to the left side of the header, e.g. to add a back or close button. -It leverages on the work of [HeaderButtonIcon](/docs/components-header-headerbuttonicon--default-story), which adds a responsive `ButtonIcon`, and [HeaderLeftArea](/docs/components-header-headerleftarea--default-story), which is in charge of the positioning. +It leverages on the work of [HeaderButtonIcon](/docs/components-header-headerbuttonicon--docs), which adds a responsive `ButtonIcon`, and [HeaderLeftArea](/docs/components-header-headerleftarea--docs), which is in charge of the positioning. export const Template = (args) => <HeaderLeftActionIcon {...args} /> diff --git a/src/components/header/actions/HeaderRightActionIcon.stories.mdx b/src/components/header/actions/HeaderRightActionIcon.stories.mdx index c721a91c..a27c23c2 100644 --- a/src/components/header/actions/HeaderRightActionIcon.stories.mdx +++ b/src/components/header/actions/HeaderRightActionIcon.stories.mdx @@ -13,7 +13,7 @@ import { HeaderRightActionIcon } from './HeaderRightActionIcon' This component is used to add a `ButtonIcon` to the right side of the header, e.g. to add a edit or search button. -It leverages on the work of [HeaderButtonIcon](/docs/components-header-headerbuttonicon--default-story), which adds a responsive `ButtonIcon`, and [HeaderRightArea](/docs/components-header-headerrightarea--default-story), which is in charge of the positioning. +It leverages on the work of [HeaderButtonIcon](/docs/components-header-headerbuttonicon--docs), which adds a responsive `ButtonIcon`, and [HeaderRightArea](/docs/components-header-headerrightarea--docs), which is in charge of the positioning. export const Template = (args) => <HeaderRightActionIcon {...args} /> diff --git a/src/components/link/TextLink.stories.mdx b/src/components/link/TextLink.stories.mdx index 77f03bad..8eac397a 100644 --- a/src/components/link/TextLink.stories.mdx +++ b/src/components/link/TextLink.stories.mdx @@ -21,7 +21,7 @@ export const Template = ({ href, children, ...args }) => ( name="Default" args={{ children: 'Internal link', - href: '/?path=/docs/components-link-textlink--default-story', + href: '/?path=/docs/components-link-textlink--docs', }} > {Template.bind({})} @@ -43,7 +43,7 @@ export const Template = ({ href, children, ...args }) => ( name="External Link" args={{ children: 'External link', - href: '/?path=/docs/components-link-textlink--default-story', + href: '/?path=/docs/components-link-textlink--docs', internal: false, }} > diff --git a/src/components/pagination/PaginationInMemory.stories.mdx b/src/components/pagination/PaginationInMemory.stories.mdx index ccc2416a..e4281ec5 100644 --- a/src/components/pagination/PaginationInMemory.stories.mdx +++ b/src/components/pagination/PaginationInMemory.stories.mdx @@ -20,7 +20,7 @@ In order to use this component you have to install the following package. npm i @aboutbits/pagination ``` -It leverages on the components [PaginationContainer](/docs/components-section-PaginationContainer--default-story), [SectionPaginationNextContent](/docs/components-section-SectionPaginationNextContent--default-story), [SectionPaginationPreviousContent](/docs/components-section-SectionPaginationPreviousContent--default-story) , [PaginationPagesList](/docs/components-section-PaginationPagesList--default-story), and [SectionPaginationPagesListItem](/docs/components-section-SectionPaginationPagesListItem--default-story). +It leverages on the components [PaginationContainer](/docs/components-section-PaginationContainer--docs), [SectionPaginationNextContent](/docs/components-section-SectionPaginationNextContent--docs), [SectionPaginationPreviousContent](/docs/components-section-SectionPaginationPreviousContent--docs) , [PaginationPagesList](/docs/components-section-PaginationPagesList--docs), and [SectionPaginationPagesListItem](/docs/components-section-SectionPaginationPagesListItem--docs). export const Template = ({ children, ...args }) => { const [page, setPage] = useState(1) diff --git a/src/components/pagination/PaginationPagesList.stories.mdx b/src/components/pagination/PaginationPagesList.stories.mdx index d9c62463..f5406be5 100644 --- a/src/components/pagination/PaginationPagesList.stories.mdx +++ b/src/components/pagination/PaginationPagesList.stories.mdx @@ -16,7 +16,7 @@ This component is used to provide an unordered list. It leverages on the HTML `ul`-tag. -_**Important:**_ the single items for the list are created with [SelectPaginationListItem](/docs/components-section-sectionpaginationpageslistitem--default-story) +_**Important:**_ the single items for the list are created with [SelectPaginationListItem](/docs/components-section-sectionpaginationpageslistitem--docs) export const Template = ({ ...args }) => { const listItem = [1, 2, 3, '...'] diff --git a/src/components/pagination/PaginationPagesListItem.stories.mdx b/src/components/pagination/PaginationPagesListItem.stories.mdx index f3cdc80d..7842b980 100644 --- a/src/components/pagination/PaginationPagesListItem.stories.mdx +++ b/src/components/pagination/PaginationPagesListItem.stories.mdx @@ -8,7 +8,7 @@ import { PaginationPagesListItem } from './PaginationPagesList' # SectionPaginationPagesListItem -This component is used to provide a list item for [SectionPaginationList](/docs/components-section-sectionpaginationpageslist--default-story). +This component is used to provide a list item for [SectionPaginationList](/docs/components-section-sectionpaginationpageslist--docs). It leverages on the HTML `li`-tag. diff --git a/src/components/pagination/PaginationRouter.stories.mdx b/src/components/pagination/PaginationRouter.stories.mdx index ba98bab9..9bb66243 100644 --- a/src/components/pagination/PaginationRouter.stories.mdx +++ b/src/components/pagination/PaginationRouter.stories.mdx @@ -19,7 +19,7 @@ In order to use this component you have to install the following package. npm i @aboutbits/pagination ``` -It leverages on the components [PaginationContainer](/docs/components-section-PaginationContainer--default-story), [SectionPaginationNextContent](/docs/components-section-SectionPaginationNextContent--default-story), [SectionPaginationPreviousContent](/docs/components-section-SectionPaginationPreviousContent--default-story) , [PaginationPagesList](/docs/components-section-PaginationPagesList--default-story), and [SectionPaginationPagesListItem](/docs/components-section-SectionPaginationPagesListItem--default-story). +It leverages on the components [PaginationContainer](/docs/components-section-PaginationContainer--docs), [SectionPaginationNextContent](/docs/components-section-SectionPaginationNextContent--docs), [SectionPaginationPreviousContent](/docs/components-section-SectionPaginationPreviousContent--docs) , [PaginationPagesList](/docs/components-section-PaginationPagesList--docs), and [SectionPaginationPagesListItem](/docs/components-section-SectionPaginationPagesListItem--docs). export const Template = ({ children, ...args }) => { const currentParams = new URLSearchParams(window.parent.location.search) diff --git a/src/components/react-hook-form/AutoSubmit.stories.mdx b/src/components/react-hook-form/AutoSubmit.stories.mdx index fae19706..6bf608db 100644 --- a/src/components/react-hook-form/AutoSubmit.stories.mdx +++ b/src/components/react-hook-form/AutoSubmit.stories.mdx @@ -37,7 +37,7 @@ import { InputFormField } from './InputFormField' This component can be added to a `React Hook Form` form to automatically submit on form changes. -It requires to be inside a `React Hook Form` context, i.e [Form](/docs/components-form-form--default-story) component. +It requires to be inside a `React Hook Form` context, i.e [Form](/docs/components-form-form--docs) component. export const Template = ({ ...args }) => <AutoSubmit {...args} /> diff --git a/src/components/react-hook-form/CheckboxFormField.tsx b/src/components/react-hook-form/CheckboxFormField.tsx index bd4643a9..03da6f7d 100644 --- a/src/components/react-hook-form/CheckboxFormField.tsx +++ b/src/components/react-hook-form/CheckboxFormField.tsx @@ -9,7 +9,7 @@ export type CheckboxFormFieldProps = Omit<CheckboxFieldProps, 'status'> & { } /** - * A [CheckboxField](../?path=/docs/components-form-checkboxfield--default-story) within the context of a `react-hook-form` form. + * A [CheckboxField](../?path=/docs/components-form-checkboxfield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `boolean`. */ diff --git a/src/components/react-hook-form/FieldSetFormField.tsx b/src/components/react-hook-form/FieldSetFormField.tsx index 52a564bc..f98a0a17 100644 --- a/src/components/react-hook-form/FieldSetFormField.tsx +++ b/src/components/react-hook-form/FieldSetFormField.tsx @@ -10,7 +10,7 @@ export type FieldSetFormProps<TFieldValues extends FieldValues> = Omit< } /** - * A [FieldSetField](../?path=/docs/components-form-fieldsetfield--default-story) within the context of a `react-hook-form` form. + * A [FieldSetField](../?path=/docs/components-form-fieldsetfield--docs) within the context of a `react-hook-form` form. * * The `FieldSetFormField` label will display an error state depending on the specified form `fields`. */ diff --git a/src/components/react-hook-form/InputFormField.tsx b/src/components/react-hook-form/InputFormField.tsx index 1ea524e4..b8a2cdcf 100644 --- a/src/components/react-hook-form/InputFormField.tsx +++ b/src/components/react-hook-form/InputFormField.tsx @@ -19,7 +19,7 @@ export type InputFormFieldProps< } /** - * An [InputField](../?path=/docs/components-form-inputfield--default-story) within the context of a `react-hook-form` form. + * An [InputField](../?path=/docs/components-form-inputfield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `string` by default. If `transformEmptyToNull` is `true` and the input is empty, `null` is returned. */ diff --git a/src/components/react-hook-form/NumberFormField.tsx b/src/components/react-hook-form/NumberFormField.tsx index eaf8d21e..99c5373b 100644 --- a/src/components/react-hook-form/NumberFormField.tsx +++ b/src/components/react-hook-form/NumberFormField.tsx @@ -11,7 +11,7 @@ export type NumberFormFieldProps< > /** - * An [InputField](../?path=/docs/components-form-inputfield--default-story) within the context of a `react-hook-form` form and with the default type `number`. + * An [InputField](../?path=/docs/components-form-inputfield--docs) within the context of a `react-hook-form` form and with the default type `number`. * * The form value that is returned for validation is of type `number | null`. `null` is returned if the input is an empty string or nullish. */ diff --git a/src/components/react-hook-form/RadioFormField.stories.mdx b/src/components/react-hook-form/RadioFormField.stories.mdx index 6903ba22..eaeacfd8 100644 --- a/src/components/react-hook-form/RadioFormField.stories.mdx +++ b/src/components/react-hook-form/RadioFormField.stories.mdx @@ -21,7 +21,7 @@ import { RadioFormField } from './RadioFormField' # RadioFormField -A [RadioField](../?path=/docs/components-form-radiofield--default-story) within the context of a `react-hook-form` form. +A [RadioField](../?path=/docs/components-form-radiofield--docs) within the context of a `react-hook-form` form. export const Template = ({ ...args }) => ( <div className="space-y-4"> diff --git a/src/components/react-hook-form/RadioFormField.tsx b/src/components/react-hook-form/RadioFormField.tsx index 07941ea4..31417306 100644 --- a/src/components/react-hook-form/RadioFormField.tsx +++ b/src/components/react-hook-form/RadioFormField.tsx @@ -8,7 +8,7 @@ export type RadioFormFieldFieldProps = Omit<RadioFieldProps, 'status'> & { } /** - * A [RadioField](../?path=/docs/components-form-radiofield--default-story) within the context of a `react-hook-form` form. + * A [RadioField](../?path=/docs/components-form-radiofield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `string`. */ diff --git a/src/components/react-hook-form/SelectFormField.tsx b/src/components/react-hook-form/SelectFormField.tsx index 385e91fd..dac996e9 100644 --- a/src/components/react-hook-form/SelectFormField.tsx +++ b/src/components/react-hook-form/SelectFormField.tsx @@ -30,7 +30,7 @@ export type SelectFormFieldProps< } /** - * A [SelectField](../?path=/docs/components-form-selectfield--default-story) within the context of a `react-hook-form` form. + * A [SelectField](../?path=/docs/components-form-selectfield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `string` by default. If `transformEmptyToNull` is `true` and the input is empty, `null` is returned. * diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.tsx index 3f30a1e9..4839ff85 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.tsx @@ -53,9 +53,9 @@ export type SelectItemFormFieldProps< > /* - * A [SelectItemField](../?path=/docs/components-form-selectitemfield--default-story) within the context of a `react-hook-form` form. + * A [SelectItemField](../?path=/docs/components-form-selectitemfield--docs) within the context of a `react-hook-form` form. * - * It is composed of the primitives [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 [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs) and [InputMessage](../?path=/docs/components-form-primitive-inputmessage--docs). */ export function SelectItemFormField< Item, diff --git a/src/components/react-hook-form/SelectMonthFormField.tsx b/src/components/react-hook-form/SelectMonthFormField.tsx index 6407ffc2..194744ee 100644 --- a/src/components/react-hook-form/SelectMonthFormField.tsx +++ b/src/components/react-hook-form/SelectMonthFormField.tsx @@ -9,7 +9,7 @@ export type SelectMonthFormField< > = Omit<SelectFormFieldProps<TFieldValues, TFieldName>, 'children'> /** - * A [SelectFormField](../?path=/docs/components-reacthookform-selectformfield--default-story) for months. + * A [SelectFormField](../?path=/docs/components-reacthookform-selectformfield--docs) for months. */ export const SelectMonthFormField = forwardRef(function SelectMonthFormField< TFieldValues extends FieldValues = FieldValues, diff --git a/src/components/react-hook-form/SelectYearFormField.tsx b/src/components/react-hook-form/SelectYearFormField.tsx index 0b50f38b..a3df0a59 100644 --- a/src/components/react-hook-form/SelectYearFormField.tsx +++ b/src/components/react-hook-form/SelectYearFormField.tsx @@ -10,7 +10,7 @@ export type SelectYearFormFieldProps< SelectYearFieldOptionsProps /** - * A [SelectFormField](../?path=/docs/components-reacthookform-selectformfield--default-story) for years. + * A [SelectFormField](../?path=/docs/components-reacthookform-selectformfield--docs) for years. */ export const SelectYearFormField = forwardRef(function SelectYearFormField< TFieldValues extends FieldValues = FieldValues, diff --git a/src/components/react-hook-form/TextAreaFormField.tsx b/src/components/react-hook-form/TextAreaFormField.tsx index 6deda5eb..f046518a 100644 --- a/src/components/react-hook-form/TextAreaFormField.tsx +++ b/src/components/react-hook-form/TextAreaFormField.tsx @@ -15,7 +15,7 @@ export type TextAreaFormFieldProps< > /** - * A [TextAreaField](../?path=/docs/components-form-fields-textareafield--default-story) within the context of a `react-hook-form` form. + * A [TextAreaField](../?path=/docs/components-form-fields-textareafield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `string` by default. If `transformEmptyToNull` is `true` and the input is empty, `null` is returned. */ diff --git a/src/components/react-hook-form/ToggleSwitchFormField.tsx b/src/components/react-hook-form/ToggleSwitchFormField.tsx index a08ad248..45cde5ed 100644 --- a/src/components/react-hook-form/ToggleSwitchFormField.tsx +++ b/src/components/react-hook-form/ToggleSwitchFormField.tsx @@ -12,7 +12,7 @@ export type ToggleSwitchFormFieldProps = Omit< } /** - * A [ToggleSwitchField](../?path=/docs/components-form-toggleswitchfield--default-story) within the context of a `react-hook-form` form. + * A [ToggleSwitchField](../?path=/docs/components-form-toggleswitchfield--docs) within the context of a `react-hook-form` form. * * The form value that is returned for validation is of type `boolean`. */ diff --git a/src/components/section/Section/SectionContentListLoading.stories.mdx b/src/components/section/Section/SectionContentListLoading.stories.mdx index e19445fd..cd1cf003 100644 --- a/src/components/section/Section/SectionContentListLoading.stories.mdx +++ b/src/components/section/Section/SectionContentListLoading.stories.mdx @@ -10,7 +10,7 @@ import { SectionContentListLoading } from './SectionContentListLoading' # SectionContentListLoading This component can be used as placeholders for lists during the fetch process. -Internally it leverages on the component [SectionLoadingListItem](/docs/components-section-sectionloadinglistitem--default-story) and is wrapped by a [SectionContentList](/docs/components-section-sectioncontentlist--default-story). +Internally it leverages on the component [SectionLoadingListItem](/docs/components-section-sectionloadinglistitem--docs) and is wrapped by a [SectionContentList](/docs/components-section-sectioncontentlist--docs). export const Template = ({ ...args }) => <SectionContentListLoading {...args} /> diff --git a/src/components/section/Section/SectionContentLoadingDetails.stories.mdx b/src/components/section/Section/SectionContentLoadingDetails.stories.mdx index f55d9f4f..b92182b7 100644 --- a/src/components/section/Section/SectionContentLoadingDetails.stories.mdx +++ b/src/components/section/Section/SectionContentLoadingDetails.stories.mdx @@ -10,7 +10,7 @@ import { SectionContentLoadingDetails } from './SectionContentLoadingDetails' # SectionContentLoadingDetails The component is used during the fetch process as a placeholder. -It will display the specified number of [LoadingDescriptionItems](/docs/components-content-loadingdescriptionitem--default-story) wrapped in a [SectionContent](/docs/components-section-sectioncontent--default-story). +It will display the specified number of [LoadingDescriptionItems](/docs/components-content-loadingdescriptionitem--docs) wrapped in a [SectionContent](/docs/components-section-sectioncontent--docs). export const Template = ({ ...args }) => ( <SectionContentLoadingDetails {...args} /> diff --git a/src/components/section/Section/SectionContentLoadingForm.stories.mdx b/src/components/section/Section/SectionContentLoadingForm.stories.mdx index bb05ec51..2135a27a 100644 --- a/src/components/section/Section/SectionContentLoadingForm.stories.mdx +++ b/src/components/section/Section/SectionContentLoadingForm.stories.mdx @@ -10,7 +10,7 @@ import { SectionContentLoadingForm } from './SectionContentLoadingForm' # SectionContentLoadingForm The component is used during the fetch process as a placeholder. -It will display the specified number of [LoadingInputs](/docs/components-loading-loadinginput--default-story) wrapped in a [SectionContent](/docs/components-section-sectioncontent--default-story). +It will display the specified number of [LoadingInputs](/docs/components-loading-loadinginput--docs) wrapped in a [SectionContent](/docs/components-section-sectioncontent--docs). export const Template = ({ ...args }) => <SectionContentLoadingForm {...args} /> diff --git a/src/components/section/Section/SectionContentMessage.stories.mdx b/src/components/section/Section/SectionContentMessage.stories.mdx index 1531405e..4b92a168 100644 --- a/src/components/section/Section/SectionContentMessage.stories.mdx +++ b/src/components/section/Section/SectionContentMessage.stories.mdx @@ -15,9 +15,9 @@ import { # SectionContentMessage -This component is used to show a [ContentMessage](/docs/components-content-contentmessage--default-story) wrapped in a [SectionContent](/docs/components-section-sectioncontent--default-story). +This component is used to show a [ContentMessage](/docs/components-content-contentmessage--docs) wrapped in a [SectionContent](/docs/components-section-sectioncontent--docs). -It should be placed inside a [SectionContainer](/docs/components-section-sectioncontainer--default-story). +It should be placed inside a [SectionContainer](/docs/components-section-sectioncontainer--docs). export const Template = (args) => <SectionContentMessage {...args} /> diff --git a/src/components/section/Section/SectionContentTitle.stories.mdx b/src/components/section/Section/SectionContentTitle.stories.mdx index c1e4d2ec..5c990742 100644 --- a/src/components/section/Section/SectionContentTitle.stories.mdx +++ b/src/components/section/Section/SectionContentTitle.stories.mdx @@ -9,7 +9,7 @@ import { SectionContentTitle } from './SectionContentTitle' # SectionContentTitle -This component can be used inside a [SectionContent](/docs/components-section-sectioncontent--default-story) if you need a large title. +This component can be used inside a [SectionContent](/docs/components-section-sectioncontent--docs) if you need a large title. export const Template = ({ children, ...args }) => ( <SectionContentTitle {...args}>{children}</SectionContentTitle> diff --git a/src/components/section/SectionFooter/SectionFooterWithActions.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithActions.stories.mdx index df111172..788b4188 100644 --- a/src/components/section/SectionFooter/SectionFooterWithActions.stories.mdx +++ b/src/components/section/SectionFooter/SectionFooterWithActions.stories.mdx @@ -11,7 +11,7 @@ import { SectionFooterWithActions } from './SectionFooterWithActions' This is a convenient component to create a `SectionFooterArea` with `Actions` quickly. -It leverages the components [SectionFooterArea](/docs/components-section-sectionfooterarea--default-story) and [Actions](/docs/components-actions-actions--default-story). +It leverages the components [SectionFooterArea](/docs/components-section-sectionfooterarea--docs) and [Actions](/docs/components-actions-actions--docs). export const Template = ({ children, ...args }) => ( <SectionFooterWithActions {...args}>{children}</SectionFooterWithActions> diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx index 3ee84add..59b980cf 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx @@ -9,7 +9,7 @@ import { SectionFooterWithPaginationInMemory } from './SectionFooterWithPaginati # SectionFooterWithPaginationInMemory -This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--default-story). +This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--docs). export const Template = (args) => { const [page, setPage] = useState(1) @@ -39,4 +39,4 @@ export const Template = (args) => { -The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--default-story#theme). +The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--docs#theme). diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx index 46827271..ecc1d32c 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx @@ -8,7 +8,7 @@ import { SectionFooterWithPaginationRouter } from './SectionFooterWithPagination # SectionFooterWithPaginationRouter -This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer) and [PaginationRouter](/docs/components-pagination-paginationrouter--default-story). +This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer) and [PaginationRouter](/docs/components-pagination-paginationrouter--docs). export const Template = (args) => { const currentParams = new URLSearchParams(window.parent.location.search) @@ -33,4 +33,4 @@ export const Template = (args) => { -The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationRouter](/docs/components-pagination-paginationrouter--default-story#theme). +The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationRouter](/docs/components-pagination-paginationrouter--docs#theme). diff --git a/src/components/section/SectionFooter/SectionFooterWithSubmit.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithSubmit.stories.mdx index 5294d57c..ee2689aa 100644 --- a/src/components/section/SectionFooter/SectionFooterWithSubmit.stories.mdx +++ b/src/components/section/SectionFooter/SectionFooterWithSubmit.stories.mdx @@ -27,7 +27,7 @@ import { SectionFooterWithSubmit } from './SectionFooterWithSubmit' This component can conveniently be used to add a section footer with a submit button. It also provices a feedback message when the form is submitted. -It leverages on [SectionFooterArea](/docs/components-section-sectionfooterarea--default-story), [SubmitButton](/docs/components-button-submitbutton--default-story) and [FormSubmitFeedback](/docs/components-form-formsubmitfeedback--default-story). +It leverages on [SectionFooterArea](/docs/components-section-sectionfooterarea--docs), [SubmitButton](/docs/components-button-submitbutton--docs) and [FormSubmitFeedback](/docs/components-form-formsubmitfeedback--docs). export const Template = (args) => <SectionFooterWithSubmit {...args} /> diff --git a/src/components/section/SectionHeader/SectionHeader.stories.mdx b/src/components/section/SectionHeader/SectionHeader.stories.mdx index 8750cb57..cdfcc316 100644 --- a/src/components/section/SectionHeader/SectionHeader.stories.mdx +++ b/src/components/section/SectionHeader/SectionHeader.stories.mdx @@ -7,7 +7,7 @@ import { SectionHeader } from './SectionHeader' This component can be used to create a section header swiftly. -It leverages the components [SectionHeaderArea](/docs/components-section-sectionheaderara--default-story) and [SectionHeaderTitle](/docs/components-section-sectionheadertitle--default-story). +It leverages the components [SectionHeaderArea](/docs/components-section-sectionheaderara--docs) and [SectionHeaderTitle](/docs/components-section-sectionheadertitle--docs). export const Template = ({ ...args }) => <SectionHeader {...args} /> diff --git a/src/components/section/SectionHeader/SectionHeaderSpacer/SectionHeaderSpacer.stories.mdx b/src/components/section/SectionHeader/SectionHeaderSpacer/SectionHeaderSpacer.stories.mdx index 6709c28c..e491b14c 100644 --- a/src/components/section/SectionHeader/SectionHeaderSpacer/SectionHeaderSpacer.stories.mdx +++ b/src/components/section/SectionHeader/SectionHeaderSpacer/SectionHeaderSpacer.stories.mdx @@ -15,7 +15,7 @@ import { SectionHeaderSpacerSize } from './types' This component is used to add a defined space to the bottom of `SectionHeader`. It has to be inserted as the very last element in the `SectionHeader`. It is best used when you have a multi-row header with search or filters. -Check the [List examples](/docs/examples-list--default-story) to see how to use it. +Check the [List examples](/docs/examples-list--docs) to see how to use it. export const Template = ({ ...args }) => <SectionHeaderSpacer {...args} /> diff --git a/src/components/section/SectionItem/SectionLoadingListItem.stories.mdx b/src/components/section/SectionItem/SectionLoadingListItem.stories.mdx index 3e298b56..d12560d5 100644 --- a/src/components/section/SectionItem/SectionLoadingListItem.stories.mdx +++ b/src/components/section/SectionItem/SectionLoadingListItem.stories.mdx @@ -9,7 +9,7 @@ import { SectionLoadingListItem } from './SectionLoadingListItem' # SectionLoadingListItem -This component can be used as placeholders for items during the fetch process. It is mainly used together with [SectionContenListLoading](/docs/components-section-sectioncontentlistloading--default-story) to generate a placeholder for lists during the fetch process. +This component can be used as placeholders for items during the fetch process. It is mainly used together with [SectionContenListLoading](/docs/components-section-sectioncontentlistloading--docs) to generate a placeholder for lists during the fetch process. export const Template = ({ ...args }) => <SectionLoadingListItem {...args} />