@drivy/cobalt 2.4.0 → 2.5.0

package/components/Callout/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-const Callout = ({ title, children, cta, variant = "neutral", illustrationUrl, }) => {
+const Callout = ({ title, children, cta, variant = "neutral", illustrationUrl, className, }) => {
     // force CTA to match Callout variant
     const enforcedCTA = cta && React.isValidElement(cta)
         ? React.cloneElement(cta, {
@@ -13,7 +13,7 @@ const Callout = ({ title, children, cta, variant = "neutral", illustrationUrl, }
             "cobalt-callout--warning": variant === "warning",
             "cobalt-callout--neutral": variant === "neutral",
             "cobalt-callout--error": variant === "error",
-        }) },
+        }, className) },
         React.createElement("div", { className: "cobalt-callout__content" },
             title && React.createElement("div", { className: "cobalt-callout__title" }, title),
             React.createElement("div", { className: "cobalt-callout__body" }, children),

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\"\nimport { SmallButtonElement } from \"../Buttons/SmallButton\"\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  cta?: React.ReactNode\n  illustrationUrl?: string\n  variant: \"warning\" | \"neutral\" | \"error\"\n}\n\nexport const Callout = ({\n  title,\n  children,\n  cta,\n  variant = \"neutral\",\n  illustrationUrl,\n}: CalloutProps) => {\n  // force CTA to match Callout variant\n  const enforcedCTA =\n    cta && React.isValidElement(cta)\n      ? React.cloneElement(cta as SmallButtonElement, {\n          variant: variant === \"error\" ? \"primary\" : variant,\n          destructive: variant === \"error\",\n        })\n      : cta\n\n  return (\n    <div\n      className={cx(\"cobalt-callout\", {\n        \"cobalt-callout--warning\": variant === \"warning\",\n        \"cobalt-callout--neutral\": variant === \"neutral\",\n        \"cobalt-callout--error\": variant === \"error\",\n      })}\n    >\n      <div className=\"cobalt-callout__content\">\n        {title && <div className=\"cobalt-callout__title\">{title}</div>}\n        <div className=\"cobalt-callout__body\">{children}</div>\n        {enforcedCTA}\n      </div>\n      {illustrationUrl && (\n        <img className=\"cobalt-callout__illustration\" src={illustrationUrl} />\n      )}\n    </div>\n  )\n}\n\nexport default Callout\n"],"names":[],"mappings":";;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,GAAG,EACH,OAAO,GAAG,SAAS,EACnB,eAAe,GACF,KAAI;;IAEjB,MAAM,WAAW,GACf,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;AAC9B,UAAE,KAAK,CAAC,YAAY,CAAC,GAAyB,EAAE;YAC5C,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO;YAClD,WAAW,EAAE,OAAO,KAAK,OAAO;SACjC,CAAC;UACF,GAAG,CAAA;AAET,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;YAC9B,yBAAyB,EAAE,OAAO,KAAK,SAAS;YAChD,yBAAyB,EAAE,OAAO,KAAK,SAAS;YAChD,uBAAuB,EAAE,OAAO,KAAK,OAAO;SAC7C,CAAC,EAAA;QAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;AACrC,YAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAO;AACrD,YAAA,WAAW,CACR;AACL,QAAA,eAAe,KACd,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAC,GAAG,EAAE,eAAe,EAAA,CAAI,CACvE,CACG,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { SmallButtonElement } from \"../Buttons/SmallButton\"\n\nexport type CalloutPropsType = React.PropsWithChildren<{\n  title?: string\n  cta?: React.ReactNode\n  illustrationUrl?: string\n  variant: \"warning\" | \"neutral\" | \"error\"\n  className?: string\n}>\n\nexport const Callout = ({\n  title,\n  children,\n  cta,\n  variant = \"neutral\",\n  illustrationUrl,\n  className,\n}: CalloutPropsType) => {\n  // force CTA to match Callout variant\n  const enforcedCTA =\n    cta && React.isValidElement(cta)\n      ? React.cloneElement(cta as SmallButtonElement, {\n          variant: variant === \"error\" ? \"primary\" : variant,\n          destructive: variant === \"error\",\n        })\n      : cta\n\n  return (\n    <div\n      className={cx(\n        \"cobalt-callout\",\n        {\n          \"cobalt-callout--warning\": variant === \"warning\",\n          \"cobalt-callout--neutral\": variant === \"neutral\",\n          \"cobalt-callout--error\": variant === \"error\",\n        },\n        className\n      )}\n    >\n      <div className=\"cobalt-callout__content\">\n        {title && <div className=\"cobalt-callout__title\">{title}</div>}\n        <div className=\"cobalt-callout__body\">{children}</div>\n        {enforcedCTA}\n      </div>\n      {illustrationUrl && (\n        <img className=\"cobalt-callout__illustration\" src={illustrationUrl} />\n      )}\n    </div>\n  )\n}\n\nexport default Callout\n"],"names":[],"mappings":";;;MAYa,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,GAAG,EACH,OAAO,GAAG,SAAS,EACnB,eAAe,EACf,SAAS,GACQ,KAAI;;IAErB,MAAM,WAAW,GACf,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;AAC9B,UAAE,KAAK,CAAC,YAAY,CAAC,GAAyB,EAAE;YAC5C,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO;YAClD,WAAW,EAAE,OAAO,KAAK,OAAO;SACjC,CAAC;UACF,GAAG,CAAA;AAET,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB;YACE,yBAAyB,EAAE,OAAO,KAAK,SAAS;YAChD,yBAAyB,EAAE,OAAO,KAAK,SAAS;YAChD,uBAAuB,EAAE,OAAO,KAAK,OAAO;AAC7C,SAAA,EACD,SAAS,CACV,EAAA;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;AACrC,YAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAO;AACrD,YAAA,WAAW,CACR;AACL,QAAA,eAAe,KACd,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAC,GAAG,EAAE,eAAe,EAAA,CAAI,CACvE,CACG,EACP;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -9,7 +9,7 @@
     "*.scss"
   ],
   "engines": {
-    "node": ">=22.14.0"
+    "node": ">=22.21.0"
   },
   "module": "src/index.js",
   "license": "MIT",
@@ -19,17 +19,17 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "5.14.1",
+    "@ark-ui/react": "5.26.2",
     "@juggle/resize-observer": "3.4.0",
-    "@lottiefiles/react-lottie-player": "3.5.4",
+    "@lottiefiles/react-lottie-player": "3.6.0",
     "@tippyjs/react": "4.2.6",
     "classnames": "2.5.1",
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.1.5",
+    "nanoid": "5.1.6",
     "postcss": "8.5.6",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "3.4.18",
     "tippy.js": "6.3.7"
   },
   "peerDependencies": {
@@ -51,7 +51,7 @@
     "@storybook/react": "7.6.20",
     "@storybook/react-webpack5": "7.6.20",
     "@svgr/cli": "7.0.0",
-    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "11.0.4",
@@ -62,7 +62,7 @@
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
     "autoprefixer": "10.4.21",
-    "core-js": "3.45.1",
+    "core-js": "3.46.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "^0.12.0",
@@ -88,7 +88,7 @@
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.93.0",
+    "sass": "1.93.2",
     "sass-loader": "13.3.3",
     "sharp-cli": "5.2.0",
     "storybook": "7.6.20",
@@ -96,8 +96,8 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.4.4",
-    "tsx": "4.20.5",
+    "ts-jest": "29.4.5",
+    "tsx": "4.20.6",
     "typescript": "5.4.5"
   },
   "keywords": [

package/styles/components/Notice/index.scss

@@ -0,0 +1,7 @@
+.cobalt-notice {
+  @apply c-text-body-sm c-text-onSurfaceVariant c-flex c-gap-xs;
+
+  &__content {
+    padding-top: 1px;
+  }
+}

package/styles/components.scss

@@ -37,3 +37,4 @@
 @import "./components/ContainedIcon/index";
 @import "./components/PlateNumber/index";
 @import "./components/Sidepanel/index";
+@import "./components/Notice/index";

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

@@ -1,11 +1,11 @@
 import React from "react";
-export interface CalloutProps {
-    children: React.ReactNode;
+export type BannerPropsType = React.PropsWithChildren<{
     title?: string;
     cta?: React.ReactNode;
     illustrationUrl?: string;
     illustrationHeight?: number;
     variant: "secondary" | "tertiary" | "business";
-}
-export declare const Banner: ({ title, children, cta, variant, illustrationUrl, illustrationHeight, }: CalloutProps) => React.JSX.Element;
+    className?: string;
+}>;
+export declare const Banner: ({ title, children, cta, variant, illustrationUrl, illustrationHeight, className, }: BannerPropsType) => React.JSX.Element;
 export default Banner;

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

@@ -1,10 +1,10 @@
 import React from "react";
-export interface CalloutProps {
-    children: React.ReactNode;
+export type CalloutPropsType = React.PropsWithChildren<{
     title?: string;
     cta?: React.ReactNode;
     illustrationUrl?: string;
     variant: "warning" | "neutral" | "error";
-}
-export declare const Callout: ({ title, children, cta, variant, illustrationUrl, }: CalloutProps) => React.JSX.Element;
+    className?: string;
+}>;
+export declare const Callout: ({ title, children, cta, variant, illustrationUrl, className, }: CalloutPropsType) => React.JSX.Element;
 export default Callout;

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

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from "react";
+export type NoticePropsType = PropsWithChildren<{
+    withIcon?: boolean;
+}>;
+export declare const Notice: ({ withIcon, children }: NoticePropsType) => React.JSX.Element;
+export default Notice;