chore(documentation): use MetaComponent type instead of Meta in card-…

…control component
swisspost · Mar 19, 2024 · a480f5a · a480f5a
1 parent 6a18fc5
commit a480f5a
Showing 1 changed file with 19 additions and 31 deletions.
diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -1,29 +1,30 @@
 import { useArgs } from '@storybook/preview-api';
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { parse } from '../../../utils/sass-export';
 import './card-control.styles.scss';
 import scss from './card-control.module.scss';
 
-const SCSS_VARIABLES = parse(scss);
+const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '886fabcf-148b-4054-a2ec-4869668294fb',
   title: 'Components/Forms/Card-Control',
   component: 'post-card-control',
+  tags: ['package:WebComponents'],
   args: {
-    label: 'Label',
-    description: '',
-    type: 'checkbox',
-    name: '',
-    value: '',
-    checked: '',
-    disabled: '',
-    validity: 'null',
-    icon: '',
-    slotIcon: '',
-    slotInvalidFeedback: '',
+    'label': 'Label',
+    'description': '',
+    'type': 'checkbox',
+    'name': '',
+    'value': '',
+    'checked': '',
+    'disabled': '',
+    'validity': 'null',
+    'icon': '',
+    'slots-icon': '',
   },
   argTypes: {
     'type': {
@@ -57,16 +58,6 @@ const meta: Meta = {
         disable: true,
       },
     },
-    'slotIcon': {
-      table: {
-        disable: true,
-      },
-    },
-    'slotInvalidFeedback': {
-      table: {
-        disable: true,
-      },
-    },
   },
 };
 
@@ -78,10 +69,7 @@ export const Default: Story = {
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
-    const icon = html`<span slot="icon">${unsafeHTML(args.slotIcon)}</span> `;
-    const invalidFeedback = html`<span slot="invalid-feedback">
-      ${unsafeHTML(args.slotInvalidFeedback)}
-    </span>`;
+    const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span> `;
 
     return html`
       <post-card-control
@@ -93,12 +81,12 @@ export const Default: Story = {
         value="${args.value || nothing}"
         checked="${args.checked || nothing}"
         disabled="${args.disabled || nothing}"
-        validity="${args.validity !== 'null' ? args.validity : nothing}"
+        validity="${args.validity !== undefined ? args.validity : nothing}"
         icon="${args.icon || nothing}"
         @input="${(e: any) => updateArgs({ checked: e.detail.state })}"
         @change="${(e: any) => updateArgs({ checked: e.detail.state })}"
       >
-        ${args.slotIcon ? icon : null} ${args.slotInvalidFeedback ? invalidFeedback : null}
+        ${args['slots-icon'] ? icon : null}
       </post-card-control>
     `;
   },
@@ -140,7 +128,7 @@ export const DarkBackground: Story = {
 
 export const CustomIcon: Story = {
   args: {
-    slotIcon:
+    'slots-icon':
       '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="-31.5 0 319 319"><defs><path id="a" d="M9.872 293.324.012 30.574C-.315 21.895 6.338 14.54 15.005 14L238.494.032c8.822-.552 16.42 6.153 16.972 14.975.02.332.031.665.031.998v286.314c0 8.839-7.165 16.004-16.004 16.004-.24 0-.48-.005-.718-.016l-213.627-9.595c-8.32-.373-14.963-7.065-15.276-15.388Z"/></defs><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="#FF4785"/><path fill="#fff" d="m188.665 39.127 1.527-36.716L220.884 0l1.322 37.863a2.387 2.387 0 0 1-3.864 1.96l-11.835-9.325-14.013 10.63a2.387 2.387 0 0 1-3.829-2.001Zm-39.251 80.853c0 6.227 41.942 3.243 47.572-1.131 0-42.402-22.752-64.684-64.415-64.684-41.662 0-65.005 22.628-65.005 56.57 0 59.117 79.78 60.249 79.78 92.494 0 9.052-4.433 14.426-14.184 14.426-12.705 0-17.729-6.49-17.138-28.552 0-4.786-48.458-6.278-49.936 0-3.762 53.466 29.548 68.887 67.665 68.887 36.935 0 65.892-19.687 65.892-55.326 0-63.36-80.961-61.663-80.961-93.06 0-12.728 9.455-14.425 15.07-14.425 5.909 0 16.546 1.042 15.66 24.801Z" mask="url(#b)"/></svg>',
   },
   render: Default.render,