@drivy/cobalt 2.1.1 → 2.2.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/components/Buttons/SmallButton/index.js +55 -0
- package/components/Buttons/SmallButton/index.js.map +1 -0
- package/components/ContainedIcon/index.js +1 -1
- package/components/ContainedIcon/index.js.map +1 -1
- package/components/Rating/RatingIcons.js +1 -2
- package/components/Rating/RatingIcons.js.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/styles/components/Buttons/SmallButton/index.scss +67 -0
- package/styles/components/Buttons/index.scss +1 -0
- package/styles/components/ContainedIcon/index.scss +86 -32
- package/types/src/components/Buttons/SmallButton/index.d.ts +26 -0
- package/types/src/components/Buttons/index.d.ts +2 -1
- package/types/src/components/ContainedIcon/index.d.ts +4 -1
- package/types/src/index.d.ts +1 -0
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { getButtonContent, getButtonCommonClassNames } from '../helpers.js';
|
|
4
|
+
import Button from '../ButtonComponent.js';
|
|
5
|
+
|
|
6
|
+
const getComputedClassName = ({ className, variant, destructive, }) => cx(className, "cob-Button__small", {
|
|
7
|
+
"cob-Button__small--primary": variant === "primary",
|
|
8
|
+
"cob-Button__small--destructive": destructive,
|
|
9
|
+
"cob-Button__small--warning": variant === "warning",
|
|
10
|
+
"cob-Button__small--secondary": variant === "secondary",
|
|
11
|
+
"cob-Button__small--tertiary": variant === "tertiary",
|
|
12
|
+
"cob-Button__small--business": variant === "business",
|
|
13
|
+
"cob-Button__small--success": variant === "success",
|
|
14
|
+
"cob-Button__small--neutral": variant === "neutral",
|
|
15
|
+
});
|
|
16
|
+
const _SmallButton = forwardRef((props, ref) => {
|
|
17
|
+
const { children, variant, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restButtonProps } = props;
|
|
18
|
+
const content = getButtonContent({ children, icon, iconPosition });
|
|
19
|
+
const isDisabled = disabled || loading;
|
|
20
|
+
const buttonClassNames = getButtonCommonClassNames({
|
|
21
|
+
disabled: isDisabled,
|
|
22
|
+
rounded,
|
|
23
|
+
size,
|
|
24
|
+
fullWidth,
|
|
25
|
+
className,
|
|
26
|
+
});
|
|
27
|
+
return (React.createElement(Button, { ...restButtonProps, className: getComputedClassName({
|
|
28
|
+
className: buttonClassNames,
|
|
29
|
+
variant,
|
|
30
|
+
destructive,
|
|
31
|
+
}), ref: ref, loading: loading, disabled: isDisabled }, content));
|
|
32
|
+
});
|
|
33
|
+
_SmallButton.displayName = "SmallButton";
|
|
34
|
+
const SmallLink = forwardRef((props, ref) => {
|
|
35
|
+
const { children, variant, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restLinkProps } = props;
|
|
36
|
+
const content = getButtonContent({ children, icon, iconPosition });
|
|
37
|
+
const isDisabled = disabled || loading;
|
|
38
|
+
const buttonClassNames = getButtonCommonClassNames({
|
|
39
|
+
disabled: isDisabled,
|
|
40
|
+
rounded,
|
|
41
|
+
size,
|
|
42
|
+
fullWidth,
|
|
43
|
+
className,
|
|
44
|
+
});
|
|
45
|
+
return (React.createElement(Button.Link, { ...restLinkProps, className: getComputedClassName({
|
|
46
|
+
className: buttonClassNames,
|
|
47
|
+
variant,
|
|
48
|
+
destructive,
|
|
49
|
+
}), ref: ref, loading: loading, disabled: isDisabled }, content));
|
|
50
|
+
});
|
|
51
|
+
SmallLink.displayName = "SmallLink";
|
|
52
|
+
const SmallButton = Object.assign(_SmallButton, { Link: SmallLink });
|
|
53
|
+
|
|
54
|
+
export { SmallButton as default };
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/SmallButton/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\n\nimport {\n ButtonTemplatePropsType,\n getButtonCommonClassNames,\n getButtonContent,\n} from \"../helpers\"\nimport Button, { ButtonProps, LinkProps } from \"../ButtonComponent\"\n\ntype SmallCommonPropsType = ButtonTemplatePropsType<{\n variant?:\n | \"primary\"\n | \"warning\"\n | \"secondary\"\n | \"tertiary\"\n | \"business\"\n | \"success\"\n | \"neutral\"\n destructive?: boolean\n}>\n\nexport type SmallButtonPropsType = SmallCommonPropsType & ButtonProps\nexport type SmallLinkPropsType = SmallCommonPropsType & LinkProps\n\nconst getComputedClassName = ({\n className,\n variant,\n destructive,\n}: SmallCommonPropsType) =>\n cx(className, \"cob-Button__small\", {\n \"cob-Button__small--primary\": variant === \"primary\",\n \"cob-Button__small--destructive\": destructive,\n \"cob-Button__small--warning\": variant === \"warning\",\n \"cob-Button__small--secondary\": variant === \"secondary\",\n \"cob-Button__small--tertiary\": variant === \"tertiary\",\n \"cob-Button__small--business\": variant === \"business\",\n \"cob-Button__small--success\": variant === \"success\",\n \"cob-Button__small--neutral\": variant === \"neutral\",\n })\n\nconst _SmallButton = forwardRef<HTMLButtonElement, SmallButtonPropsType>(\n (props: SmallButtonPropsType, ref) => {\n const {\n children,\n variant,\n destructive,\n icon,\n iconPosition,\n className,\n loading,\n disabled,\n rounded,\n size,\n fullWidth,\n ...restButtonProps\n } = props\n const content = getButtonContent({ children, icon, iconPosition })\n const isDisabled = disabled || loading\n const buttonClassNames = getButtonCommonClassNames({\n disabled: isDisabled,\n rounded,\n size,\n fullWidth,\n className,\n })\n return (\n <Button\n {...restButtonProps}\n className={getComputedClassName({\n className: buttonClassNames,\n variant,\n destructive,\n })}\n ref={ref}\n loading={loading}\n disabled={isDisabled}\n >\n {content}\n </Button>\n )\n }\n)\n_SmallButton.displayName = \"SmallButton\"\n\nconst SmallLink = forwardRef<HTMLAnchorElement, SmallLinkPropsType>(\n (props: SmallLinkPropsType, ref) => {\n const {\n children,\n variant,\n destructive,\n icon,\n iconPosition,\n className,\n loading,\n disabled,\n rounded,\n size,\n fullWidth,\n ...restLinkProps\n } = props\n const content = getButtonContent({ children, icon, iconPosition })\n const isDisabled = disabled || loading\n const buttonClassNames = getButtonCommonClassNames({\n disabled: isDisabled,\n rounded,\n size,\n fullWidth,\n className,\n })\n return (\n <Button.Link\n {...restLinkProps}\n className={getComputedClassName({\n className: buttonClassNames,\n variant,\n destructive,\n })}\n ref={ref}\n loading={loading}\n disabled={isDisabled}\n >\n {content}\n </Button.Link>\n )\n }\n)\nSmallLink.displayName = \"SmallLink\"\n\nconst SmallButton = Object.assign(_SmallButton, { Link: SmallLink })\n\nexport default SmallButton\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,WAAW,GACU,KACrB,EAAE,CAAC,SAAS,EAAE,mBAAmB,EAAE;IACjC,4BAA4B,EAAE,OAAO,KAAK,SAAS;AACnD,IAAA,gCAAgC,EAAE,WAAW;IAC7C,4BAA4B,EAAE,OAAO,KAAK,SAAS;IACnD,8BAA8B,EAAE,OAAO,KAAK,WAAW;IACvD,6BAA6B,EAAE,OAAO,KAAK,UAAU;IACrD,6BAA6B,EAAE,OAAO,KAAK,UAAU;IACrD,4BAA4B,EAAE,OAAO,KAAK,SAAS;IACnD,4BAA4B,EAAE,OAAO,KAAK,SAAS;AACpD,CAAA,CAAC,CAAA;AAEJ,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,KAA2B,EAAE,GAAG,KAAI;AACnC,IAAA,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,eAAe,EACnB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,oBAAC,MAAM,EAAA,EAAA,GACD,eAAe,EACnB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACD,EACV;AACH,CAAC,CACF,CAAA;AACD,YAAY,CAAC,WAAW,GAAG,aAAa,CAAA;AAExC,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,KAAyB,EAAE,GAAG,KAAI;AACjC,IAAA,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,aAAa,EACjB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,IAAI,EACN,EAAA,GAAA,aAAa,EACjB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACI,EACf;AACH,CAAC,CACF,CAAA;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;;;;"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import capitalize from '../utils/capitalize.js';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
|
|
5
|
-
function ContainedIcon({ icon, color = "
|
|
5
|
+
function ContainedIcon({ icon, color = "base", className, }) {
|
|
6
6
|
return (React.createElement("div", { className: cx(className, `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`) }, icon));
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\nexport type ContainedIconPropsType = {\n icon: React.JSX.Element\n color?: IconColorsType\n className?: string\n}\n\nexport function ContainedIcon({\n icon,\n color = \"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype BaseColor =\n | \"base\"\n | \"accent\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"connect\"\n | \"keyExchange\"\n | \"disabled\"\n | \"info\"\n | \"driver\"\n | \"owner\"\ntype WithBackgroundColor = `${BaseColor}Alt`\n\nexport type ContainedIconPropsType = {\n icon: React.JSX.Element\n color?: IconColorsType | BaseColor | WithBackgroundColor\n className?: string\n}\n\nexport function ContainedIcon({\n icon,\n color = \"base\",\n className,\n}: ContainedIconPropsType) {\n return (\n <div\n className={cx(\n className,\n `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n )}\n >\n {icon}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;AAyBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}
|
|
@@ -7,8 +7,7 @@ import StarIcon from '../Icon/__generated__/StarIcon.js';
|
|
|
7
7
|
const defaultRatingIcon = React.createElement(StarIcon, { color: "primary" });
|
|
8
8
|
const itemEmptyColor = "surfaceContainerVariant";
|
|
9
9
|
function roundHalf(num) {
|
|
10
|
-
|
|
11
|
-
return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2;
|
|
10
|
+
return Math.floor(num * 2) / 2;
|
|
12
11
|
}
|
|
13
12
|
function computeItemStatus(ratingValue, itemValue, icon) {
|
|
14
13
|
let itemStatus = "empty";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport cx from \"classnames\"\nimport { IconProps, StarIcon } from \"../Icon\"\n\nexport type RatingIconsPropsType = {\n className?: string\n max?: 5 | 10\n value: number\n size?: IconProps[\"size\"] | 48\n editable?: boolean\n disabled?: boolean\n onChange?: (newValue: number) => void\n icon?: JSX.Element | JSX.Element[]\n}\n\nexport type RatingIconPropsType = {\n icon: JSX.Element\n status?: \"full\" | \"half\" | \"empty\"\n size?: RatingIconsPropsType[\"size\"]\n}\n\nexport const defaultRatingIcon = <StarIcon color=\"primary\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"surfaceContainerVariant\"\n\nexport function roundHalf(num: number) {\n
|
|
1
|
+
{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport cx from \"classnames\"\nimport { IconProps, StarIcon } from \"../Icon\"\n\nexport type RatingIconsPropsType = {\n className?: string\n max?: 5 | 10\n value: number\n size?: IconProps[\"size\"] | 48\n editable?: boolean\n disabled?: boolean\n onChange?: (newValue: number) => void\n icon?: JSX.Element | JSX.Element[]\n}\n\nexport type RatingIconPropsType = {\n icon: JSX.Element\n status?: \"full\" | \"half\" | \"empty\"\n size?: RatingIconsPropsType[\"size\"]\n}\n\nexport const defaultRatingIcon = <StarIcon color=\"primary\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"surfaceContainerVariant\"\n\nexport function roundHalf(num: number) {\n return Math.floor(num * 2) / 2\n}\n\nexport function computeItemStatus(\n ratingValue: number,\n itemValue: number,\n icon: RatingIconsPropsType[\"icon\"]\n): RatingIconPropsType[\"status\"] {\n let itemStatus: RatingIconPropsType[\"status\"] = \"empty\"\n if (!Array.isArray(icon)) {\n // gauge\n const isHalfItem = itemValue > ratingValue && ratingValue > itemValue - 1\n if (isHalfItem) {\n itemStatus = \"half\"\n } else if (itemValue <= ratingValue) {\n itemStatus = \"full\"\n }\n } else if (itemValue === ratingValue) {\n // radio\n itemStatus = \"full\"\n }\n\n return itemStatus\n}\n\nexport const RatingIcon = ({\n icon,\n status = \"full\",\n size = 24,\n}: RatingIconPropsType) => {\n if (status === \"half\") {\n return (\n <>\n {React.cloneElement(icon, {\n color: itemEmptyColor,\n size,\n })}\n <div className=\"cobalt-rating-icons__icon-half-container\">\n {React.cloneElement(icon, { size })}\n </div>\n </>\n )\n } else {\n const iconColor: IconProps[\"color\"] =\n status === \"empty\" ? itemEmptyColor : icon.props.color\n\n return React.cloneElement(icon, {\n color: iconColor,\n size,\n })\n }\n}\n\nexport const RatingIcons = ({\n className,\n max = 5,\n value,\n size = 24,\n editable = false,\n onChange,\n icon = defaultRatingIcon,\n}: RatingIconsPropsType) => {\n const name = useRef(nanoid())\n\n const items = useRef(\n Array.from(new Array(Array.isArray(icon) ? icon.length : max))\n )\n\n const [ratingValue, setRatingValue] = useState(() =>\n editable ? Math.floor(value) : roundHalf(value)\n )\n const [selectedIndex, setSelectedIndex] = useState(-1) // used to enforce selection effect (icon scale reset)\n\n const resetSelection = useCallback(() => {\n setSelectedIndex(-1)\n }, [])\n\n const itemSize = size === 48 ? 16 : size\n\n // input element is used for a11y purpose ( focus feedback and keyboard selection )\n return (\n <div\n className={cx(\"cobalt-rating-icons\", className, {\n \"cobalt-rating-icons--icon-size-48\": size === 48,\n })}\n onPointerLeave={() => {\n if (editable) {\n ;(document.activeElement as HTMLInputElement).blur()\n }\n }}\n >\n {items.current.map((_value, idx) => {\n const itemValue = idx + 1\n\n const itemStatus = computeItemStatus(ratingValue, itemValue, icon)\n\n return (\n <label\n className={cx(\"cobalt-rating-icons__icon-wrapper\", {\n \"cobalt-rating-icons__icon-wrapper--selected\":\n selectedIndex === idx,\n })}\n key={idx}\n onClick={() => {\n if (editable) {\n setRatingValue(itemValue)\n setSelectedIndex(idx)\n }\n }}\n onMouseEnter={(e) => {\n if (editable) {\n ;(e.target as HTMLElement).focus()\n\n resetSelection()\n }\n }}\n >\n <input\n tabIndex={\n editable &&\n (ratingValue === itemValue ||\n (ratingValue === 0 && itemValue === 1))\n ? 0\n : -1\n }\n name={name.current}\n type=\"radio\"\n value={itemValue}\n onChange={() => {\n onChange && onChange(itemValue)\n }}\n disabled={!editable}\n />\n {\n <RatingIcon\n icon={Array.isArray(icon) ? icon[idx] : icon}\n status={itemStatus}\n size={itemSize}\n />\n }\n </label>\n )\n })}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
package/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { default as GhostButton } from './components/Buttons/GhostButton/index.j
|
|
|
6
6
|
export { default as InversedButton } from './components/Buttons/InversedButton/index.js';
|
|
7
7
|
export { default as DefaultButton } from './components/Buttons/DefaultButton/index.js';
|
|
8
8
|
export { default as ButtonsGroup } from './components/Buttons/ButtonsGroup.js';
|
|
9
|
+
export { default as SmallButton } from './components/Buttons/SmallButton/index.js';
|
|
9
10
|
export { Callout } from './components/Callout/index.js';
|
|
10
11
|
export { default as Cell, Cells } from './components/Cell/index.js';
|
|
11
12
|
export { EmptyState } from './components/EmptyState/index.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@storybook/react": "7.6.20",
|
|
52
52
|
"@storybook/react-webpack5": "7.6.20",
|
|
53
53
|
"@svgr/cli": "7.0.0",
|
|
54
|
-
"@testing-library/jest-dom": "6.6.
|
|
54
|
+
"@testing-library/jest-dom": "6.6.4",
|
|
55
55
|
"@testing-library/react": "16.3.0",
|
|
56
56
|
"@testing-library/react-hooks": "8.0.1",
|
|
57
57
|
"@types/fs-extra": "11.0.4",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@types/react": "18.3.23",
|
|
63
63
|
"@types/react-dom": "18.3.7",
|
|
64
64
|
"autoprefixer": "10.4.21",
|
|
65
|
-
"core-js": "3.
|
|
65
|
+
"core-js": "3.44.0",
|
|
66
66
|
"css-loader": "7.1.2",
|
|
67
67
|
"eslint": "8.57.1",
|
|
68
68
|
"eslint-plugin-storybook": "^0.12.0",
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.cob-Button__small {
|
|
2
|
+
@apply c-bg-surfaceContainer c-text-secondary c-border-outlineVariant;
|
|
3
|
+
@include cob-button-sizing(
|
|
4
|
+
$height: 32px,
|
|
5
|
+
$line-height: 20px,
|
|
6
|
+
$font-size: 14px,
|
|
7
|
+
$horizontal-padding: theme("spacing.xs")
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
&--primary,
|
|
11
|
+
&--warning,
|
|
12
|
+
&--secondary,
|
|
13
|
+
&--tertiary,
|
|
14
|
+
&--business,
|
|
15
|
+
&--success,
|
|
16
|
+
&--neutral {
|
|
17
|
+
@apply c-border-transparent;
|
|
18
|
+
|
|
19
|
+
&:hover,
|
|
20
|
+
&:focus,
|
|
21
|
+
&:active {
|
|
22
|
+
@apply c-border-transparent;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&--primary {
|
|
27
|
+
@apply c-bg-primary c-text-onPrimary;
|
|
28
|
+
|
|
29
|
+
&.cob-Button__small--destructive {
|
|
30
|
+
@apply c-bg-errorContainer c-text-onErrorContainer c-border-transparent;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--destructive {
|
|
35
|
+
@apply c-text-error;
|
|
36
|
+
|
|
37
|
+
&:hover,
|
|
38
|
+
&:focus,
|
|
39
|
+
&:active {
|
|
40
|
+
@apply c-text-error c-border-error;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&--warning {
|
|
45
|
+
@apply c-bg-warning c-text-onWarning;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&--secondary {
|
|
49
|
+
@apply c-bg-secondary c-text-onSecondary;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&--tertiary {
|
|
53
|
+
@apply c-bg-tertiary c-text-onTertiary;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&--business {
|
|
57
|
+
@apply c-bg-businessContainer c-text-onBusinessContainer;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--success {
|
|
61
|
+
@apply c-bg-success c-text-onSuccess;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&--neutral {
|
|
65
|
+
@apply c-bg-neutral c-text-onNeutral;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -20,15 +20,45 @@
|
|
|
20
20
|
height: 24px;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
&--colorBase {
|
|
24
|
+
.cobalt-Icon {
|
|
25
|
+
@apply c-fill-onSurface;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--colorBaseAlt,
|
|
30
|
+
&--colorSurfaceContainerVariant {
|
|
31
|
+
@apply c-bg-surfaceContainerVariant;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--colorAccent,
|
|
23
35
|
&--colorPrimary {
|
|
24
36
|
.cobalt-Icon {
|
|
25
37
|
@apply c-fill-primary;
|
|
26
38
|
}
|
|
27
39
|
}
|
|
28
40
|
|
|
29
|
-
&--
|
|
41
|
+
&--colorAccentAlt,
|
|
42
|
+
&--colorPrimaryContainer {
|
|
43
|
+
@apply c-bg-primaryContainer;
|
|
44
|
+
|
|
30
45
|
.cobalt-Icon {
|
|
31
|
-
@apply c-fill-
|
|
46
|
+
@apply c-fill-onPrimaryContainer;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--colorWarning {
|
|
51
|
+
.cobalt-Icon {
|
|
52
|
+
@apply c-fill-warning;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&--colorWarningAlt,
|
|
57
|
+
&--colorWarningContainer {
|
|
58
|
+
@apply c-bg-warningContainer;
|
|
59
|
+
|
|
60
|
+
.cobalt-Icon {
|
|
61
|
+
@apply c-fill-onWarningContainer;
|
|
32
62
|
}
|
|
33
63
|
}
|
|
34
64
|
|
|
@@ -38,9 +68,12 @@
|
|
|
38
68
|
}
|
|
39
69
|
}
|
|
40
70
|
|
|
41
|
-
&--
|
|
71
|
+
&--colorErrorAlt,
|
|
72
|
+
&--colorErrorContainer {
|
|
73
|
+
@apply c-bg-errorContainer;
|
|
74
|
+
|
|
42
75
|
.cobalt-Icon {
|
|
43
|
-
@apply c-fill-
|
|
76
|
+
@apply c-fill-onErrorContainer;
|
|
44
77
|
}
|
|
45
78
|
}
|
|
46
79
|
|
|
@@ -50,13 +83,17 @@
|
|
|
50
83
|
}
|
|
51
84
|
}
|
|
52
85
|
|
|
53
|
-
&--
|
|
86
|
+
&--colorSuccessAlt,
|
|
87
|
+
&--colorSuccessContainer {
|
|
88
|
+
@apply c-bg-successContainer;
|
|
89
|
+
|
|
54
90
|
.cobalt-Icon {
|
|
55
|
-
@apply c-fill-
|
|
91
|
+
@apply c-fill-onSuccessContainer;
|
|
56
92
|
}
|
|
57
93
|
}
|
|
58
94
|
|
|
59
|
-
&--colorConnect
|
|
95
|
+
&--colorConnect,
|
|
96
|
+
&--colorConnectAlt {
|
|
60
97
|
@apply c-bg-connect;
|
|
61
98
|
|
|
62
99
|
.cobalt-Icon {
|
|
@@ -64,7 +101,8 @@
|
|
|
64
101
|
}
|
|
65
102
|
}
|
|
66
103
|
|
|
67
|
-
&--colorKeyExchange
|
|
104
|
+
&--colorKeyExchange,
|
|
105
|
+
&--colorKeyExchangeAlt {
|
|
68
106
|
@apply c-bg-keyExchange;
|
|
69
107
|
|
|
70
108
|
.cobalt-Icon {
|
|
@@ -72,63 +110,79 @@
|
|
|
72
110
|
}
|
|
73
111
|
}
|
|
74
112
|
|
|
75
|
-
&--
|
|
76
|
-
|
|
113
|
+
&--colorDisabled,
|
|
114
|
+
&--colorOnSurfaceDisabled {
|
|
115
|
+
.cobalt-Icon {
|
|
116
|
+
@apply c-fill-onSurfaceDisabled;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&--colorDisabledAlt {
|
|
121
|
+
@apply c-bg-disabled;
|
|
77
122
|
|
|
78
123
|
.cobalt-Icon {
|
|
79
|
-
@apply c-fill-
|
|
124
|
+
@apply c-fill-onSurfaceDisabled;
|
|
80
125
|
}
|
|
81
126
|
}
|
|
82
127
|
|
|
83
|
-
&--
|
|
84
|
-
|
|
128
|
+
&--colorInfo {
|
|
129
|
+
.cobalt-Icon {
|
|
130
|
+
@apply c-fill-tertiary;
|
|
131
|
+
}
|
|
85
132
|
}
|
|
86
133
|
|
|
87
|
-
&--
|
|
88
|
-
|
|
134
|
+
&--colorInfoAlt,
|
|
135
|
+
&--colorTertiaryContainer {
|
|
136
|
+
@apply c-bg-tertiaryContainer;
|
|
89
137
|
|
|
90
138
|
.cobalt-Icon {
|
|
91
|
-
@apply c-fill-
|
|
139
|
+
@apply c-fill-onSurface;
|
|
92
140
|
}
|
|
93
141
|
}
|
|
94
142
|
|
|
95
|
-
&--
|
|
96
|
-
@apply c-bg-disabled;
|
|
97
|
-
|
|
143
|
+
&--colorDriver {
|
|
98
144
|
.cobalt-Icon {
|
|
99
|
-
@apply c-fill-
|
|
145
|
+
@apply c-fill-secondary;
|
|
100
146
|
}
|
|
101
147
|
}
|
|
102
148
|
|
|
103
|
-
&--
|
|
104
|
-
@apply c-bg-
|
|
149
|
+
&--colorDriverAlt {
|
|
150
|
+
@apply c-bg-secondaryContainer;
|
|
105
151
|
|
|
106
152
|
.cobalt-Icon {
|
|
107
|
-
@apply c-fill-
|
|
153
|
+
@apply c-fill-onSecondaryContainer;
|
|
108
154
|
}
|
|
109
155
|
}
|
|
110
156
|
|
|
111
|
-
&--
|
|
157
|
+
&--colorOwner {
|
|
158
|
+
.cobalt-Icon {
|
|
159
|
+
@apply c-fill-tertiary;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&--colorOwnerAlt {
|
|
112
164
|
@apply c-bg-tertiaryContainer;
|
|
113
165
|
|
|
114
166
|
.cobalt-Icon {
|
|
115
|
-
@apply c-fill-
|
|
167
|
+
@apply c-fill-tertiary;
|
|
116
168
|
}
|
|
117
169
|
}
|
|
118
170
|
|
|
119
|
-
&--
|
|
120
|
-
@apply c-bg-successContainer;
|
|
121
|
-
|
|
171
|
+
&--colorOnTertiaryContainer {
|
|
122
172
|
.cobalt-Icon {
|
|
123
|
-
@apply c-fill-
|
|
173
|
+
@apply c-fill-onTertiaryContainer;
|
|
124
174
|
}
|
|
125
175
|
}
|
|
126
176
|
|
|
127
|
-
&--
|
|
128
|
-
@apply c-bg-
|
|
177
|
+
&--colorSurface {
|
|
178
|
+
@apply c-bg-onSurface;
|
|
129
179
|
|
|
130
180
|
.cobalt-Icon {
|
|
131
|
-
@apply c-fill-
|
|
181
|
+
@apply c-fill-surface;
|
|
132
182
|
}
|
|
133
183
|
}
|
|
184
|
+
|
|
185
|
+
&--colorSurfaceContainerVariant {
|
|
186
|
+
@apply c-bg-surfaceContainerVariant;
|
|
187
|
+
}
|
|
134
188
|
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonTemplatePropsType } from "../helpers";
|
|
3
|
+
import { ButtonProps, LinkProps } from "../ButtonComponent";
|
|
4
|
+
type SmallCommonPropsType = ButtonTemplatePropsType<{
|
|
5
|
+
variant?: "primary" | "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral";
|
|
6
|
+
destructive?: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
export type SmallButtonPropsType = SmallCommonPropsType & ButtonProps;
|
|
9
|
+
export type SmallLinkPropsType = SmallCommonPropsType & LinkProps;
|
|
10
|
+
declare const SmallButton: React.ForwardRefExoticComponent<{
|
|
11
|
+
variant?: "primary" | "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral" | undefined;
|
|
12
|
+
destructive?: boolean | undefined;
|
|
13
|
+
} & import("../helpers").ButtonCommonPropsType & React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
14
|
+
loading?: boolean | undefined;
|
|
15
|
+
href?: undefined;
|
|
16
|
+
} & React.RefAttributes<HTMLButtonElement>> & {
|
|
17
|
+
Link: React.ForwardRefExoticComponent<{
|
|
18
|
+
variant?: "primary" | "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral" | undefined;
|
|
19
|
+
destructive?: boolean | undefined;
|
|
20
|
+
} & import("../helpers").ButtonCommonPropsType & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
21
|
+
loading?: boolean | undefined;
|
|
22
|
+
disabled?: boolean | undefined;
|
|
23
|
+
href?: string | undefined;
|
|
24
|
+
} & React.RefAttributes<HTMLAnchorElement>>;
|
|
25
|
+
};
|
|
26
|
+
export default SmallButton;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { GhostButtonPropsType, GhostLinkPropsType } from "./GhostButton";
|
|
2
2
|
import { InversedButtonPropsType, InversedLinkPropsType } from "./InversedButton";
|
|
3
3
|
import { DefaultButtonPropsType, DefaultLinkPropsType } from "./DefaultButton";
|
|
4
|
-
|
|
4
|
+
import { SmallButtonPropsType, SmallLinkPropsType } from "./SmallButton";
|
|
5
|
+
export type AllButtonsPropsType = GhostButtonPropsType & GhostLinkPropsType & InversedButtonPropsType & InversedLinkPropsType & DefaultButtonPropsType & DefaultLinkPropsType & SmallButtonPropsType & SmallLinkPropsType;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IconColorsType } from "../Icon";
|
|
3
|
+
type BaseColor = "base" | "accent" | "warning" | "error" | "success" | "connect" | "keyExchange" | "disabled" | "info" | "driver" | "owner";
|
|
4
|
+
type WithBackgroundColor = `${BaseColor}Alt`;
|
|
3
5
|
export type ContainedIconPropsType = {
|
|
4
6
|
icon: React.JSX.Element;
|
|
5
|
-
color?: IconColorsType;
|
|
7
|
+
color?: IconColorsType | BaseColor | WithBackgroundColor;
|
|
6
8
|
className?: string;
|
|
7
9
|
};
|
|
8
10
|
export declare function ContainedIcon({ icon, color, className, }: ContainedIconPropsType): React.JSX.Element;
|
|
11
|
+
export {};
|
package/types/src/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export { default as GhostButton } from "./components/Buttons/GhostButton";
|
|
|
6
6
|
export { default as InversedButton } from "./components/Buttons/InversedButton";
|
|
7
7
|
export { default as DefaultButton } from "./components/Buttons/DefaultButton";
|
|
8
8
|
export { default as ButtonsGroup } from "./components/Buttons/ButtonsGroup";
|
|
9
|
+
export { default as SmallButton } from "./components/Buttons/SmallButton";
|
|
9
10
|
export { Callout } from "./components/Callout";
|
|
10
11
|
export { default as Cell, Cells } from "./components/Cell";
|
|
11
12
|
export { EmptyState } from "./components/EmptyState";
|