@spaced-out/genesis-mcp 1.0.41 → 1.0.42
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.28-beta.
|
|
3
|
+
"buildDate": "2026-07-29T10:29:19.302Z",
|
|
4
|
+
"version": "0.6.28-beta.1",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -1879,7 +1879,7 @@
|
|
|
1879
1879
|
},
|
|
1880
1880
|
"story": {
|
|
1881
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"
|
|
1882
|
+
"content": "import * as React from 'react';\n\nimport {Avatar} from 'src/components/Avatar';\nimport {Button} from 'src/components/Button';\nimport {SimpleButtonDropdown} 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 <SimpleButtonDropdown\n type=\"secondary\"\n iconLeftName=\"table-columns\"\n size=\"medium\"\n isFluid={false}\n selectedKeys={selectedKeys}\n optionsVariant=\"checkbox\"\n // Note: lets the option row stretch so the icon sits at its far end\n menuClassNames={{optionTextContainer: css.infoOptionContainer}}\n onOptionSelect={(option: MenuOption) =>\n setSelectedKeys((current) =>\n current.includes(option.key)\n ? current.filter((key) => key !== option.key)\n : [...current, option.key],\n )\n }\n options={COLUMN_FIELDS.map((field) =>\n field.info\n ? {\n key: field.key,\n label: field.label,\n customComponent: (\n <ColumnFieldOption label={field.label} info={field.info} />\n ),\n }\n : {key: field.key, label: field.label},\n )}\n >\n Columns\n </SimpleButtonDropdown>\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
1883
|
},
|
|
1884
1884
|
"css": {
|
|
1885
1885
|
"path": "Popover.module.css",
|
package/package.json
CHANGED