bonprix-design-system 0.69.2 → 0.69.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.
|
@@ -7,7 +7,7 @@ var a = e({
|
|
|
7
7
|
base: ["preflight rounded-sm inline-flex before:content-['_'] before:whitespace-pre before:w-0 relative items-center", "focus-visible:outline focus-visible:outline-1 group"],
|
|
8
8
|
slots: {
|
|
9
9
|
icon: "h-4 w-4 inline-block",
|
|
10
|
-
label: "typography-link-large underline underline-offset-2 hover:decoration-2 group-focus:no-underline"
|
|
10
|
+
label: "typography-link-large underline underline-offset-2 hover:decoration-2 group-focus-visible:no-underline"
|
|
11
11
|
},
|
|
12
12
|
variants: {
|
|
13
13
|
small: { true: { label: "typography-link-small" } },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import Icon from \"@bonprix-ds/react-icon\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n /* the before: styles are used to create content that allows proper baseline alignment when suing inline-flex elements with text:\n https://stackoverflow.com/questions/73715565/how-to-get-a-flex-item-to-participate-in-baseline-alignment-and-be-centered\n https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n */\n base: [\n \"preflight rounded-sm inline-flex before:content-['_'] before:whitespace-pre before:w-0 relative items-center\",\n \"focus-visible:outline focus-visible:outline-1 group\",\n ],\n slots: {\n icon: \"h-4 w-4 inline-block\",\n label: \"typography-link-large underline underline-offset-2 hover:decoration-2 group-focus:no-underline\",\n },\n variants: {\n small: {\n true: {\n label: \"typography-link-small\",\n },\n },\n hideUnderline: {\n true: {\n label: \"no-underline hover:underline\",\n },\n },\n arrowPosition: {\n left: \"\",\n right: \"flex-row-reverse justify-end\",\n },\n inverted: {\n false: {\n base: \"focus-visible:outline-clr-primary\",\n icon: \"fill-clr-primary\",\n label: \"text-clr-primary\",\n },\n true: {\n base: \"focus-visible:outline-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n label: \"text-clr-primary-inverse\",\n },\n },\n },\n});\n\ninterface BaseProps {\n /** The content of the link. */\n children: string;\n /** if `true`, an arrow will be shown in the end of the content. */\n showArrow?: boolean;\n /** The position of the arrow, if `showArrow` is set to `true`. */\n arrowPosition?: \"left\" | \"right\";\n /* If set to `true`, the link will match `body2`, otherwise `body1`. */\n small?: boolean;\n /** If set to `true`, the underline will be hidden. */\n hideUnderline?: boolean;\n /** Alternative label for the screen reader. This can for example be used, if a proper name cannot be setup because of the position in the text. */\n srLabel?: string;\n /** If `true`, inverts the colors of the component. */\n inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Link = <C extends ElementType>({\n children,\n small = false,\n hideUnderline = false,\n showArrow = false,\n arrowPosition = \"left\",\n srLabel,\n inverted,\n component = \"a\" as C,\n ...props\n}: Props<C>) => {\n const Component: ElementType = component;\n const buttonDefaultProps = component === \"button\" ? { type: \"button\" } : {};\n\n const { base, icon, label } = generateClasses({ small, hideUnderline, arrowPosition, inverted });\n\n const content = (\n <>\n {showArrow && <Icon variant={arrowPosition === \"left\" ? \"arrow-left\" : \"arrow-right\"} className={icon()} />}\n {/* We need to style decoration-thickness directly on the label.\n Otherwise it wont be propagated because of the inline-flex on the anchor element */}\n {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n <span aria-hidden={srLabel ? \"true\" : undefined} className={label()}>\n {children}\n </span>\n </>\n );\n\n return (\n <Component\n {...props}\n {...buttonDefaultProps}\n className={base()}\n data-bpds=\"link\"\n data-bpds-small={small}\n data-bpds-hide-underline={hideUnderline}\n data-bpds-arrow-position={arrowPosition}\n data-bpds-show-arrow={showArrow}\n data-bpds-inverted={inverted}\n >\n {content}\n </Component>\n );\n};\n\nexport default Link;\n"],"mappings":";;;;;AAKA,IAAM,IAAkB,EAAG;CAKzB,MAAM,CACJ,gHACA,qDACF;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,OAAO,wBACT,EACF;EACA,eAAe,EACb,MAAM,EACJ,OAAO,+BACT,EACF;EACA,eAAe;GACb,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,OAAO;IACL,MAAM;IACN,MAAM;IACN,OAAO;GACT;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;GACT;EACF;CACF;AACF,CAAC,GAwBK,KAA+B,EACnC,aACA,WAAQ,IACR,mBAAgB,IAChB,eAAY,IACZ,mBAAgB,QAChB,YACA,aACA,eAAY,KACZ,GAAG,QACW;CACd,IAAM,IAAyB,GACzB,IAAqB,MAAc,WAAW,EAAE,MAAM,SAAS,IAAI,CAAC,GAEpE,EAAE,SAAM,SAAM,aAAU,EAAgB;EAAE;EAAO;EAAe;EAAe;CAAS,CAAC,GAEzF,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KAAa,kBAAC,GAAD;GAAM,SAAS,MAAkB,SAAS,eAAe;GAAe,WAAW,EAAK;EAAI,CAAA;EAGzG,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAc,CAAA;EACrD,kBAAC,QAAD;GAAM,eAAa,IAAU,SAAS,KAAA;GAAW,WAAW,EAAM;GAC/D;EACG,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,EAAK;EAChB,aAAU;EACV,mBAAiB;EACjB,4BAA0B;EAC1B,4BAA0B;EAC1B,wBAAsB;EACtB,sBAAoB;EAEnB,UAAA;CACQ,CAAA;AAEf"}
|
|
1
|
+
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import Icon from \"@bonprix-ds/react-icon\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n /* the before: styles are used to create content that allows proper baseline alignment when suing inline-flex elements with text:\n https://stackoverflow.com/questions/73715565/how-to-get-a-flex-item-to-participate-in-baseline-alignment-and-be-centered\n https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n */\n base: [\n \"preflight rounded-sm inline-flex before:content-['_'] before:whitespace-pre before:w-0 relative items-center\",\n \"focus-visible:outline focus-visible:outline-1 group\",\n ],\n slots: {\n icon: \"h-4 w-4 inline-block\",\n label: \"typography-link-large underline underline-offset-2 hover:decoration-2 group-focus-visible:no-underline\",\n },\n variants: {\n small: {\n true: {\n label: \"typography-link-small\",\n },\n },\n hideUnderline: {\n true: {\n label: \"no-underline hover:underline\",\n },\n },\n arrowPosition: {\n left: \"\",\n right: \"flex-row-reverse justify-end\",\n },\n inverted: {\n false: {\n base: \"focus-visible:outline-clr-primary\",\n icon: \"fill-clr-primary\",\n label: \"text-clr-primary\",\n },\n true: {\n base: \"focus-visible:outline-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n label: \"text-clr-primary-inverse\",\n },\n },\n },\n});\n\ninterface BaseProps {\n /** The content of the link. */\n children: string;\n /** if `true`, an arrow will be shown in the end of the content. */\n showArrow?: boolean;\n /** The position of the arrow, if `showArrow` is set to `true`. */\n arrowPosition?: \"left\" | \"right\";\n /* If set to `true`, the link will match `body2`, otherwise `body1`. */\n small?: boolean;\n /** If set to `true`, the underline will be hidden. */\n hideUnderline?: boolean;\n /** Alternative label for the screen reader. This can for example be used, if a proper name cannot be setup because of the position in the text. */\n srLabel?: string;\n /** If `true`, inverts the colors of the component. */\n inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Link = <C extends ElementType>({\n children,\n small = false,\n hideUnderline = false,\n showArrow = false,\n arrowPosition = \"left\",\n srLabel,\n inverted,\n component = \"a\" as C,\n ...props\n}: Props<C>) => {\n const Component: ElementType = component;\n const buttonDefaultProps = component === \"button\" ? { type: \"button\" } : {};\n\n const { base, icon, label } = generateClasses({ small, hideUnderline, arrowPosition, inverted });\n\n const content = (\n <>\n {showArrow && <Icon variant={arrowPosition === \"left\" ? \"arrow-left\" : \"arrow-right\"} className={icon()} />}\n {/* We need to style decoration-thickness directly on the label.\n Otherwise it wont be propagated because of the inline-flex on the anchor element */}\n {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n <span aria-hidden={srLabel ? \"true\" : undefined} className={label()}>\n {children}\n </span>\n </>\n );\n\n return (\n <Component\n {...props}\n {...buttonDefaultProps}\n className={base()}\n data-bpds=\"link\"\n data-bpds-small={small}\n data-bpds-hide-underline={hideUnderline}\n data-bpds-arrow-position={arrowPosition}\n data-bpds-show-arrow={showArrow}\n data-bpds-inverted={inverted}\n >\n {content}\n </Component>\n );\n};\n\nexport default Link;\n"],"mappings":";;;;;AAKA,IAAM,IAAkB,EAAG;CAKzB,MAAM,CACJ,gHACA,qDACF;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,OAAO,wBACT,EACF;EACA,eAAe,EACb,MAAM,EACJ,OAAO,+BACT,EACF;EACA,eAAe;GACb,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,OAAO;IACL,MAAM;IACN,MAAM;IACN,OAAO;GACT;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;GACT;EACF;CACF;AACF,CAAC,GAwBK,KAA+B,EACnC,aACA,WAAQ,IACR,mBAAgB,IAChB,eAAY,IACZ,mBAAgB,QAChB,YACA,aACA,eAAY,KACZ,GAAG,QACW;CACd,IAAM,IAAyB,GACzB,IAAqB,MAAc,WAAW,EAAE,MAAM,SAAS,IAAI,CAAC,GAEpE,EAAE,SAAM,SAAM,aAAU,EAAgB;EAAE;EAAO;EAAe;EAAe;CAAS,CAAC,GAEzF,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KAAa,kBAAC,GAAD;GAAM,SAAS,MAAkB,SAAS,eAAe;GAAe,WAAW,EAAK;EAAI,CAAA;EAGzG,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAc,CAAA;EACrD,kBAAC,QAAD;GAAM,eAAa,IAAU,SAAS,KAAA;GAAW,WAAW,EAAM;GAC/D;EACG,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,EAAK;EAChB,aAAU;EACV,mBAAiB;EACjB,4BAA0B;EAC1B,4BAA0B;EAC1B,wBAAsB;EACtB,sBAAoB;EAEnB,UAAA;CACQ,CAAA;AAEf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bonprix-design-system",
|
|
3
|
-
"version": "0.69.
|
|
3
|
+
"version": "0.69.3",
|
|
4
4
|
"description": "Design System of bonprix",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -52,14 +52,15 @@
|
|
|
52
52
|
"@bonprix-ds/react-accordion": "1.0.3",
|
|
53
53
|
"@bonprix-ds/react-alert": "1.0.2",
|
|
54
54
|
"@bonprix-ds/react-availability": "1.0.2",
|
|
55
|
+
"@bonprix-ds/react-benefit-tag": "1.1.3",
|
|
55
56
|
"@bonprix-ds/react-checkbox": "1.0.2",
|
|
56
57
|
"@bonprix-ds/react-checkbox-group": "1.0.2",
|
|
57
58
|
"@bonprix-ds/react-collapsible": "1.0.3",
|
|
59
|
+
"@bonprix-ds/react-container": "1.0.2",
|
|
58
60
|
"@bonprix-ds/react-figurine": "1.0.3",
|
|
59
61
|
"@bonprix-ds/react-grid": "1.0.2",
|
|
60
62
|
"@bonprix-ds/react-icon": "1.1.1",
|
|
61
63
|
"@bonprix-ds/react-icon-button": "1.1.1",
|
|
62
|
-
"@bonprix-ds/react-benefit-tag": "1.1.3",
|
|
63
64
|
"@bonprix-ds/react-illustration": "1.0.3",
|
|
64
65
|
"@bonprix-ds/react-list": "1.1.2",
|
|
65
66
|
"@bonprix-ds/react-logo": "1.0.3",
|
|
@@ -67,15 +68,14 @@
|
|
|
67
68
|
"@bonprix-ds/react-price": "1.0.3",
|
|
68
69
|
"@bonprix-ds/react-price-stacked": "1.0.2",
|
|
69
70
|
"@bonprix-ds/react-radio-group": "1.0.2",
|
|
70
|
-
"@bonprix-ds/react-
|
|
71
|
-
"@bonprix-ds/react-select": "1.0.
|
|
71
|
+
"@bonprix-ds/react-rating": "1.0.2",
|
|
72
|
+
"@bonprix-ds/react-select": "1.0.3",
|
|
72
73
|
"@bonprix-ds/react-spinner": "1.0.2",
|
|
73
74
|
"@bonprix-ds/react-step-navi": "1.0.2",
|
|
74
75
|
"@bonprix-ds/react-switch": "1.0.2",
|
|
75
76
|
"@bonprix-ds/react-tooltip": "1.0.2",
|
|
76
77
|
"@bonprix-ds/react-typography": "1.0.2",
|
|
77
|
-
"@bonprix-ds/utils": "0.1.2"
|
|
78
|
-
"@bonprix-ds/react-rating": "1.0.2"
|
|
78
|
+
"@bonprix-ds/utils": "0.1.2"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
81
|
"lit": "^3.3.1",
|