@spaced-out/genesis-mcp 1.0.39 → 1.0.41
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 +33 -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-29T09:53:08.846Z",
|
|
4
|
+
"version": "0.6.28-beta.0",
|
|
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",
|
|
@@ -1869,6 +1869,36 @@
|
|
|
1869
1869
|
"index.ts"
|
|
1870
1870
|
]
|
|
1871
1871
|
},
|
|
1872
|
+
"Popover": {
|
|
1873
|
+
"name": "Popover",
|
|
1874
|
+
"path": "src/components/Popover",
|
|
1875
|
+
"files": {
|
|
1876
|
+
"main": {
|
|
1877
|
+
"path": "Popover.d.ts",
|
|
1878
|
+
"content": "import * as React from 'react';\nimport type { PaddingSizeType } from '../../components/Card';\nimport type { ElevationType } from '../../components/Tooltip';\ntype ClassNames = Readonly<{\n popover?: string;\n card?: string;\n}>;\nexport declare const POPOVER_PLACEMENTS: readonly string[];\nexport type PopoverPlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';\nexport interface PopoverChildProps {\n className?: string;\n children: React.ReactNode;\n testId?: string;\n}\nexport declare const PopoverHeader: (props: PopoverChildProps) => React.JSX.Element;\nexport declare const PopoverTitle: (props: PopoverChildProps) => React.JSX.Element;\nexport declare const PopoverActions: (props: PopoverChildProps) => React.JSX.Element;\nexport declare const PopoverContent: ({ className, ...props }: PopoverChildProps) => React.JSX.Element;\nexport declare const PopoverFooter: (props: PopoverChildProps) => React.JSX.Element;\nexport interface BasePopoverProps {\n classNames?: ClassNames;\n content?: React.ReactNode;\n placement?: PopoverPlacementType;\n offset?: number;\n padding?: PaddingSizeType;\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => unknown;\n disabled?: boolean;\n elevation?: ElevationType;\n testId?: string;\n}\nexport interface PopoverProps extends BasePopoverProps {\n children: React.ReactNode;\n}\nexport declare const Popover: ({ classNames, children, content, placement, offset, padding, isOpen, defaultOpen, onOpenChange, disabled, elevation, testId, }: PopoverProps) => React.JSX.Element;\nexport {};\n//# sourceMappingURL=Popover.d.ts.map"
|
|
1879
|
+
},
|
|
1880
|
+
"story": {
|
|
1881
|
+
"path": "Popover.stories.tsx",
|
|
1882
|
+
"content": "import * as React from 'react';\n\nimport {Avatar} from 'src/components/Avatar';\nimport {Button} from 'src/components/Button';\nimport {ButtonDropdown} from 'src/components/ButtonDropdown';\nimport {ClickableIcon, Icon} from 'src/components/Icon';\nimport type {MenuOption} from 'src/components/Menu';\nimport type {PopoverProps} from 'src/components/Popover/Popover';\nimport {Popover, POPOVER_PLACEMENTS} from 'src/components/Popover/Popover';\nimport {Separator} from 'src/components/Separator';\nimport {BodySmall, SubTitleMedium} from 'src/components/Text';\nimport {ELEVATION_TYPES} from 'src/components/Tooltip';\nimport {Truncate} from 'src/components/Truncate';\n\nimport css from 'src/components/Popover/Popover.stories.module.css';\n\n\nconst placementOptions: Array<unknown> = [...POPOVER_PLACEMENTS];\n\nconst elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];\n\nconst paddingOptions: Array<unknown> = ['none', 'small', 'medium', 'large'];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Popover',\n argTypes: {\n content: {\n description: `**Content** of the popover. It is rendered inside a \\`<Card>\\`,\n so you only need to pass what goes inside the card. Accepts any react node -\n text, a list, a form or a whole profile summary`,\n control: {\n type: 'null',\n },\n table: {\n type: {summary: 'React.Node'},\n },\n },\n children: {\n type: {required: true},\n description: `React Node that the popover wraps on and uses as its trigger.\n Popover preserves the consumer's references`,\n control: {\n type: 'null',\n },\n table: {\n type: {summary: 'React.Node'},\n },\n },\n placement: {\n options: placementOptions,\n description: 'Placement of the popover with respect to the trigger',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'bottom'},\n },\n },\n offset: {\n description: 'Distance in **px** between the trigger and the popover',\n control: {\n type: 'number',\n },\n table: {\n type: {summary: 'number'},\n defaultValue: {summary: 8},\n },\n },\n padding: {\n options: paddingOptions,\n description: 'Padding applied on all sides of the popover `<Card>`',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n isOpen: {\n description: `Open state of the popover. Pass this along with \\`onOpenChange\\`\n to control the popover from outside. Leave it **undefined** to let the popover\n manage its own state`,\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n },\n },\n defaultOpen: {\n description:\n 'Initial open state of the uncontrolled popover. Ignored when `isOpen` is passed',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onOpenChange: {\n description: `Called with the next open state whenever the popover is opened or\n dismissed - trigger click, outside click or \\`Esc\\``,\n table: {\n type: {summary: '(isOpen: boolean) => unknown'},\n },\n },\n disabled: {\n description:\n 'If set to **true**, the trigger stops opening the popover and an already open popover is closed',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n elevation: {\n description:\n 'z-index of the popover. This is by default set to elevationMenu which is `12`. Use this prop when you want to render the popover at higher elevation elements like Modal, Toast, etc.',\n options: elevationOptions,\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'menu'},\n },\n },\n classNames: {\n description: 'External classnames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{popover?: string, card?: string}'},\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 },\n parameters: {\n docs: {\n subtitle: 'Generates a Popover component',\n description: {\n component: `\n\\`\\`\\`js\nimport {\n Popover,\n PopoverHeader,\n PopoverTitle,\n PopoverActions,\n PopoverContent,\n PopoverFooter\n} from \"@spaced-out/ui-design-system/lib/components/Popover\";\n\\`\\`\\`\nA **popover** shows rich content on top of the page when the user clicks its trigger. Unlike a\n\\`Tooltip\\`, it opens on **click**, its content can be focused and interacted with, and it is\ndismissed by clicking the trigger again, clicking outside or pressing \\`Esc\\`.\n\n\\`Popover\\` should be wrapped over the element that acts as the trigger, and the floating content is\npassed through the \\`content\\` prop. Content is always rendered inside a \\`<Card>\\`, so you only pass\nwhat goes inside it.\n\nFor anything more than a single block of content, compose it out of \\`<PopoverHeader>\\`,\n\\`<PopoverContent>\\` and \\`<PopoverFooter>\\`. These are the \\`<Card>\\` parts of the same name, so the\ndividers and typography match a \\`<Card>\\`. Once any of them is present the surface stops padding\nitself and \\`<PopoverContent>\\` carries the \\`padding\\` prop instead, which keeps the header and footer\nrunning edge to edge.\n\nInside a header or a footer, use \\`<PopoverTitle>\\` for the label and \\`<PopoverActions>\\` to group the\nbuttons. Actions are pushed to the far end of the row, so a title and a set of actions sit at\nopposite edges without any extra styling.\n\nThere are 12 possible placements for the Popover. Popover container has a max-width of \\`320px\\`.\n\n**Note:** \\`<Popover>\\` gets attached to \\`<body>\\`. You can manage elevation of the popover when you want to use it at elevated surfaces.\n\n**Note:** \\`<Popover>\\` trigger needs ref to work. If you are not able to provide ref normally, you would need to wrap the component in a \\`<div>\\`.\n\n**Note:** when the trigger lives inside a \\`<Menu>\\` option, raise \\`elevation\\` above \\`menu\\` or the popover\npaints under the open menu, and stop the trigger's click from bubbling so opening the popover does not\nalso pick the option. Because the popover is portaled, a click **inside** it counts as a click away for\nthe surrounding dropdown - \\`ButtonDropdown\\` does not pass \\`containsNestedFloatingPortals\\` to\n\\`ClickAway\\`, so keep such popovers read-only for now.\n\n\\`\\`\\`jsx\n/* Prefer a \\`<ClickableIcon>\\` over a bare \\`<Icon>\\` for an icon trigger - it is a real\nbutton, so it is focusable and announced, and it takes the popover's ref directly */\n<Popover content={<BodySmall>Anything can go in here</BodySmall>}>\n <ClickableIcon name=\"circle-info\" color=\"tertiary\" ariaLabel=\"More info\" />\n</Popover>\n\n/* Controlled popover */\nconst [isOpen, setIsOpen] = React.useState(false);\n\n<Popover\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n placement=\"bottom-start\"\n content={<ProfileDetails />}\n>\n <Button type=\"tertiary\">John Doe</Button>\n</Popover>\n\n/* Popover with a header and a footer */\n<Popover\n placement=\"bottom-start\"\n content={\n <>\n <PopoverHeader>\n <PopoverTitle>Filter jobs</PopoverTitle>\n <PopoverActions>\n <Button type=\"ghost\" size=\"small\" iconLeftName=\"xmark\" ariaLabel=\"Close\" />\n </PopoverActions>\n </PopoverHeader>\n <PopoverContent>\n <JobFilters />\n </PopoverContent>\n <PopoverFooter>\n <Button type=\"tertiary\" size=\"small\">Clear all</Button>\n <PopoverActions>\n <Button type=\"primary\" size=\"small\">Apply</Button>\n </PopoverActions>\n </PopoverFooter>\n </>\n }\n>\n <Button type=\"tertiary\" iconLeftName=\"filter\">Filters</Button>\n</Popover>\n\\`\\`\\`\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Popover/Popover',\n },\n },\n};\n\nconst DetailRow = ({\n iconName,\n children,\n}: {\n iconName: string;\n children: React.ReactNode;\n}) => (\n <div className={css.detailRow}>\n <Icon name={iconName} size=\"small\" color=\"tertiary\" />\n <BodySmall color=\"secondary\">{children}</BodySmall>\n </div>\n);\n\nconst ProfileDetails = () => (\n <div className={css.profile}>\n <div className={css.profileHeader}>\n <Avatar\n imageSrc=\"https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png\"\n size=\"large\"\n ring\n />\n <div className={css.profileHeading}>\n <SubTitleMedium>John Doe</SubTitleMedium>\n <BodySmall color=\"tertiary\">@john.doe</BodySmall>\n </div>\n </div>\n\n <div className={css.detailsGroup}>\n <DetailRow iconName=\"envelope\">john.doe@sensehq.com</DetailRow>\n <DetailRow iconName=\"phone\">+1 (415) 555-0132</DetailRow>\n <DetailRow iconName=\"location-dot\">San Francisco, CA</DetailRow>\n </div>\n\n <Separator orientation=\"horizontal\" />\n\n <div className={css.detailsGroup}>\n <DetailRow iconName=\"briefcase\">Senior Product Designer</DetailRow>\n <DetailRow iconName=\"building\">Design Systems, Sense</DetailRow>\n <DetailRow iconName=\"calendar\">Joined March 2021</DetailRow>\n </div>\n </div>\n);\n\nexport const SimpleStory = (args: PopoverProps) => (\n <div className={css.container}>\n <div className={css.content}>\n <Popover {...args} content={<ProfileDetails />}>\n <ClickableIcon\n name=\"circle-info\"\n color=\"tertiary\"\n ariaLabel=\"About John Doe\"\n />\n </Popover>\n <div className={css.info}>\n <Icon color=\"tertiary\" size=\"small\" name=\"circle-info\" />\n <BodySmall color=\"tertiary\">\n Click the info icon to see John Doe's profile\n </BodySmall>\n </div>\n </div>\n </div>\n);\n\nSimpleStory.args = {\n placement: 'bottom',\n offset: 8,\n padding: 'medium',\n children: null,\n testId: 'popover-simple-story',\n};\n\nexport const PlacementsStory = (args: PopoverProps) => (\n <div className={css.container}>\n <div className={css.placements}>\n {['top', 'right', 'bottom-start', 'left'].map((placement) => (\n <Popover\n {...args}\n key={placement}\n placement={placement as PopoverProps['placement']}\n content={<BodySmall>Placed on {placement}</BodySmall>}\n testId={`popover-placement-${placement}`}\n >\n <Button type=\"tertiary\" size=\"small\">\n {placement}\n </Button>\n </Popover>\n ))}\n </div>\n <div className={css.info}>\n <Icon color=\"tertiary\" size=\"small\" name=\"circle-info\" />\n <BodySmall color=\"tertiary\">\n Popover flips automatically when there is no room on the preferred side\n </BodySmall>\n </div>\n </div>\n);\n\nPlacementsStory.args = {\n padding: 'small',\n children: null,\n};\n\nexport const ControlledStory = (args: PopoverProps) => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n return (\n <div className={css.container}>\n <div className={css.content}>\n <Popover\n {...args}\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n content={\n <div className={css.profile}>\n <SubTitleMedium>Remove John Doe?</SubTitleMedium>\n <BodySmall color=\"secondary\">\n They will lose access to all the projects they are a part of.\n </BodySmall>\n <div className={css.actions}>\n <Button\n type=\"primary\"\n size=\"small\"\n onClick={() => setIsOpen(false)}\n >\n Remove\n </Button>\n <Button\n type=\"tertiary\"\n size=\"small\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n </div>\n </div>\n }\n >\n <Button type=\"tertiary\" iconLeftName=\"trash\">\n {isOpen ? 'Close popover' : 'Open popover'}\n </Button>\n </Popover>\n <div className={css.info}>\n <Icon color=\"tertiary\" size=\"small\" name=\"circle-info\" />\n <BodySmall color=\"tertiary\">\n Open state is owned by the consumer using `isOpen` and\n `onOpenChange`\n </BodySmall>\n </div>\n </div>\n </div>\n );\n};\n\nControlledStory.args = {\n placement: 'bottom-start',\n children: null,\n testId: 'popover-controlled-story',\n};\n\nconst COLUMN_FIELDS = [\n {\n key: 'job-post-date',\n label: 'Job/Post Date',\n info: 'The date the job was posted to the board, not the date it was created.',\n },\n {\n key: 'published-date',\n label: 'Published Date',\n info: 'The date the job first became visible to candidates.',\n },\n {\n key: 'opened-date',\n label: 'Opened Date',\n info: 'The date the requisition was approved and opened for sourcing.',\n },\n {key: 'owner', label: 'Owner'},\n {key: 'status', label: 'Status'},\n];\n\nconst ColumnFieldOption = ({label, info}: {label: string; info: string}) => (\n <div className={css.infoOption}>\n <Truncate>{label}</Truncate>\n <Popover\n placement=\"right\"\n padding=\"small\"\n // Note: above elevationMenu so it is not painted under the open menu\n elevation=\"modal\"\n content={<BodySmall color=\"secondary\">{info}</BodySmall>}\n testId={`popover-menu-option-info-${label}`}\n >\n {/* Note: stopPropagation so opening the popover does not pick the option */}\n <ClickableIcon\n name=\"circle-info\"\n size=\"small\"\n color=\"tertiary\"\n ariaLabel={`About ${label}`}\n onClick={(event) => event.stopPropagation()}\n />\n </Popover>\n </div>\n);\n\nexport const MenuOptionInfoStory = () => {\n const [selectedKeys, setSelectedKeys] = React.useState(['job-post-date']);\n\n return (\n <div className={css.container}>\n <div className={css.content}>\n <ButtonDropdown\n type=\"secondary\"\n iconLeftName=\"table-columns\"\n menu={{\n size: 'medium',\n isFluid: false,\n selectedKeys,\n optionsVariant: 'checkbox',\n // Note: lets the option row stretch so the icon sits at its far end\n classNames: {optionTextContainer: css.infoOptionContainer},\n onSelect: (option: MenuOption) =>\n setSelectedKeys((current) =>\n current.includes(option.key)\n ? current.filter((key) => key !== option.key)\n : [...current, option.key],\n ),\n options: COLUMN_FIELDS.map((field) =>\n field.info\n ? {\n key: field.key,\n label: field.label,\n customComponent: (\n <ColumnFieldOption\n label={field.label}\n info={field.info}\n />\n ),\n }\n : {key: field.key, label: field.label},\n ),\n }}\n >\n Columns\n </ButtonDropdown>\n <div className={css.info}>\n <Icon color=\"tertiary\" size=\"small\" name=\"circle-info\" />\n <BodySmall color=\"tertiary\">\n The three date fields carry an info icon that opens a popover\n explaining them\n </BodySmall>\n </div>\n </div>\n </div>\n );\n};\n\nSimpleStory.storyName = 'Simple';\nPlacementsStory.storyName = 'Placements';\nControlledStory.storyName = 'Controlled';\nMenuOptionInfoStory.storyName = 'Inside a Menu Option';\n"
|
|
1883
|
+
},
|
|
1884
|
+
"css": {
|
|
1885
|
+
"path": "Popover.module.css",
|
|
1886
|
+
"content": "@value (size320) from '../../styles/variables/_size.css';\n@value (elevationMenu) from '../../styles/variables/_elevation.css';\n@value (borderRadiusMedium) from '../../styles/variables/_border.css';\n\n.popover {\n --popover-elevation: elevationMenu;\n display: flex;\n flex-flow: column;\n max-width: size320;\n z-index: var(--popover-elevation);\n outline: none;\n}\n\n.card {\n flex-flow: column;\n border-radius: borderRadiusMedium;\n composes: boxShadow2 from '../../styles/shadow.module.css';\n}\n\n/* Note: Card content is a row, a popover is narrow so it stacks */\n.content {\n flex-flow: column;\n}\n"
|
|
1887
|
+
},
|
|
1888
|
+
"index": {
|
|
1889
|
+
"path": "index.d.ts",
|
|
1890
|
+
"content": "export * from '../../components/Popover/Popover';\n//# sourceMappingURL=index.d.ts.map"
|
|
1891
|
+
},
|
|
1892
|
+
"additional": {}
|
|
1893
|
+
},
|
|
1894
|
+
"allFiles": [
|
|
1895
|
+
"Popover.module.css",
|
|
1896
|
+
"Popover.stories.module.css",
|
|
1897
|
+
"Popover.stories.tsx",
|
|
1898
|
+
"Popover.tsx",
|
|
1899
|
+
"index.ts"
|
|
1900
|
+
]
|
|
1901
|
+
},
|
|
1872
1902
|
"PreviewCard": {
|
|
1873
1903
|
"name": "PreviewCard",
|
|
1874
1904
|
"path": "src/components/PreviewCard",
|
package/package.json
CHANGED