@drivy/cobalt 0.37.4 → 0.39.0

package/components/Form/Stepper.js

@@ -3,6 +3,8 @@ import cx from 'classnames';
 import { withFieldLabelAndHint } from './field.js';
 import DefaultButton from '../Buttons/DefaultButton/index.js';
 
+const AUTO_CHANGE_TIMEOUT_IN_MS = 750;
+const AUTO_CHANGE_INTERVAL_IN_MS = 150;
 const enforceInRange = (value, min, max) => {
     let enforcedValue = value;
     if (typeof max !== "undefined") {
@@ -16,6 +18,8 @@ const enforceInRange = (value, min, max) => {
 class Stepper extends PureComponent {
     constructor(props) {
         super(props);
+        this.timeout = null;
+        this.interval = null;
         this.onDecrement = () => {
             (this.props.min !== null || this.state.value > this.props.min) &&
                 this.changeValue(parseFloat((this.state.value - this.props.step).toFixed(10)));
@@ -24,6 +28,21 @@ class Stepper extends PureComponent {
             (this.props.max !== null || this.state.value < this.props.max) &&
                 this.changeValue(parseFloat((this.state.value + this.props.step).toFixed(10)));
         };
+        this.onPointerDown = (callback) => {
+            callback();
+            this.timeout && clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.interval && clearInterval(this.interval);
+                this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS);
+            }, AUTO_CHANGE_TIMEOUT_IN_MS);
+        };
+        this.onPointerUp = () => {
+            if (this.interval) {
+                clearInterval(this.interval);
+                this.interval = null;
+            }
+            this.timeout && clearTimeout(this.timeout);
+        };
         this.changeValue = (value) => {
             this.setState({
                 value: enforceInRange(value, this.props.min, this.props.max),
@@ -36,6 +55,8 @@ class Stepper extends PureComponent {
         this.onDecrement = this.onDecrement.bind(this);
         this.onIncrement = this.onIncrement.bind(this);
         this.changeValue = this.changeValue.bind(this);
+        this.onPointerDown = this.onPointerDown.bind(this);
+        this.onPointerUp = this.onPointerUp.bind(this);
         this.state = {
             value: enforceInRange(props.value, props.min, props.max),
         };
@@ -56,11 +77,11 @@ class Stepper extends PureComponent {
                 "cobalt-Stepper--error": status === "error",
             }) },
             React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onClick: this.onDecrement, type: "button" }, "-"),
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" }, "-"),
                 React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
                     children ? children(this.state.value) : this.state.value,
                     React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onClick: this.onIncrement, type: "button" }, "+"))));
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" }, "+"))));
     }
 }
 const wrappedComponent = withFieldLabelAndHint(Stepper);

package/components/Form/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onClick={this.onDecrement}\n            type={\"button\"}\n          >\n            -\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onClick={this.onIncrement}\n            type={\"button\"}\n          >\n            +\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onPointerDown={() => this.onPointerDown(this.onDecrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            -\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onPointerDown={() => this.onPointerDown(this.onIncrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            +\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}

package/images/illustrations/light/warning.svg

@@ -0,0 +1,3 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M476 300C476 397.202 397.202 476 300 476C202.797 476 124 397.202 124 300C124 202.798 202.797 124 300 124C397.202 124 476 202.798 476 300ZM374.294 384.048L225.289 385.324C208.946 385.324 199.044 372.703 199.044 357.995C199.044 353.477 199.965 346.075 202.561 341.749L277.393 214.565C282.295 205.817 290.947 201.395 299.792 201.395C308.636 201.395 320.256 205.817 325.255 214.565L396.789 344.537C399.192 348.767 400.539 353.477 400.539 357.995C400.539 372.703 390.637 384.048 374.294 384.048ZM292.236 308.617C292.332 313.712 294.889 319.83 299.887 319.83C304.599 319.83 307.386 317.042 307.482 311.852C307.482 311.852 308.069 300.028 308.416 287.667C308.687 278 308.814 268.004 308.88 262.817C308.899 261.321 308.913 260.224 308.924 259.652C309.02 254.557 305.629 250.807 299.792 250.807C294.408 250.807 290.659 254.46 290.755 259.556C290.755 259.556 291.668 279.743 291.668 284.127C291.668 288.51 292.236 308.617 292.236 308.617ZM290.397 341.749C290.397 347.421 295.396 350.759 301.163 350.759C306.835 350.759 311.834 347.517 311.834 341.749C311.834 335.885 306.932 331.366 301.163 331.366C295.3 331.366 290.397 335.981 290.397 341.749Z" fill="#79A3F3"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.37.4",
+  "version": "0.39.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -35,7 +35,7 @@
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.0.1",
+    "nanoid": "5.0.3",
     "postcss": "8.4.31",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
@@ -53,25 +53,25 @@
     "@percy/storybook": "4.3.6",
     "@rollup/plugin-json": "6.0.1",
     "@rushstack/eslint-patch": "1.5.1",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addons": "7.4.6",
-    "@storybook/blocks": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-webpack5": "7.4.6",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addons": "7.5.3",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "14.1.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.1",
-    "@types/jest": "29.5.5",
-    "@types/lodash.throttle": "4.1.7",
-    "@types/media-typer": "1.1.1",
+    "@types/jest": "29.5.8",
+    "@types/lodash.throttle": "4.1.9",
+    "@types/media-typer": "1.1.3",
     "@types/prettier": "3.0.0",
-    "@types/react-dom": "18.2.11",
+    "@types/react-dom": "18.2.15",
     "autoprefixer": "10.4.16",
-    "core-js": "3.33.0",
+    "core-js": "3.33.2",
     "css-loader": "6.8.1",
-    "eslint": "8.51.0",
+    "eslint": "8.53.0",
     "eslint-plugin-storybook": "^0.6.15",
     "file-loader": "6.2.0",
     "jest": "29.7.0",
@@ -86,6 +86,7 @@
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
     "react-test-renderer": "18.2.0",
+    "react-textarea-autosize": "^8.5.3",
     "regenerator-runtime": "0.14.0",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.1",
@@ -93,15 +94,15 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.69.0",
+    "sass": "1.69.5",
     "sass-loader": "13.3.2",
     "sharp": "0.32.6",
     "sharp-cli": "4.1.1",
-    "storybook": "7.4.6",
+    "storybook": "7.5.3",
     "style-loader": "3.3.3",
-    "stylelint": "15.10.3",
+    "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
-    "svgo": "3.0.2",
+    "svgo": "3.0.3",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "typescript": "5.2.2"

package/styles/components/Form/Checkmark.scss

@@ -46,6 +46,10 @@
         position: relative;
         top: 3px;
 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         width: $radio-checkmark-size;
         height: $radio-checkmark-size;
 
@@ -56,10 +60,6 @@
         @include border(accent);
         @include bg-color(accentAlt);
 
-        position: absolute;
-
-        top: 3px;
-        left: 3px;
         // Exception for radio inputs
         border-width: 5px;
 

package/styles/components/Form/RadioWithDetails.scss

@@ -76,13 +76,17 @@
       position: relative;
       top: 3px;
 
+      display: flex;
+
       flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
       width: var(--visual-radio-size);
       height: var(--visual-radio-size);
 
-      border-radius: 50%;
-
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+
+      border-radius: 50%;
       cursor: pointer;
 
       transition: border-color 150ms ease-in-out;
@@ -113,7 +117,6 @@
     & + #{ $self }__inner #{ $self }__visual-input::after {
       @include border(accent);
       @include bg-color(accentAlt);
-      position: absolute;
       left: 2px;
       top: 2px;
 

package/styles/components/Layout/Layout.scss

@@ -0,0 +1,79 @@
+:root {
+  --cobalt-layout-y-spacing: 8px;
+  --cobalt-layout-x-spacing: 24px;
+}
+
+.cobalt-layout-section {
+  @include bg-color(primary);
+  padding: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+}
+
+.cobalt-layout-card {
+  @include bg-color(primary);
+  @include border(base);
+  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+
+  border-radius: border-radius(lg);
+
+  .cobalt-layout-card__item {
+    margin: 16px;
+  }
+}
+
+div.cobalt-layout-stack {
+  @include bg-color(primary);
+  @include border(base);
+  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+
+  border-radius: border-radius(lg);
+
+  .cobalt-layout-stack__item {
+    @include border-top(base);
+    padding: 16px;
+  }
+
+  .cobalt-layout-stack__item:first-of-type {
+    border-top: 0;
+  }
+}
+
+table.cobalt-layout-stack {
+  @include border(base);
+  border-collapse: separate;
+  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+
+  border-radius: border-radius(lg);
+
+  .cobalt-layout-stack__item:first-of-type th,
+  tbody:not(thead ~ tbody) .cobalt-layout-stack__item:first-of-type td {
+    border-top: 0;
+  }
+
+  .cobalt-layout-stack__item td,
+  .cobalt-layout-stack__item th {
+    @include border-top(base);
+    padding: 16px 0;
+  }
+
+  .cobalt-layout-stack__item th:first-of-type,
+  .cobalt-layout-stack__item td:first-of-type {
+    padding-left: 16px;
+  }
+
+  .cobalt-layout-stack__item th:last-of-type,
+  .cobalt-layout-stack__item td:last-of-type {
+    padding-right: 16px;
+  }
+}
+
+.cobalt-layout-page-title {
+  @include c-text-title-lg;
+  padding: 32px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
+    var(--cobalt-layout-x-spacing);
+}
+
+.cobalt-layout-section-title {
+  @include c-text-title-md;
+  padding: 40px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
+    var(--cobalt-layout-x-spacing);
+}

package/styles/components.scss

@@ -13,6 +13,7 @@
 @import "./components/Flag/index";
 @import "./components/Flash/index";
 @import "./components/Icon/index";
+@import "./components/Layout/Layout";
 @import "./components/Note/index";
 @import "./components/PhotoDropzone/index";
 @import "./components/Pill/index";

package/types/components/Layout/LayoutCard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare const LayoutCard: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    Item: ({ children }: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export default LayoutCard;

package/types/components/Layout/LayoutPageTitle.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const LayoutPageTitle: ({ children }: {
+    children: string;
+}) => React.JSX.Element;
+export default LayoutPageTitle;

package/types/components/Layout/LayoutSection.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const LayoutSection: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default LayoutSection;

package/types/components/Layout/LayoutSectionTitle.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const LayoutSectionTitle: ({ children }: {
+    children: string;
+}) => React.JSX.Element;
+export default LayoutSectionTitle;

package/types/components/Layout/LayoutStack.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type LayoutStackItemPropsType = {
+    children: React.ReactNode;
+    isTable: never;
+    isHeader: never;
+} | {
+    children: React.ReactNode;
+    isHeader?: boolean;
+    isTable?: boolean;
+};
+declare const LayoutStack: {
+    ({ children, isTable, }: {
+        children: React.ReactNode;
+        isTable?: boolean | undefined;
+    }): React.JSX.Element;
+    Item: ({ children, isTable }: LayoutStackItemPropsType) => React.JSX.Element;
+};
+export default LayoutStack;