diff --git a/components/badge/src/stories/readme.stories.mdx b/components/badge/src/stories/readme.stories.mdx deleted file mode 100644 index 4b1e1542434..00000000000 --- a/components/badge/src/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/badge/src/stories/tokens.stories.mdx b/components/badge/src/stories/tokens.stories.mdx deleted file mode 100644 index 4e27685e902..00000000000 --- a/components/badge/src/stories/tokens.stories.mdx +++ /dev/null @@ -1,16 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; -import tokensDefinition from "../../src/tokens.json"; - - - -# Badge Design Tokens - - diff --git a/components/form-control/src/stories/readme.stories.mdx b/components/form-control/src/stories/readme.stories.mdx deleted file mode 100644 index 80b9ef68126..00000000000 --- a/components/form-control/src/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/form-control/src/stories/tokens.stories.mdx b/components/form-control/src/stories/tokens.stories.mdx deleted file mode 100644 index 50c1dc48783..00000000000 --- a/components/form-control/src/stories/tokens.stories.mdx +++ /dev/null @@ -1,16 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; -import tokensDefinition from "../../src/tokens.json"; - - - -# Common design tokens for form control - - diff --git a/components/search-bar/src/stories/default.stories.mdx b/components/search-bar/src/stories/default.stories.mdx deleted file mode 100644 index 61f425bf375..00000000000 --- a/components/search-bar/src/stories/default.stories.mdx +++ /dev/null @@ -1,54 +0,0 @@ -{/* @license CC0-1.0 */} - -import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks"; -import { argTypes, defaultArgs, exampleArgs, SearchBar } from "../story-template"; -import "../../../textbox/src/index.scss"; -import "../../../button/src/index.scss"; -import "../index.scss"; - - - -# Search Bar - - - - {SearchBar.bind({})} - - - -# Search Bar dropdown is open - - - - {SearchBar.bind({})} - - - -# is Selected - - - - {SearchBar.bind({})} - - - -# is Active - - - - {SearchBar.bind({})} - - - - diff --git a/components/search-bar/src/stories/readme.stories.mdx b/components/search-bar/src/stories/readme.stories.mdx deleted file mode 100644 index 9d92622d142..00000000000 --- a/components/search-bar/src/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/search-bar/src/stories/tokens.stories.mdx b/components/search-bar/src/stories/tokens.stories.mdx deleted file mode 100644 index e95eecadf9d..00000000000 --- a/components/search-bar/src/stories/tokens.stories.mdx +++ /dev/null @@ -1,16 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; -import tokensDefinition from "../../src/tokens.json"; - - - -# Search Bar Design Tokens - - diff --git a/components/search-bar/src/story-template.jsx b/components/search-bar/src/story-template.jsx deleted file mode 100644 index 6241241b683..00000000000 --- a/components/search-bar/src/story-template.jsx +++ /dev/null @@ -1,165 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2022 Gemeente Utrecht - * Copyright (c) 2022 Frameless B.V. - */ -import clsx from 'clsx'; -import React from 'react'; - -export const SearchBarDropdown = ({ isSelected, isActive }) => ( -
-
- Section #1 -
    -
  • - Option #1 -
    • -
  • - Option #2 -
    • -
  • - Option #3 -
    • -
-
-
- Section #2 -
    -
  • - Option #1 -
    • -
  • - Option #2 -
    • -
  • - Option #3 -
    • -
-
-
-); - -export const argTypes = { - buttonLabel: { - description: 'Label for the searchbar button', - type: 'text', - }, - formLabel: { - description: 'Label for the searchbar', - type: 'text', - }, - inputLabel: { - description: 'Label for the search input', - type: 'text', - }, - value: { - description: 'Current search term', - type: 'text', - }, - isOpen: { - type: 'boolean', - }, - isActive: { - type: 'boolean', - }, - isSelected: { - type: 'boolean', - }, -}; - -export const defaultArgs = { - buttonLabel: '', - formLabel: '', - inputLabel: '', - value: '', - isOpen: false, - isActive: false, - isSelected: false, -}; - -export const exampleArgs = { - buttonLabel: 'Zoeken', - formLabel: 'zoeken in Utrecht.nl', - inputLabel: 'zoektermen', - value: '', - isOpen: false, - isActive: false, - isSelected: false, -}; - -export const SearchBar = ({ - buttonLabel = defaultArgs.buttonLabel, - formLabel = defaultArgs.formLabel, - inputLabel = defaultArgs.inputLabel, - value = defaultArgs.value, - isOpen = defaultArgs.isOpen, - isActive = defaultArgs.isActive, - isSelected = defaultArgs.isSelected, -}) => ( -
-
- - -
- {isOpen && } - -); - -export default SearchBar; diff --git a/components/templates/contact-card-template/css/stories/default.stories.mdx b/components/templates/contact-card-template/css/stories/default.stories.mdx deleted file mode 100644 index ea8501ea042..00000000000 --- a/components/templates/contact-card-template/css/stories/default.stories.mdx +++ /dev/null @@ -1,22 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Canvas, Meta, Story } from "@storybook/blocks"; -import { ContactCardTemplate } from "../story-template"; -import "../index.scss"; - - - -# Contact Card - - - {ContactCardTemplate.bind({})} - diff --git a/components/templates/contact-card-template/css/story-template.jsx b/components/templates/contact-card-template/css/story-template.jsx deleted file mode 100644 index 071d971b658..00000000000 --- a/components/templates/contact-card-template/css/story-template.jsx +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2022 Gemeente Utrecht - * Copyright (c) 2022 Frameless B.V. - */ -import React from 'react'; - -export const ContactCardTemplate = () => ( -
-

Hulp en contact

-
-
-

Telefoon

-

- - 14 030 - -

-

Maandag t/m vrijdag 8.30 – 17.30 uur

-
-
-

E-mail

-

- - reactieformulier - -

-
-
-
-); - -export default ContactCardTemplate; diff --git a/components/button/docs/accessibility.stories.mdx b/packages/storybook-css/src/old-button-stories/accessibility.stories.mdx similarity index 67% rename from components/button/docs/accessibility.stories.mdx rename to packages/storybook-css/src/old-button-stories/accessibility.stories.mdx index 6e8c5f15b36..460305c0a99 100644 --- a/components/button/docs/accessibility.stories.mdx +++ b/packages/storybook-css/src/old-button-stories/accessibility.stories.mdx @@ -1,5 +1,5 @@ import { Markdown, Meta } from "@storybook/blocks"; -import document from "./accessibility.md"; +import document from "@utrecht/button-css/docs/accessibility.md"; diff --git a/components/button/docs/onderzoek.stories.mdx b/packages/storybook-css/src/old-button-stories/onderzoek.stories.mdx similarity index 68% rename from components/button/docs/onderzoek.stories.mdx rename to packages/storybook-css/src/old-button-stories/onderzoek.stories.mdx index e6d9604ba9e..8c870e8dce3 100644 --- a/components/button/docs/onderzoek.stories.mdx +++ b/packages/storybook-css/src/old-button-stories/onderzoek.stories.mdx @@ -1,5 +1,5 @@ import { Markdown, Meta } from "@storybook/blocks"; -import document from "./onderzoek.md"; +import document from "@utrecht/button-css/docs/onderzoek.md"; diff --git a/components/button/docs/ux-guidelines.stories.mdx b/packages/storybook-css/src/old-button-stories/ux-guidelines.stories.mdx similarity index 67% rename from components/button/docs/ux-guidelines.stories.mdx rename to packages/storybook-css/src/old-button-stories/ux-guidelines.stories.mdx index 6f7d66a36b1..677d489abc7 100644 --- a/components/button/docs/ux-guidelines.stories.mdx +++ b/packages/storybook-css/src/old-button-stories/ux-guidelines.stories.mdx @@ -1,5 +1,5 @@ import { Markdown, Meta } from "@storybook/blocks"; -import document from "./ux-guidelines.md"; +import document from "@utrecht/button-css/docs/ux-guidelines.md"; diff --git a/components/form-field/src/stories/_email.md b/packages/storybook-css/src/old-form-fieldstories/_email.md similarity index 100% rename from components/form-field/src/stories/_email.md rename to packages/storybook-css/src/old-form-fieldstories/_email.md diff --git a/components/form-field/src/stories/_new-password.md b/packages/storybook-css/src/old-form-fieldstories/_new-password.md similarity index 100% rename from components/form-field/src/stories/_new-password.md rename to packages/storybook-css/src/old-form-fieldstories/_new-password.md diff --git a/components/form-field/src/stories/_tel.md b/packages/storybook-css/src/old-form-fieldstories/_tel.md similarity index 100% rename from components/form-field/src/stories/_tel.md rename to packages/storybook-css/src/old-form-fieldstories/_tel.md diff --git a/components/form-field/src/stories/checkbox-group.stories.mdx b/packages/storybook-css/src/old-form-fieldstories/checkbox-group.stories.mdx similarity index 97% rename from components/form-field/src/stories/checkbox-group.stories.mdx rename to packages/storybook-css/src/old-form-fieldstories/checkbox-group.stories.mdx index e5873a9dd5f..01cb41ad200 100644 --- a/components/form-field/src/stories/checkbox-group.stories.mdx +++ b/packages/storybook-css/src/old-form-fieldstories/checkbox-group.stories.mdx @@ -1,10 +1,7 @@ {/* @license CC0-1.0 */} import { Canvas, Meta, Story } from "@storybook/blocks"; -import { argTypes, defaultArgs, exampleArgs, FormFieldCheckboxGroup } from "../story-template"; -import "../../../checkbox/src/index.scss"; -import "../../../form-label/src/index.scss"; -import "../index.scss"; +import { argTypes, defaultArgs, exampleArgs, FormFieldCheckboxGroup } from "./story-template"; diff --git a/components/form-field/src/stories/rtl.stories.mdx b/packages/storybook-css/src/old-form-fieldstories/rtl.stories.mdx similarity index 99% rename from components/form-field/src/stories/rtl.stories.mdx rename to packages/storybook-css/src/old-form-fieldstories/rtl.stories.mdx index 5e98f9a3f33..33cd51b5742 100644 --- a/components/form-field/src/stories/rtl.stories.mdx +++ b/packages/storybook-css/src/old-form-fieldstories/rtl.stories.mdx @@ -1,7 +1,7 @@ {/* @license CC0-1.0 */} import { Canvas, Meta, Story } from "@storybook/blocks"; -import { arabicDecorator, argTypes, defaultArgs, exampleArgs, FormFieldTextbox } from "../story-template"; +import { arabicDecorator, argTypes, defaultArgs, exampleArgs, FormFieldTextbox } from "./story-template"; export const PlaceholderRTLWarning = () => `Let op: dit is helaas nog niet gelukt om de placeholder automatisch rechts uit te lijnen, wanneer de tekst van de diff --git a/components/form-field/src/story-template.jsx b/packages/storybook-css/src/old-form-fieldstories/story-template.jsx similarity index 82% rename from components/form-field/src/story-template.jsx rename to packages/storybook-css/src/old-form-fieldstories/story-template.jsx index cfc9d2e897f..825ced49c73 100644 --- a/components/form-field/src/story-template.jsx +++ b/packages/storybook-css/src/old-form-fieldstories/story-template.jsx @@ -4,21 +4,25 @@ * Copyright (c) 2021-2024 Gemeente Utrecht */ +import { + Checkbox, + Fieldset, + FieldsetLegend, + FormFieldDescription, + FormFieldErrorMessage, + FormLabel, + Heading1, + Heading2, + Heading3, + Heading4, + Heading5, + Heading6, + RadioButton, + Textarea, + Textbox, +} from '@utrecht/component-library-react'; import clsx from 'clsx'; import React from 'react'; -import { Checkbox } from '../../checkbox/src/story-template'; -import { FormFieldDescription } from '../../form-field-description/src/story-template'; -import { FormFieldset, FormFieldsetLegend } from '../../form-fieldset/src/story-template'; -import { FormLabel } from '../../form-label/src/story-template'; -import { Heading1 } from '../../heading-1/src/story-template'; -import { Heading2 } from '../../heading-2/src/story-template'; -import { Heading3 } from '../../heading-3/src/story-template'; -import { Heading4 } from '../../heading-4/src/story-template'; -import { Heading5 } from '../../heading-5/src/story-template'; -import { Heading6 } from '../../heading-6/src/story-template'; -import { RadioButton } from '../../radio-button/src/story-template'; -import { Textarea } from '../../textarea/src/story-template'; -import { Textbox } from '../../textbox/src/story-template'; export const argTypes = { invalid: { @@ -122,9 +126,9 @@ export const FormFieldTextbox = ({ ) : undefined} {invalidDescription ? ( - + {invalidDescription} - + ) : undefined} ) : undefined} {invalidDescription ? ( - + {invalidDescription} - + ) : undefined} {!implicitLabel && checkbox} @@ -209,17 +213,15 @@ export const FormFieldCheckboxGroup = ({ const groupInvalidDescriptionId = groupInvalidDescription ? `${groupId}-invalid-description` : null; const groupDescribedByIds = [groupDescriptionId, groupInvalidDescriptionId].filter(Boolean).join(' '); return ( - - +
+ {headingLevel ? {groupLabel} : groupLabel} - + {groupDescriptionId ? ( {groupDescription} ) : undefined} {groupInvalidDescriptionId ? ( - - {groupInvalidDescription} - + {groupInvalidDescription} ) : undefined} {options.map(({ description, checked, id, invalid, invalidDescription, label, name, value }) => { const descriptionId = `${id}-description`; @@ -252,7 +254,7 @@ export const FormFieldCheckboxGroup = ({ {invalidDescription} @@ -261,7 +263,7 @@ export const FormFieldCheckboxGroup = ({ ); })} - +
); }; @@ -281,17 +283,15 @@ export const FormFieldRadioGroup = ({ const groupDescribedByIds = [groupDescriptionId, groupInvalidDescriptionId].filter(Boolean); const groupDescribedBy = groupDescribedByIds.length ? groupDescribedByIds.join(' ') : undefined; return ( - - +
+ {headingLevel ? {groupLabel} : groupLabel} - + {groupDescription ? ( {groupDescription} ) : undefined} {groupInvalidDescription ? ( - - {groupInvalidDescription} - + {groupInvalidDescription} ) : undefined} {options.map(({ id, label, description, invalidDescription, value }) => { const descriptionId = description ? `${id}-description` : null; @@ -320,19 +320,15 @@ export const FormFieldRadioGroup = ({ ) : undefined} {invalidDescription ? ( - + {invalidDescription} - + ) : undefined} {!implicitLabel && input} ); })} - +
); }; diff --git a/components/form-field/src/stories/textbox.stories.mdx b/packages/storybook-css/src/old-form-fieldstories/textbox.stories.mdx similarity index 96% rename from components/form-field/src/stories/textbox.stories.mdx rename to packages/storybook-css/src/old-form-fieldstories/textbox.stories.mdx index 51295f2abc1..dd69a4a6f35 100644 --- a/components/form-field/src/stories/textbox.stories.mdx +++ b/packages/storybook-css/src/old-form-fieldstories/textbox.stories.mdx @@ -1,8 +1,8 @@ {/* @license CC0-1.0 */} import { Canvas, Meta, Story } from "@storybook/blocks"; -import { Textarea } from "../../../textarea/src/story-template"; -import { argTypes, defaultArgs, exampleArgs, FormFieldTextbox } from "../story-template"; +import { Textarea } from "@utrecht/component-library-react"; +import { argTypes, defaultArgs, exampleArgs, FormFieldTextbox } from "./story-template";