🔧 chore(): improve docs (#1118)

* chore(): improve docs * chore(): improve docs * chore(): refactor --------- Co-authored-by: Mladen Planinicic <mladen.planinicic@baloise.ch>
baloise · Dec 5, 2023 · 9165968 · 9165968
1 parent d4db484
commit 9165968
Show file tree

Hide file tree

Showing 29 changed files with 124 additions and 175 deletions.
diff --git 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.
 
-<Canvas of={CheckboxStories.FieldControl} sourceState="shown" />
+<Canvas of={CheckboxStories.FieldControl} />
 
 {/* ------------------------------------------------------ */}
 

diff --git 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({
     () => `<bal-field>
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
-        <bal-checkbox-group vertical="false" interface="select-button">
+        <bal-checkbox-group interface="select-button">
             <bal-checkbox checked="true">
                 Label
             </bal-checkbox>
@@ -138,7 +138,7 @@ export const CheckboxButton = Story({
             <bal-content>
                 <bal-label>Simple checkbox button</bal-label>
             </bal-content>
-            <bal-checkbox label-hidden name="checkbox-example" value="1"></bal-checkbox>
+            <bal-checkbox label-hidden="true" name="checkbox-example" value="1"></bal-checkbox>
         </bal-stack>
     </bal-checkbox-button>
     <bal-checkbox-button>
@@ -148,7 +148,7 @@ export const CheckboxButton = Story({
                 <bal-label>Checkbox button with a switch</bal-label>
                 <bal-text size="small">Checkboxes allow users to select one or more items from a set. Checkboxes can turn one or more option(s) on or off.</bal-text>
             </bal-content>
-            <bal-checkbox interface="switch" label-hidden name="checkbox-example" value="2"></bal-checkbox>
+            <bal-checkbox interface="switch" label-hidden="true" name="checkbox-example" value="2"></bal-checkbox>
         </bal-stack>
     </bal-checkbox-button>
     <bal-checkbox-button invalid>
@@ -158,7 +158,7 @@ export const CheckboxButton = Story({
                 <bal-label>Invalid button</bal-label>
                 <bal-text size="small">Checkboxes allow users to select one or more items from a set. Checkboxes can turn one or more option(s) on or off.</bal-text>
             </bal-content>
-            <bal-checkbox interface="switch" label-hidden name="checkbox-example" value="3"></bal-checkbox>
+            <bal-checkbox interface="switch" label-hidden="true" name="checkbox-example" value="3"></bal-checkbox>
         </bal-stack>
     </bal-checkbox-button>
     <bal-checkbox-button disabled="true">

diff --git 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<Args> = {
   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
@@ -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<Args> = {
   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<Args>(meta)
 export const Basic = Story()
 
 export const Horizontal = Story({
+  args: {
+    horizontal: true,
+  },
   ...withRender(
     ({ ...args }) => `<bal-card class="p-medium">
     <bal-data ${props(args)}>
@@ -61,10 +62,6 @@ export const Horizontal = Story({
     </bal-data>
   </bal-card>`,
   ),
-  args: {
-    border: false,
-    horizontal: true,
-  },
 })
 
 export const DataTypes = Story({
@@ -78,11 +75,11 @@ export const DataTypes = Story({
         </bal-data-item>
         <bal-data-item>
           <bal-data-label>Multiline Label</bal-data-label>
-          <bal-data-value multiline>A very long value, that should go break to the next line. I really hope that this works :-)</bal-data-value>
+          <bal-data-value multiline="true">A very long value, that should go break to the next line. I really hope that this works :-)</bal-data-value>
         </bal-data-item>
         <bal-data-item>
           <bal-data-label>List Value</bal-data-label>
-          <bal-data-value multiline>
+          <bal-data-value multiline="true">
             <ul class="is-list ml-normal">
               <li>Value 1</li>
               <li>Value 2</li>
@@ -95,7 +92,7 @@ export const DataTypes = Story({
         </bal-data-item>
         <bal-data-item>
         <bal-data-label>Editable Multiline</bal-data-label>
-        <bal-data-value multiline editable>A very long value, that should go break to the next line. I really hope that this works :-)</bal-data-value>
+        <bal-data-value multiline="true" editable="true">A very long value, that should go break to the next line. I really hope that this works :-)</bal-data-value>
       </bal-data-item>
         <bal-data-item disabled>
           <bal-data-label>Disabled</bal-data-label>
@@ -119,7 +116,4 @@ export const DataTypes = Story({
     </bal-card-content>
   </bal-card>`,
   ),
-  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
@@ -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<Args> = {
   title: 'Components/Form/Date',
   args: {
-    ...withDefaultContent(''),
     placeholder: 'Pick a date',
   },
   argTypes: {
-    ...withContent(),
     ...withComponentControls({ tag: 'bal-date' }),
   },
-  ...withRender(({ content, ...args }) => `<bal-date ${props(args)}>${content}</bal-date>`),
+  ...withRender(({ ...args }) => `<bal-date ${props(args)}></bal-date>`),
 }
 
 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
@@ -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<Args> = {
   title: 'Components/Layout/Divider',
-  args: {
-    ...withDefaultContent(''),
-  },
   argTypes: {
-    ...withContent(),
     ...withComponentControls({ tag: 'bal-divider' }),
   },
-  ...withRender(({ content, ...args }) => `<bal-divider ${props(args)}>${content}</bal-divider>`),
+  ...withRender(({ ...args }) => `<bal-divider ${props(args)}></bal-divider>`),
 }
 
 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
@@ -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<Args> = {
   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
@@ -24,7 +24,7 @@ const meta: Meta<Args> = {
     const section: HTMLElement = document.createElement('section')
 
     section.innerHTML = `<bal-field>
-    <bal-field-label required>Upload Label</bal-field-label>
+    <bal-field-label required="true">Upload Label</bal-field-label>
     <bal-field-control>
         <bal-file-upload ${props(args)}></bal-file-upload>
     </bal-field-control>

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
@@ -186,7 +186,7 @@ export const FormStructure = Story({
                     <bal-field>
                         <bal-field-label>Multiple Select</bal-field-label>
                         <bal-field-control>
-                            <bal-select multiple="true" typeahead placeholder="Placeholder" value="AG,SO">
+                            <bal-select multiple="true" typeahead="true" placeholder="Placeholder" value="AG,SO">
                                 <bal-select-option value="AG" label="Argau">Argau</bal-select-option>
                                 <bal-select-option value="BS" label="Basel">Basel</bal-select-option>
                                 <bal-select-option value="BL" label="Basel-Land">Basel-Land</bal-select-option>

diff --git 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({
                     <bal-field required="true">
                         <bal-field-label>Firstname</bal-field-label>
                         <bal-field-control>
-                            <bal-input name="firstname" placeholder="Enter your firstname" value="" autocomplete="on"></bal-input>
+                            <bal-input name="firstname" placeholder="Enter your firstname" autocomplete="on"></bal-input>
                         </bal-field-control>
                         <bal-field-message>Field Message</bal-field-message>
                     </bal-field>
@@ -157,7 +157,7 @@ export const Autocomplete = Story({
                     <bal-field required="true">
                         <bal-field-label>Lastname</bal-field-label>
                         <bal-field-control>
-                            <bal-input name="lastname" placeholder="Enter your lastname" value="" autocomplete="on"></bal-input>
+                            <bal-input name="lastname" placeholder="Enter your lastname" autocomplete="on"></bal-input>
                         </bal-field-control>
                         <bal-field-message>Field Message</bal-field-message>
                     </bal-field>

diff --git 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<Args> = {
   title: 'Components/Data Display/Hint',
   args: {
-    ...withDefaultContent(),
+    small: true,
   },
   argTypes: {
-    ...withContent(),
     ...withComponentControls({ tag: 'bal-hint' }),
   },
   ...withRender(
@@ -37,9 +36,6 @@ const Story = StoryFactory<Args>(meta)
 export const Basic = Story()
 
 export const TooltipHint = Story({
-  args: {
-    small: true,
-  },
   ...withRender(
     ({ ...args }) => `<bal-hint class="mt-large" ${props(args)}>
   <bal-hint-text>

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
@@ -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<Args> = {
   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<Args> = {
 </bal-input-group>
 
 <bal-input-group class="mb-normal">
-  <bal-tag closable>Tag</bal-tag>
-  <bal-tag closable>Tag</bal-tag>
-  <bal-tag closable>Tag</bal-tag>
+  <bal-tag closable="true">Tag</bal-tag>
+  <bal-tag closable="true">Tag</bal-tag>
+  <bal-tag closable="true">Tag</bal-tag>
   <bal-input ${props(args)}></bal-input>
   <bal-icon name="date"></bal-icon>
 </bal-input-group>`,

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
@@ -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<Args> = {
   title: 'Components/Form/InputSlider',
-  args: {
-    ...withDefaultContent(''),
-  },
   argTypes: {
-    ...withContent(),
     ...withComponentControls({ tag: 'bal-input-slider' }),
   },
-  ...withRender(({ content, ...args }) => `<bal-input-slider ${props(args)}>${content}</bal-input-slider>`),
+  ...withRender(({ ...args }) => `<bal-input-slider ${props(args)}></bal-input-slider>`),
 }
 
 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
@@ -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<Args> = {
   title: 'Components/Form/Input',
-  args: {
-    ...withDefaultContent(''),
-  },
   argTypes: {
-    ...withContent(),
     ...withComponentControls({ tag: 'bal-input' }),
   },
-  ...withRender(({ content, ...args }) => `<bal-input ${props(args)}>${content}</bal-input>`),
+  ...withRender(({ ...args }) => `<bal-input ${props(args)}></bal-input>`),
 }
 
 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
@@ -41,10 +41,10 @@ export const States = Story({
   ...withRender(
     () => `<div>
   <div>
-    <bal-label invalid>Invalid Label</bal-label>
+    <bal-label invalid="true">Invalid Label</bal-label>
   </div>
   <div>
-    <bal-label disabled>Disabled Label</bal-label>
+    <bal-label disabled="true">Disabled Label</bal-label>
   </div>
 </div>`,
   ),
@@ -69,7 +69,7 @@ export const Sizes = Story({
 export const FieldLabel = Story({
   ...withRender(
     () => `<bal-field>
-    <bal-field-label required>Field Label</bal-field-label>
+    <bal-field-label required="true">Field Label</bal-field-label>
     <bal-field-control>
       <bal-input name="my-input" placeholder="Placeholder"></bal-input>
     </bal-field-control>