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
index 788b42ada3..e7fc8853db 100644
--- 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`${unsafeHTML(args.slotIcon)} `;
- const invalidFeedback = html`
- ${unsafeHTML(args.slotInvalidFeedback)}
- `;
+ const icon = html`${unsafeHTML(args['slots-icon'])} `;
return html`
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}
`;
},
@@ -140,7 +128,7 @@ export const DarkBackground: Story = {
export const CustomIcon: Story = {
args: {
- slotIcon:
+ 'slots-icon':
'',
},
render: Default.render,