From 160f1638723840a78f2f9d236ec5eb2ac7e1d330 Mon Sep 17 00:00:00 2001 From: Mladen Planinicic Date: Tue, 5 Dec 2023 09:17:09 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore():=20improve=20docs=20(#11?= =?UTF-8?q?18)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(): improve docs * chore(): improve docs * chore(): refactor --------- Co-authored-by: Mladen Planinicic --- .../components/bal-checkbox/bal-checkbox.mdx | 2 +- .../bal-checkbox/bal-checkbox.stories.ts | 8 +-- .../bal-content/bal-content.stories.ts | 6 +- .../components/bal-data/bal-data.stories.ts | 20 +++--- .../components/bal-date/bal-date.stories.ts | 6 +- .../bal-divider/bal-divider.stories.ts | 8 +-- .../components/bal-field/bal-field.stories.ts | 4 +- .../bal-file-upload.stories.ts | 2 +- .../bal-form-grid/bal-form-grid.stories.ts | 2 +- .../components/bal-form/bal-form.stories.ts | 4 +- .../components/bal-hint/bal-hint.stories.ts | 8 +-- .../bal-input-group.stories.ts | 10 ++- .../bal-input-slider.stories.ts | 8 +-- .../components/bal-input/bal-input.stories.ts | 14 ++--- .../components/bal-label/bal-label.stories.ts | 6 +- .../components/bal-list/bal-list.stories.ts | 61 ++++++++++--------- .../components/bal-modal/bal-modal.stories.ts | 2 +- .../bal-navbar/bal-navbar.stories.ts | 34 +++++------ .../bal-number-input.stories.ts | 8 +-- .../components/bal-popup/bal-popup.stories.ts | 5 +- .../components/bal-radio/bal-radio.stories.ts | 5 +- .../bal-select/bal-select.stories.ts | 6 +- .../components/bal-stack/bal-stack.stories.ts | 12 ++-- .../components/bal-steps/bal-steps.stories.ts | 8 +-- .../bal-table/bal-table.templates.ts | 18 +++--- .../components/bal-tabs/bal-tabs.stories.ts | 10 +-- .../components/bal-tag/bal-tag.stories.ts | 10 +-- .../bal-textarea/bal-textarea.stories.ts | 8 +-- .../bal-tooltip/bal-tooltip.stories.ts | 4 +- 29 files changed, 124 insertions(+), 175 deletions(-) diff --git a/docs/stories/components/bal-checkbox/bal-checkbox.mdx b/docs/stories/components/bal-checkbox/bal-checkbox.mdx index dd21eb6568..b37e178654 100644 --- a/docs/stories/components/bal-checkbox/bal-checkbox.mdx +++ b/docs/stories/components/bal-checkbox/bal-checkbox.mdx @@ -53,7 +53,7 @@ export class ExampleComponent { Combine the component with the `bal-field` components to add a label, validation message and more. - + {/* ------------------------------------------------------ */} diff --git a/docs/stories/components/bal-checkbox/bal-checkbox.stories.ts b/docs/stories/components/bal-checkbox/bal-checkbox.stories.ts index a063fd9368..4677a87ee9 100644 --- a/docs/stories/components/bal-checkbox/bal-checkbox.stories.ts +++ b/docs/stories/components/bal-checkbox/bal-checkbox.stories.ts @@ -112,7 +112,7 @@ export const FilterButtons = Story({ () => ` Label - + Label @@ -138,7 +138,7 @@ export const CheckboxButton = Story({ Simple checkbox button - + @@ -148,7 +148,7 @@ export const CheckboxButton = Story({ Checkbox button with a switch Checkboxes allow users to select one or more items from a set. Checkboxes can turn one or more option(s) on or off. - + @@ -158,7 +158,7 @@ export const CheckboxButton = Story({ Invalid button Checkboxes allow users to select one or more items from a set. Checkboxes can turn one or more option(s) on or off. - + diff --git a/docs/stories/components/bal-content/bal-content.stories.ts b/docs/stories/components/bal-content/bal-content.stories.ts index d6c46c7751..9134fa3a66 100644 --- a/docs/stories/components/bal-content/bal-content.stories.ts +++ b/docs/stories/components/bal-content/bal-content.stories.ts @@ -1,16 +1,12 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalContent & { content: string } const meta: Meta = { title: 'Components/Layout/Content', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-content' }), }, ...withRender( diff --git a/docs/stories/components/bal-data/bal-data.stories.ts b/docs/stories/components/bal-data/bal-data.stories.ts index 71655f5b06..fe527f97ea 100644 --- a/docs/stories/components/bal-data/bal-data.stories.ts +++ b/docs/stories/components/bal-data/bal-data.stories.ts @@ -1,18 +1,16 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalData & { content: string } const meta: Meta = { title: 'Components/Data Display/Data', args: { - ...withDefaultContent(), border: true, horizontal: false, }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-data' }), }, ...withRender( @@ -41,6 +39,9 @@ const Story = StoryFactory(meta) export const Basic = Story() export const Horizontal = Story({ + args: { + horizontal: true, + }, ...withRender( ({ ...args }) => ` @@ -61,10 +62,6 @@ export const Horizontal = Story({ `, ), - args: { - border: false, - horizontal: true, - }, }) export const DataTypes = Story({ @@ -78,11 +75,11 @@ export const DataTypes = Story({ Multiline Label - A very long value, that should go break to the next line. I really hope that this works :-) + A very long value, that should go break to the next line. I really hope that this works :-) List Value - +
  • Value 1
  • Value 2
    • @@ -95,7 +92,7 @@ export const DataTypes = Story({ Editable Multiline - A very long value, that should go break to the next line. I really hope that this works :-) + A very long value, that should go break to the next line. I really hope that this works :-) Disabled @@ -119,7 +116,4 @@ export const DataTypes = Story({ `, ), - args: { - border: true, - }, }) diff --git a/docs/stories/components/bal-date/bal-date.stories.ts b/docs/stories/components/bal-date/bal-date.stories.ts index 9cdc1b5f63..0310cff930 100644 --- a/docs/stories/components/bal-date/bal-date.stories.ts +++ b/docs/stories/components/bal-date/bal-date.stories.ts @@ -1,20 +1,18 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalDate & { content: string } const meta: Meta = { title: 'Components/Form/Date', args: { - ...withDefaultContent(''), placeholder: 'Pick a date', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-date' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta diff --git a/docs/stories/components/bal-divider/bal-divider.stories.ts b/docs/stories/components/bal-divider/bal-divider.stories.ts index 39e56c8c63..b4b6d9e911 100644 --- a/docs/stories/components/bal-divider/bal-divider.stories.ts +++ b/docs/stories/components/bal-divider/bal-divider.stories.ts @@ -1,19 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalDivider & { content: string } const meta: Meta = { title: 'Components/Layout/Divider', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-divider' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta diff --git a/docs/stories/components/bal-field/bal-field.stories.ts b/docs/stories/components/bal-field/bal-field.stories.ts index c49db20ecb..4e666ef039 100644 --- a/docs/stories/components/bal-field/bal-field.stories.ts +++ b/docs/stories/components/bal-field/bal-field.stories.ts @@ -1,19 +1,17 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalField & { content: string } const meta: Meta = { title: 'Components/Form/Field', args: { - ...withDefaultContent(''), placeholder: 'Enter your firstname', name: 'firstName', id: 'bal-input-1', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-field' }), }, ...withRender( diff --git a/docs/stories/components/bal-file-upload/bal-file-upload.stories.ts b/docs/stories/components/bal-file-upload/bal-file-upload.stories.ts index 2a35c1de23..f9126bca12 100644 --- a/docs/stories/components/bal-file-upload/bal-file-upload.stories.ts +++ b/docs/stories/components/bal-file-upload/bal-file-upload.stories.ts @@ -24,7 +24,7 @@ const meta: Meta = { const section: HTMLElement = document.createElement('section') section.innerHTML = ` - Upload Label + Upload Label diff --git a/docs/stories/components/bal-form-grid/bal-form-grid.stories.ts b/docs/stories/components/bal-form-grid/bal-form-grid.stories.ts index c1602e0143..f720876005 100644 --- a/docs/stories/components/bal-form-grid/bal-form-grid.stories.ts +++ b/docs/stories/components/bal-form-grid/bal-form-grid.stories.ts @@ -186,7 +186,7 @@ export const FormStructure = Story({ Multiple Select - + Argau Basel Basel-Land diff --git a/docs/stories/components/bal-form/bal-form.stories.ts b/docs/stories/components/bal-form/bal-form.stories.ts index 3797ebfd70..88c8009e52 100644 --- a/docs/stories/components/bal-form/bal-form.stories.ts +++ b/docs/stories/components/bal-form/bal-form.stories.ts @@ -148,7 +148,7 @@ export const Autocomplete = Story({ Firstname - + Field Message @@ -157,7 +157,7 @@ export const Autocomplete = Story({ Lastname - + Field Message diff --git a/docs/stories/components/bal-hint/bal-hint.stories.ts b/docs/stories/components/bal-hint/bal-hint.stories.ts index 83dd505d22..7eaed0fa77 100644 --- a/docs/stories/components/bal-hint/bal-hint.stories.ts +++ b/docs/stories/components/bal-hint/bal-hint.stories.ts @@ -1,16 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalHint & { content: string } const meta: Meta = { title: 'Components/Data Display/Hint', args: { - ...withDefaultContent(), + small: true, }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-hint' }), }, ...withRender( @@ -37,9 +36,6 @@ const Story = StoryFactory(meta) export const Basic = Story() export const TooltipHint = Story({ - args: { - small: true, - }, ...withRender( ({ ...args }) => ` diff --git a/docs/stories/components/bal-input-group/bal-input-group.stories.ts b/docs/stories/components/bal-input-group/bal-input-group.stories.ts index e7ef5c555a..bb34bef64b 100644 --- a/docs/stories/components/bal-input-group/bal-input-group.stories.ts +++ b/docs/stories/components/bal-input-group/bal-input-group.stories.ts @@ -1,17 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalInputGroup & { content: string } const meta: Meta = { title: 'Components/Form/InputGroup', args: { - ...withDefaultContent(), placeholder: 'Enter text here', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-input-group' }), }, ...withRender( @@ -42,9 +40,9 @@ const meta: Meta = { - Tag - Tag - Tag + Tag + Tag + Tag `, diff --git a/docs/stories/components/bal-input-slider/bal-input-slider.stories.ts b/docs/stories/components/bal-input-slider/bal-input-slider.stories.ts index 6faefa0f92..ed4e9994b4 100644 --- a/docs/stories/components/bal-input-slider/bal-input-slider.stories.ts +++ b/docs/stories/components/bal-input-slider/bal-input-slider.stories.ts @@ -1,19 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalInputSlider & { content: string } const meta: Meta = { title: 'Components/Form/InputSlider', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-input-slider' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta diff --git a/docs/stories/components/bal-input/bal-input.stories.ts b/docs/stories/components/bal-input/bal-input.stories.ts index a2d0eb581c..87efa04f43 100644 --- a/docs/stories/components/bal-input/bal-input.stories.ts +++ b/docs/stories/components/bal-input/bal-input.stories.ts @@ -1,19 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalInput & { content: string } const meta: Meta = { title: 'Components/Form/Input', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-input' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta @@ -115,7 +111,7 @@ export const OfferNumberInput = Story({ export const PostalCodeInput = Story({ args: { - placeholder: 'Enter a text"', + placeholder: 'Enter a text', type: 'text', value: '4000', }, @@ -132,7 +128,7 @@ export const PostalCodeInput = Story({ export const SimplePhoneNumberInput = Story({ args: { - placeholder: 'Enter a text"', + placeholder: 'Enter a text', type: 'tel', value: '4004166555443300', }, @@ -149,7 +145,7 @@ export const SimplePhoneNumberInput = Story({ export const NativeInput = Story({ args: { - placeholder: 'Text input"', + placeholder: 'Text input', type: 'tel', }, ...withRender( diff --git a/docs/stories/components/bal-label/bal-label.stories.ts b/docs/stories/components/bal-label/bal-label.stories.ts index cb12495516..93516ffa81 100644 --- a/docs/stories/components/bal-label/bal-label.stories.ts +++ b/docs/stories/components/bal-label/bal-label.stories.ts @@ -41,10 +41,10 @@ export const States = Story({ ...withRender( () => `
    - Invalid Label + Invalid Label
    - Disabled Label + Disabled Label
    `, ), @@ -69,7 +69,7 @@ export const Sizes = Story({ export const FieldLabel = Story({ ...withRender( () => ` - Field Label + Field Label diff --git a/docs/stories/components/bal-list/bal-list.stories.ts b/docs/stories/components/bal-list/bal-list.stories.ts index 75ea089502..9c3ea81ae9 100644 --- a/docs/stories/components/bal-list/bal-list.stories.ts +++ b/docs/stories/components/bal-list/bal-list.stories.ts @@ -43,12 +43,12 @@ const meta: Meta = { Secondary text - + Clickable item - + Disabled item Subtitle @@ -126,33 +126,34 @@ export const NativeList = Story({ export const LinkedList = Story({ args: { border: true, + content: undefined, }, ...withRender( ({ ...args }) => ` - + Internal Link - + - + External Link Description - + - + Disabled Link Description - + @@ -165,11 +166,12 @@ export const DownloadList = Story({ args: { border: true, size: 'large', + content: undefined, }, ...withRender( ({ ...args }) => ` - + @@ -177,12 +179,12 @@ export const DownloadList = Story({ Document PDF - 98KB - + - + @@ -190,12 +192,12 @@ export const DownloadList = Story({ Picture PNG - 140KB - + - + @@ -203,12 +205,12 @@ export const DownloadList = Story({ Video File MP4 - 61MB - + - + @@ -216,12 +218,12 @@ export const DownloadList = Story({ Audio File MP3 - 3MB - + - + @@ -229,7 +231,7 @@ export const DownloadList = Story({ Disabled Document PDF - 98KB - + @@ -242,6 +244,7 @@ export const AccordionList = Story({ args: { border: true, size: 'small', + content: undefined, }, ...withRender( ({ ...args }) => ` @@ -257,7 +260,7 @@ export const AccordionList = Story({ Die Versicherungssumme hängt von der Anzahl Zimmer sowie der Anzahl Personen im Haushalt ab. Ein weiterer wichtiger Punkt ist der Einrichtungsstandard. Geben Sie diese Informationen in unseren Prämienrechner ein. Anhand von Durchschnittswerten erhalten Sie dann einen Vorschlag für die passende Versicherungssumme. Oder nutzen Sie unser Formular «Ermittlung der Versicherungssumme für den Hausrat», um den genauen Betrag zu berechnen. - + @@ -278,11 +281,12 @@ export const AccordionListNested = Story({ args: { border: true, accordionOneLevel: true, + content: undefined, }, ...withRender( ({ ...args }) => ` - + Switzerland @@ -291,7 +295,7 @@ export const AccordionListNested = Story({ - + Basel @@ -300,7 +304,7 @@ export const AccordionListNested = Story({ - + Aeschengraben @@ -321,7 +325,7 @@ export const AccordionListNested = Story({ - + Zürich @@ -330,7 +334,7 @@ export const AccordionListNested = Story({ - + Limmatplazt @@ -355,7 +359,7 @@ export const AccordionListNested = Story({ - + Belgium @@ -363,7 +367,7 @@ export const AccordionListNested = Story({ - + Brüssel @@ -390,13 +394,14 @@ export const AccordionListNested = Story({ export const AccordionListGrouped = Story({ args: { border: true, + content: undefined, }, ...withRender( ({ ...args }) => `
    - + @@ -418,7 +423,7 @@ export const AccordionListGrouped = Story({
    - + diff --git a/docs/stories/components/bal-modal/bal-modal.stories.ts b/docs/stories/components/bal-modal/bal-modal.stories.ts index c10872fa53..74637456fb 100644 --- a/docs/stories/components/bal-modal/bal-modal.stories.ts +++ b/docs/stories/components/bal-modal/bal-modal.stories.ts @@ -34,7 +34,7 @@ const meta: Meta = { }, args: { ...withDefaultContent(`

    Lorem ipsum dolor sit amet, consectetur adipiscing?

    - + Cancel Okay `), diff --git a/docs/stories/components/bal-navbar/bal-navbar.stories.ts b/docs/stories/components/bal-navbar/bal-navbar.stories.ts index e32f9a7cea..24a2dca93f 100644 --- a/docs/stories/components/bal-navbar/bal-navbar.stories.ts +++ b/docs/stories/components/bal-navbar/bal-navbar.stories.ts @@ -17,7 +17,7 @@ const meta: Meta = { App Header - + @@ -26,22 +26,22 @@ const meta: Meta = { - + DE - - + + English - + Français - + Italiano @@ -49,7 +49,7 @@ const meta: Meta = { - + @@ -78,22 +78,22 @@ export const Simple = Story({ - + DE - + English - + Français - + Italiano @@ -101,7 +101,7 @@ export const Simple = Story({ - + Call us @@ -121,22 +121,22 @@ export const Light = Story({ - + DE - - + + English - + Français - + Italiano diff --git a/docs/stories/components/bal-number-input/bal-number-input.stories.ts b/docs/stories/components/bal-number-input/bal-number-input.stories.ts index cb4fa7d93c..55b4dcc77e 100644 --- a/docs/stories/components/bal-number-input/bal-number-input.stories.ts +++ b/docs/stories/components/bal-number-input/bal-number-input.stories.ts @@ -1,19 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalNumberInput & { content: string } const meta: Meta = { title: 'Components/Form/NumberInput', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-number-input' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta diff --git a/docs/stories/components/bal-popup/bal-popup.stories.ts b/docs/stories/components/bal-popup/bal-popup.stories.ts index 2ac34937ee..f124c75c5c 100644 --- a/docs/stories/components/bal-popup/bal-popup.stories.ts +++ b/docs/stories/components/bal-popup/bal-popup.stories.ts @@ -1,19 +1,16 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalBadge & { content: string } const meta: Meta = { title: 'Components/Data Display/Popup', args: { - ...withDefaultContent(), label: 'Popup Label', backdropDismiss: 'true', - content: '', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-popup' }), }, ...withRender( diff --git a/docs/stories/components/bal-radio/bal-radio.stories.ts b/docs/stories/components/bal-radio/bal-radio.stories.ts index abe26efafd..8b52d0a776 100644 --- a/docs/stories/components/bal-radio/bal-radio.stories.ts +++ b/docs/stories/components/bal-radio/bal-radio.stories.ts @@ -1,6 +1,6 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' import { balBrandIconCarGreen } from '@baloise/design-system-brand-icons' import { balBrandIconCarRed } from '@baloise/design-system-brand-icons' import { balBrandIconCarPurple } from '@baloise/design-system-brand-icons' @@ -10,12 +10,9 @@ type Args = JSX.BalRadio & { content: string } const meta: Meta = { title: 'Components/Form/Radio', args: { - ...withDefaultContent(''), name: 'radio-example', - content: undefined, }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-radio' }), }, ...withRender( diff --git a/docs/stories/components/bal-select/bal-select.stories.ts b/docs/stories/components/bal-select/bal-select.stories.ts index 6e0cda3383..a7b139bb43 100644 --- a/docs/stories/components/bal-select/bal-select.stories.ts +++ b/docs/stories/components/bal-select/bal-select.stories.ts @@ -1,17 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory, newCodeSandboxFile } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory, newCodeSandboxFile } from '../../utils' type Args = JSX.BalSelect & { content: string } const meta: Meta = { title: 'Components/Form/Select', args: { - ...withDefaultContent(''), value: 'v2000', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-select' }), }, ...withRender( @@ -65,7 +63,6 @@ export const Typeahead = Story({ placeholder: 'Try finding your hero', typeahead: true, value: undefined, - content: undefined, }, ...withRender( ({ ...args }) => ` @@ -125,7 +122,6 @@ export const MultiSelect = Story({ value: 'SpiderMan,IronMan', placeholder: 'Try finding your hero', multiple: true, - content: undefined, }, ...withRender( ({ ...args }) => ` diff --git a/docs/stories/components/bal-stack/bal-stack.stories.ts b/docs/stories/components/bal-stack/bal-stack.stories.ts index 69aeefee86..77249d0fcb 100644 --- a/docs/stories/components/bal-stack/bal-stack.stories.ts +++ b/docs/stories/components/bal-stack/bal-stack.stories.ts @@ -1,6 +1,6 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' import { balBrandIconPiggyBankPurple } from '@baloise/design-system-brand-icons' import { balBrandIconInvestSaveChfRed } from '@baloise/design-system-brand-icons' import { balBrandIconSafeSavingChildTangerine } from '@baloise/design-system-brand-icons' @@ -9,11 +9,7 @@ type Args = JSX.BalStack & { content: string } const meta: Meta = { title: 'Components/Layout/Stack', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-stack' }), }, ...withRender( @@ -151,7 +147,7 @@ export const TeaserCards = Story({ ...withRender( ({ ...args }) => `
    - + @@ -166,7 +162,7 @@ export const TeaserCards = Story({
    - + @@ -180,7 +176,7 @@ export const TeaserCards = Story({
    - + diff --git a/docs/stories/components/bal-steps/bal-steps.stories.ts b/docs/stories/components/bal-steps/bal-steps.stories.ts index 18471b7d0d..3cf8dd5aa7 100644 --- a/docs/stories/components/bal-steps/bal-steps.stories.ts +++ b/docs/stories/components/bal-steps/bal-steps.stories.ts @@ -14,12 +14,12 @@ const meta: Meta = { }, ...withRender( ({ ...args }) => ` - Content of Step A - Content of Step B + Content of Step A + Content of Step B Content of Step C Content of Step D - Content of Step E - + Content of Step E + `, ), } diff --git a/docs/stories/components/bal-table/bal-table.templates.ts b/docs/stories/components/bal-table/bal-table.templates.ts index 28889e2d27..4673517110 100644 --- a/docs/stories/components/bal-table/bal-table.templates.ts +++ b/docs/stories/components/bal-table/bal-table.templates.ts @@ -11,10 +11,10 @@ export const tableHtml = ` - + @@ -24,8 +24,8 @@ export const tableHtml = `
    Tony StarkReadyReady - - + +
    Injured @@ -35,8 +35,8 @@ export const tableHtml = `
    - - + +
    In school @@ -46,8 +46,8 @@ export const tableHtml = `
    - - + +
    Unknown diff --git a/docs/stories/components/bal-tabs/bal-tabs.stories.ts b/docs/stories/components/bal-tabs/bal-tabs.stories.ts index 7994b659d7..9d13ee8909 100644 --- a/docs/stories/components/bal-tabs/bal-tabs.stories.ts +++ b/docs/stories/components/bal-tabs/bal-tabs.stories.ts @@ -18,9 +18,9 @@ const meta: Meta = { ({ ...args }) => ` Content of Tab A Content of Tab B - Content of Tab C - - Content of Tab E + Content of Tab C + + Content of Tab E Content of Tab link `, @@ -52,8 +52,8 @@ export const Mobile = Story({ ({ ...args }) => ` Content of Tab A Content of Tab B - Content of Tab C - Content of Tab D + Content of Tab C + Content of Tab D `, ), diff --git a/docs/stories/components/bal-tag/bal-tag.stories.ts b/docs/stories/components/bal-tag/bal-tag.stories.ts index 6f3560267c..4d08ca46e0 100644 --- a/docs/stories/components/bal-tag/bal-tag.stories.ts +++ b/docs/stories/components/bal-tag/bal-tag.stories.ts @@ -74,14 +74,14 @@ export const Colors = Story({
    - Purple - Red - Yellow - Green + Purple + Red + Yellow + Green
    - Disabled + Disabled `, ), diff --git a/docs/stories/components/bal-textarea/bal-textarea.stories.ts b/docs/stories/components/bal-textarea/bal-textarea.stories.ts index 63a6b62110..c3e3bf0ef6 100644 --- a/docs/stories/components/bal-textarea/bal-textarea.stories.ts +++ b/docs/stories/components/bal-textarea/bal-textarea.stories.ts @@ -1,19 +1,15 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalTextarea & { content: string } const meta: Meta = { title: 'Components/Form/Textarea', - args: { - ...withDefaultContent(''), - }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-textarea' }), }, - ...withRender(({ content, ...args }) => `${content}`), + ...withRender(({ ...args }) => ``), } export default meta diff --git a/docs/stories/components/bal-tooltip/bal-tooltip.stories.ts b/docs/stories/components/bal-tooltip/bal-tooltip.stories.ts index 734bb08b08..a211ea416c 100644 --- a/docs/stories/components/bal-tooltip/bal-tooltip.stories.ts +++ b/docs/stories/components/bal-tooltip/bal-tooltip.stories.ts @@ -1,18 +1,16 @@ import type { JSX } from '@baloise/design-system-components' import type { Meta } from '@storybook/html' -import { props, withRender, withContent, withDefaultContent, withComponentControls, StoryFactory } from '../../utils' +import { props, withRender, withComponentControls, StoryFactory } from '../../utils' type Args = JSX.BalTooltip & { content: string } const meta: Meta = { title: 'Components/Data Display/Tooltip', args: { - ...withDefaultContent(), label: 'Tooltip Label', reference: 'my-tooltip', }, argTypes: { - ...withContent(), ...withComponentControls({ tag: 'bal-tooltip' }), }, ...withRender(
    - - + +