@bitrise/bitkit-v2 0.3.418 → 0.3.420-beta.2691
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/dist/components/BitkitNoteCard/BitkitNoteCard.d.ts +8 -0
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -0
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/theme/slot-recipes/PageHeader.recipe.js +1 -0
- package/dist/theme/slot-recipes/PageHeader.recipe.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,10 @@ import { NotificationAction } from '../common/notificationMaps';
|
|
|
5
5
|
export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
|
|
6
6
|
action?: NotificationAction;
|
|
7
7
|
isCollapsible?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,
|
|
10
|
+
* a table — is valid here, not just phrasing content.
|
|
11
|
+
*/
|
|
8
12
|
message?: ReactNode;
|
|
9
13
|
messageList?: ReactNode[];
|
|
10
14
|
status?: NotificationVariant;
|
|
@@ -13,6 +17,10 @@ export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
|
|
|
13
17
|
declare const BitkitNoteCard: import('react').ForwardRefExoticComponent<Omit<BoxProps, "title" | "children"> & {
|
|
14
18
|
action?: NotificationAction;
|
|
15
19
|
isCollapsible?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,
|
|
22
|
+
* a table — is valid here, not just phrasing content.
|
|
23
|
+
*/
|
|
16
24
|
message?: ReactNode;
|
|
17
25
|
messageList?: ReactNode[];
|
|
18
26
|
status?: NotificationVariant;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n isCollapsible?: boolean;\n message?: ReactNode;\n messageList?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const [isOpen, setIsOpen] = useState(false);\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = (messageList ?? []).filter(\n (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n );\n const hasList = listItems.length > 0;\n const hasToggle = isCollapsible && hasList;\n\n const list = hasList ? (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item, index) => (\n <BitkitList.Item key={index}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n ) : null;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n isCollapsible?: boolean;\n /**\n * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,\n * a table — is valid here, not just phrasing content.\n */\n message?: ReactNode;\n messageList?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const [isOpen, setIsOpen] = useState(false);\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = (messageList ?? []).filter(\n (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n );\n const hasList = listItems.length > 0;\n const hasToggle = isCollapsible && hasList;\n\n const list = hasList ? (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item, index) => (\n <BitkitList.Item key={index}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n ) : null;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && (\n <Text as=\"div\" css={styles.message}>\n {message}\n </Text>\n )}\n {hasToggle ? (\n <Collapsible.Root\n css={styles.collapsible}\n onOpenChange={(details) => setIsOpen(details.open)}\n open={isOpen}\n unstyled\n >\n <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n <Collapsible.Trigger asChild>\n <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n {isOpen ? 'Hide details' : 'Show details'}\n </BitkitLinkButton>\n </Collapsible.Trigger>\n </Collapsible.Root>\n ) : (\n list\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n // variant has no loading state, so only `disabled` carries over here.\n state={action.state === 'loading' ? undefined : action.state}\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n state={action.state}\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,gBAAgB,OAAO,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAGjG,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,oBAAC,oBAAD;EAAY,KAAK,OAAO;EAAa,MAAK;EACvC,UAAA,UAAU,KAAK,MAAM,UACpB,oBAAC,mBAAW,MAAZ,EAAA,UAA8B,KAAsB,GAA9B,KAA8B,CACrD;CACS,CAAA,IACV;CAEJ,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WACC,oBAAC,MAAD;MAAM,IAAG;MAAM,KAAK,OAAO;MACxB,UAAA;KACG,CAAA;KAEP,YACC,qBAAC,YAAY,MAAb;MACE,KAAK,OAAO;MACZ,eAAe,YAAY,UAAU,QAAQ,IAAI;MACjD,MAAM;MACN,UAAA;MAJF,UAAA,CAME,oBAAC,YAAY,SAAb;OAAqB,KAAK,OAAO;OAAqB,UAAA;MAA0B,CAAA,GAChF,oBAAC,YAAY,SAAb;OAAqB,SAAA;OACnB,UAAA,oBAAC,kBAAD;QAAkB,KAAK,OAAO;QAAoB,YAAY,SAAS,gBAAgB;QACpF,UAAA,SAAS,iBAAiB;OACX,CAAA;MACC,CAAA,CACL;KAElB,CAAA,IAAA;IAEC;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The collapsed single-row layout, shared by `variant=\"minimal\"` and `isSticky`. Both apply the\n * exact same overrides, so the two variants are idempotent when combined. The expanded layout\n * lives in `base` — `variant=\"default\"` and `isSticky: false` deliberately define nothing, so\n * neither can undo the other's collapse.\n *\n * Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`\n * styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal\n * variant — it always shows the title as a heading — and a single 72px row cannot hold a\n * breadcrumb plus full-width actions at 375px.\n *\n * The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the\n * component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.\n */\nconst collapsedSlots = {\n headerBlock: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n gap: '24',\n // No 72 in the size scale — the design fixes the collapsed row height.\n minHeight: rem(72),\n paddingBlockEnd: '12',\n paddingBlockStart: '12',\n paddingInlineEnd: '32',\n paddingInlineStart: '24',\n },\n },\n breadcrumb: {\n tablet: {\n flex: '0 1 auto',\n minWidth: 0,\n },\n },\n contentBlock: {\n tablet: {\n alignItems: 'center',\n flex: '1 0 0',\n // 24 between the title and the actions, per `pageType=main, isSticky=true`. The 8 belongs to\n // `actionBlock`, between the buttons.\n gap: '24',\n justifyContent: 'flex-end',\n minWidth: 0,\n },\n },\n titleBlock: {\n tablet: {\n alignItems: 'center',\n },\n },\n title: {\n tablet: {\n textStyle: 'heading/h3',\n },\n },\n actionBlock: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n gap: '8',\n width: 'auto',\n },\n },\n avatar: {\n tablet: { display: 'none' },\n },\n badge: {\n tablet: { display: 'none' },\n },\n secondaryText: {\n tablet: { display: 'none' },\n },\n tabs: {\n tablet: { display: 'none' },\n },\n} as const;\n\n/**\n * Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the\n * heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is\n * made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every\n * width without a second, conditionally rendered heading node.\n */\nconst titleInBreadcrumb = {\n titleBlock: { tablet: { srOnly: true } },\n // The row is trail + actions. The actions cannot shrink, so leaving `contentBlock` on a zero\n // basis let a long trail take the whole row and collapse it to width 0 — the buttons then\n // overflowed their own box and painted on top of the trail. Sizing the actions to their content\n // and letting the trail take what is left makes the trail yield, and its last crumb ellipsise.\n breadcrumb: { tablet: { flex: '1 1 auto' } },\n // `width: auto` matters as much as the flex here, for the same reason it does in `controlsRow`:\n // the base width is `100%`, which flex-basis `auto` resolves to, so without it this block claims\n // the whole row and squeezes the trail to nothing.\n contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread\n * apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`\n * so `space-between` has room to distribute; without that it would absorb the free space and pin\n * the controls against the actions.\n *\n * Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through\n * `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.\n * This is the row the design file calls `PageHeader-WFE`.\n */\nconst controlsRow = {\n headerBlock: { tablet: { justifyContent: 'space-between' } },\n // `width: auto` matters as much as the flex: the base width is `100%`, which flex-basis `auto`\n // resolves to, so the block would otherwise claim the whole row and shrink the trail until its\n // metadata truncated away. Sized to its actions instead, leaving the free space to distribute.\n contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * Collapsed with inline controls but no trail: the title takes the left slot, so the three groups\n * are the title, the controls and the actions — all inside `contentBlock`, which already spans the\n * row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left\n * growing, it would absorb the row and shove the controls against the actions.\n */\nconst controlsWithoutTrail = {\n contentBlock: { tablet: { justifyContent: 'space-between' } },\n titleBlock: { tablet: { flex: '0 1 auto' } },\n} as const;\n\n/**\n * Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title\n * and 14px secondary text. The two differ only in the avatar-to-text gap.\n */\nconst entityContent = {\n titleBlock: {\n alignItems: 'center',\n },\n title: {\n textStyle: { base: 'heading/mobile/h2', tablet: 'heading/h2' },\n },\n secondaryText: {\n textStyle: 'body/md/regular',\n },\n} as const;\n\nconst pageHeaderSlotRecipe = defineSlotRecipe({\n className: 'page-header',\n slots: [\n 'root',\n 'headerBlock',\n 'breadcrumb',\n 'controls',\n 'contentBlock',\n 'titleBlock',\n 'avatar',\n 'textBlock',\n 'titleRow',\n 'title',\n 'badge',\n 'secondaryText',\n 'actionBlock',\n 'tabs',\n ] as const,\n base: {\n root: {\n background: 'background/primary',\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n headerBlock: {\n alignItems: 'flex-start',\n display: 'flex',\n flexDirection: 'column',\n gap: { base: '16', tablet: '24' },\n paddingBlockEnd: { base: '16', tablet: '24' },\n paddingBlockStart: { base: '16', tablet: '24' },\n paddingInlineEnd: { base: '16', tablet: '32' },\n paddingInlineStart: { base: '16', tablet: '24' },\n width: '100%',\n },\n breadcrumb: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n // The trail's list is `white-space: nowrap`, so without this a long one escapes the header's\n // right edge instead of being clipped by it. `BitkitBreadcrumb` ellipsises its last crumb on\n // its own, but only once it is allowed to shrink — see the `breadcrumb` prop docs.\n overflow: 'hidden',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n },\n contentBlock: {\n alignItems: { base: 'flex-start', tablet: 'flex-end' },\n display: 'flex',\n flexDirection: { base: 'column', tablet: 'row' },\n gap: { base: '16', tablet: '32' },\n width: '100%',\n },\n titleBlock: {\n display: 'flex',\n flex: '1 0 0',\n minWidth: 0,\n },\n avatar: {\n display: 'flex',\n flexShrink: 0,\n },\n textBlock: {\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n },\n titleRow: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n minWidth: 0,\n paddingInlineEnd: { base: '0', tablet: '24' },\n },\n title: {\n color: 'text/primary',\n minWidth: 0,\n textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h1' },\n // One line with an ellipsis rather than wrapping. A wrapped title grew the header without\n // limit, and the collapsed row is a fixed 72px that a second line would break. The component\n // pairs this with `BitkitOverflowTooltip` so the full string stays readable.\n truncate: true,\n },\n badge: {\n display: 'flex',\n flexShrink: 0,\n // The design nudges the badge below the optical centre of the title line, wrapping it in\n // `flex-col h-full justify-center pt-8`. Reproduced with the same mechanism rather than a\n // fixed offset: the row centres the margin box, so this lands the badge `8 / 2` lower —\n // 12px down a 40px desktop line and 10px down a 36px mobile one, matching both frames.\n marginBlockStart: '8',\n },\n secondaryText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n actionBlock: {\n // The design puts the primary action on top once the actions stack, so `base` reverses them\n // visually while the DOM keeps its secondary-then-primary order for the row layout.\n //\n // That mismatch is deliberate and settled — please don't \"fix\" it. Actions arrive as an opaque\n // `children` list, so with one DOM order and two visual orders, no arrangement satisfies both\n // breakpoints; flipping the DOM only moves the mismatch to the row. The alternatives are a\n // design change or a structured actions API, and neither earns its cost: the surviving case is\n // a zoomed desktop window rendering `base`, where focus steps up rather than down between two\n // adjacent buttons and nothing becomes unreachable. Chasing visual order through the DOM is\n // also a pattern the design system avoids. v1 ships the same behaviour in `SubHeader.tsx:96`.\n alignItems: { base: 'stretch', tablet: 'flex-end' },\n display: 'flex',\n flexDirection: { base: 'column-reverse', tablet: 'row' },\n flexShrink: 0,\n gap: '12',\n justifyContent: 'flex-end',\n width: { base: '100%', tablet: 'auto' },\n },\n tabs: {\n // The tab list draws its own bottom border, inset by this padding. Pulling the row up by 1px\n // lands it exactly on the root's border instead of stacking a second line above it, so the\n // header keeps one full-width bottom edge as designed.\n marginBlockEnd: rem(-1),\n paddingInlineEnd: { base: '0', tablet: '32' },\n paddingInlineStart: { base: '0', tablet: '16' },\n width: '100%',\n },\n },\n compoundVariants: [\n { hasBreadcrumb: true, variant: 'minimal', css: titleInBreadcrumb },\n { hasBreadcrumb: true, isSticky: true, css: titleInBreadcrumb },\n { hasBreadcrumb: true, hasControls: true, variant: 'minimal', css: controlsRow },\n { hasBreadcrumb: true, hasControls: true, isSticky: true, css: controlsRow },\n { hasBreadcrumb: false, hasControls: true, variant: 'minimal', css: controlsWithoutTrail },\n { hasBreadcrumb: false, hasControls: true, isSticky: true, css: controlsWithoutTrail },\n ],\n variants: {\n contentVariant: {\n title: {\n titleBlock: {\n // `center` rather than the design's `flex-end`. With no secondary text the two are\n // identical — a 40px avatar against a 40px title line — so the bare sub-page card is\n // unaffected. With secondary text present, `flex-end` dropped the avatar down beside it;\n // centring matches how the app card sits its avatar against a two-line block.\n alignItems: 'center',\n gap: '12',\n },\n textBlock: {\n gap: '4',\n },\n },\n // `app` and `user` differ only in the gap between the avatar and the text — 16 and 12\n // respectively — so they share everything else via `entityContent`.\n app: {\n ...entityContent,\n titleBlock: {\n ...entityContent.titleBlock,\n gap: '16',\n },\n },\n user: {\n ...entityContent,\n titleBlock: {\n ...entityContent.titleBlock,\n gap: '12',\n },\n },\n },\n // Mobile splits the trail into its own `breadcrumb-margin` block (`pt-24 px-16`) above a\n // `p-16` header block, so the breadcrumb sits 24 from the top rather than 16. Desktop is 24\n // either way, hence the flat value.\n hasBreadcrumb: {\n true: {\n headerBlock: {\n paddingBlockStart: '24',\n },\n },\n false: {},\n },\n hasControls: {\n true: {},\n false: {},\n },\n isSticky: {\n true: {\n root: {\n // Scoped to `tablet` like the layout overrides: below the breakpoint `isSticky` is\n // ignored entirely, so the expanded header must not pick up the stuck chrome either.\n tablet: {\n borderColor: 'border/minimal',\n boxShadow: 'elevation/sm',\n },\n },\n ...collapsedSlots,\n },\n false: {},\n },\n variant: {\n default: {},\n minimal: collapsedSlots,\n },\n },\n defaultVariants: {\n contentVariant: 'title',\n hasBreadcrumb: false,\n hasControls: false,\n isSticky: false,\n variant: 'default',\n },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The collapsed single-row layout, shared by `variant=\"minimal\"` and `isSticky`. Both apply the\n * exact same overrides, so the two variants are idempotent when combined. The expanded layout\n * lives in `base` — `variant=\"default\"` and `isSticky: false` deliberately define nothing, so\n * neither can undo the other's collapse.\n *\n * Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`\n * styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal\n * variant — it always shows the title as a heading — and a single 72px row cannot hold a\n * breadcrumb plus full-width actions at 375px.\n *\n * The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the\n * component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.\n */\nconst collapsedSlots = {\n headerBlock: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n gap: '24',\n // No 72 in the size scale — the design fixes the collapsed row height.\n minHeight: rem(72),\n paddingBlockEnd: '12',\n paddingBlockStart: '12',\n paddingInlineEnd: '32',\n paddingInlineStart: '24',\n },\n },\n breadcrumb: {\n tablet: {\n flex: '0 1 auto',\n minWidth: 0,\n },\n },\n contentBlock: {\n tablet: {\n alignItems: 'center',\n flex: '1 0 0',\n // 24 between the title and the actions, per `pageType=main, isSticky=true`. The 8 belongs to\n // `actionBlock`, between the buttons.\n gap: '24',\n justifyContent: 'flex-end',\n minWidth: 0,\n },\n },\n titleBlock: {\n tablet: {\n alignItems: 'center',\n },\n },\n title: {\n tablet: {\n textStyle: 'heading/h3',\n },\n },\n actionBlock: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n gap: '8',\n width: 'auto',\n },\n },\n avatar: {\n tablet: { display: 'none' },\n },\n badge: {\n tablet: { display: 'none' },\n },\n secondaryText: {\n tablet: { display: 'none' },\n },\n tabs: {\n tablet: { display: 'none' },\n },\n} as const;\n\n/**\n * Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the\n * heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is\n * made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every\n * width without a second, conditionally rendered heading node.\n */\nconst titleInBreadcrumb = {\n titleBlock: { tablet: { srOnly: true } },\n // The row is trail + actions. The actions cannot shrink, so leaving `contentBlock` on a zero\n // basis let a long trail take the whole row and collapse it to width 0 — the buttons then\n // overflowed their own box and painted on top of the trail. Sizing the actions to their content\n // and letting the trail take what is left makes the trail yield, and its last crumb ellipsise.\n breadcrumb: { tablet: { flex: '1 1 auto' } },\n // `width: auto` matters as much as the flex here, for the same reason it does in `controlsRow`:\n // the base width is `100%`, which flex-basis `auto` resolves to, so without it this block claims\n // the whole row and squeezes the trail to nothing.\n contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread\n * apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`\n * so `space-between` has room to distribute; without that it would absorb the free space and pin\n * the controls against the actions.\n *\n * Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through\n * `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.\n * This is the row the design file calls `PageHeader-WFE`.\n */\nconst controlsRow = {\n headerBlock: { tablet: { justifyContent: 'space-between' } },\n // Undoes the `flex: 1 1 auto` that `titleInBreadcrumb` gives the trail. That growth is right for\n // the two-group row (trail + actions), but here a third group sits between them: a growing trail\n // swallows all the free space on its side and shoves the controls island against the actions.\n // Shrink-only keeps the trail ellipsising when the row is tight, while `space-between` gets free\n // space to distribute.\n breadcrumb: { tablet: { flex: '0 1 auto' } },\n // `width: auto` matters as much as the flex: the base width is `100%`, which flex-basis `auto`\n // resolves to, so the block would otherwise claim the whole row and shrink the trail until its\n // metadata truncated away. Sized to its actions instead, leaving the free space to distribute.\n contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * Collapsed with inline controls but no trail: the title takes the left slot, so the three groups\n * are the title, the controls and the actions — all inside `contentBlock`, which already spans the\n * row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left\n * growing, it would absorb the row and shove the controls against the actions.\n */\nconst controlsWithoutTrail = {\n contentBlock: { tablet: { justifyContent: 'space-between' } },\n titleBlock: { tablet: { flex: '0 1 auto' } },\n} as const;\n\n/**\n * Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title\n * and 14px secondary text. The two differ only in the avatar-to-text gap.\n */\nconst entityContent = {\n titleBlock: {\n alignItems: 'center',\n },\n title: {\n textStyle: { base: 'heading/mobile/h2', tablet: 'heading/h2' },\n },\n secondaryText: {\n textStyle: 'body/md/regular',\n },\n} as const;\n\nconst pageHeaderSlotRecipe = defineSlotRecipe({\n className: 'page-header',\n slots: [\n 'root',\n 'headerBlock',\n 'breadcrumb',\n 'controls',\n 'contentBlock',\n 'titleBlock',\n 'avatar',\n 'textBlock',\n 'titleRow',\n 'title',\n 'badge',\n 'secondaryText',\n 'actionBlock',\n 'tabs',\n ] as const,\n base: {\n root: {\n background: 'background/primary',\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n headerBlock: {\n alignItems: 'flex-start',\n display: 'flex',\n flexDirection: 'column',\n gap: { base: '16', tablet: '24' },\n paddingBlockEnd: { base: '16', tablet: '24' },\n paddingBlockStart: { base: '16', tablet: '24' },\n paddingInlineEnd: { base: '16', tablet: '32' },\n paddingInlineStart: { base: '16', tablet: '24' },\n width: '100%',\n },\n breadcrumb: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n // The trail's list is `white-space: nowrap`, so without this a long one escapes the header's\n // right edge instead of being clipped by it. `BitkitBreadcrumb` ellipsises its last crumb on\n // its own, but only once it is allowed to shrink — see the `breadcrumb` prop docs.\n overflow: 'hidden',\n },\n controls: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n },\n contentBlock: {\n alignItems: { base: 'flex-start', tablet: 'flex-end' },\n display: 'flex',\n flexDirection: { base: 'column', tablet: 'row' },\n gap: { base: '16', tablet: '32' },\n width: '100%',\n },\n titleBlock: {\n display: 'flex',\n flex: '1 0 0',\n minWidth: 0,\n },\n avatar: {\n display: 'flex',\n flexShrink: 0,\n },\n textBlock: {\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n },\n titleRow: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n minWidth: 0,\n paddingInlineEnd: { base: '0', tablet: '24' },\n },\n title: {\n color: 'text/primary',\n minWidth: 0,\n textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h1' },\n // One line with an ellipsis rather than wrapping. A wrapped title grew the header without\n // limit, and the collapsed row is a fixed 72px that a second line would break. The component\n // pairs this with `BitkitOverflowTooltip` so the full string stays readable.\n truncate: true,\n },\n badge: {\n display: 'flex',\n flexShrink: 0,\n // The design nudges the badge below the optical centre of the title line, wrapping it in\n // `flex-col h-full justify-center pt-8`. Reproduced with the same mechanism rather than a\n // fixed offset: the row centres the margin box, so this lands the badge `8 / 2` lower —\n // 12px down a 40px desktop line and 10px down a 36px mobile one, matching both frames.\n marginBlockStart: '8',\n },\n secondaryText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n actionBlock: {\n // The design puts the primary action on top once the actions stack, so `base` reverses them\n // visually while the DOM keeps its secondary-then-primary order for the row layout.\n //\n // That mismatch is deliberate and settled — please don't \"fix\" it. Actions arrive as an opaque\n // `children` list, so with one DOM order and two visual orders, no arrangement satisfies both\n // breakpoints; flipping the DOM only moves the mismatch to the row. The alternatives are a\n // design change or a structured actions API, and neither earns its cost: the surviving case is\n // a zoomed desktop window rendering `base`, where focus steps up rather than down between two\n // adjacent buttons and nothing becomes unreachable. Chasing visual order through the DOM is\n // also a pattern the design system avoids. v1 ships the same behaviour in `SubHeader.tsx:96`.\n alignItems: { base: 'stretch', tablet: 'flex-end' },\n display: 'flex',\n flexDirection: { base: 'column-reverse', tablet: 'row' },\n flexShrink: 0,\n gap: '12',\n justifyContent: 'flex-end',\n width: { base: '100%', tablet: 'auto' },\n },\n tabs: {\n // The tab list draws its own bottom border, inset by this padding. Pulling the row up by 1px\n // lands it exactly on the root's border instead of stacking a second line above it, so the\n // header keeps one full-width bottom edge as designed.\n marginBlockEnd: rem(-1),\n paddingInlineEnd: { base: '0', tablet: '32' },\n paddingInlineStart: { base: '0', tablet: '16' },\n width: '100%',\n },\n },\n compoundVariants: [\n { hasBreadcrumb: true, variant: 'minimal', css: titleInBreadcrumb },\n { hasBreadcrumb: true, isSticky: true, css: titleInBreadcrumb },\n { hasBreadcrumb: true, hasControls: true, variant: 'minimal', css: controlsRow },\n { hasBreadcrumb: true, hasControls: true, isSticky: true, css: controlsRow },\n { hasBreadcrumb: false, hasControls: true, variant: 'minimal', css: controlsWithoutTrail },\n { hasBreadcrumb: false, hasControls: true, isSticky: true, css: controlsWithoutTrail },\n ],\n variants: {\n contentVariant: {\n title: {\n titleBlock: {\n // `center` rather than the design's `flex-end`. With no secondary text the two are\n // identical — a 40px avatar against a 40px title line — so the bare sub-page card is\n // unaffected. With secondary text present, `flex-end` dropped the avatar down beside it;\n // centring matches how the app card sits its avatar against a two-line block.\n alignItems: 'center',\n gap: '12',\n },\n textBlock: {\n gap: '4',\n },\n },\n // `app` and `user` differ only in the gap between the avatar and the text — 16 and 12\n // respectively — so they share everything else via `entityContent`.\n app: {\n ...entityContent,\n titleBlock: {\n ...entityContent.titleBlock,\n gap: '16',\n },\n },\n user: {\n ...entityContent,\n titleBlock: {\n ...entityContent.titleBlock,\n gap: '12',\n },\n },\n },\n // Mobile splits the trail into its own `breadcrumb-margin` block (`pt-24 px-16`) above a\n // `p-16` header block, so the breadcrumb sits 24 from the top rather than 16. Desktop is 24\n // either way, hence the flat value.\n hasBreadcrumb: {\n true: {\n headerBlock: {\n paddingBlockStart: '24',\n },\n },\n false: {},\n },\n hasControls: {\n true: {},\n false: {},\n },\n isSticky: {\n true: {\n root: {\n // Scoped to `tablet` like the layout overrides: below the breakpoint `isSticky` is\n // ignored entirely, so the expanded header must not pick up the stuck chrome either.\n tablet: {\n borderColor: 'border/minimal',\n boxShadow: 'elevation/sm',\n },\n },\n ...collapsedSlots,\n },\n false: {},\n },\n variant: {\n default: {},\n minimal: collapsedSlots,\n },\n },\n defaultVariants: {\n contentVariant: 'title',\n hasBreadcrumb: false,\n hasControls: false,\n isSticky: false,\n variant: 'default',\n },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAM,iBAAiB;CACrB,aAAa,EACX,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,KAAK;EAEL,WAAW,IAAI,EAAE;EACjB,iBAAiB;EACjB,mBAAmB;EACnB,kBAAkB;EAClB,oBAAoB;CACtB,EACF;CACA,YAAY,EACV,QAAQ;EACN,MAAM;EACN,UAAU;CACZ,EACF;CACA,cAAc,EACZ,QAAQ;EACN,YAAY;EACZ,MAAM;EAGN,KAAK;EACL,gBAAgB;EAChB,UAAU;CACZ,EACF;CACA,YAAY,EACV,QAAQ,EACN,YAAY,SACd,EACF;CACA,OAAO,EACL,QAAQ,EACN,WAAW,aACb,EACF;CACA,aAAa,EACX,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,KAAK;EACL,OAAO;CACT,EACF;CACA,QAAQ,EACN,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,OAAO,EACL,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,eAAe,EACb,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,MAAM,EACJ,QAAQ,EAAE,SAAS,OAAO,EAC5B;AACF;;;;;;;AAQA,IAAM,oBAAoB;CACxB,YAAY,EAAE,QAAQ,EAAE,QAAQ,KAAK,EAAE;CAKvC,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;CAI3C,cAAc,EAAE,QAAQ;EAAE,MAAM;EAAY,OAAO;CAAO,EAAE;AAC9D;;;;;;;;;;;AAYA,IAAM,cAAc;CAClB,aAAa,EAAE,QAAQ,EAAE,gBAAgB,gBAAgB,EAAE;CAM3D,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;CAI3C,cAAc,EAAE,QAAQ;EAAE,MAAM;EAAY,OAAO;CAAO,EAAE;AAC9D;;;;;;;AAQA,IAAM,uBAAuB;CAC3B,cAAc,EAAE,QAAQ,EAAE,gBAAgB,gBAAgB,EAAE;CAC5D,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;AAC7C;;;;;AAMA,IAAM,gBAAgB;CACpB,YAAY,EACV,YAAY,SACd;CACA,OAAO,EACL,WAAW;EAAE,MAAM;EAAqB,QAAQ;CAAa,EAC/D;CACA,eAAe,EACb,WAAW,kBACb;AACF;AAEA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,gBAAgB;GAChB,aAAa;GACb,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,iBAAiB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC5C,mBAAmB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC9C,kBAAkB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC7C,oBAAoB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC/C,OAAO;EACT;EACA,YAAY;GACV,SAAS;GACT,UAAU;GACV,UAAU;GAIV,UAAU;EACZ;EACA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,YAAY;EACd;EACA,cAAc;GACZ,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAW;GACrD,SAAS;GACT,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,OAAO;EACT;EACA,YAAY;GACV,SAAS;GACT,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;EACd;EACA,WAAW;GACT,SAAS;GACT,eAAe;GACf,UAAU;EACZ;EACA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,kBAAkB;IAAE,MAAM;IAAK,QAAQ;GAAK;EAC9C;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,WAAW;IAAE,MAAM;IAAqB,QAAQ;GAAa;GAI7D,UAAU;EACZ;EACA,OAAO;GACL,SAAS;GACT,YAAY;GAKZ,kBAAkB;EACpB;EACA,eAAe;GACb,OAAO;GACP,WAAW;GACX,UAAU;EACZ;EACA,aAAa;GAWX,YAAY;IAAE,MAAM;IAAW,QAAQ;GAAW;GAClD,SAAS;GACT,eAAe;IAAE,MAAM;IAAkB,QAAQ;GAAM;GACvD,YAAY;GACZ,KAAK;GACL,gBAAgB;GAChB,OAAO;IAAE,MAAM;IAAQ,QAAQ;GAAO;EACxC;EACA,MAAM;GAIJ,gBAAgB,IAAI,EAAE;GACtB,kBAAkB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC5C,oBAAoB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC9C,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,eAAe;GAAM,SAAS;GAAW,KAAK;EAAkB;EAClE;GAAE,eAAe;GAAM,UAAU;GAAM,KAAK;EAAkB;EAC9D;GAAE,eAAe;GAAM,aAAa;GAAM,SAAS;GAAW,KAAK;EAAY;EAC/E;GAAE,eAAe;GAAM,aAAa;GAAM,UAAU;GAAM,KAAK;EAAY;EAC3E;GAAE,eAAe;GAAO,aAAa;GAAM,SAAS;GAAW,KAAK;EAAqB;EACzF;GAAE,eAAe;GAAO,aAAa;GAAM,UAAU;GAAM,KAAK;EAAqB;CACvF;CACA,UAAU;EACR,gBAAgB;GACd,OAAO;IACL,YAAY;KAKV,YAAY;KACZ,KAAK;IACP;IACA,WAAW,EACT,KAAK,IACP;GACF;GAGA,KAAK;IACH,GAAG;IACH,YAAY;KACV,GAAG,cAAc;KACjB,KAAK;IACP;GACF;GACA,MAAM;IACJ,GAAG;IACH,YAAY;KACV,GAAG,cAAc;KACjB,KAAK;IACP;GACF;EACF;EAIA,eAAe;GACb,MAAM,EACJ,aAAa,EACX,mBAAmB,KACrB,EACF;GACA,OAAO,CAAC;EACV;EACA,aAAa;GACX,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IACJ,MAAM,EAGJ,QAAQ;KACN,aAAa;KACb,WAAW;IACb,EACF;IACA,GAAG;GACL;GACA,OAAO,CAAC;EACV;EACA,SAAS;GACP,SAAS,CAAC;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,gBAAgB;EAChB,eAAe;EACf,aAAa;EACb,UAAU;EACV,SAAS;CACX;AACF,CAAC"}
|