@dnanpm/ui-components 0.4.0 → 0.6.0
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/README.md +3 -1
- package/dist/components/Accordion/Accordion.css +4 -4
- package/dist/components/Accordion/Accordion.module.css.cjs +3 -3
- package/dist/components/Accordion/Accordion.module.css.js +3 -3
- package/dist/components/AccordionItem/AccordionItem.css +18 -18
- package/dist/components/AccordionItem/AccordionItem.module.css.cjs +11 -11
- package/dist/components/AccordionItem/AccordionItem.module.css.js +11 -11
- package/dist/components/Breadcrumb/Breadcrumb.css +11 -12
- package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs +6 -6
- package/dist/components/Breadcrumb/Breadcrumb.module.css.js +6 -6
- package/dist/components/Button/Button.cjs +3 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.css +33 -33
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +3 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.module.css.cjs +11 -11
- package/dist/components/Button/Button.module.css.js +11 -11
- package/dist/components/Hero/Hero.cjs +29 -38
- package/dist/components/Hero/Hero.cjs.map +1 -1
- package/dist/components/Hero/Hero.css +64 -60
- package/dist/components/Hero/Hero.d.ts.map +1 -1
- package/dist/components/Hero/Hero.js +29 -38
- package/dist/components/Hero/Hero.js.map +1 -1
- package/dist/components/Hero/Hero.module.css.cjs +20 -19
- package/dist/components/Hero/Hero.module.css.cjs.map +1 -1
- package/dist/components/Hero/Hero.module.css.js +20 -19
- package/dist/components/Hero/Hero.module.css.js.map +1 -1
- package/dist/components/Hero/Hero.types.d.ts +1 -5
- package/dist/components/Hero/Hero.types.d.ts.map +1 -1
- package/dist/components/Hero/Hero.utils.cjs +2 -1
- package/dist/components/Hero/Hero.utils.cjs.map +1 -1
- package/dist/components/Hero/Hero.utils.d.ts.map +1 -1
- package/dist/components/Hero/Hero.utils.js +2 -1
- package/dist/components/Hero/Hero.utils.js.map +1 -1
- package/dist/components/IconButton/IconButton.cjs +123 -0
- package/dist/components/IconButton/IconButton.cjs.map +1 -0
- package/dist/components/IconButton/IconButton.css +181 -0
- package/dist/components/IconButton/IconButton.d.ts +3 -0
- package/dist/components/IconButton/IconButton.d.ts.map +1 -0
- package/dist/components/IconButton/IconButton.js +123 -0
- package/dist/components/IconButton/IconButton.js.map +1 -0
- package/dist/components/IconButton/IconButton.module.css.cjs +15 -0
- package/dist/components/IconButton/IconButton.module.css.cjs.map +1 -0
- package/dist/components/IconButton/IconButton.module.css.js +16 -0
- package/dist/components/IconButton/IconButton.module.css.js.map +1 -0
- package/dist/components/IconButton/IconButton.types.d.ts +57 -0
- package/dist/components/IconButton/IconButton.types.d.ts.map +1 -0
- package/dist/components/IconButton/index.d.ts +3 -0
- package/dist/components/IconButton/index.d.ts.map +1 -0
- package/dist/components/Label/Label.css +13 -8
- package/dist/components/Label/Label.module.css.cjs +7 -7
- package/dist/components/Label/Label.module.css.js +7 -7
- package/dist/components/Notification/Notification.css +14 -14
- package/dist/components/Notification/Notification.module.css.cjs +9 -9
- package/dist/components/Notification/Notification.module.css.js +9 -9
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/utils/elevation.css +20 -17
- package/dist/styles/utils/elevation.module.css.cjs +4 -4
- package/dist/styles/utils/elevation.module.css.js +4 -4
- package/dist/styles/utils/focus.css +14 -14
- package/dist/styles/utils/focus.module.css.cjs +3 -3
- package/dist/styles/utils/focus.module.css.js +3 -3
- package/dist/styles.css +117 -85
- package/package.json +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
require('./Hero.css');
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
4
|
-
const hero = "
|
|
5
|
-
const hero__background = "
|
|
6
|
-
const hero__backgroundImageComponent = "
|
|
7
|
-
const hero__logoImage = "
|
|
8
|
-
const hero__overlay = "
|
|
9
|
-
const hero__content = "
|
|
10
|
-
const hero__card = "
|
|
11
|
-
const hero__main = "
|
|
12
|
-
const hero__text = "
|
|
13
|
-
const hero__header = "
|
|
14
|
-
const hero__label = "
|
|
15
|
-
const hero__heading = "
|
|
16
|
-
const hero__description = "
|
|
17
|
-
const hero__actions = "
|
|
4
|
+
const hero = "_hero_c98qx_1";
|
|
5
|
+
const hero__background = "_hero__background_c98qx_11";
|
|
6
|
+
const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
|
|
7
|
+
const hero__logoImage = "_hero__logoImage_c98qx_42";
|
|
8
|
+
const hero__overlay = "_hero__overlay_c98qx_63";
|
|
9
|
+
const hero__content = "_hero__content_c98qx_75";
|
|
10
|
+
const hero__card = "_hero__card_c98qx_90";
|
|
11
|
+
const hero__main = "_hero__main_c98qx_101";
|
|
12
|
+
const hero__text = "_hero__text_c98qx_107";
|
|
13
|
+
const hero__header = "_hero__header_c98qx_113";
|
|
14
|
+
const hero__label = "_hero__label_c98qx_119";
|
|
15
|
+
const hero__heading = "_hero__heading_c98qx_123";
|
|
16
|
+
const hero__description = "_hero__description_c98qx_153";
|
|
17
|
+
const hero__actions = "_hero__actions_c98qx_168";
|
|
18
18
|
const styles = {
|
|
19
19
|
hero,
|
|
20
20
|
hero__background,
|
|
@@ -28,11 +28,12 @@ const styles = {
|
|
|
28
28
|
hero__header,
|
|
29
29
|
hero__label,
|
|
30
30
|
hero__heading,
|
|
31
|
-
"hero__heading--xl": "_hero__heading--
|
|
32
|
-
"hero__heading--lg": "_hero__heading--
|
|
33
|
-
"hero__heading--md": "_hero__heading--
|
|
34
|
-
"hero__heading--sm": "_hero__heading--
|
|
35
|
-
"hero__heading--xs": "_hero__heading--
|
|
31
|
+
"hero__heading--xl": "_hero__heading--xl_c98qx_129",
|
|
32
|
+
"hero__heading--lg": "_hero__heading--lg_c98qx_133",
|
|
33
|
+
"hero__heading--md": "_hero__heading--md_c98qx_137",
|
|
34
|
+
"hero__heading--sm": "_hero__heading--sm_c98qx_141",
|
|
35
|
+
"hero__heading--xs": "_hero__heading--xs_c98qx_145",
|
|
36
|
+
"hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
|
|
36
37
|
hero__description,
|
|
37
38
|
hero__actions
|
|
38
39
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import './Hero.css';
|
|
2
|
-
const hero = "
|
|
3
|
-
const hero__background = "
|
|
4
|
-
const hero__backgroundImageComponent = "
|
|
5
|
-
const hero__logoImage = "
|
|
6
|
-
const hero__overlay = "
|
|
7
|
-
const hero__content = "
|
|
8
|
-
const hero__card = "
|
|
9
|
-
const hero__main = "
|
|
10
|
-
const hero__text = "
|
|
11
|
-
const hero__header = "
|
|
12
|
-
const hero__label = "
|
|
13
|
-
const hero__heading = "
|
|
14
|
-
const hero__description = "
|
|
15
|
-
const hero__actions = "
|
|
2
|
+
const hero = "_hero_c98qx_1";
|
|
3
|
+
const hero__background = "_hero__background_c98qx_11";
|
|
4
|
+
const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
|
|
5
|
+
const hero__logoImage = "_hero__logoImage_c98qx_42";
|
|
6
|
+
const hero__overlay = "_hero__overlay_c98qx_63";
|
|
7
|
+
const hero__content = "_hero__content_c98qx_75";
|
|
8
|
+
const hero__card = "_hero__card_c98qx_90";
|
|
9
|
+
const hero__main = "_hero__main_c98qx_101";
|
|
10
|
+
const hero__text = "_hero__text_c98qx_107";
|
|
11
|
+
const hero__header = "_hero__header_c98qx_113";
|
|
12
|
+
const hero__label = "_hero__label_c98qx_119";
|
|
13
|
+
const hero__heading = "_hero__heading_c98qx_123";
|
|
14
|
+
const hero__description = "_hero__description_c98qx_153";
|
|
15
|
+
const hero__actions = "_hero__actions_c98qx_168";
|
|
16
16
|
const styles = {
|
|
17
17
|
hero,
|
|
18
18
|
hero__background,
|
|
@@ -26,11 +26,12 @@ const styles = {
|
|
|
26
26
|
hero__header,
|
|
27
27
|
hero__label,
|
|
28
28
|
hero__heading,
|
|
29
|
-
"hero__heading--xl": "_hero__heading--
|
|
30
|
-
"hero__heading--lg": "_hero__heading--
|
|
31
|
-
"hero__heading--md": "_hero__heading--
|
|
32
|
-
"hero__heading--sm": "_hero__heading--
|
|
33
|
-
"hero__heading--xs": "_hero__heading--
|
|
29
|
+
"hero__heading--xl": "_hero__heading--xl_c98qx_129",
|
|
30
|
+
"hero__heading--lg": "_hero__heading--lg_c98qx_133",
|
|
31
|
+
"hero__heading--md": "_hero__heading--md_c98qx_137",
|
|
32
|
+
"hero__heading--sm": "_hero__heading--sm_c98qx_141",
|
|
33
|
+
"hero__heading--xs": "_hero__heading--xs_c98qx_145",
|
|
34
|
+
"hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
|
|
34
35
|
hero__description,
|
|
35
36
|
hero__actions
|
|
36
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
|
|
2
|
-
export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
|
|
2
|
+
export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
3
3
|
export type HeroCommonImageProps = Omit<ComponentPropsWithRef<'img'>, 'ref'>;
|
|
4
4
|
export type HeroImageComponent = ElementType<HeroCommonImageProps>;
|
|
5
5
|
export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
|
|
@@ -47,9 +47,5 @@ export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'
|
|
|
47
47
|
* Secondary call-to-action element.
|
|
48
48
|
*/
|
|
49
49
|
readonly secondaryCta?: ReactElement;
|
|
50
|
-
/**
|
|
51
|
-
* Allows passing a `data-testid` string for testing purposes.
|
|
52
|
-
*/
|
|
53
|
-
readonly 'data-testid'?: string;
|
|
54
50
|
}
|
|
55
51
|
//# sourceMappingURL=Hero.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;CACxC"}
|
|
@@ -6,7 +6,8 @@ const headingClassByLevel = {
|
|
|
6
6
|
h2: Hero_module.default["hero__heading--lg"],
|
|
7
7
|
h3: Hero_module.default["hero__heading--md"],
|
|
8
8
|
h4: Hero_module.default["hero__heading--sm"],
|
|
9
|
-
h5: Hero_module.default["hero__heading--xs"]
|
|
9
|
+
h5: Hero_module.default["hero__heading--xs"],
|
|
10
|
+
h6: Hero_module.default["hero__heading--xxs"]
|
|
10
11
|
};
|
|
11
12
|
exports.headingClassByLevel = headingClassByLevel;
|
|
12
13
|
//# sourceMappingURL=Hero.utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n h1: styles['hero__heading--xl'],\n h2: styles['hero__heading--lg'],\n h3: styles['hero__heading--md'],\n h4: styles['hero__heading--sm'],\n h5: styles['hero__heading--xs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;
|
|
1
|
+
{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n h1: styles['hero__heading--xl'],\n h2: styles['hero__heading--lg'],\n h3: styles['hero__heading--md'],\n h4: styles['hero__heading--sm'],\n h5: styles['hero__heading--xs'],\n h6: styles['hero__heading--xxs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,oBAAoB;AACnC;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOhE,CAAC"}
|
|
@@ -4,7 +4,8 @@ const headingClassByLevel = {
|
|
|
4
4
|
h2: styles["hero__heading--lg"],
|
|
5
5
|
h3: styles["hero__heading--md"],
|
|
6
6
|
h4: styles["hero__heading--sm"],
|
|
7
|
-
h5: styles["hero__heading--xs"]
|
|
7
|
+
h5: styles["hero__heading--xs"],
|
|
8
|
+
h6: styles["hero__heading--xxs"]
|
|
8
9
|
};
|
|
9
10
|
export {
|
|
10
11
|
headingClassByLevel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n h1: styles['hero__heading--xl'],\n h2: styles['hero__heading--lg'],\n h3: styles['hero__heading--md'],\n h4: styles['hero__heading--sm'],\n h5: styles['hero__heading--xs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;
|
|
1
|
+
{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n h1: styles['hero__heading--xl'],\n h2: styles['hero__heading--lg'],\n h3: styles['hero__heading--md'],\n h4: styles['hero__heading--sm'],\n h5: styles['hero__heading--xs'],\n h6: styles['hero__heading--xxs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,oBAAoB;AACnC;"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const focus_module = require("../../styles/utils/focus.module.css.cjs");
|
|
5
|
+
const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
|
|
6
|
+
const IconButton_module = require("./IconButton.module.css.cjs");
|
|
7
|
+
const cn = require("../../utils/cn/cn.cjs");
|
|
8
|
+
const Spinner = require("../Spinner/Spinner.cjs");
|
|
9
|
+
const IconButton = ({
|
|
10
|
+
icon,
|
|
11
|
+
iconPosition = "start",
|
|
12
|
+
labelBehavior = "truncate",
|
|
13
|
+
size = "normal",
|
|
14
|
+
loading = false,
|
|
15
|
+
linkColoring = false,
|
|
16
|
+
className,
|
|
17
|
+
children,
|
|
18
|
+
ref,
|
|
19
|
+
...props
|
|
20
|
+
}) => {
|
|
21
|
+
const isDisabled = "disabled" in props && props.disabled;
|
|
22
|
+
const isAnchor = "href" in props && props.href != null;
|
|
23
|
+
const classes = cn.cn(
|
|
24
|
+
IconButton_module["icon-button"],
|
|
25
|
+
IconButton_module[`icon-button--${size}`],
|
|
26
|
+
focus_module.default.focusable,
|
|
27
|
+
{ [IconButton_module["icon-button--disabled"]]: isDisabled },
|
|
28
|
+
{ [IconButton_module["icon-button--loading"]]: loading },
|
|
29
|
+
{ [IconButton_module["icon-button--link-coloring"]]: linkColoring },
|
|
30
|
+
className
|
|
31
|
+
);
|
|
32
|
+
const Icon = icon;
|
|
33
|
+
const iconSlot = loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
34
|
+
Spinner.Spinner,
|
|
35
|
+
{
|
|
36
|
+
size: size === "small" ? "xs" : "s",
|
|
37
|
+
color: "inherit",
|
|
38
|
+
"aria-hidden": "true",
|
|
39
|
+
role: "presentation"
|
|
40
|
+
}
|
|
41
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" }) });
|
|
42
|
+
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
43
|
+
iconPosition === "start" && iconSlot,
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
"span",
|
|
46
|
+
{
|
|
47
|
+
className: cn.cn(IconButton_module["icon-button__label"], textDecoration_module.default.underlineLink, {
|
|
48
|
+
[IconButton_module["icon-button__label--wrap"]]: labelBehavior === "wrap"
|
|
49
|
+
}),
|
|
50
|
+
children
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
iconPosition === "end" && iconSlot
|
|
54
|
+
] });
|
|
55
|
+
if (isAnchor) {
|
|
56
|
+
const { href, renderLink, ...anchorProps } = props;
|
|
57
|
+
const {
|
|
58
|
+
disabled: _disabled,
|
|
59
|
+
type: _type,
|
|
60
|
+
name: _name,
|
|
61
|
+
...safeAnchorProps
|
|
62
|
+
} = anchorProps;
|
|
63
|
+
const target = safeAnchorProps.target;
|
|
64
|
+
const rel = safeAnchorProps.rel;
|
|
65
|
+
const shouldHardenRel = target?.toLowerCase() === "_blank";
|
|
66
|
+
const relTokens = new Set(
|
|
67
|
+
(rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
|
|
68
|
+
);
|
|
69
|
+
if (shouldHardenRel) {
|
|
70
|
+
relTokens.add("noopener");
|
|
71
|
+
relTokens.add("noreferrer");
|
|
72
|
+
}
|
|
73
|
+
const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
|
|
74
|
+
const linkProps = {
|
|
75
|
+
...safeAnchorProps,
|
|
76
|
+
ref,
|
|
77
|
+
href,
|
|
78
|
+
rel: hardenedRel,
|
|
79
|
+
className: classes,
|
|
80
|
+
"aria-busy": loading || void 0,
|
|
81
|
+
"aria-disabled": loading || void 0,
|
|
82
|
+
tabIndex: loading ? -1 : safeAnchorProps.tabIndex,
|
|
83
|
+
onClick: loading ? (e) => {
|
|
84
|
+
e.preventDefault();
|
|
85
|
+
e.stopPropagation();
|
|
86
|
+
} : safeAnchorProps.onClick,
|
|
87
|
+
children: content
|
|
88
|
+
};
|
|
89
|
+
if (renderLink) {
|
|
90
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
|
|
91
|
+
}
|
|
92
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
|
|
93
|
+
}
|
|
94
|
+
const {
|
|
95
|
+
type = "button",
|
|
96
|
+
disabled,
|
|
97
|
+
onClick,
|
|
98
|
+
href: _href,
|
|
99
|
+
target: _target,
|
|
100
|
+
rel: _rel,
|
|
101
|
+
renderLink: _renderLink,
|
|
102
|
+
...buttonProps
|
|
103
|
+
} = props;
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
105
|
+
"button",
|
|
106
|
+
{
|
|
107
|
+
ref,
|
|
108
|
+
type,
|
|
109
|
+
disabled: disabled || loading,
|
|
110
|
+
className: classes,
|
|
111
|
+
"aria-disabled": loading || void 0,
|
|
112
|
+
"aria-busy": loading || void 0,
|
|
113
|
+
onClick: loading ? (e) => {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
e.stopPropagation();
|
|
116
|
+
} : onClick,
|
|
117
|
+
...buttonProps,
|
|
118
|
+
children: content
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
};
|
|
122
|
+
exports.IconButton = IconButton;
|
|
123
|
+
//# sourceMappingURL=IconButton.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' | 'iconPosition' | 'size' | 'loading' | 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading || undefined,\n 'aria-disabled': loading || undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' | 'iconPosition' | 'size' | 'loading' | 'href' | 'linkColoring'\n > & {\n type?: 'button' | 'submit' | 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled || loading}\n className={classes}\n aria-disabled={loading || undefined}\n aria-busy={loading || undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment","textDecorationStyles"],"mappings":"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"}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
@layer dds-components {._icon-button_1iv9h_1 {
|
|
2
|
+
--_button-icon-size: 24px;
|
|
3
|
+
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
gap: var(--spacing-space-8);
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
min-width: 0;
|
|
10
|
+
border: none;
|
|
11
|
+
border-radius: var(--radius-semantic-sm);
|
|
12
|
+
padding: 0;
|
|
13
|
+
background: transparent;
|
|
14
|
+
font: var(--typography-label-lg-bold);
|
|
15
|
+
color: var(--color-semantic-foreground-default);
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
transition:
|
|
19
|
+
color 0.2s ease-in-out,
|
|
20
|
+
text-decoration-color 0.2s ease-in-out;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
._icon-button--normal_1iv9h_23 {
|
|
24
|
+
font: var(--typography-label-lg-bold);
|
|
25
|
+
--_button-icon-size: 24px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
._icon-button--small_1iv9h_28 {
|
|
29
|
+
font: var(--typography-label-md-bold);
|
|
30
|
+
--_button-icon-size: 20px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
._icon-button__label_1iv9h_33 {
|
|
34
|
+
flex: 0 1 auto;
|
|
35
|
+
min-width: 0;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
text-overflow: ellipsis;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
text-decoration-color: transparent;
|
|
40
|
+
transition: text-decoration-color 0.2s ease-in-out;
|
|
41
|
+
/* exception: override line-height from font shorthand to prevent underline/descender clipping */
|
|
42
|
+
line-height: var(--typography-line-height-md);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._icon-button__label--wrap_1iv9h_45 {
|
|
46
|
+
overflow: visible;
|
|
47
|
+
text-overflow: clip;
|
|
48
|
+
white-space: normal;
|
|
49
|
+
overflow-wrap: anywhere;
|
|
50
|
+
text-align: left;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
._icon-button__icon_1iv9h_53 {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
flex: 0 0 auto;
|
|
58
|
+
width: var(--_button-icon-size);
|
|
59
|
+
height: var(--_button-icon-size);
|
|
60
|
+
color: var(--color-semantic-interactive-primary-default);
|
|
61
|
+
|
|
62
|
+
& > svg {
|
|
63
|
+
width: var(--_button-icon-size);
|
|
64
|
+
height: var(--_button-icon-size);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Shared interaction states */
|
|
69
|
+
._icon-button_1iv9h_1:hover,
|
|
70
|
+
._icon-button_1iv9h_1:focus-visible {
|
|
71
|
+
._icon-button__label_1iv9h_33 {
|
|
72
|
+
text-decoration-color: currentColor;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
._icon-button__icon_1iv9h_53 {
|
|
76
|
+
color: var(--color-semantic-interactive-primary-hover);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
|
|
81
|
+
color: var(--color-semantic-interactive-primary-active);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Optional link coloring */
|
|
85
|
+
._icon-button--link-coloring_1iv9h_85 {
|
|
86
|
+
color: var(--color-semantic-foreground-link);
|
|
87
|
+
|
|
88
|
+
._icon-button__icon_1iv9h_53 {
|
|
89
|
+
color: var(--color-semantic-foreground-link);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&:hover,
|
|
93
|
+
&:focus-visible {
|
|
94
|
+
color: var(--color-semantic-foreground-link-hover);
|
|
95
|
+
|
|
96
|
+
._icon-button__icon_1iv9h_53 {
|
|
97
|
+
color: var(--color-semantic-foreground-link-hover);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:active {
|
|
102
|
+
color: var(--color-semantic-interactive-primary-active);
|
|
103
|
+
|
|
104
|
+
._icon-button__icon_1iv9h_53 {
|
|
105
|
+
color: var(--color-semantic-interactive-primary-active);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Disabled/loading states */
|
|
111
|
+
._icon-button--disabled_1iv9h_111,
|
|
112
|
+
._icon-button--loading_1iv9h_112 {
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
._icon-button--disabled_1iv9h_111 {
|
|
117
|
+
color: var(--color-semantic-foreground-muted);
|
|
118
|
+
|
|
119
|
+
._icon-button__icon_1iv9h_53 {
|
|
120
|
+
color: var(--color-semantic-interactive-primary-disabled);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Dark scheme overrides */
|
|
125
|
+
@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
|
|
126
|
+
._icon-button_1iv9h_1 {
|
|
127
|
+
color: var(--color-semantic-foreground-inverse);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
._icon-button_1iv9h_1 ._icon-button__icon_1iv9h_53 {
|
|
131
|
+
color: var(--color-semantic-interactive-inverse-default);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
._icon-button_1iv9h_1:hover ._icon-button__icon_1iv9h_53,
|
|
135
|
+
._icon-button_1iv9h_1:focus-visible ._icon-button__icon_1iv9h_53 {
|
|
136
|
+
color: var(--color-semantic-interactive-inverse-hover);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
|
|
140
|
+
color: var(--color-semantic-interactive-inverse-active);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
._icon-button--link-coloring_1iv9h_85 {
|
|
144
|
+
color: var(--color-semantic-foreground-inverse);
|
|
145
|
+
|
|
146
|
+
._icon-button__icon_1iv9h_53 {
|
|
147
|
+
color: var(--color-semantic-foreground-inverse);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&:hover,
|
|
151
|
+
&:focus-visible {
|
|
152
|
+
color: var(--color-semantic-foreground-inverse);
|
|
153
|
+
|
|
154
|
+
._icon-button__icon_1iv9h_53 {
|
|
155
|
+
color: var(--color-semantic-foreground-inverse);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&:active {
|
|
160
|
+
color: var(--color-semantic-foreground-inverse);
|
|
161
|
+
|
|
162
|
+
._icon-button__icon_1iv9h_53 {
|
|
163
|
+
color: var(--color-semantic-foreground-inverse);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
._icon-button--disabled_1iv9h_111 {
|
|
169
|
+
._icon-button__icon_1iv9h_53 {
|
|
170
|
+
color: var(--color-semantic-interactive-inverse-disabled);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@media (forced-colors: active) {
|
|
176
|
+
._icon-button--small_1iv9h_28:focus-visible {
|
|
177
|
+
outline-color: Highlight;
|
|
178
|
+
box-shadow: none;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { IconButtonProps } from './IconButton.types';
|
|
2
|
+
export declare const IconButton: ({ icon, iconPosition, labelBehavior, size, loading, linkColoring, className, children, ref, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,wGAWxB,eAAe,4CA0JjB,CAAC"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import focusStyles from "../../styles/utils/focus.module.css.js";
|
|
3
|
+
import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
|
|
4
|
+
import styles from "./IconButton.module.css.js";
|
|
5
|
+
import { cn } from "../../utils/cn/cn.js";
|
|
6
|
+
import { Spinner } from "../Spinner/Spinner.js";
|
|
7
|
+
const IconButton = ({
|
|
8
|
+
icon,
|
|
9
|
+
iconPosition = "start",
|
|
10
|
+
labelBehavior = "truncate",
|
|
11
|
+
size = "normal",
|
|
12
|
+
loading = false,
|
|
13
|
+
linkColoring = false,
|
|
14
|
+
className,
|
|
15
|
+
children,
|
|
16
|
+
ref,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
const isDisabled = "disabled" in props && props.disabled;
|
|
20
|
+
const isAnchor = "href" in props && props.href != null;
|
|
21
|
+
const classes = cn(
|
|
22
|
+
styles["icon-button"],
|
|
23
|
+
styles[`icon-button--${size}`],
|
|
24
|
+
focusStyles.focusable,
|
|
25
|
+
{ [styles["icon-button--disabled"]]: isDisabled },
|
|
26
|
+
{ [styles["icon-button--loading"]]: loading },
|
|
27
|
+
{ [styles["icon-button--link-coloring"]]: linkColoring },
|
|
28
|
+
className
|
|
29
|
+
);
|
|
30
|
+
const Icon = icon;
|
|
31
|
+
const iconSlot = loading ? /* @__PURE__ */ jsx("span", { className: styles["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
32
|
+
Spinner,
|
|
33
|
+
{
|
|
34
|
+
size: size === "small" ? "xs" : "s",
|
|
35
|
+
color: "inherit",
|
|
36
|
+
"aria-hidden": "true",
|
|
37
|
+
role: "presentation"
|
|
38
|
+
}
|
|
39
|
+
) }) : /* @__PURE__ */ jsx("span", { className: styles["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) });
|
|
40
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
41
|
+
iconPosition === "start" && iconSlot,
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
"span",
|
|
44
|
+
{
|
|
45
|
+
className: cn(styles["icon-button__label"], textDecorationStyles.underlineLink, {
|
|
46
|
+
[styles["icon-button__label--wrap"]]: labelBehavior === "wrap"
|
|
47
|
+
}),
|
|
48
|
+
children
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
iconPosition === "end" && iconSlot
|
|
52
|
+
] });
|
|
53
|
+
if (isAnchor) {
|
|
54
|
+
const { href, renderLink, ...anchorProps } = props;
|
|
55
|
+
const {
|
|
56
|
+
disabled: _disabled,
|
|
57
|
+
type: _type,
|
|
58
|
+
name: _name,
|
|
59
|
+
...safeAnchorProps
|
|
60
|
+
} = anchorProps;
|
|
61
|
+
const target = safeAnchorProps.target;
|
|
62
|
+
const rel = safeAnchorProps.rel;
|
|
63
|
+
const shouldHardenRel = target?.toLowerCase() === "_blank";
|
|
64
|
+
const relTokens = new Set(
|
|
65
|
+
(rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
|
|
66
|
+
);
|
|
67
|
+
if (shouldHardenRel) {
|
|
68
|
+
relTokens.add("noopener");
|
|
69
|
+
relTokens.add("noreferrer");
|
|
70
|
+
}
|
|
71
|
+
const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
|
|
72
|
+
const linkProps = {
|
|
73
|
+
...safeAnchorProps,
|
|
74
|
+
ref,
|
|
75
|
+
href,
|
|
76
|
+
rel: hardenedRel,
|
|
77
|
+
className: classes,
|
|
78
|
+
"aria-busy": loading || void 0,
|
|
79
|
+
"aria-disabled": loading || void 0,
|
|
80
|
+
tabIndex: loading ? -1 : safeAnchorProps.tabIndex,
|
|
81
|
+
onClick: loading ? (e) => {
|
|
82
|
+
e.preventDefault();
|
|
83
|
+
e.stopPropagation();
|
|
84
|
+
} : safeAnchorProps.onClick,
|
|
85
|
+
children: content
|
|
86
|
+
};
|
|
87
|
+
if (renderLink) {
|
|
88
|
+
return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
|
|
89
|
+
}
|
|
90
|
+
return /* @__PURE__ */ jsx("a", { ...linkProps });
|
|
91
|
+
}
|
|
92
|
+
const {
|
|
93
|
+
type = "button",
|
|
94
|
+
disabled,
|
|
95
|
+
onClick,
|
|
96
|
+
href: _href,
|
|
97
|
+
target: _target,
|
|
98
|
+
rel: _rel,
|
|
99
|
+
renderLink: _renderLink,
|
|
100
|
+
...buttonProps
|
|
101
|
+
} = props;
|
|
102
|
+
return /* @__PURE__ */ jsx(
|
|
103
|
+
"button",
|
|
104
|
+
{
|
|
105
|
+
ref,
|
|
106
|
+
type,
|
|
107
|
+
disabled: disabled || loading,
|
|
108
|
+
className: classes,
|
|
109
|
+
"aria-disabled": loading || void 0,
|
|
110
|
+
"aria-busy": loading || void 0,
|
|
111
|
+
onClick: loading ? (e) => {
|
|
112
|
+
e.preventDefault();
|
|
113
|
+
e.stopPropagation();
|
|
114
|
+
} : onClick,
|
|
115
|
+
...buttonProps,
|
|
116
|
+
children: content
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
export {
|
|
121
|
+
IconButton
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=IconButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' | 'iconPosition' | 'size' | 'loading' | 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading || undefined,\n 'aria-disabled': loading || undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' | 'iconPosition' | 'size' | 'loading' | 'href' | 'linkColoring'\n > & {\n type?: 'button' | 'submit' | 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled || loading}\n className={classes}\n aria-disabled={loading || undefined}\n aria-busy={loading || undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":[],"mappings":"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"}
|