@spaced-out/genesis-mcp 1.0.38 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/design-system.json +3 -3
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "2026-07-
|
|
4
|
-
"version": "0.6.
|
|
3
|
+
"buildDate": "2026-07-28T06:29:49.739Z",
|
|
4
|
+
"version": "0.6.27",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"story": {
|
|
35
35
|
"path": "Accordion.stories.tsx",
|
|
36
|
-
"content": "import * as React from 'react';\n\nimport type {AccordionPropsType} from 'src/components/Accordion/Accordion';\nimport {Accordion} from 'src/components/Accordion/Accordion';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Accordion/Accordion',\n component: Accordion,\n argTypes: {\n classNames: {\n description:\n 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',\n },\n },\n },\n header: {\n description:\n 'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n id: {\n description:\n 'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description:\n 'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'Controls whether the accordion is open or closed.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description
|
|
36
|
+
"content": "import * as React from 'react';\n\nimport type {AccordionPropsType} from 'src/components/Accordion/Accordion';\nimport {Accordion} from 'src/components/Accordion/Accordion';\n\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Accordion/Accordion',\n component: Accordion,\n argTypes: {\n classNames: {\n description:\n 'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary:\n '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',\n },\n },\n },\n header: {\n description:\n 'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n id: {\n description:\n 'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n children: {\n description:\n 'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',\n control: {type: 'text'},\n table: {\n type: {summary: 'React.Node'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n isOpen: {\n description: 'Controls whether the accordion is open or closed.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description: 'Disables only the toggle switch (when showToggle is true).',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n showToggle: {\n description: 'Displays a toggle switch to enable/disable the accordion',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onChange: {\n description: 'Callback triggered when the accordion is opened or closed.',\n control: false,\n table: {\n type: {\n summary: '(id?: string, isOpen: boolean) => mixed',\n },\n },\n },\n onToggle: {\n description:\n 'Callback triggered when the enable/disable toggle is clicked.',\n control: false,\n table: {\n type: {\n summary: '(checked?: boolean) => mixed',\n },\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates an Accordion component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Accordion } from \"@spaced-out/ui-design-system/lib/components/Accordion\";\n\\`\\`\\`\nThe Accordion component is a collapsible UI element used to toggle the visibility of content sections. It can be used independently or within and AccordionGroup.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Accordion/Accordion',\n },\n },\n};\n\nexport const DefaultStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked ?? false);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setChecked(checked);\n setIsOpened(checked);\n };\n return (\n <Accordion\n {...args}\n isOpen={isOpened}\n checked={checked}\n onToggle={onToggleHandler}\n >\n <div>\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n </div>\n </Accordion>\n );\n};\n\nDefaultStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n header: 'What is an Accordion?',\n testId: 'accordion-default-story',\n};\n\nexport const WithToggleStory = (args: AccordionPropsType): React.ReactNode => {\n const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);\n const [checked, setChecked] = React.useState(args.checked);\n\n const onToggleHandler = (checked: boolean) => {\n args.onToggle?.(checked);\n setIsOpened(checked);\n setChecked(checked);\n };\n\n React.useEffect(() => {\n setIsOpened(args.isOpen ?? false);\n }, [args.isOpen]);\n\n return (\n <Accordion\n {...args}\n isOpen={isOpened}\n checked={checked}\n header={'What is an Accordion?'}\n onToggle={onToggleHandler}\n >\n <div>\n Accordions allow you to organize content into collapsible sections. This\n improves page readability and reduces visual clutter. Click the header\n to expand or collapse this section.\n </div>\n </Accordion>\n );\n};\nWithToggleStory.args = {\n classNames: {wrapper: ''},\n id: 'ac1',\n showToggle: true,\n checked: false,\n testId: 'accordion-with-toggle-story',\n};\nDefaultStory.storyName = 'Default';\nWithToggleStory.storyName = 'With Toggle';\n"
|
|
37
37
|
},
|
|
38
38
|
"css": {
|
|
39
39
|
"path": "Accordion.module.css",
|
package/package.json
CHANGED