@drivy/cobalt 0.38.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.38.0",
+  "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.2",
+    "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.5.2",
-    "@storybook/addons": "7.5.2",
-    "@storybook/blocks": "7.5.2",
-    "@storybook/react": "7.5.2",
-    "@storybook/react-webpack5": "7.5.2",
+    "@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.7",
-    "@types/lodash.throttle": "4.1.7",
-    "@types/media-typer": "1.1.2",
+    "@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.14",
+    "@types/react-dom": "18.2.15",
     "autoprefixer": "10.4.16",
     "core-js": "3.33.2",
     "css-loader": "6.8.1",
-    "eslint": "8.52.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",
@@ -97,11 +98,11 @@
     "sass-loader": "13.3.2",
     "sharp": "0.32.6",
     "sharp-cli": "4.1.1",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "style-loader": "3.3.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/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;