@drivy/cobalt 0.50.5 → 0.51.1

package/components/ContainedIcon/index.js.map

@@ -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;;;;"}
+{"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/components/Note/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
 
-const Note = ({ children, fullWidth = false, className }) => (React.createElement("div", { className: cx("cobalt-Note", className, {
+const Note = ({ children, fullWidth = false, className, isError = false, }) => (React.createElement("div", { className: cx("cobalt-Note", className, {
         "cobalt-Note--fullWidth": fullWidth,
+        "cobalt-Note--error": isError,
     }) }, children));
 
 export { Note, Note as default };

package/components/Note/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n}\n\nexport const Note = ({ children, fullWidth = false, className }: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAaa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAa,MACxE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n  isError?: boolean\n}\n\nexport const Note = ({\n  children,\n  fullWidth = false,\n  className,\n  isError = false,\n}: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n      \"cobalt-Note--error\": isError,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAcO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,GAAG,KAAK,GACL,MACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACnC,QAAA,oBAAoB,EAAE,OAAO;AAC9B,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.50.5",
+  "version": "0.51.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -60,13 +60,13 @@
     "@storybook/react-webpack5": "7.6.20",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
+    "@testing-library/react": "16.2.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
-    "@types/node": "20.17.13",
+    "@types/node": "20.17.16",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "autoprefixer": "10.4.20",

package/styles/components/ContainedIcon/index.scss

@@ -1,7 +1,5 @@
 .cobalt-contained-icon {
-  @include bg-color(neutralAlt);
-
-  --containerSize: 40px;
+  --containerSize: 48px;
 
   width: var(--containerSize);
   height: var(--containerSize);
@@ -23,6 +21,64 @@
   }
 
   &--colorAccent {
+    .cobalt-Icon {
+      @include semantic-color(icon, accent, fill);
+    }
+  }
+
+  &--colorDisabled {
+    .cobalt-Icon {
+      @include semantic-color(icon, subdued, fill);
+    }
+  }
+
+  &--colorError {
+    .cobalt-Icon {
+      @include semantic-color(icon, error, fill);
+    }
+  }
+
+  &--colorInfo {
+    .cobalt-Icon {
+      @include semantic-color(icon, infoAlt, fill);
+    }
+  }
+
+  &--colorSuccess {
+    .cobalt-Icon {
+      @include semantic-color(icon, success, fill);
+    }
+  }
+
+  &--colorConnect {
+    @include bg-color(connect);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, onConnect, fill);
+    }
+  }
+
+  &--colorKeyExchange {
+    @include bg-color(keyExchange);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, onKeyExchange, fill);
+    }
+  }
+
+  &--colorRideshare {
+    @include bg-color(rideshare);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, onRideshare, fill);
+    }
+  }
+
+  &--colorBaseAlt {
+    @include bg-color(neutralAlt);
+  }
+
+  &--colorAccentAlt {
     @include bg-color(accentAlt);
 
     .cobalt-Icon {
@@ -30,7 +86,7 @@
     }
   }
 
-  &--colorDisabled {
+  &--colorDisabledAlt {
     @include bg-color(disabled);
 
     .cobalt-Icon {
@@ -38,7 +94,7 @@
     }
   }
 
-  &--colorError {
+  &--colorErrorAlt {
     @include bg-color(errorAlt);
 
     .cobalt-Icon {
@@ -46,7 +102,7 @@
     }
   }
 
-  &--colorInfo {
+  &--colorInfoAlt {
     @include bg-color(info);
 
     .cobalt-Icon {
@@ -54,7 +110,7 @@
     }
   }
 
-  &--colorSuccess {
+  &--colorSuccessAlt {
     @include bg-color(successAlt);
 
     .cobalt-Icon {
@@ -62,7 +118,7 @@
     }
   }
 
-  &--colorConnect {
+  &--colorConnectAlt {
     @include bg-color(connectAlt);
 
     .cobalt-Icon {

package/styles/components/Note/index.scss

@@ -1,15 +1,9 @@
 .cobalt- {
   &Note {
-    @include c-text-body-md;
-    @include text-color(info);
-    @include bg-color(info);
+    @apply c-text-body-md c-bg-info c-text-info c-p-sm c-rounded-lg;
 
     display: inline-block;
 
-    padding: spacing(sm);
-
-    border-radius: border-radius(lg);
-
     a {
       color: inherit;
     }
@@ -18,4 +12,8 @@
   &Note--fullWidth {
     display: block;
   }
+
+  &Note--error {
+    @apply c-bg-errorAlt c-text-error;
+  }
 }

package/types/src/components/ContainedIcon/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconColorsType } from "../Icon";
 type Extends<T, U extends T> = U;
-type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect">;
+type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect" | "keyExchange" | "rideshare" | "accentAlt" | "disabledAlt" | "errorAlt" | "infoAlt" | "successAlt" | "connectAlt"> | "baseAlt";
 export type ContainedIconPropsType = {
     icon: React.JSX.Element;
     color?: ContainedIconColorType;

package/types/src/components/Note/index.d.ts

@@ -7,6 +7,7 @@ export interface NoteProps {
      */
     fullWidth?: boolean;
     className?: string;
+    isError?: boolean;
 }
-export declare const Note: ({ children, fullWidth, className }: NoteProps) => React.JSX.Element;
+export declare const Note: ({ children, fullWidth, className, isError, }: NoteProps) => React.JSX.Element;
 export default Note;

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}