@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/GridColumns/GridColumns.story.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = require("../Box");
 var _Text = require("../Text");
 var _GridColumns = require("./GridColumns");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var IPSUM = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.";
 var GridColumnsDebug = function GridColumnsDebug() {
@@ -31,215 +32,198 @@ var GridColumnsDebug = function GridColumnsDebug() {
 };
 GridColumnsDebug.displayName = "GridColumnsDebug";
 var _default = exports.default = {
-  title: "Components/GridColumns"
+  component: _GridColumns.GridColumns,
+  title: "Components/GridColumns",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A CSS Grid-based layout system that provides responsive columns with configurable spans and gutters."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var RealWorldExample = exports.RealWorldExample = function RealWorldExample() {
-  return /*#__PURE__*/_react.default.createElement(_GridColumns.GridColumns, {
+var RealWorldExample = exports.RealWorldExample = {
+  args: {
     position: "relative",
-    m: 2
-  }, /*#__PURE__*/_react.default.createElement(GridColumnsDebug, null), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 6,
-    wrap: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    as: "h1",
-    variant: "xl"
-  }, "Page Title Long Enough So As To Line Break")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    as: "h2",
-    variant: "lg-display",
-    mb: 1
-  }, "Page subtitle"), /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 5,
-    start: 8
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display",
-    mb: 1
-  }, "Featured content"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    borderRadius: 4,
-    height: 400
-  })));
-};
-RealWorldExample.displayName = "RealWorldExample";
-RealWorldExample.story = {
-  name: "Real-world Example"
+    m: 2,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GridColumnsDebug, null), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      span: 6,
+      wrap: true
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      as: "h1",
+      variant: "xl"
+    }, "Page Title Long Enough So As To Line Break")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      span: 6
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      as: "h2",
+      variant: "lg-display",
+      mb: 1
+    }, "Page subtitle"), /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      span: 5,
+      start: 8
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display",
+      mb: 1
+    }, "Featured content"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      borderRadius: 4,
+      height: 400
+    })))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "A real-world example showing typical page layout with grid columns."
+      }
+    }
+  }
 };
-var KitchenSink = exports.KitchenSink = function KitchenSink() {
-  return /*#__PURE__*/_react.default.createElement(_GridColumns.GridColumns, {
+var KitchenSink = exports.KitchenSink = {
+  args: {
     border: "1px solid blue",
-    position: "relative"
-  }, /*#__PURE__*/_react.default.createElement(GridColumnsDebug, null), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 4
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 4
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid green",
-    span: 4
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 4,
-    wrap: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM, " ", IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "mono100",
-    span: [6]
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "mono100",
-    span: [6]
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "mono100",
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "mono100",
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    start: [2, 3, 4],
-    span: [9, 6, 3],
-    height: 300,
-    bg: "mono10",
-    borderRadius: 4
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    height: 200,
-    bg: "purple100",
-    span: [12, 6],
-    start: [1, 4],
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "mono100",
-    start: 4
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 4,
-    start: 1
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 4,
-    start: 6
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    border: "1px solid red",
-    span: 2,
-    start: 11
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 1,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 2,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 3,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 4,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 5,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 6,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "red",
-    span: 1,
-    start: 7,
-    height: 100,
-    wrap: true
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    gridColumn: "3 / 9",
-    bg: "purple100"
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "mono0"
-  }, "A custom grid-column value")));
-};
-KitchenSink.displayName = "KitchenSink";
-KitchenSink.story = {
-  name: "Kitchen sink"
+    position: "relative",
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GridColumnsDebug, null), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 4
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 4
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid green",
+      span: 4
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 4,
+      wrap: true
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM, " ", IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "mono100",
+      span: [6]
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "mono100",
+      span: [6]
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "mono100",
+      span: 6
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "mono100",
+      span: 6
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      start: [2, 3, 4],
+      span: [9, 6, 3],
+      height: 300,
+      bg: "mono10",
+      borderRadius: 4
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      height: 200,
+      bg: "purple100",
+      span: [12, 6],
+      start: [1, 4],
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "mono100",
+      start: 4
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 4,
+      start: 1
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 4,
+      start: 6
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      border: "1px solid red",
+      span: 2,
+      start: 11
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 1,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 2,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 3,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 4,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 5,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 6,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      bg: "red",
+      span: 1,
+      start: 7,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+      gridColumn: "3 / 9",
+      bg: "purple100"
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      color: "mono0"
+    }, "A custom grid-column value")))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Comprehensive example showing various column configurations and layouts."
+      }
+    }
+  }
 };
-var CustomGutters = exports.CustomGutters = function CustomGutters() {
-  return /*#__PURE__*/_react.default.createElement(_GridColumns.GridColumns, {
+var CustomGutters = exports.CustomGutters = {
+  args: {
     gridColumnGap: 4,
-    gridRowGap: 1
-  }, /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    span: 2,
-    bg: "mono10",
-    height: 100
-  }));
-};
-CustomGutters.displayName = "CustomGutters";
-CustomGutters.story = {
-  name: "Custom gutters"
+    gridRowGap: 1,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(Array(12)).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
+        key: i,
+        span: 2,
+        bg: "mono10",
+        height: 100
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Grid columns with custom row and column gap spacing."
+      }
+    }
+  }
 };
 //# sourceMappingURL=GridColumns.story.js.map

package/dist/elements/GridColumns/GridColumns.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridColumns.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_GridColumns","obj","__esModule","default","IPSUM","GridColumnsDebug","createElement","GridColumns","position","top","left","width","height","style","pointerEvents","Array","from","map","_","i","Column","key","span","bg","displayName","_default","exports","title","RealWorldExample","m","wrap","Text","as","variant","mb","start","Box","borderRadius","story","name","KitchenSink","border","color","gridColumn","CustomGutters","gridColumnGap","gridRowGap"],"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Column, GridColumns } from \"./GridColumns\"\n\nconst IPSUM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.\"\n\nconst GridColumnsDebug = () => (\n  <GridColumns\n    position=\"absolute\"\n    top={0}\n    left={0}\n    width=\"100%\"\n    height=\"100%\"\n    style={{ pointerEvents: \"none\" }}\n  >\n    {Array.from(Array(12)).map((_, i) => (\n      <Column key={i} span={[1]} bg=\"rgba(255, 0, 0, 0.05)\" height=\"100%\" />\n    ))}\n  </GridColumns>\n)\n\nexport default {\n  title: \"Components/GridColumns\",\n}\n\nexport const RealWorldExample = () => {\n  return (\n    <GridColumns position=\"relative\" m={2}>\n      <GridColumnsDebug />\n\n      <Column span={6} wrap>\n        <Text as=\"h1\" variant=\"xl\">\n          Page Title Long Enough So As To Line Break\n        </Text>\n      </Column>\n\n      <Column span={6}>\n        <Text as=\"h2\" variant=\"lg-display\" mb={1}>\n          Page subtitle\n        </Text>\n\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column span={5} start={8}>\n        <Text variant=\"sm-display\" mb={1}>\n          Featured content\n        </Text>\n\n        <Box bg=\"mono10\" borderRadius={4} height={400} />\n      </Column>\n    </GridColumns>\n  )\n}\n\nRealWorldExample.story = {\n  name: \"Real-world Example\",\n}\n\nexport const KitchenSink = () => {\n  return (\n    <GridColumns border=\"1px solid blue\" position=\"relative\">\n      <GridColumnsDebug />\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid green\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} wrap>\n        <Text>\n          {IPSUM} {IPSUM}\n        </Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={[6]}>\n        <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={[6]}>\n        <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={6}>\n        <Text color=\"mono0\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={6}>\n        <Text color=\"mono0\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column\n        start={[2, 3, 4]}\n        span={[9, 6, 3]}\n        height={300}\n        bg=\"mono10\"\n        borderRadius={4}\n      />\n\n      <Column height={200} bg=\"purple100\" span={[12, 6]} start={[1, 4]} wrap />\n\n      <Column bg=\"mono100\" start={4}>\n        <Text color=\"mono0\">{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={1}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={6}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={2} start={11}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column bg=\"red\" span={1} start={1} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={2} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={3} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={4} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={5} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={6} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={7} height={100} wrap />\n\n      <Column gridColumn=\"3 / 9\" bg=\"purple100\">\n        <Text color=\"mono0\">A custom grid-column value</Text>\n      </Column>\n    </GridColumns>\n  )\n}\n\nKitchenSink.story = {\n  name: \"Kitchen sink\",\n}\n\nexport const CustomGutters = () => {\n  return (\n    <GridColumns gridColumnGap={4} gridRowGap={1}>\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n    </GridColumns>\n  )\n}\n\nCustomGutters.story = {\n  name: \"Custom gutters\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"GridColumns.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_GridColumns","_storybookBlocklist","obj","__esModule","default","IPSUM","GridColumnsDebug","createElement","GridColumns","position","top","left","width","height","style","pointerEvents","Array","from","map","_","i","Column","key","span","bg","displayName","_default","exports","component","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","RealWorldExample","args","m","children","Fragment","wrap","Text","as","variant","mb","start","Box","borderRadius","story","KitchenSink","border","color","gridColumn","CustomGutters","gridColumnGap","gridRowGap"],"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Column, GridColumns } from \"./GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst IPSUM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.\"\n\nconst GridColumnsDebug = () => (\n  <GridColumns\n    position=\"absolute\"\n    top={0}\n    left={0}\n    width=\"100%\"\n    height=\"100%\"\n    style={{ pointerEvents: \"none\" }}\n  >\n    {Array.from(Array(12)).map((_, i) => (\n      <Column key={i} span={[1]} bg=\"rgba(255, 0, 0, 0.05)\" height=\"100%\" />\n    ))}\n  </GridColumns>\n)\n\nexport default {\n  component: GridColumns,\n  title: \"Components/GridColumns\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A CSS Grid-based layout system that provides responsive columns with configurable spans and gutters.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const RealWorldExample = {\n  args: {\n    position: \"relative\",\n    m: 2,\n    children: (\n      <>\n        <GridColumnsDebug />\n        <Column span={6} wrap>\n          <Text as=\"h1\" variant=\"xl\">\n            Page Title Long Enough So As To Line Break\n          </Text>\n        </Column>\n        <Column span={6}>\n          <Text as=\"h2\" variant=\"lg-display\" mb={1}>\n            Page subtitle\n          </Text>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column span={5} start={8}>\n          <Text variant=\"sm-display\" mb={1}>\n            Featured content\n          </Text>\n          <Box bg=\"mono10\" borderRadius={4} height={400} />\n        </Column>\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"A real-world example showing typical page layout with grid columns.\",\n      },\n    },\n  },\n}\n\nexport const KitchenSink = {\n  args: {\n    border: \"1px solid blue\",\n    position: \"relative\",\n    children: (\n      <>\n        <GridColumnsDebug />\n        <Column border=\"1px solid red\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid green\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} wrap>\n          <Text>\n            {IPSUM} {IPSUM}\n          </Text>\n        </Column>\n        <Column bg=\"mono100\" span={[6]}>\n          <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n        </Column>\n        <Column bg=\"mono100\" span={[6]}>\n          <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n        </Column>\n        <Column bg=\"mono100\" span={6}>\n          <Text color=\"mono0\">\n            These are 2-columns at large breakpoints, and 1 at mobile\n          </Text>\n        </Column>\n        <Column bg=\"mono100\" span={6}>\n          <Text color=\"mono0\">\n            These are 2-columns at large breakpoints, and 1 at mobile\n          </Text>\n        </Column>\n        <Column\n          start={[2, 3, 4]}\n          span={[9, 6, 3]}\n          height={300}\n          bg=\"mono10\"\n          borderRadius={4}\n        />\n        <Column\n          height={200}\n          bg=\"purple100\"\n          span={[12, 6]}\n          start={[1, 4]}\n          wrap\n        />\n        <Column bg=\"mono100\" start={4}>\n          <Text color=\"mono0\">{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} start={1}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} start={6}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={2} start={11}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column bg=\"red\" span={1} start={1} height={100} wrap />\n        <Column bg=\"red\" span={1} start={2} height={100} wrap />\n        <Column bg=\"red\" span={1} start={3} height={100} wrap />\n        <Column bg=\"red\" span={1} start={4} height={100} wrap />\n        <Column bg=\"red\" span={1} start={5} height={100} wrap />\n        <Column bg=\"red\" span={1} start={6} height={100} wrap />\n        <Column bg=\"red\" span={1} start={7} height={100} wrap />\n        <Column gridColumn=\"3 / 9\" bg=\"purple100\">\n          <Text color=\"mono0\">A custom grid-column value</Text>\n        </Column>\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Comprehensive example showing various column configurations and layouts.\",\n      },\n    },\n  },\n}\n\nexport const CustomGutters = {\n  args: {\n    gridColumnGap: 4,\n    gridRowGap: 1,\n    children: (\n      <>\n        {Array.from(Array(12)).map((_, i) => (\n          <Column key={i} span={2} bg=\"mono10\" height={100} />\n        ))}\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Grid columns with custom row and column gap spacing.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/elements/HTML/HTML.story.d.ts

@@ -1,17 +1,64 @@
-import React from "react";
 declare const _default: {
+    component: import("react").FC<import("react").PropsWithChildren<import("./HTML").HTMLProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Html: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const Default: {
+    args: {
+        html: string;
+        variant: string;
+        style: {
+            border: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Small: {
+    args: {
+        html: string;
+        variant: string;
+        style: {
+            border: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
-export declare const DefaultHtmlStyling: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const ExtraSmall: {
+    args: {
+        html: string;
+        variant: string;
+        style: {
+            border: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };