@drivy/cobalt 0.51.0 → 0.51.1

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.
Files changed (4) hide show
  1. package/components/ContainedIcon/index.js.map +1 -1
  2. package/package.json +3 -3
  3. package/styles/components/ContainedIcon/index.scss +64 -8
  4. package/types/src/components/ContainedIcon/index.d.ts +1 -1
package/components/ContainedIcon/index.js.map CHANGED
@@ -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\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType = Extends<\n IconColorsType,\n \"base\" | \"accent\" | \"disabled\" | \"error\" | \"info\" | \"success\" | \"connect\"\n>\n\nexport type ContainedIconPropsType = {\n icon: React.JSX.Element\n color?: ContainedIconColorType\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":";;;;AAkBM,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;;;;"}
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 Extends<T, U extends T> = U\n\ntype ContainedIconColorType =\n | Extends<\n IconColorsType,\n | \"base\"\n | \"accent\"\n | \"disabled\"\n | \"error\"\n | \"info\"\n | \"success\"\n | \"connect\"\n | \"keyExchange\"\n | \"rideshare\"\n | \"accentAlt\"\n | \"disabledAlt\"\n | \"errorAlt\"\n | \"infoAlt\"\n | \"successAlt\"\n | \"connectAlt\"\n >\n | \"baseAlt\"\n\nexport type ContainedIconPropsType = {\n icon: React.JSX.Element\n color?: ContainedIconColorType\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":";;;;AAkCM,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;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.51.0",
3
+ "version": "0.51.1",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/src/index.d.ts",
@@ -60,13 +60,13 @@
60
60
  "@storybook/react-webpack5": "7.6.20",
61
61
  "@svgr/cli": "7.0.0",
62
62
  "@testing-library/jest-dom": "6.6.3",
63
- "@testing-library/react": "16.1.0",
63
+ "@testing-library/react": "16.2.0",
64
64
  "@testing-library/react-hooks": "8.0.1",
65
65
  "@types/fs-extra": "11.0.4",
66
66
  "@types/jest": "29.5.14",
67
67
  "@types/lodash.throttle": "4.1.9",
68
68
  "@types/media-typer": "1.1.3",
69
- "@types/node": "20.17.13",
69
+ "@types/node": "20.17.16",
70
70
  "@types/react": "18.3.18",
71
71
  "@types/react-dom": "18.3.5",
72
72
  "autoprefixer": "10.4.20",
package/styles/components/ContainedIcon/index.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  .cobalt-contained-icon {
2
- @include bg-color(neutralAlt);
3
-
4
- --containerSize: 40px;
2
+ --containerSize: 48px;
5
3
 
6
4
  width: var(--containerSize);
7
5
  height: var(--containerSize);
@@ -23,6 +21,64 @@
23
21
  }
24
22
 
25
23
  &--colorAccent {
24
+ .cobalt-Icon {
25
+ @include semantic-color(icon, accent, fill);
26
+ }
27
+ }
28
+
29
+ &--colorDisabled {
30
+ .cobalt-Icon {
31
+ @include semantic-color(icon, subdued, fill);
32
+ }
33
+ }
34
+
35
+ &--colorError {
36
+ .cobalt-Icon {
37
+ @include semantic-color(icon, error, fill);
38
+ }
39
+ }
40
+
41
+ &--colorInfo {
42
+ .cobalt-Icon {
43
+ @include semantic-color(icon, infoAlt, fill);
44
+ }
45
+ }
46
+
47
+ &--colorSuccess {
48
+ .cobalt-Icon {
49
+ @include semantic-color(icon, success, fill);
50
+ }
51
+ }
52
+
53
+ &--colorConnect {
54
+ @include bg-color(connect);
55
+
56
+ .cobalt-Icon {
57
+ @include semantic-color(icon, onConnect, fill);
58
+ }
59
+ }
60
+
61
+ &--colorKeyExchange {
62
+ @include bg-color(keyExchange);
63
+
64
+ .cobalt-Icon {
65
+ @include semantic-color(icon, onKeyExchange, fill);
66
+ }
67
+ }
68
+
69
+ &--colorRideshare {
70
+ @include bg-color(rideshare);
71
+
72
+ .cobalt-Icon {
73
+ @include semantic-color(icon, onRideshare, fill);
74
+ }
75
+ }
76
+
77
+ &--colorBaseAlt {
78
+ @include bg-color(neutralAlt);
79
+ }
80
+
81
+ &--colorAccentAlt {
26
82
  @include bg-color(accentAlt);
27
83
 
28
84
  .cobalt-Icon {
@@ -30,7 +86,7 @@
30
86
  }
31
87
  }
32
88
 
33
- &--colorDisabled {
89
+ &--colorDisabledAlt {
34
90
  @include bg-color(disabled);
35
91
 
36
92
  .cobalt-Icon {
@@ -38,7 +94,7 @@
38
94
  }
39
95
  }
40
96
 
41
- &--colorError {
97
+ &--colorErrorAlt {
42
98
  @include bg-color(errorAlt);
43
99
 
44
100
  .cobalt-Icon {
@@ -46,7 +102,7 @@
46
102
  }
47
103
  }
48
104
 
49
- &--colorInfo {
105
+ &--colorInfoAlt {
50
106
  @include bg-color(info);
51
107
 
52
108
  .cobalt-Icon {
@@ -54,7 +110,7 @@
54
110
  }
55
111
  }
56
112
 
57
- &--colorSuccess {
113
+ &--colorSuccessAlt {
58
114
  @include bg-color(successAlt);
59
115
 
60
116
  .cobalt-Icon {
@@ -62,7 +118,7 @@
62
118
  }
63
119
  }
64
120
 
65
- &--colorConnect {
121
+ &--colorConnectAlt {
66
122
  @include bg-color(connectAlt);
67
123
 
68
124
  .cobalt-Icon {
package/types/src/components/ContainedIcon/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { IconColorsType } from "../Icon";
3
3
  type Extends<T, U extends T> = U;
4
- type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect">;
4
+ type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect" | "keyExchange" | "rideshare" | "accentAlt" | "disabledAlt" | "errorAlt" | "infoAlt" | "successAlt" | "connectAlt"> | "baseAlt";
5
5
  export type ContainedIconPropsType = {
6
6
  icon: React.JSX.Element;
7
7
  color?: ContainedIconColorType;