@drivy/cobalt 2.18.0 → 2.19.0

package/components/MarketingNote/index.js

@@ -0,0 +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] })] }));
+
+export { MarketingNote };
+//# sourceMappingURL=index.js.map

package/components/MarketingNote/index.js.map

@@ -0,0 +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;;;;"}

package/components/Steps/index.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Steps as Steps$1 } from '@ark-ui/react/steps';
+import cx from 'classnames';
+
+const Steps = ({ items }) => {
+    return (jsx(Steps$1.Root, { className: "cobalt-steps", count: items.length, orientation: "vertical", children: items.map((item, index) => {
+            const itemKey = index;
+            return (jsxs(Steps$1.Item, { index: index, className: cx("cobalt-steps__item", {
+                    "cobalt-steps__item--important": item.important,
+                }), children: [jsxs("div", { className: "cobalt-steps__item__wrapper", children: [jsx(Steps$1.Indicator, { className: "cobalt-steps__item__indicator" }), jsxs("div", { className: "cobalt-steps__item__content", children: [jsx("div", { className: "cobalt-steps__item__label", children: item.label }), jsx("div", { className: "cobalt-steps__item__description", children: item.description })] })] }), jsx(Steps$1.Separator, { className: "cobalt-steps__item__separator" })] }, itemKey));
+        }) }));
+};
+
+export { Steps };
+//# sourceMappingURL=index.js.map

package/components/Steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Steps/index.tsx"],"sourcesContent":["import { Steps as ArkSteps } from \"@ark-ui/react/steps\"\nimport cx from \"classnames\"\n\nexport interface StepItem {\n  label: string\n  description?: string\n  important?: boolean\n}\n\nexport type StepsPropsType = { items: StepItem[] }\n\nexport const Steps = ({ items }: StepsPropsType) => {\n  return (\n    <ArkSteps.Root\n      className=\"cobalt-steps\"\n      count={items.length}\n      orientation=\"vertical\"\n    >\n      {items.map((item, index) => {\n        const itemKey = index\n        return (\n          <ArkSteps.Item\n            key={itemKey}\n            index={index}\n            className={cx(\"cobalt-steps__item\", {\n              \"cobalt-steps__item--important\": item.important,\n            })}\n          >\n            <div className=\"cobalt-steps__item__wrapper\">\n              <ArkSteps.Indicator className=\"cobalt-steps__item__indicator\" />\n              <div className=\"cobalt-steps__item__content\">\n                <div className=\"cobalt-steps__item__label\">{item.label}</div>\n                <div className=\"cobalt-steps__item__description\">\n                  {item.description}\n                </div>\n              </div>\n            </div>\n            <ArkSteps.Separator className=\"cobalt-steps__item__separator\" />\n          </ArkSteps.Item>\n        )\n      })}\n    </ArkSteps.Root>\n  )\n}\n"],"names":["_jsx","ArkSteps","_jsxs"],"mappings":";;;;MAWa,KAAK,GAAG,CAAC,EAAE,KAAK,EAAkB,KAAI;AACjD,IAAA,QACEA,GAAA,CAACC,OAAQ,CAAC,IAAI,EAAA,EACZ,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,WAAW,EAAC,UAAU,EAAA,QAAA,EAErB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YACzB,MAAM,OAAO,GAAG,KAAK,CAAA;AACrB,YAAA,QACEC,IAAA,CAACD,OAAQ,CAAC,IAAI,EAEZ,EAAA,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;oBAClC,+BAA+B,EAAE,IAAI,CAAC,SAAS;iBAChD,CAAC,EAAA,QAAA,EAAA,CAEFC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAG,CAAA,EAChEC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAO,CAAA,EAC7DA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAC7C,QAAA,EAAA,IAAI,CAAC,WAAW,EACb,CAAA,CAAA,EAAA,CACF,CACF,EAAA,CAAA,EACNA,IAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA,CAAG,CAf3D,EAAA,EAAA,OAAO,CAgBE,EACjB;SACF,CAAC,EACY,CAAA,EACjB;AACH;;;;"}

package/index.js

@@ -42,6 +42,7 @@ export { default as LayoutSection } from './components/Layout/Components/LayoutS
 export { default as LayoutSectionTitle } from './components/Layout/Components/LayoutSectionTitle.js';
 export { default as LayoutStack } from './components/Layout/Components/LayoutStack.js';
 export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
+export { MarketingNote } from './components/MarketingNote/index.js';
 export { default as Modal } from './components/Modal/index.js';
 export { Note } from './components/Note/index.js';
 export { default as Pagination } from './components/Pagination/index.js';
@@ -55,6 +56,7 @@ export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';
 export { Rating } from './components/Rating/index.js';
 export { Sidepanel } from './components/Sidepanel/index.js';
+export { Steps } from './components/Steps/index.js';
 export { Tab, default as Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { getA11yOnClick, getCSSVariableThemeColor, getComputedThemeColor } from './helpers/index.js';

package/index.js.map

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

package/package.json

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

package/styles/components/MarketingNote/index.scss

@@ -0,0 +1,39 @@
+.cobalt-marketing-note {
+  @apply c-rounded-xl c-p-sm c-gap-xs c-text-body-sm;
+
+  display: flex;
+  align-items: flex-start;
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--success {
+  @apply c-bg-successContainer c-text-onSuccessContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onSuccessContainer;
+  }
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--tertiary {
+  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onTertiaryContainer;
+  }
+}
+
+.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%;
+}

package/styles/components/Steps/index.scss

@@ -0,0 +1,91 @@
+.cobalt-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 32rem;
+
+  --steps-indicator-size: 12px;
+  --steps-separator-thickness: 1px;
+
+  @apply c-px-2xs c-py-xs;
+}
+
+.cobalt-steps__item {
+  @apply c-pb-sm c-text-body-sm;
+  position: relative;
+
+  display: flex;
+  flex: 1 0 0;
+  align-items: flex-start;
+  gap: 0.75rem;
+
+  &:last-of-type {
+    @apply c-pb-none;
+
+    flex: initial;
+
+    & [data-part="separator"] {
+      display: none;
+    }
+  }
+}
+
+.cobalt-steps__item__wrapper {
+  display: flex;
+
+  align-items: flex-start;
+
+  gap: 0.75rem;
+}
+
+.cobalt-steps__item__content {
+  @apply c-gap-2xs;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.cobalt-steps__item__indicator {
+  @apply c-border c-border-outline c-rounded-full c-bg-surfaceBright;
+
+  display: flex;
+
+  width: var(--steps-indicator-size);
+  height: var(--steps-indicator-size);
+
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+}
+
+.cobalt-steps__item__separator {
+  @apply c-bg-outline;
+
+  position: absolute;
+  top: calc(var(--steps-indicator-size));
+  left: calc(var(--steps-indicator-size) / 2 - 0.5px);
+
+  flex: 1;
+
+  width: var(--steps-separator-thickness);
+  height: 100%;
+
+  max-height: calc(100% - var(--steps-indicator-size));
+
+  margin-inline: 0;
+}
+
+.cobalt-steps__item__label {
+  @apply c--mt-2xs;
+}
+
+.cobalt-steps__item.cobalt-steps__item--important .cobalt-steps__item__label {
+  @apply c-font-bold;
+}
+
+.cobalt-steps__item__description {
+  @apply c-text-onSurfaceVariant;
+}

package/styles/components.scss

@@ -16,6 +16,7 @@
 @import "./components/Icon/index";
 @import "./components/Layout/Components/index";
 @import "./components/Layout/Surfaces/index";
+@import "./components/MarketingNote/index";
 @import "./components/Note/index";
 @import "./components/Pagination/index";
 @import "./components/PhotoDropzone/index";
@@ -38,3 +39,4 @@
 @import "./components/PlateNumber/index";
 @import "./components/Sidepanel/index";
 @import "./components/Notice/index";
+@import "./components/Steps/index";

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

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

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

@@ -0,0 +1,9 @@
+export interface StepItem {
+    label: string;
+    description?: string;
+    important?: boolean;
+}
+export type StepsPropsType = {
+    items: StepItem[];
+};
+export declare const Steps: ({ items }: StepsPropsType) => import("react/jsx-runtime").JSX.Element;

package/types/src/index.d.ts

@@ -42,6 +42,7 @@ export * from "./components/Icon";
 /** Layouts */
 export * from "./components/Layout/Components";
 export * from "./components/Layout/Surfaces";
+export { MarketingNote } from "./components/MarketingNote";
 export { default as Modal, type ModalStepType, MultiStepModal, } from "./components/Modal";
 export { Note } from "./components/Note";
 export { default as Pagination } from "./components/Pagination";
@@ -55,6 +56,7 @@ export { ProgressBar } from "./components/ProgressBar";
 export { ProgressCircular } from "./components/ProgressCircular";
 export * from "./components/Rating/";
 export { Sidepanel } from "./components/Sidepanel";
+export { Steps } from "./components/Steps";
 export { default as Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export * from "./helpers";