@drivy/cobalt 0.25.0 → 0.26.0

package/cjs/tokens/theme.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const background = {
+	primary: "grey.lighter/white/black.500",
+	secondary: "white/white/black.300",
+	secondaryInteractive: {
+		DEFAULT: "white/white/black.300",
+		hover: "grey.lighter/navy.50/black.300"
+	},
 	accent: "purple/purple.500/purpleDeep.400",
 	accentInteractive: {
 		DEFAULT: "purple/purple.500/purpleDeep.400",
@@ -13,30 +19,58 @@ const background = {
 		DEFAULT: "indigo/purple.100/purpleDeep.900",
 		hover: "indigo/purpleLight.100/purpleDeep.900"
 	},
-	connect: "turquoise/turquoise.500/turquoise.500",
-	connectInteractive: {
-		DEFAULT: "turquoise/turquoise.500/turquoise.500",
-		hover: "turquoise/turquoise.700/turquoise.500"
-	},
-	driver: "deprecatedDriver/yellow.500/yellow.500",
+	info: "grey.lighter/yellow.100/yellow.1000",
 	error: "red/red.500/red.500",
 	errorInteractive: {
 		DEFAULT: "red/red.500/red.500",
 		hover: "red/red.700/red.500"
 	},
 	errorAlt: "graphite/red.100/red.900",
-	info: "grey.lighter/yellow.100/yellow.1000",
-	neutral: "grey.light/navy.100/black.50",
-	neutralAlt: "grey.lighter/navy.50/black.100",
+	success: "green/green.700/green.700",
+	successAlt: "graphite/green.100/green.1000",
+	connect: "turquoise/turquoise.500/turquoise.500",
+	connectInteractive: {
+		DEFAULT: "turquoise/turquoise.500/turquoise.500",
+		hover: "turquoise/turquoise.700/turquoise.500"
+	},
+	driver: "deprecatedDriver/yellow.500/yellow.500",
 	owner: "indigo.dark/navy.700/navy.700",
-	primary: "grey.lighter/white/black.500",
-	secondary: "white/white/black.300",
-	secondaryInteractive: {
-		DEFAULT: "white/white/black.300",
-		hover: "grey.lighter/navy.50/black.300"
+	disabled: "grey.light/navy.100/black.50",
+	neutral: "grey.light/navy.100/black.50",
+	neutralAlt: "grey.lighter/navy.50/black.100"
+};
+const text = {
+	base: "graphite/navy.700/grey.100",
+	baseInteractive: {
+		DEFAULT: "graphite/navy.700/grey.100",
+		hover: "graphite/navy.900/grey.100"
+	},
+	subdued: "graphite.light/navy.300/grey.300",
+	subduedInteractive: {
+		DEFAULT: "graphite.light/navy.300/grey.300",
+		hover: "graphite/navy.500/grey.300"
+	},
+	accent: "purple/purple.500/purpleDeep.400",
+	accentInteractive: {
+		DEFAULT: "blue/purple.500/purpleDeep.400",
+		hover: "blue/purple.700/purpleDeep.400"
+	},
+	accentAlt: "white/purple.500/grey.100",
+	accentAltInteractive: {
+		DEFAULT: "white/purple.500/grey.100",
+		hover: "indigo/purple.700/grey.100"
 	},
+	info: "graphite.light/yellow.900/yellow.300",
+	error: "red/red.500/red.400",
+	errorAlt: "white/red.500/red.500",
 	success: "green/green.700/green.700",
-	successAlt: "graphite/green.100/green.1000"
+	successAlt: "white/green.900/green.100",
+	connect: "turquoise/turquoise.500/turquoise.500",
+	driver: "graphite/navy.700/navy.700",
+	owner: "white/white/grey.100",
+	warning: "coral/orange.500/orange.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
+	inversed: "white/white/white"
 };
 const buttonBackground = {
 	selected: "indigo/purple.100/purpleDeep.900",
@@ -128,14 +162,17 @@ const buttonLabel = {
 		press: "blue/purple.900/purpleDeep.400"
 	}
 };
-const fill = {
-	accent: "purple/purple.500/purpleDeep.400",
-	accentAlt: "purple/purple.100/purpleDeep.900",
-	disabled: "grey.dark/navy.300/grey.300",
-	secondary: "turquoise/yellow.500/yellow.500",
-	subdued: "grey.light/navy.100/black.50"
-};
 const icon = {
+	base: "graphite/navy.500/grey.100",
+	baseInteractive: {
+		DEFAULT: "graphite/navy.500/grey.100",
+		hover: "graphite/navy.700/grey.100"
+	},
+	subdued: "graphite.light/navy.300/grey.300",
+	subduedInteractive: {
+		DEFAULT: "graphite.light/navy.300/grey.300",
+		hover: "graphite/navy.500/grey.300"
+	},
 	accent: "purple/purple.500/purpleDeep.400",
 	accentInteractive: {
 		DEFAULT: "purple/purple.500/purpleDeep.400",
@@ -146,29 +183,27 @@ const icon = {
 		DEFAULT: "white/purple.500/grey.100",
 		hover: "indigo/purple.700/grey.100"
 	},
-	base: "graphite/navy.500/grey.100",
-	baseInteractive: {
-		DEFAULT: "graphite/navy.500/grey.100",
-		hover: "graphite/navy.700/grey.100"
-	},
-	connect: "turquoise/turquoise.500/white",
-	driver: "graphite/navy.700//navy.700",
+	info: "graphite.light/yellow.900/yellow.300",
 	error: "red/red.500/red.400",
 	errorAlt: "red/red.500/red.200",
-	info: "graphite.light/yellow.900/yellow.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
-	inversed: "white/white/white",
-	owner: "white/white/white",
-	subdued: "graphite.light/navy.300/grey.300",
-	subduedInteractive: {
-		DEFAULT: "graphite.light/navy.300/grey.300",
-		hover: "graphite/navy.500/grey.300"
-	},
 	success: "green/green.700/green.700",
 	successAlt: "white/green.900/green.100",
-	warning: "coral/orange.500/orange.300"
+	connect: "turquoise/turquoise.500/white",
+	driver: "graphite/navy.700//navy.700",
+	owner: "white/white/white",
+	warning: "coral/orange.500/orange.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
+	inversed: "white/white/white",
+	disabled: "grey.lighter/navy.100/black.50"
 };
 const stroke = {
+	base: "grey/navy.100/black.50",
+	baseInteractive: {
+		DEFAULT: "grey/navy.100/black.50",
+		hover: "graphite.light/navy.300/purpleDeep.400",
+		press: "graphite/navy.500/purpleDeep.400"
+	},
+	subdued: "grey.light/navy.100/black.50",
 	accent: "indigo/purple.500/purpleDeep.400",
 	accentInteractive: {
 		DEFAULT: "indigo/purple.500/purpleDeep.400",
@@ -176,60 +211,32 @@ const stroke = {
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
 	accentAlt: "purple/purple.300/purpleDeep.700",
-	base: "grey/navy.100/black.50",
-	baseInteractive: {
-		DEFAULT: "grey/navy.100/black.50",
-		hover: "graphite.light/navy.300/purpleDeep.400",
-		press: "graphite/navy.500/purpleDeep.400"
-	},
 	error: "red/red.500/red.200",
 	errorAlt: "red/red.500/red.200",
-	subdued: "grey.light/navy.100/black.50",
 	success: "green/green.500/green.700",
 	successAlt: "green/green.500/green.700"
 };
-const text = {
+const fill = {
+	base: "graphite/navy.500/grey.100",
+	secondary: "turquoise/yellow.500/yellow.500",
+	subdued: "grey.light/navy.100/black.50",
 	accent: "purple/purple.500/purpleDeep.400",
-	accentInteractive: {
-		DEFAULT: "blue/purple.500/purpleDeep.400",
-		hover: "blue/purple.700/purpleDeep.400"
-	},
-	accentAlt: "white/purple.500/grey.100",
-	accentAltInteractive: {
-		DEFAULT: "white/purple.500/grey.100",
-		hover: "indigo/purple.700/grey.100"
-	},
-	base: "graphite/navy.700/grey.100",
-	baseInteractive: {
-		DEFAULT: "graphite/navy.700/grey.100",
-		hover: "graphite/navy.900/grey.100"
-	},
-	connect: "turquoise/turquoise.500/turquoise.500",
-	driver: "graphite/navy.700/navy.700",
-	error: "red/red.500/red.400",
-	errorAlt: "white/red.500/red.500",
-	info: "graphite.light/yellow.900/yellow.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
-	inversed: "white/white/white",
-	owner: "white/white/grey.100",
-	subdued: "graphite.light/navy.300/grey.300",
-	subduedInteractive: {
-		DEFAULT: "graphite.light/navy.300/grey.300",
-		hover: "graphite/navy.500/grey.300"
-	},
-	success: "green/green.700/green.700",
-	successAlt: "white/green.900/green.100",
-	warning: "coral/orange.500/orange.300"
+	accentAlt: "purple/purple.100/purpleDeep.900",
+	success: "red/red.500/red.500",
+	error: "green/green.500/green.700",
+	negative: "red/red.150/red.900",
+	neutral: "grey.lighter/navy.50/black.100",
+	disabled: "grey.dark/navy.300/grey.300"
 };
 var _theme = {
 	background: background,
+	text: text,
 	buttonBackground: buttonBackground,
 	buttonIcon: buttonIcon,
 	buttonLabel: buttonLabel,
-	fill: fill,
 	icon: icon,
 	stroke: stroke,
-	text: text
+	fill: fill
 };
 
 exports.background = background;

package/cjs/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/Callout/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
+import '../Icon/index.js';
+import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 
 const Callout = ({ title, children, status = "info", close, }) => (React.createElement("div", { className: cx("cobalt-Callout cobalt-bottom_margin_tight", {
         "cobalt-Callout--info": status === "info",
@@ -9,7 +11,7 @@ const Callout = ({ title, children, status = "info", close, }) => (React.createE
     title && React.createElement("div", { className: "cobalt-Callout__Title" }, title),
     React.createElement("p", null, children),
     close && (React.createElement("button", { className: "cobalt-Callout__Close", onClick: close, type: "button" },
-        React.createElement("span", { "aria-hidden": "true" }, "\u00D7")))));
+        React.createElement(CloseIcon, { color: "subduedInteractive", contained: true, size: 16 })))));
 
 export { Callout, Callout as default };
 //# sourceMappingURL=index.js.map

package/components/Callout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout cobalt-bottom_margin_tight\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <p>{children}</p>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <span aria-hidden=\"true\">×</span>\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;AAUa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE;QACzD,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAI,QAAQ,CAAK;AAChB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAS,EAAA,QAAA,CAAA,CAC1B,CACV,CACG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout cobalt-bottom_margin_tight\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <p>{children}</p>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <CloseIcon color=\"subduedInteractive\" contained size={16} />\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE;QACzD,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAI,QAAQ,CAAK;AAChB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,oBAAoB,EAAC,SAAS,EAAA,IAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACrD,CACV,CACG;;;;"}

package/components/Flash/index.js

@@ -19,7 +19,7 @@ const Flash = ({ children, status = "info" }) => {
     const iconColor = STATUS_ICON_COLOR_MAP[status]
         ? STATUS_ICON_COLOR_MAP[status]
         : "turquoise";
-    return (React.createElement("div", { className: "cobalt-Flash" },
+    return (React.createElement("div", { className: `cobalt-Flash cobalt-Flash--${status}` },
         React.createElement("div", { className: "cobalt-Flash__wrapper" },
             React.createElement("span", { className: "cobalt-Flash__Icon" },
                 React.createElement(Icon, { source: icon, size: ICON_SIZE, color: iconColor })),

package/components/Flash/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"turquoise\",\n  success: \"green\",\n  error: \"red\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"turquoise\"\n\n  return (\n    <div className=\"cobalt-Flash\">\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,KAAK;CACb,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,WAAW,CAAA;AAEf,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,cAAc,EAAA;QAC3B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"turquoise\",\n  success: \"green\",\n  error: \"red\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"turquoise\"\n\n  return (\n    <div className={`cobalt-Flash cobalt-Flash--${status}`}>\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,KAAK;CACb,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,WAAW,CAAA;AAEf,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,2BAAA,EAA8B,MAAM,CAAE,CAAA,EAAA;QACpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}

package/components/Rating/RatingIcons.js

@@ -4,8 +4,8 @@ import cx from 'classnames';
 import '../Icon/index.js';
 import StarIcon from '../Icon/__generated__/StarIcon.js';
 
-const defaultRatingIcon = React.createElement(StarIcon, { color: "turquoise" });
-const itemEmptyColor = "grey";
+const defaultRatingIcon = React.createElement(StarIcon, { color: "infoAlt" });
+const itemEmptyColor = "disabled";
 function roundHalf(num) {
     const temp = num * 2;
     return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2;

package/components/Rating/RatingIcons.js.map

@@ -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={\"turquoise\"} />\nconst itemEmptyColor: IconProps[\"color\"] = \"grey\"\n\nexport function roundHalf(num: number) {\n  const temp = num * 2\n  return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 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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"}
+{"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=\"infoAlt\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"disabled\"\n\nexport function roundHalf(num: number) {\n  const temp = num * 2\n  return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -47,35 +47,35 @@
     "@getaround-eu/stylelint-config": "1.2.5",
     "@getaround-eu/ts-config": "2.2.0",
     "@percy/storybook": "3.3.1",
-    "@rollup/plugin-json": "5.0.1",
+    "@rollup/plugin-json": "5.0.2",
     "@rushstack/eslint-patch": "1.2.0",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addons": "6.5.13",
-    "@storybook/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/react": "6.5.13",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addons": "6.5.14",
+    "@storybook/builder-webpack5": "6.5.14",
+    "@storybook/manager-webpack5": "6.5.14",
+    "@storybook/react": "6.5.14",
     "@svgr/cli": "6.5.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.0",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.2.4",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "18.0.25",
+    "@types/react": "18.0.26",
     "@whitespace/storybook-addon-html": "^5.0.3",
     "autoprefixer": "10.4.13",
     "core-js": "3.26.1",
     "css-loader": "6.7.2",
-    "eslint": "8.28.0",
+    "eslint": "8.29.0",
     "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
     "nested-object-access": "^0.2.5",
     "np": "7.6.2",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "7.0.1",
-    "prettier": "2.7.1",
+    "postcss-loader": "7.0.2",
+    "prettier": "2.8.0",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -92,7 +92,7 @@
     "sharp": "0.31.2",
     "sharp-cli": "3.0.0",
     "style-loader": "3.3.1",
-    "stylelint": "14.15.0",
+    "stylelint": "14.16.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.0.2",
     "ts-jest": "29.0.3",

package/styles/components/BasicCell/index.scss

@@ -1,5 +1,7 @@
 .cobalt- {
   &BasicCell {
+    @include text-color(base);
+
     display: flex;
     align-items: center;
   }
@@ -12,12 +14,12 @@
   }
 
   &BasicCell__Title {
+    // TOFIX to replace by small
     @include text-style-title-tiny;
   }
 
   &BasicCell__Content {
-    @include text-style-body;
-    @include text-style--bodySubdued;
+    @include c-text-body-md;
   }
 
   &BasicCell__Thumb {
@@ -37,18 +39,18 @@
   }
 
   &BasicCell__LeftAddon {
-    padding-right: spacing(tight);
+    padding-right: spacing(sm);
   }
 
   &BasicCell__RightAddonIcon {
-    padding-left: spacing(tight);
+    padding-left: spacing(sm);
     margin-left: auto;
   }
 
   &BasicCell--large {
     .cobalt-BasicCell__Title {
-      @include text-style-title-small;
-      margin-bottom: spacing(unit);
+      @include c-text-title-sm;
+      margin-bottom: spacing("2xs");
     }
 
     .cobalt-BasicCell__Thumb {

package/styles/components/BulletList/index.scss

@@ -4,7 +4,7 @@
     align-items: center;
 
     &:not(:last-child) {
-      margin-bottom: spacing(tight);
+      margin-bottom: spacing(sm);
     }
 
     .cobalt-BulletList--iconPositionTop & {
@@ -15,7 +15,7 @@
   &BulletListItem__Icon {
     display: flex;
     flex-shrink: 0;
-    margin-right: spacing(extra-tight);
+    margin-right: spacing(xs);
   }
 
   &BulletListItem__Content {

package/styles/components/Buttons/GhostButton/index.scss

@@ -22,12 +22,12 @@
   }
 
   &.cob-Button__ghost--standalone {
-    margin-left: #{spacing() * -1};
-    margin-right: #{spacing() * -1};
+    margin-left: #{spacing(md) * -1};
+    margin-right: #{spacing(md) * -1};
 
     &.cob-Button--large {
-      margin-left: #{spacing(medium) * -1};
-      margin-right: #{spacing(medium) * -1};
+      margin-left: #{spacing(lg) * -1};
+      margin-right: #{spacing(lg) * -1};
     }
   }
 

package/styles/components/Buttons/index.scss

@@ -28,7 +28,7 @@
     $height: 40px,
     $line-height: 20px,
     $font-size: 16px,
-    $horizontal-padding: spacing()
+    $horizontal-padding: spacing(md)
   );
 
   position: relative;
@@ -135,7 +135,7 @@
       $height: 56px,
       $line-height: 24px,
       $font-size: 18px,
-      $horizontal-padding: spacing(medium)
+      $horizontal-padding: spacing(lg)
     );
   }
 }
@@ -157,7 +157,9 @@
   &__item {
     margin-top: spacing(sm);
 
-    &:not(.cobalt-buttons-group__item--fullWidth):not(.cobalt-buttons-group__item--xs\:fullWidth) {
+    &:not(.cobalt-buttons-group__item--fullWidth):not(
+        .cobalt-buttons-group__item--xs\:fullWidth
+      ) {
       margin-right: spacing(sm);
     }