@frontify/fondue 12.0.0-beta.3 → 12.0.0-beta.4
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.
|
@@ -1,69 +1,70 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { ButtonCommonClasses as
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import f, { forwardRef as M, cloneElement as N } from "react";
|
|
2
|
+
import { useButton as P } from "@react-aria/button";
|
|
3
|
+
import { merge as u } from "../../utilities/merge.es.js";
|
|
4
|
+
import { useForwardedRef as T } from "../../utilities/useForwardedRef.es.js";
|
|
5
|
+
import { ButtonStyle as o, ButtonEmphasis as r, ButtonType as z, ButtonSize as O, ButtonRounding as U } from "./ButtonTypes.es.js";
|
|
6
|
+
import { ButtonEmphasis as nt, ButtonRounding as st, ButtonSize as at, ButtonStyle as ut, ButtonType as rt, UpdatedButtonStyle as mt } from "./ButtonTypes.es.js";
|
|
7
|
+
import { ButtonCommonClasses as V, ButtonRoundingClasses as _, ButtonSizeClasses as c, IconSpacingClasses as k, ButtonStyleClasses as W, ButtonDisabledClasses as Y } from "./ButtonClasses.es.js";
|
|
8
|
+
import { ButtonCommonClasses as it, ButtonDisabledClasses as ft, ButtonRoundingClasses as Bt, ButtonSizeClasses as pt, ButtonStyleClasses as ct, IconSpacingClasses as St } from "./ButtonClasses.es.js";
|
|
9
|
+
import { FOCUS_VISIBLE_STYLE as $ } from "../../utilities/focusStyle.es.js";
|
|
10
|
+
import { buttonTypeMap as j, buttonIconSizeMap as q } from "./mappings.es.js";
|
|
11
|
+
import { useFocusRing as v } from "@react-aria/focus";
|
|
12
|
+
const A = ({
|
|
13
|
+
type: S = z.Button,
|
|
12
14
|
style: t = o.Default,
|
|
13
|
-
size: e =
|
|
14
|
-
rounding:
|
|
15
|
-
emphasis: n =
|
|
16
|
-
hideLabel:
|
|
17
|
-
disabled:
|
|
18
|
-
icon:
|
|
15
|
+
size: e = O.Medium,
|
|
16
|
+
rounding: C = U.Medium,
|
|
17
|
+
emphasis: n = r.Strong,
|
|
18
|
+
hideLabel: m = !1,
|
|
19
|
+
disabled: s = !1,
|
|
20
|
+
icon: l,
|
|
19
21
|
children: a,
|
|
20
|
-
onClick:
|
|
21
|
-
hugWidth:
|
|
22
|
-
"aria-label":
|
|
22
|
+
onClick: B,
|
|
23
|
+
hugWidth: d = !0,
|
|
24
|
+
"aria-label": b,
|
|
23
25
|
formId: g,
|
|
24
26
|
solid: y,
|
|
25
|
-
inverted:
|
|
26
|
-
},
|
|
27
|
-
t === o.Primary ? (t = o.Default, n =
|
|
28
|
-
const R =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
!C && "tw-w-full"
|
|
27
|
+
inverted: E
|
|
28
|
+
}, R) => {
|
|
29
|
+
t === o.Primary ? (t = o.Default, n = r.Strong) : t === o.Secondary && (t = o.Default, n = r.Default), y === !1 && (n = r.Weak);
|
|
30
|
+
const p = T(R), { buttonProps: D } = P({ onPress: () => B && B(), isDisabled: s, type: j[S] }, p), { isFocusVisible: w, focusProps: x } = v(), i = (F) => s ? Y : `${W[n][t][F]}`, I = u([
|
|
31
|
+
i("button"),
|
|
32
|
+
V,
|
|
33
|
+
_[C],
|
|
34
|
+
l && !a || m ? c[e].iconOnly : c[e].default,
|
|
35
|
+
!d && "tw-w-full"
|
|
35
36
|
]);
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
"aria-label":
|
|
38
|
-
"aria-disabled":
|
|
39
|
-
|
|
37
|
+
return /* @__PURE__ */ f.createElement("button", {
|
|
38
|
+
"aria-label": b,
|
|
39
|
+
"aria-disabled": s,
|
|
40
|
+
ref: p,
|
|
41
|
+
className: u([I, E && "tw-dark", w && $]),
|
|
42
|
+
disabled: s,
|
|
40
43
|
"data-test-id": "button",
|
|
41
44
|
form: g,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
ref: R
|
|
46
|
-
}, m && /* @__PURE__ */ B.createElement("span", {
|
|
45
|
+
...D,
|
|
46
|
+
...x
|
|
47
|
+
}, l && /* @__PURE__ */ f.createElement("span", {
|
|
47
48
|
"data-test-id": "button-icon",
|
|
48
|
-
className:
|
|
49
|
-
},
|
|
49
|
+
className: u([a && !m ? k[e] : "", i("icon")])
|
|
50
|
+
}, N(l, { size: q[e] })), a && /* @__PURE__ */ f.createElement("span", {
|
|
50
51
|
"data-test-id": "button-text",
|
|
51
|
-
className:
|
|
52
|
+
className: u([i("text"), m && "tw-sr-only"])
|
|
52
53
|
}, a));
|
|
53
|
-
},
|
|
54
|
+
}, tt = M(A);
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
56
|
+
tt as Button,
|
|
57
|
+
it as ButtonCommonClasses,
|
|
58
|
+
ft as ButtonDisabledClasses,
|
|
59
|
+
nt as ButtonEmphasis,
|
|
60
|
+
st as ButtonRounding,
|
|
61
|
+
Bt as ButtonRoundingClasses,
|
|
62
|
+
at as ButtonSize,
|
|
63
|
+
pt as ButtonSizeClasses,
|
|
64
|
+
ut as ButtonStyle,
|
|
65
|
+
ct as ButtonStyleClasses,
|
|
66
|
+
rt as ButtonType,
|
|
67
|
+
St as IconSpacingClasses,
|
|
68
|
+
mt as UpdatedButtonStyle
|
|
68
69
|
};
|
|
69
70
|
//# sourceMappingURL=Button.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n ButtonElements,\n ButtonEmphasis,\n ButtonRounding,\n ButtonSize,\n ButtonStyle,\n ButtonType,\n UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n ButtonCommonClasses,\n ButtonDisabledClasses,\n ButtonRoundingClasses,\n ButtonSizeClasses,\n ButtonStyleClasses,\n IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n type?: ButtonType;\n style?: ButtonStyle;\n emphasis?: ButtonEmphasis;\n hideLabel?: boolean;\n size?: ButtonSize;\n rounding?: ButtonRounding;\n disabled?: boolean;\n icon?: ReactElement;\n children?: ReactNode;\n onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n hugWidth?: boolean;\n 'aria-label'?: string;\n formId?: string;\n /** @deprecated use emphasis with ButtonEmphasis.Weak */\n solid?: boolean;\n /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n {\n type = ButtonType.Button,\n style = ButtonStyle.Default,\n size = ButtonSize.Medium,\n rounding = ButtonRounding.Medium,\n emphasis = ButtonEmphasis.Strong,\n hideLabel = false,\n disabled = false,\n icon,\n children,\n onClick,\n hugWidth = true,\n 'aria-label': ariaLabel,\n formId,\n solid,\n inverted,\n },\n externalRef,\n) => {\n // Map Style Primary, Secondary to style and emphasis\n // Primary and Secondary can be omitted from the style type\n if (style === ButtonStyle.Primary) {\n style = ButtonStyle.Default;\n emphasis = ButtonEmphasis.Strong;\n } else if (style === ButtonStyle.Secondary) {\n style = ButtonStyle.Default;\n emphasis = ButtonEmphasis.Default;\n }\n\n // Rewrite Solid to property emphasis\n if (solid === false) {\n emphasis = ButtonEmphasis.Weak;\n }\n\n const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n\n const getStyles = (kind: keyof ButtonElements) =>\n !disabled\n ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n : ButtonDisabledClasses;\n\n const buttonClassName = merge([\n
|
|
1
|
+
{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n ButtonElements,\n ButtonEmphasis,\n ButtonRounding,\n ButtonSize,\n ButtonStyle,\n ButtonType,\n UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n ButtonCommonClasses,\n ButtonDisabledClasses,\n ButtonRoundingClasses,\n ButtonSizeClasses,\n ButtonStyleClasses,\n IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\nimport { useFocusRing } from '@react-aria/focus';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n type?: ButtonType;\n style?: ButtonStyle;\n emphasis?: ButtonEmphasis;\n hideLabel?: boolean;\n size?: ButtonSize;\n rounding?: ButtonRounding;\n disabled?: boolean;\n icon?: ReactElement;\n children?: ReactNode;\n onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n hugWidth?: boolean;\n 'aria-label'?: string;\n formId?: string;\n /** @deprecated use emphasis with ButtonEmphasis.Weak */\n solid?: boolean;\n /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n {\n type = ButtonType.Button,\n style = ButtonStyle.Default,\n size = ButtonSize.Medium,\n rounding = ButtonRounding.Medium,\n emphasis = ButtonEmphasis.Strong,\n hideLabel = false,\n disabled = false,\n icon,\n children,\n onClick,\n hugWidth = true,\n 'aria-label': ariaLabel,\n formId,\n solid,\n inverted,\n },\n externalRef,\n) => {\n // Map Style Primary, Secondary to style and emphasis\n // Primary and Secondary can be omitted from the style type\n if (style === ButtonStyle.Primary) {\n style = ButtonStyle.Default;\n emphasis = ButtonEmphasis.Strong;\n } else if (style === ButtonStyle.Secondary) {\n style = ButtonStyle.Default;\n emphasis = ButtonEmphasis.Default;\n }\n\n // Rewrite Solid to property emphasis\n if (solid === false) {\n emphasis = ButtonEmphasis.Weak;\n }\n\n const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n const { buttonProps } = useButton(\n { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const getStyles = (kind: keyof ButtonElements) =>\n !disabled\n ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n : ButtonDisabledClasses;\n\n const buttonClassName = merge([\n getStyles('button'),\n ButtonCommonClasses,\n ButtonRoundingClasses[rounding],\n (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n !hugWidth && 'tw-w-full',\n ]);\n\n return (\n <button\n aria-label={ariaLabel}\n aria-disabled={disabled}\n ref={ref}\n className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n disabled={disabled}\n data-test-id=\"button\"\n form={formId}\n {...buttonProps}\n {...focusProps}\n >\n {icon && (\n <span\n data-test-id=\"button-icon\"\n className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n >\n {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n </span>\n )}\n {children && (\n <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n {children}\n </span>\n )}\n </button>\n );\n};\n\nexport const Button = forwardRef(ButtonComponent);\n"],"names":[],"mappings":";;;;;;;;;;;AAoDA,MAAM,IAAmF,CACrF;AAAA,EACI,UAAO,EAAW;AAAA,EAClB,WAAQ,EAAY;AAAA,EACpB,UAAO,EAAW;AAAA,EAClB,cAAW,EAAe;AAAA,EAC1B,cAAW,EAAe;AAAA,EAC1B,eAAY;AAAA,EACZ,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,GAEJ,MACC;AAGG,EAAA,MAAU,EAAY,UACtB,KAAQ,EAAY,SACpB,IAAW,EAAe,UACnB,MAAU,EAAY,aAC7B,KAAQ,EAAY,SACpB,IAAW,EAAe,UAI1B,MAAU,MACV,KAAW,EAAe;AAGxB,QAAA,IAAM,EAA0C,CAAW,GAC3D,EAAE,mBAAgB,EACpB,EAAE,SAAS,MAAM,KAAW,EAAQ,GAAG,YAAY,GAAU,MAAM,EAAc,GAAA,GACjF,CACJ,GACM,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAY,CAAC,MACf,AAAC,IAEK,IADA,GAAG,EAAmB,GAAU,GAAwC,MAG5E,IAAkB,EAAM;AAAA,IAC1B,EAAU,QAAQ;AAAA,IAClB;AAAA,IACA,EAAsB;AAAA,IACrB,KAAQ,CAAC,KAAa,IAAY,EAAkB,GAAM,WAAW,EAAkB,GAAM;AAAA,IAC9F,CAAC,KAAY;AAAA,EAAA,CAChB;AAED,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,cAAY;AAAA,IACZ,iBAAe;AAAA,IACf;AAAA,IACA,WAAW,EAAM,CAAC,GAAiB,KAAY,WAAW,KAAkB,CAAmB,CAAC;AAAA,IAChG;AAAA,IACA,gBAAa;AAAA,IACb,MAAM;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,KAAY,CAAC,IAAY,EAAmB,KAAQ,IAAI,EAAU,MAAM,CAAC,CAAC;AAAA,EAE3F,GAAA,EAAa,GAAM,EAAE,MAAM,EAAkB,GAAO,CAAA,CACzD,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,IAAc,WAAW,EAAM,CAAC,EAAU,MAAM,GAAG,KAAa,YAAY,CAAC;AAAA,EAAA,GAC3F,CACL,CAER;AAER,GAEa,KAAS,EAAW,CAAe;"}
|