@drivy/cobalt 3.0.1 → 3.0.2

package/components/MarketingNote/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 
-const MarketingNote = ({ children, title, icon, className, variant, }) => (jsxs("div", { className: cx(`cobalt-marketing-note cobalt-marketing-note--${variant}`, className), children: [icon && (jsx("div", { className: "cobalt-marketing-note__icon-container", children: icon })), jsxs("div", { className: "c-flex-1", children: [title && jsx("div", { className: "c-font-bold", children: title }), children] })] }));
+const MarketingNote = ({ children, title, icon, className, variant, compact = false, }) => (jsxs("div", { className: cx(`cobalt-marketing-note cobalt-marketing-note--${variant}`, className, { "cobalt-marketing-note--compact": compact }), children: [icon && (jsx("div", { className: "cobalt-marketing-note__icon-container", children: icon })), jsxs("div", { className: "cobalt-marketing-note__content", children: [title && jsx("div", { className: "c-font-bold", children: title }), children] })] }));
 
 export { MarketingNote };
 //# sourceMappingURL=index.js.map

package/components/MarketingNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/MarketingNote/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { PropsWithChildren } from \"react\"\n\nexport type MarketingNoteProps = PropsWithChildren<{\n  variant: \"success\" | \"tertiary\"\n  title?: string\n  icon?: React.JSX.Element\n  className?: string\n}>\n\nexport const MarketingNote = ({\n  children,\n  title,\n  icon,\n  className,\n  variant,\n}: MarketingNoteProps) => (\n  <div\n    className={cx(\n      `cobalt-marketing-note cobalt-marketing-note--${variant}`,\n      className,\n    )}\n  >\n    {icon && (\n      <div className=\"cobalt-marketing-note__icon-container\">{icon}</div>\n    )}\n\n    <div className=\"c-flex-1\">\n      {title && <div className=\"c-font-bold\">{title}</div>}\n      {children}\n    </div>\n  </div>\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUO,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,GACY,MACnBA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,6CAAA,EAAgD,OAAO,CAAA,CAAE,EACzD,SAAS,CACV,EAEA,QAAA,EAAA,CAAA,IAAI,KACHC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAE,QAAA,EAAA,IAAI,EAAO,CAAA,CACpE,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EACtB,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,EACnD,QAAQ,CACL,EAAA,CAAA,CAAA,EAAA,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/MarketingNote/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { PropsWithChildren } from \"react\"\n\nexport type MarketingNoteProps = PropsWithChildren<{\n  variant: \"success\" | \"tertiary\"\n  title?: string\n  icon?: React.JSX.Element\n  compact?: boolean\n  className?: string\n}>\n\nexport const MarketingNote = ({\n  children,\n  title,\n  icon,\n  className,\n  variant,\n  compact = false,\n}: MarketingNoteProps) => (\n  <div\n    className={cx(\n      `cobalt-marketing-note cobalt-marketing-note--${variant}`,\n      className,\n      { \"cobalt-marketing-note--compact\": compact },\n    )}\n  >\n    {icon && (\n      <div className=\"cobalt-marketing-note__icon-container\">{icon}</div>\n    )}\n\n    <div className=\"cobalt-marketing-note__content\">\n      {title && <div className=\"c-font-bold\">{title}</div>}\n      {children}\n    </div>\n  </div>\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAWO,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAO,GAAG,KAAK,GACI,MACnBA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAgD,6CAAA,EAAA,OAAO,CAAE,CAAA,EACzD,SAAS,EACT,EAAE,gCAAgC,EAAE,OAAO,EAAE,CAC9C,EAAA,QAAA,EAAA,CAEA,IAAI,KACHC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,CACpE,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAC5C,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAE,QAAA,EAAA,KAAK,GAAO,EACnD,QAAQ,CACL,EAAA,CAAA,CAAA,EAAA,CACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "index.js",
   "types": "types/src/index.d.ts",

package/styles/components/MarketingNote/index.scss

@@ -5,6 +5,28 @@
   align-items: flex-start;
 }
 
+.cobalt-marketing-note__icon-container {
+  --icon-container-size: 28px;
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  width: var(--icon-container-size);
+  height: var(--icon-container-size);
+}
+
+.cobalt-marketing-note__icon-container .cobalt-Icon {
+  width: 100%;
+  height: 100%;
+}
+
+.cobalt-marketing-note__content {
+  flex: 1 1 0%;
+  align-self: center;
+}
+
 .cobalt-marketing-note.cobalt-marketing-note--success {
   @apply c-bg-successContainer c-text-onSuccessContainer;
 
@@ -21,19 +43,12 @@
   }
 }
 
-.cobalt-marketing-note__icon-container {
-  --icon-container-size: 28px;
-
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
+.cobalt-marketing-note.cobalt-marketing-note--compact {
+  @apply c-rounded-lg c-py-xs;
 
-  width: var(--icon-container-size);
-  height: var(--icon-container-size);
-}
+  padding-left: 0.75rem;
 
-.cobalt-marketing-note__icon-container .cobalt-Icon {
-  width: 100%;
-  height: 100%;
+  .cobalt-marketing-note__icon-container {
+    --icon-container-size: 20px;
+  }
 }

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

@@ -3,6 +3,7 @@ export type MarketingNoteProps = PropsWithChildren<{
     variant: "success" | "tertiary";
     title?: string;
     icon?: React.JSX.Element;
+    compact?: boolean;
     className?: string;
 }>;
-export declare const MarketingNote: ({ children, title, icon, className, variant, }: MarketingNoteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MarketingNote: ({ children, title, icon, className, variant, compact, }: MarketingNoteProps) => import("react/jsx-runtime").JSX.Element;