@postenbring/hedwig-react 2.1.1 → 2.1.3
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/card/card.d.ts.map +1 -1
- package/dist/card/card.js +18 -1
- package/dist/card/card.js.map +1 -1
- package/dist/card/card.mjs +1 -1
- package/dist/card/index.js +18 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/{chunk-ZV4GTALL.mjs → chunk-DRSAVDIE.mjs} +12 -51
- package/dist/chunk-DRSAVDIE.mjs.map +1 -0
- package/dist/{chunk-AQZALI2J.mjs → chunk-DTU7AXY3.mjs} +2 -2
- package/dist/{chunk-LDZIJR2D.mjs → chunk-IC2K5VZJ.mjs} +19 -2
- package/dist/{chunk-LDZIJR2D.mjs.map → chunk-IC2K5VZJ.mjs.map} +1 -1
- package/dist/index.js +29 -51
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/navbar/index.js +11 -50
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +2 -2
- package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -1
- package/dist/navbar/navbar-expandable-menu.js +11 -50
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +1 -1
- package/dist/navbar/navbar.js +11 -50
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +2 -2
- package/package.json +2 -2
- package/src/card/card.tsx +11 -1
- package/src/navbar/navbar-expandable-menu.tsx +18 -52
- package/dist/chunk-ZV4GTALL.mjs.map +0 -1
- /package/dist/{chunk-AQZALI2J.mjs.map → chunk-DTU7AXY3.mjs.map} +0 -0
package/dist/card/card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,eAAO,MAAM,SAAS,0GASrB,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACpF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AACD,eAAO,MAAM,YAAY,kHAexB,CAAC;AAGF,eAAO,MAAM,QAAQ,0GASpB,CAAC;AAGF,eAAO,MAAM,cAAc;IAKjB;;OAEG;QACC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAC1B,KAAK;;aAGN,IAAI;SACR,KAAK;wDAclB,CAAC;AAGH,eAAO,MAAM,sBAAsB,0GAalC,CAAC;AAGF,eAAO,MAAM,mBAAmB,0GAa/B,CAAC;AAGF,eAAO,MAAM,mBAAmB,gHAa/B,CAAC;AAGF,eAAO,MAAM,cAAc,0GAa1B,CAAC;AAGF,eAAO,MAAM,iBAAiB,0GAa7B,CAAC;AAGF,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAClC;AACD,eAAO,MAAM,mBAAmB,sHAe/B,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC/B;;;;SAIK;IACL,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,iBAAiB,CAAC;IAGtD,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB;;;;SAIK;IACL,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,OAAO,GAAG,eAAe,GAAG,iBAAiB,CAAC;IACrD;;;;SAIK;IACL,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,MAAM,MAAM,SAAS,GAAG,yBAAyB,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAExF,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"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"}
|
package/dist/card/card.js
CHANGED
|
@@ -208,7 +208,23 @@ var CardBodyActionArrow = (0, import_react.forwardRef)(
|
|
|
208
208
|
CardBodyActionArrow.displayName = "Card.BodyActionArrow";
|
|
209
209
|
var Card = (0, import_react.forwardRef)(
|
|
210
210
|
(_a, ref) => {
|
|
211
|
-
var _b = _a, {
|
|
211
|
+
var _b = _a, {
|
|
212
|
+
as: Tag = "section",
|
|
213
|
+
asChild,
|
|
214
|
+
className,
|
|
215
|
+
children,
|
|
216
|
+
variant = "slim",
|
|
217
|
+
color,
|
|
218
|
+
imagePosition
|
|
219
|
+
} = _b, rest = __objRest(_b, [
|
|
220
|
+
"as",
|
|
221
|
+
"asChild",
|
|
222
|
+
"className",
|
|
223
|
+
"children",
|
|
224
|
+
"variant",
|
|
225
|
+
"color",
|
|
226
|
+
"imagePosition"
|
|
227
|
+
]);
|
|
212
228
|
const Component = asChild ? import_react_slot.Slot : Tag;
|
|
213
229
|
const effectiveColor = variant === "focus" && !color ? "darker" : color;
|
|
214
230
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -219,6 +235,7 @@ var Card = (0, import_react.forwardRef)(
|
|
|
219
235
|
{ "hds-card--full-width": variant === "full-width" },
|
|
220
236
|
{ "hds-card--miniature": variant === "miniature" },
|
|
221
237
|
{ "hds-card--focus": variant === "focus" },
|
|
238
|
+
{ "hds-card--slim": variant === "slim" },
|
|
222
239
|
{ "hds-card--color-white": effectiveColor === "white" },
|
|
223
240
|
{ "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
|
|
224
241
|
{ "hds-card--color-darker": effectiveColor === "darker" },
|
package/dist/card/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n as: Tag = \"section\",\n asChild,\n className,\n children,\n variant = \"slim\",\n color,\n imagePosition,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--slim\": variant === \"slim\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
package/dist/card/card.mjs
CHANGED
package/dist/card/index.js
CHANGED
|
@@ -209,7 +209,23 @@ var CardBodyActionArrow = (0, import_react.forwardRef)(
|
|
|
209
209
|
CardBodyActionArrow.displayName = "Card.BodyActionArrow";
|
|
210
210
|
var Card = (0, import_react.forwardRef)(
|
|
211
211
|
(_a, ref) => {
|
|
212
|
-
var _b = _a, {
|
|
212
|
+
var _b = _a, {
|
|
213
|
+
as: Tag = "section",
|
|
214
|
+
asChild,
|
|
215
|
+
className,
|
|
216
|
+
children,
|
|
217
|
+
variant = "slim",
|
|
218
|
+
color,
|
|
219
|
+
imagePosition
|
|
220
|
+
} = _b, rest = __objRest(_b, [
|
|
221
|
+
"as",
|
|
222
|
+
"asChild",
|
|
223
|
+
"className",
|
|
224
|
+
"children",
|
|
225
|
+
"variant",
|
|
226
|
+
"color",
|
|
227
|
+
"imagePosition"
|
|
228
|
+
]);
|
|
213
229
|
const Component = asChild ? import_react_slot.Slot : Tag;
|
|
214
230
|
const effectiveColor = variant === "focus" && !color ? "darker" : color;
|
|
215
231
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -220,6 +236,7 @@ var Card = (0, import_react.forwardRef)(
|
|
|
220
236
|
{ "hds-card--full-width": variant === "full-width" },
|
|
221
237
|
{ "hds-card--miniature": variant === "miniature" },
|
|
222
238
|
{ "hds-card--focus": variant === "focus" },
|
|
239
|
+
{ "hds-card--slim": variant === "slim" },
|
|
223
240
|
{ "hds-card--color-white": effectiveColor === "white" },
|
|
224
241
|
{ "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
|
|
225
242
|
{ "hds-card--color-darker": effectiveColor === "darker" },
|
package/dist/card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/card/index.tsx","../../src/card/card.tsx"],"sourcesContent":["export {\n Card,\n CardMedia,\n CardMediaImg,\n CardBody,\n CardBodyHeader,\n CardBodyHeaderOverline,\n CardBodyHeaderTitle,\n CardBodyDescription,\n CardBodyAction,\n CardBodyActionArrow,\n} from \"./card\";\n\nexport type * from \"./card\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/card/index.tsx","../../src/card/card.tsx"],"sourcesContent":["export {\n Card,\n CardMedia,\n CardMediaImg,\n CardBody,\n CardBodyHeader,\n CardBodyHeaderOverline,\n CardBodyHeaderTitle,\n CardBodyDescription,\n CardBodyAction,\n CardBodyActionArrow,\n} from \"./card\";\n\nexport type * from \"./card\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n as: Tag = \"section\",\n asChild,\n className,\n children,\n variant = \"slim\",\n color,\n imagePosition,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--slim\": variant === \"slim\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
package/dist/card/index.mjs
CHANGED
|
@@ -60,17 +60,6 @@ var NavbarExpandableMenuTrigger = forwardRef(
|
|
|
60
60
|
"className"
|
|
61
61
|
]);
|
|
62
62
|
const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
|
|
63
|
-
const [textWidth, setTextWidth] = useState(void 0);
|
|
64
|
-
const measurementId = useId();
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
var _a2, _b2, _c, _d;
|
|
67
|
-
const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
|
|
68
|
-
const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
|
|
69
|
-
setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);
|
|
70
|
-
}, [measurementId]);
|
|
71
|
-
const text = open ? whenOpenText : whenClosedText;
|
|
72
|
-
const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
|
|
73
|
-
const icon = open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {});
|
|
74
63
|
function toggleOpen() {
|
|
75
64
|
setOpen(!open);
|
|
76
65
|
}
|
|
@@ -79,51 +68,23 @@ var NavbarExpandableMenuTrigger = forwardRef(
|
|
|
79
68
|
__spreadProps(__spreadValues({
|
|
80
69
|
"aria-expanded": open,
|
|
81
70
|
"aria-controls": contentId,
|
|
82
|
-
className: clsx(
|
|
71
|
+
className: clsx(
|
|
72
|
+
"hds-navbar__item",
|
|
73
|
+
className,
|
|
74
|
+
open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
|
|
75
|
+
),
|
|
83
76
|
onClick: toggleOpen,
|
|
84
77
|
ref,
|
|
85
|
-
title,
|
|
78
|
+
title: open ? whenOpenHelperTitle : whenClosedHelperTitle,
|
|
86
79
|
type: "button",
|
|
87
80
|
style: __spreadValues({ position: "relative" }, style)
|
|
88
81
|
}, rest), {
|
|
89
82
|
children: [
|
|
90
|
-
/* @__PURE__ */
|
|
91
|
-
"span",
|
|
92
|
-
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
style: {
|
|
96
|
-
position: "absolute",
|
|
97
|
-
visibility: "hidden",
|
|
98
|
-
pointerEvents: "none",
|
|
99
|
-
whiteSpace: "nowrap"
|
|
100
|
-
},
|
|
101
|
-
children: whenOpenText
|
|
102
|
-
}
|
|
103
|
-
),
|
|
104
|
-
/* @__PURE__ */ jsx(
|
|
105
|
-
"span",
|
|
106
|
-
{
|
|
107
|
-
id: `${measurementId}-when-open`,
|
|
108
|
-
"aria-hidden": true,
|
|
109
|
-
style: {
|
|
110
|
-
position: "absolute",
|
|
111
|
-
visibility: "hidden",
|
|
112
|
-
pointerEvents: "none",
|
|
113
|
-
whiteSpace: "nowrap"
|
|
114
|
-
},
|
|
115
|
-
children: whenClosedText
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
/* @__PURE__ */ jsx(
|
|
119
|
-
"span",
|
|
120
|
-
{
|
|
121
|
-
style: { width: textWidth, whiteSpace: "nowrap" },
|
|
122
|
-
className: clsx("hds-navbar__item-responsive-text"),
|
|
123
|
-
children: text
|
|
124
|
-
}
|
|
125
|
-
),
|
|
126
|
-
/* @__PURE__ */ jsx("span", { style: { width: 32, height: 32 }, children: icon })
|
|
83
|
+
/* @__PURE__ */ jsxs("span", { className: "hds-navbar__item-responsive-text", children: [
|
|
84
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": !open, className: clsx("hds-navbar__item-whenopentext"), children: whenOpenText }),
|
|
85
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": open, className: clsx("hds-navbar__item-whenclosedtext"), children: whenClosedText })
|
|
86
|
+
] }),
|
|
87
|
+
/* @__PURE__ */ jsx("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}) })
|
|
127
88
|
]
|
|
128
89
|
})
|
|
129
90
|
);
|
|
@@ -153,4 +114,4 @@ export {
|
|
|
153
114
|
NavbarExpandableMenuTrigger,
|
|
154
115
|
NavbarExpandableMenuContent
|
|
155
116
|
};
|
|
156
|
-
//# sourceMappingURL=chunk-
|
|
117
|
+
//# sourceMappingURL=chunk-DRSAVDIE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\ninterface ExpandableMenuContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nconst ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);\nexport const useNavbarExpendableMenuContext = () => {\n const value = useContext(ExpandableMenuContext);\n if (value === null) {\n throw new Error(\"useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu\");\n }\n return value;\n};\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const contentId = useId();\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>\n {children}\n </ExpandableMenuContext.Provider>\n );\n}\n\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\n\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const { contentId, open, setOpen } = useNavbarExpendableMenuContext();\n\n function toggleOpen() {\n setOpen(!open);\n }\n\n return (\n <button\n aria-expanded={open}\n aria-controls={contentId}\n className={clsx(\n \"hds-navbar__item\",\n className as undefined,\n open ? \"hds-navbar__item--open\" : \"hds-navbar__item--closed\",\n )}\n onClick={toggleOpen}\n ref={ref}\n title={open ? whenOpenHelperTitle : whenClosedHelperTitle}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n <span className=\"hds-navbar__item-responsive-text\">\n <span aria-hidden={!open} className={clsx(\"hds-navbar__item-whenopentext\")}>\n {whenOpenText}\n </span>\n <span aria-hidden={open} className={clsx(\"hds-navbar__item-whenclosedtext\")}>\n {whenClosedText}\n </span>\n </span>\n <span style={{ width: 32, height: 32 }}>{open ? <CloseIcon /> : <MenuIcon />}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const { contentId, open } = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n id={contentId}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,eAAe,YAAY,YAAY,UAAU,WAAW,aAAa;AAClF,SAAS,YAAY;AAkDjB,cA4DI,YA5DJ;AAxCJ,IAAM,wBAAwB,cAAiD,IAAI;AAC5E,IAAM,iCAAiC,MAAM;AAClD,QAAM,QAAQ,WAAW,qBAAqB;AAC9C,MAAI,UAAU,MAAM;AAClB,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AACA,SAAO;AACT;AAaO,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,YAAY,MAAM;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,MAAM;AACR,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,IAAI,KAAK,wBAAwB,CAAC;AAC1D,YAAM,mBAAmB;AAAA,QACvB,SAAS,uBAAuB,KAAK,YAAY,CAAC,EAAE,CAAC;AAAA,MACvD;AAEA,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,KAAK,wBAAwB,CAAC;AAC7D,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,WAAW,MAAM,QAAQ,GAC/D,UACH;AAEJ;AAEA,qBAAqB,cAAc;AAc5B,IAAM,8BAA8B;AAAA,EAIzC,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,IApFN,IA4EI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAKF,UAAM,EAAE,WAAW,MAAM,QAAQ,IAAI,+BAA+B;AAEpE,aAAS,aAAa;AACpB,cAAQ,CAAC,IAAI;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,OAAO,2BAA2B;AAAA,QACpC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,OAAO,OAAO,sBAAsB;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,iBAAE,UAAU,cAAe;AAAA,SAC9B,OAbL;AAAA,QAeC;AAAA,+BAAC,UAAK,WAAU,oCACd;AAAA,gCAAC,UAAK,eAAa,CAAC,MAAM,WAAW,KAAK,+BAA+B,GACtE,wBACH;AAAA,YACA,oBAAC,UAAK,eAAa,MAAM,WAAW,KAAK,iCAAiC,GACvE,0BACH;AAAA,aACF;AAAA,UACA,oBAAC,UAAK,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAI,iBAAO,oBAAC,aAAU,IAAK,oBAAC,YAAS,GAAG;AAAA;AAAA;AAAA,IAC/E;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AAUnC,IAAM,8BAA8B,WAGzC,CAAC,IAAkC,QAAQ;AAA1C,eAAE,YAAU,UAzIf,IAyIG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACb,QAAM,EAAE,WAAW,KAAK,IAAI,+BAA+B;AAC3D,SACE;AAAA,IAAC;AAAA,kEACK,OADL;AAAA,MAEC,IAAI;AAAA,MACJ,WAAW,KAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,QACxB,EAAE,OAAO,OAAO,SAAY,OAAO,IALxC;AAAA,MAMC;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":[]}
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
NavbarExpandableMenu,
|
|
3
3
|
NavbarExpandableMenuContent,
|
|
4
4
|
NavbarExpandableMenuTrigger
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-DRSAVDIE.mjs";
|
|
6
6
|
import {
|
|
7
7
|
__objRest,
|
|
8
8
|
__spreadProps,
|
|
@@ -133,4 +133,4 @@ export {
|
|
|
133
133
|
NavbarNavigation,
|
|
134
134
|
Navbar
|
|
135
135
|
};
|
|
136
|
-
//# sourceMappingURL=chunk-
|
|
136
|
+
//# sourceMappingURL=chunk-DTU7AXY3.mjs.map
|
|
@@ -151,7 +151,23 @@ var CardBodyActionArrow = forwardRef(
|
|
|
151
151
|
CardBodyActionArrow.displayName = "Card.BodyActionArrow";
|
|
152
152
|
var Card = forwardRef(
|
|
153
153
|
(_a, ref) => {
|
|
154
|
-
var _b = _a, {
|
|
154
|
+
var _b = _a, {
|
|
155
|
+
as: Tag = "section",
|
|
156
|
+
asChild,
|
|
157
|
+
className,
|
|
158
|
+
children,
|
|
159
|
+
variant = "slim",
|
|
160
|
+
color,
|
|
161
|
+
imagePosition
|
|
162
|
+
} = _b, rest = __objRest(_b, [
|
|
163
|
+
"as",
|
|
164
|
+
"asChild",
|
|
165
|
+
"className",
|
|
166
|
+
"children",
|
|
167
|
+
"variant",
|
|
168
|
+
"color",
|
|
169
|
+
"imagePosition"
|
|
170
|
+
]);
|
|
155
171
|
const Component = asChild ? Slot : Tag;
|
|
156
172
|
const effectiveColor = variant === "focus" && !color ? "darker" : color;
|
|
157
173
|
return /* @__PURE__ */ jsx(
|
|
@@ -162,6 +178,7 @@ var Card = forwardRef(
|
|
|
162
178
|
{ "hds-card--full-width": variant === "full-width" },
|
|
163
179
|
{ "hds-card--miniature": variant === "miniature" },
|
|
164
180
|
{ "hds-card--focus": variant === "focus" },
|
|
181
|
+
{ "hds-card--slim": variant === "slim" },
|
|
165
182
|
{ "hds-card--color-white": effectiveColor === "white" },
|
|
166
183
|
{ "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
|
|
167
184
|
{ "hds-card--color-darker": effectiveColor === "darker" },
|
|
@@ -199,4 +216,4 @@ export {
|
|
|
199
216
|
CardBodyActionArrow,
|
|
200
217
|
Card
|
|
201
218
|
};
|
|
202
|
-
//# sourceMappingURL=chunk-
|
|
219
|
+
//# sourceMappingURL=chunk-IC2K5VZJ.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n as: Tag = \"section\",\n asChild,\n className,\n children,\n variant = \"slim\",\n color,\n imagePosition,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--slim\": variant === \"slim\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -631,7 +631,23 @@ var CardBodyActionArrow = (0, import_react12.forwardRef)(
|
|
|
631
631
|
CardBodyActionArrow.displayName = "Card.BodyActionArrow";
|
|
632
632
|
var Card = (0, import_react12.forwardRef)(
|
|
633
633
|
(_a, ref) => {
|
|
634
|
-
var _b = _a, {
|
|
634
|
+
var _b = _a, {
|
|
635
|
+
as: Tag = "section",
|
|
636
|
+
asChild,
|
|
637
|
+
className,
|
|
638
|
+
children,
|
|
639
|
+
variant = "slim",
|
|
640
|
+
color,
|
|
641
|
+
imagePosition
|
|
642
|
+
} = _b, rest = __objRest(_b, [
|
|
643
|
+
"as",
|
|
644
|
+
"asChild",
|
|
645
|
+
"className",
|
|
646
|
+
"children",
|
|
647
|
+
"variant",
|
|
648
|
+
"color",
|
|
649
|
+
"imagePosition"
|
|
650
|
+
]);
|
|
635
651
|
const Component = asChild ? import_react_slot5.Slot : Tag;
|
|
636
652
|
const effectiveColor = variant === "focus" && !color ? "darker" : color;
|
|
637
653
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
@@ -642,6 +658,7 @@ var Card = (0, import_react12.forwardRef)(
|
|
|
642
658
|
{ "hds-card--full-width": variant === "full-width" },
|
|
643
659
|
{ "hds-card--miniature": variant === "miniature" },
|
|
644
660
|
{ "hds-card--focus": variant === "focus" },
|
|
661
|
+
{ "hds-card--slim": variant === "slim" },
|
|
645
662
|
{ "hds-card--color-white": effectiveColor === "white" },
|
|
646
663
|
{ "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
|
|
647
664
|
{ "hds-card--color-darker": effectiveColor === "darker" },
|
|
@@ -2039,17 +2056,6 @@ var NavbarExpandableMenuTrigger = (0, import_react38.forwardRef)(
|
|
|
2039
2056
|
"className"
|
|
2040
2057
|
]);
|
|
2041
2058
|
const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
|
|
2042
|
-
const [textWidth, setTextWidth] = (0, import_react38.useState)(void 0);
|
|
2043
|
-
const measurementId = (0, import_react38.useId)();
|
|
2044
|
-
(0, import_react38.useEffect)(() => {
|
|
2045
|
-
var _a2, _b2, _c, _d;
|
|
2046
|
-
const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
|
|
2047
|
-
const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
|
|
2048
|
-
setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);
|
|
2049
|
-
}, [measurementId]);
|
|
2050
|
-
const text = open ? whenOpenText : whenClosedText;
|
|
2051
|
-
const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
|
|
2052
|
-
const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuIcon, {});
|
|
2053
2059
|
function toggleOpen() {
|
|
2054
2060
|
setOpen(!open);
|
|
2055
2061
|
}
|
|
@@ -2058,51 +2064,23 @@ var NavbarExpandableMenuTrigger = (0, import_react38.forwardRef)(
|
|
|
2058
2064
|
__spreadProps(__spreadValues({
|
|
2059
2065
|
"aria-expanded": open,
|
|
2060
2066
|
"aria-controls": contentId,
|
|
2061
|
-
className: (0, import_typed_classname33.clsx)(
|
|
2067
|
+
className: (0, import_typed_classname33.clsx)(
|
|
2068
|
+
"hds-navbar__item",
|
|
2069
|
+
className,
|
|
2070
|
+
open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
|
|
2071
|
+
),
|
|
2062
2072
|
onClick: toggleOpen,
|
|
2063
2073
|
ref,
|
|
2064
|
-
title,
|
|
2074
|
+
title: open ? whenOpenHelperTitle : whenClosedHelperTitle,
|
|
2065
2075
|
type: "button",
|
|
2066
2076
|
style: __spreadValues({ position: "relative" }, style)
|
|
2067
2077
|
}, rest), {
|
|
2068
2078
|
children: [
|
|
2069
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.
|
|
2070
|
-
"span",
|
|
2071
|
-
{
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
style: {
|
|
2075
|
-
position: "absolute",
|
|
2076
|
-
visibility: "hidden",
|
|
2077
|
-
pointerEvents: "none",
|
|
2078
|
-
whiteSpace: "nowrap"
|
|
2079
|
-
},
|
|
2080
|
-
children: whenOpenText
|
|
2081
|
-
}
|
|
2082
|
-
),
|
|
2083
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2084
|
-
"span",
|
|
2085
|
-
{
|
|
2086
|
-
id: `${measurementId}-when-open`,
|
|
2087
|
-
"aria-hidden": true,
|
|
2088
|
-
style: {
|
|
2089
|
-
position: "absolute",
|
|
2090
|
-
visibility: "hidden",
|
|
2091
|
-
pointerEvents: "none",
|
|
2092
|
-
whiteSpace: "nowrap"
|
|
2093
|
-
},
|
|
2094
|
-
children: whenClosedText
|
|
2095
|
-
}
|
|
2096
|
-
),
|
|
2097
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2098
|
-
"span",
|
|
2099
|
-
{
|
|
2100
|
-
style: { width: textWidth, whiteSpace: "nowrap" },
|
|
2101
|
-
className: (0, import_typed_classname33.clsx)("hds-navbar__item-responsive-text"),
|
|
2102
|
-
children: text
|
|
2103
|
-
}
|
|
2104
|
-
),
|
|
2105
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
|
|
2079
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hds-navbar__item-responsive-text", children: [
|
|
2080
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname33.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
|
|
2081
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname33.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
|
|
2082
|
+
] }),
|
|
2083
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuIcon, {}) })
|
|
2106
2084
|
]
|
|
2107
2085
|
})
|
|
2108
2086
|
);
|