@economic/taco 0.0.10-alpha.0 → 0.0.11-alpha.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/dist/components/IconButton/IconButton.d.ts +10 -14
- package/dist/esm/components/Button/util.js +8 -12
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/taco.cjs.development.js +8 -12
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +550 -454
|
@@ -11,19 +11,19 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
|
|
|
11
11
|
* *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
|
|
12
12
|
* the button should be only to open the associated dialog when clicked.
|
|
13
13
|
*/
|
|
14
|
-
dialog?:
|
|
14
|
+
dialog?: (props: Partial<DialogProps>) => JSX.Element;
|
|
15
|
+
/** Hanger component associated with the button. */
|
|
16
|
+
hanger?: (props: Partial<HangerProps>) => JSX.Element;
|
|
15
17
|
/** Set which icon should be rendered within button */
|
|
16
18
|
icon: IconName;
|
|
17
|
-
/** Hanger component associated with the button. */
|
|
18
|
-
hanger?: React.ReactElement<HangerProps>;
|
|
19
19
|
/** Menu component associated with the button. */
|
|
20
|
-
menu?:
|
|
20
|
+
menu?: (props: Partial<MenuProps>) => JSX.Element;
|
|
21
21
|
/**
|
|
22
22
|
* Popover component associated with the button, clicking the button will open the popover.
|
|
23
23
|
* *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
|
|
24
24
|
* the button should be only to open the associated popover when clicked.
|
|
25
25
|
*/
|
|
26
|
-
popover?:
|
|
26
|
+
popover?: (props: Partial<PopoverProps>) => JSX.Element;
|
|
27
27
|
/**
|
|
28
28
|
* Set whether the button is rounded.
|
|
29
29
|
* Default value is `false`
|
|
@@ -40,23 +40,19 @@ export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrim
|
|
|
40
40
|
* *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
|
|
41
41
|
* the button should be only to open the associated dialog when clicked.
|
|
42
42
|
*/
|
|
43
|
-
dialog?:
|
|
43
|
+
dialog?: ((props: Partial<DialogProps>) => JSX.Element) | undefined;
|
|
44
|
+
/** Hanger component associated with the button. */
|
|
45
|
+
hanger?: ((props: Partial<HangerProps>) => JSX.Element) | undefined;
|
|
44
46
|
/** Set which icon should be rendered within button */
|
|
45
47
|
icon: IconName;
|
|
46
|
-
/** Hanger component associated with the button. */
|
|
47
|
-
hanger?: React.ReactElement<{
|
|
48
|
-
children?: React.ReactNode;
|
|
49
|
-
}, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
50
48
|
/** Menu component associated with the button. */
|
|
51
|
-
menu?:
|
|
49
|
+
menu?: ((props: Partial<MenuProps>) => JSX.Element) | undefined;
|
|
52
50
|
/**
|
|
53
51
|
* Popover component associated with the button, clicking the button will open the popover.
|
|
54
52
|
* *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
|
|
55
53
|
* the button should be only to open the associated popover when clicked.
|
|
56
54
|
*/
|
|
57
|
-
popover?:
|
|
58
|
-
children?: React.ReactNode;
|
|
59
|
-
}, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
|
|
55
|
+
popover?: ((props: Partial<PopoverProps>) => JSX.Element) | undefined;
|
|
60
56
|
/**
|
|
61
57
|
* Set whether the button is rounded.
|
|
62
58
|
* Default value is `false`
|
|
@@ -52,26 +52,22 @@ var createButton = function createButton(props, className, ref) {
|
|
|
52
52
|
button = dialog({
|
|
53
53
|
trigger: button
|
|
54
54
|
});
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (typeof hanger === 'function') {
|
|
58
|
-
button = hanger({
|
|
59
|
-
anchor: button
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
if (typeof menu === 'function') {
|
|
55
|
+
} else if (typeof menu === 'function') {
|
|
64
56
|
button = menu({
|
|
65
57
|
trigger: button
|
|
66
58
|
});
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
if (typeof popover === 'function') {
|
|
59
|
+
} else if (typeof popover === 'function') {
|
|
70
60
|
button = popover({
|
|
71
61
|
trigger: button
|
|
72
62
|
});
|
|
73
63
|
}
|
|
74
64
|
|
|
65
|
+
if (typeof hanger === 'function') {
|
|
66
|
+
button = hanger({
|
|
67
|
+
anchor: button
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
75
71
|
if (tooltip) {
|
|
76
72
|
button = React__default.createElement(Tooltip, {
|
|
77
73
|
title: tooltip
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid border-blue\n focus:bg-blue focus:text-white focus:yt-focus\n active:bg-blue-dark active:text-white \n hover:bg-blue-light hover:border-blue-light hover:text-white\n hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n disabled:hover:yt-blue-solid`;\n\n case 'danger':\n return `yt-red-solid border-red\n focus:bg-red focus:text-white focus:yt-focus-red\n active:bg-red-dark active:text-white \n hover:bg-red-light hover:text-white\n hover:focus:bg-red-light hover:focus:text-white\n disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `yt-blue-inverted\n focus:bg-transparent focus:text-blue focus:yt-focus\n active:bg-blue-lightest active:border-blue active:text-blue-dark \n hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n disabled:hover:yt-blue-inverted`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent\n focus:text-black focus:yt-focus\n active:text-black\n hover:text-grey-darkest\n hover:focus:text-grey-darkest\n disabled:hover:yt-transparent`;\n }\n\n return `yt-transparent border-transparent\n focus:text-blue focus:yt-focus\n active:text-blue-dark\n hover:text-blue-light\n hover:focus:text-blue-light\n disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid border-grey\n focus:bg-grey focus:yt-focus\n active:bg-grey-dark active:text-black\n hover:bg-grey-light hover:text-grey-darkest\n hover:focus:bg-grey-light hover:focus:text-grey-darkest\n disabled:hover:yt-grey-solid`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n }
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid border-blue\n focus:bg-blue focus:text-white focus:yt-focus\n active:bg-blue-dark active:text-white \n hover:bg-blue-light hover:border-blue-light hover:text-white\n hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n disabled:hover:yt-blue-solid`;\n\n case 'danger':\n return `yt-red-solid border-red\n focus:bg-red focus:text-white focus:yt-focus-red\n active:bg-red-dark active:text-white \n hover:bg-red-light hover:text-white\n hover:focus:bg-red-light hover:focus:text-white\n disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `yt-blue-inverted\n focus:bg-transparent focus:text-blue focus:yt-focus\n active:bg-blue-lightest active:border-blue active:text-blue-dark \n hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n disabled:hover:yt-blue-inverted`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent\n focus:text-black focus:yt-focus\n active:text-black\n hover:text-grey-darkest\n hover:focus:text-grey-darkest\n disabled:hover:yt-transparent`;\n }\n\n return `yt-transparent border-transparent\n focus:text-blue focus:yt-focus\n active:text-blue-dark\n hover:text-blue-light\n hover:focus:text-blue-light\n disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid border-grey\n focus:bg-grey focus:yt-focus\n active:bg-grey-dark active:text-black\n hover:bg-grey-light hover:text-grey-darkest\n hover:focus:bg-grey-light hover:focus:text-grey-darkest\n disabled:hover:yt-grey-solid`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","anchor","Tooltip","title"],"mappings":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,KAAlE;;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOH,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAES,MAAAA,MAAM,EAAEJ;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACI,OAAD;AAASC,MAAAA,KAAK,EAAER;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?:
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Set which icon should be rendered within button */\n icon: IconName; // this dynamic type causes the type extraction for props to fail\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /**\n * Set whether the button is rounded.\n * Default value is `false`\n */\n rounded?: boolean;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const { appearance, icon, rounded = false, ...otherProps } = props;\n\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance, true),\n {\n 'rounded-full': rounded,\n rounded: !rounded,\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n },\n props.className\n );\n\n if (!icon) {\n return null;\n }\n\n return createButton(\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n className,\n ref\n );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAFJ,EAGhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAHgB,EAShBV,KAAK,CAACM,SATU,CAApB;;AAYA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAxByB;;;;"}
|
|
@@ -3396,26 +3396,22 @@ var createButton = function createButton(props, className, ref) {
|
|
|
3396
3396
|
button = dialog({
|
|
3397
3397
|
trigger: button
|
|
3398
3398
|
});
|
|
3399
|
-
}
|
|
3400
|
-
|
|
3401
|
-
if (typeof hanger === 'function') {
|
|
3402
|
-
button = hanger({
|
|
3403
|
-
anchor: button
|
|
3404
|
-
});
|
|
3405
|
-
}
|
|
3406
|
-
|
|
3407
|
-
if (typeof menu === 'function') {
|
|
3399
|
+
} else if (typeof menu === 'function') {
|
|
3408
3400
|
button = menu({
|
|
3409
3401
|
trigger: button
|
|
3410
3402
|
});
|
|
3411
|
-
}
|
|
3412
|
-
|
|
3413
|
-
if (typeof popover === 'function') {
|
|
3403
|
+
} else if (typeof popover === 'function') {
|
|
3414
3404
|
button = popover({
|
|
3415
3405
|
trigger: button
|
|
3416
3406
|
});
|
|
3417
3407
|
}
|
|
3418
3408
|
|
|
3409
|
+
if (typeof hanger === 'function') {
|
|
3410
|
+
button = hanger({
|
|
3411
|
+
anchor: button
|
|
3412
|
+
});
|
|
3413
|
+
}
|
|
3414
|
+
|
|
3419
3415
|
if (tooltip) {
|
|
3420
3416
|
button = React__default.createElement(Tooltip, {
|
|
3421
3417
|
title: tooltip
|