@artsy/palette 44.1.0 → 44.2.0

package/dist/elements/FilterSelect/FilterSelect.story.js

@@ -3,45 +3,161 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.WithSelectAll = exports.SingleSelect = exports.MultiselectWithSearchableText = exports.MultiselectNoMoveToTop = exports.MultiselectBasic = exports.Multiselect = exports.Default = void 0;
 var _test = require("@storybook/test");
-var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _FilterSelect = require("./FilterSelect");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _default = exports.default = {
-  title: "Components/FilterSelect"
+  component: _FilterSelect.FilterSelect,
+  title: "Components/FilterSelect",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A filterable select component with support for single or multi-select, search functionality, and custom rendering."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [
-    // radio
-    {
-      multiselect: false
+var items = [{
+  label: "Barbara Kruger",
+  value: "barbara-kruger",
+  country: "American"
+}, {
+  label: "Carrie Mae Weems",
+  value: "carrie-weems",
+  country: "American"
+}, {
+  label: "Daniel Arsham",
+  value: "daniel-asham",
+  country: "American"
+}, {
+  label: "Takashi Murakami",
+  value: "takashi-muakami",
+  country: "American"
+}, {
+  label: "Tracey Emin",
+  value: "tracey-emin",
+  country: "British-Nigerian"
+}, {
+  label: "Yinka Shonibare",
+  value: "yinka-shonibare",
+  country: "Japanese"
+}, {
+  label: "Barbara Kruger",
+  value: "barbara-kruger-2",
+  country: "British-Nigerian"
+}];
+var Default = exports.Default = {
+  args: {
+    placeholder: "Filter by artist name",
+    initialItemsToShow: 6,
+    order: [["country", "name"], ["asc", "asc"]],
+    renderItemLabel: function renderItemLabel(item) {
+      return "".concat(item.label, ", ").concat(item.country);
     },
-    // checkboxes
-    {
-      multiselect: true
+    onChange: (0, _test.fn)(),
+    items: items,
+    multiselect: false
+  }
+};
+var Multiselect = exports.Multiselect = {
+  args: _objectSpread(_objectSpread({}, Default.args), {}, {
+    multiselect: true
+  })
+};
+var WithSelectAll = exports.WithSelectAll = {
+  args: _objectSpread(_objectSpread({}, Default.args), {}, {
+    multiselect: true,
+    enableSelectAll: true,
+    onSelectAll: function onSelectAll(state) {
+      return console.log("onSelectAll", state);
+    },
+    searchableText: function searchableText(item) {
+      var extraSearchTerms = item.country === "American" ? "USA; Yankee; Murican" : "";
+      return "".concat(item.label, "; ").concat(item.country, "; ").concat(extraSearchTerms);
+    }
+  })
+};
+var SingleSelect = exports.SingleSelect = {
+  args: {
+    placeholder: "Filter by artist name",
+    initialItemsToShow: 6,
+    order: [["country", "name"], ["asc", "asc"]],
+    renderItemLabel: function renderItemLabel(item) {
+      return "".concat(item.label, ", ").concat(item.country);
+    },
+    onChange: (0, _test.fn)(),
+    items: items,
+    multiselect: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FilterSelect in single selection mode (radio buttons)."
+      }
+    }
+  }
+};
+var MultiselectBasic = exports.MultiselectBasic = {
+  args: {
+    placeholder: "Filter by artist name",
+    initialItemsToShow: 6,
+    order: [["country", "name"], ["asc", "asc"]],
+    renderItemLabel: function renderItemLabel(item) {
+      return "".concat(item.label, ", ").concat(item.country);
     },
-    // checkboxes with searchable hidden text and quick select-all
-    {
-      multiselect: true,
-      enableSelectAll: true,
-      onSelectAll: function onSelectAll(state) {
-        return console.log("onSelectAll", state);
-      },
-      searchableText: function searchableText(item) {
-        var extraSearchTerms = item.country === "American" ? "USA; Yankee; Murican" : "";
-        return "".concat(item.label, "; ").concat(item.country, "; ").concat(extraSearchTerms);
+    onChange: (0, _test.fn)(),
+    items: items,
+    multiselect: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FilterSelect with basic multiselect functionality (checkboxes)."
       }
+    }
+  }
+};
+var MultiselectWithSearchableText = exports.MultiselectWithSearchableText = {
+  args: {
+    placeholder: "Filter by artist name",
+    initialItemsToShow: 6,
+    order: [["country", "name"], ["asc", "asc"]],
+    renderItemLabel: function renderItemLabel(item) {
+      return "".concat(item.label, ", ").concat(item.country);
     },
-    // checkboxes with move selected to top disabled
-    {
-      multiselect: true,
-      moveSelectedToTop: false,
-      enableSelectAll: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_FilterSelect.FilterSelect, {
+    onChange: (0, _test.fn)(),
+    items: items,
+    multiselect: true,
+    enableSelectAll: true,
+    onSelectAll: function onSelectAll(state) {
+      return console.log("onSelectAll", state);
+    },
+    searchableText: function searchableText(item) {
+      var extraSearchTerms = item.country === "American" ? "USA; Yankee; Murican" : "";
+      return "".concat(item.label, "; ").concat(item.country, "; ").concat(extraSearchTerms);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FilterSelect with multiselect, searchable hidden text, and quick select-all functionality."
+      }
+    }
+  }
+};
+var MultiselectNoMoveToTop = exports.MultiselectNoMoveToTop = {
+  args: {
     placeholder: "Filter by artist name",
     initialItemsToShow: 6,
     order: [["country", "name"], ["asc", "asc"]],
@@ -49,36 +165,17 @@ var Default = exports.Default = function Default() {
       return "".concat(item.label, ", ").concat(item.country);
     },
     onChange: (0, _test.fn)(),
-    items: [{
-      label: "Barbara Kruger",
-      value: "barbara-kruger",
-      country: "American"
-    }, {
-      label: "Carrie Mae Weems",
-      value: "carrie-weems",
-      country: "American"
-    }, {
-      label: "Daniel Arsham",
-      value: "daniel-asham",
-      country: "American"
-    }, {
-      label: "Takashi Murakami",
-      value: "takashi-muakami",
-      country: "American"
-    }, {
-      label: "Tracey Emin",
-      value: "tracey-emin",
-      country: "British-Nigerian"
-    }, {
-      label: "Yinka Shonibare",
-      value: "yinka-shonibare",
-      country: "Japanese"
-    }, {
-      label: "Barbara Kruger",
-      value: "barbara-kruger-2",
-      country: "British-Nigerian"
-    }]
-  }));
+    items: items,
+    multiselect: true,
+    moveSelectedToTop: false,
+    enableSelectAll: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FilterSelect with multiselect but selected items don't move to top."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=FilterSelect.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterSelect.story.js","names":["_test","require","_react","_interopRequireDefault","_storybookStates","_FilterSelect","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","multiselect","enableSelectAll","onSelectAll","state","console","log","searchableText","item","extraSearchTerms","country","concat","label","moveSelectedToTop","FilterSelect","placeholder","initialItemsToShow","order","renderItemLabel","onChange","fn","items","value","displayName"],"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { FilterSelect } from \"./FilterSelect\"\nimport { FilterSelectProps } from \"./FilterSelect\"\n\nexport default {\n  title: \"Components/FilterSelect\",\n}\n\nexport const Default = () => {\n  return (\n    <States<FilterSelectProps>\n      states={[\n        // radio\n        { multiselect: false },\n\n        // checkboxes\n        { multiselect: true },\n\n        // checkboxes with searchable hidden text and quick select-all\n        {\n          multiselect: true,\n          enableSelectAll: true,\n          onSelectAll: (state) => console.log(\"onSelectAll\", state),\n          searchableText: (item) => {\n            const extraSearchTerms =\n              item.country === \"American\" ? \"USA; Yankee; Murican\" : \"\"\n            return `${item.label}; ${item.country}; ${extraSearchTerms}`\n          },\n        },\n\n        // checkboxes with move selected to top disabled\n        {\n          multiselect: true,\n          moveSelectedToTop: false,\n          enableSelectAll: true,\n        },\n      ]}\n    >\n      <FilterSelect\n        placeholder=\"Filter by artist name\"\n        initialItemsToShow={6}\n        order={[\n          [\"country\", \"name\"],\n          [\"asc\", \"asc\"],\n        ]}\n        renderItemLabel={(item) => `${item.label}, ${item.country}`}\n        onChange={fn()}\n        items={[\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger\",\n            country: \"American\",\n          },\n          {\n            label: \"Carrie Mae Weems\",\n            value: \"carrie-weems\",\n            country: \"American\",\n          },\n          {\n            label: \"Daniel Arsham\",\n            value: \"daniel-asham\",\n            country: \"American\",\n          },\n          {\n            label: \"Takashi Murakami\",\n            value: \"takashi-muakami\",\n            country: \"American\",\n          },\n          {\n            label: \"Tracey Emin\",\n            value: \"tracey-emin\",\n            country: \"British-Nigerian\",\n          },\n          {\n            label: \"Yinka Shonibare\",\n            value: \"yinka-shonibare\",\n            country: \"Japanese\",\n          },\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger-2\",\n            country: \"British-Nigerian\",\n          },\n        ]}\n      />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAA6C,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAG9B;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE;IACN;IACA;MAAEC,WAAW,EAAE;IAAM,CAAC;IAEtB;IACA;MAAEA,WAAW,EAAE;IAAK,CAAC;IAErB;IACA;MACEA,WAAW,EAAE,IAAI;MACjBC,eAAe,EAAE,IAAI;MACrBC,WAAW,EAAE,SAAbA,WAAWA,CAAGC,KAAK;QAAA,OAAKC,OAAO,CAACC,GAAG,CAAC,aAAa,EAAEF,KAAK,CAAC;MAAA;MACzDG,cAAc,EAAE,SAAhBA,cAAcA,CAAGC,IAAI,EAAK;QACxB,IAAMC,gBAAgB,GACpBD,IAAI,CAACE,OAAO,KAAK,UAAU,GAAG,sBAAsB,GAAG,EAAE;QAC3D,UAAAC,MAAA,CAAUH,IAAI,CAACI,KAAK,QAAAD,MAAA,CAAKH,IAAI,CAACE,OAAO,QAAAC,MAAA,CAAKF,gBAAgB;MAC5D;IACF,CAAC;IAED;IACA;MACER,WAAW,EAAE,IAAI;MACjBY,iBAAiB,EAAE,KAAK;MACxBX,eAAe,EAAE;IACnB,CAAC;EACD,gBAEFf,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,aAAA,CAAAwB,YAAY;IACXC,WAAW,EAAC,uBAAuB;IACnCC,kBAAkB,EAAE,CAAE;IACtBC,KAAK,EAAE,CACL,CAAC,SAAS,EAAE,MAAM,CAAC,EACnB,CAAC,KAAK,EAAE,KAAK,CAAC,CACd;IACFC,eAAe,EAAE,SAAjBA,eAAeA,CAAGV,IAAI;MAAA,UAAAG,MAAA,CAAQH,IAAI,CAACI,KAAK,QAAAD,MAAA,CAAKH,IAAI,CAACE,OAAO;IAAA,CAAG;IAC5DS,QAAQ,EAAE,IAAAC,QAAE,GAAG;IACfC,KAAK,EAAE,CACL;MACET,KAAK,EAAE,gBAAgB;MACvBU,KAAK,EAAE,gBAAgB;MACvBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,kBAAkB;MACzBU,KAAK,EAAE,cAAc;MACrBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,eAAe;MACtBU,KAAK,EAAE,cAAc;MACrBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,kBAAkB;MACzBU,KAAK,EAAE,iBAAiB;MACxBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,aAAa;MACpBU,KAAK,EAAE,aAAa;MACpBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,iBAAiB;MACxBU,KAAK,EAAE,iBAAiB;MACxBZ,OAAO,EAAE;IACX,CAAC,EACD;MACEE,KAAK,EAAE,gBAAgB;MACvBU,KAAK,EAAE,kBAAkB;MACzBZ,OAAO,EAAE;IACX,CAAC;EACD,EACF,CACK;AAEb,CAAC;AA/EYb,OAAO,CAAA0B,WAAA"}
+{"version":3,"file":"FilterSelect.story.js","names":["_test","require","_FilterSelect","_storybookBlocklist","_typeof","obj","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","_default","exports","default","component","FilterSelect","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","items","label","country","Default","args","placeholder","initialItemsToShow","order","renderItemLabel","item","concat","onChange","fn","multiselect","Multiselect","WithSelectAll","enableSelectAll","onSelectAll","state","console","log","searchableText","extraSearchTerms","SingleSelect","story","MultiselectBasic","MultiselectWithSearchableText","MultiselectNoMoveToTop","moveSelectedToTop"],"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport { FilterSelect } from \"./FilterSelect\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: FilterSelect,\n  title: \"Components/FilterSelect\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A filterable select component with support for single or multi-select, search functionality, and custom rendering.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nconst items = [\n  {\n    label: \"Barbara Kruger\",\n    value: \"barbara-kruger\",\n    country: \"American\",\n  },\n  {\n    label: \"Carrie Mae Weems\",\n    value: \"carrie-weems\",\n    country: \"American\",\n  },\n  {\n    label: \"Daniel Arsham\",\n    value: \"daniel-asham\",\n    country: \"American\",\n  },\n  {\n    label: \"Takashi Murakami\",\n    value: \"takashi-muakami\",\n    country: \"American\",\n  },\n  {\n    label: \"Tracey Emin\",\n    value: \"tracey-emin\",\n    country: \"British-Nigerian\",\n  },\n  {\n    label: \"Yinka Shonibare\",\n    value: \"yinka-shonibare\",\n    country: \"Japanese\",\n  },\n  {\n    label: \"Barbara Kruger\",\n    value: \"barbara-kruger-2\",\n    country: \"British-Nigerian\",\n  },\n]\n\nexport const Default = {\n  args: {\n    placeholder: \"Filter by artist name\",\n    initialItemsToShow: 6,\n    order: [\n      [\"country\", \"name\"],\n      [\"asc\", \"asc\"],\n    ],\n    renderItemLabel: (item) => `${item.label}, ${item.country}`,\n    onChange: fn(),\n    items,\n    multiselect: false,\n  },\n}\n\nexport const Multiselect = {\n  args: {\n    ...Default.args,\n    multiselect: true,\n  },\n}\n\nexport const WithSelectAll = {\n  args: {\n    ...Default.args,\n    multiselect: true,\n    enableSelectAll: true,\n    onSelectAll: (state) => console.log(\"onSelectAll\", state),\n    searchableText: (item) => {\n      const extraSearchTerms =\n        item.country === \"American\" ? \"USA; Yankee; Murican\" : \"\"\n      return `${item.label}; ${item.country}; ${extraSearchTerms}`\n    },\n  },\n}\n\nexport const SingleSelect = {\n  args: {\n    placeholder: \"Filter by artist name\",\n    initialItemsToShow: 6,\n    order: [\n      [\"country\", \"name\"],\n      [\"asc\", \"asc\"],\n    ],\n    renderItemLabel: (item) => `${item.label}, ${item.country}`,\n    onChange: fn(),\n    items,\n    multiselect: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"FilterSelect in single selection mode (radio buttons).\",\n      },\n    },\n  },\n}\n\nexport const MultiselectBasic = {\n  args: {\n    placeholder: \"Filter by artist name\",\n    initialItemsToShow: 6,\n    order: [\n      [\"country\", \"name\"],\n      [\"asc\", \"asc\"],\n    ],\n    renderItemLabel: (item) => `${item.label}, ${item.country}`,\n    onChange: fn(),\n    items,\n    multiselect: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"FilterSelect with basic multiselect functionality (checkboxes).\",\n      },\n    },\n  },\n}\n\nexport const MultiselectWithSearchableText = {\n  args: {\n    placeholder: \"Filter by artist name\",\n    initialItemsToShow: 6,\n    order: [\n      [\"country\", \"name\"],\n      [\"asc\", \"asc\"],\n    ],\n    renderItemLabel: (item) => `${item.label}, ${item.country}`,\n    onChange: fn(),\n    items,\n    multiselect: true,\n    enableSelectAll: true,\n    onSelectAll: (state) => console.log(\"onSelectAll\", state),\n    searchableText: (item) => {\n      const extraSearchTerms =\n        item.country === \"American\" ? \"USA; Yankee; Murican\" : \"\"\n      return `${item.label}; ${item.country}; ${extraSearchTerms}`\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"FilterSelect with multiselect, searchable hidden text, and quick select-all functionality.\",\n      },\n    },\n  },\n}\n\nexport const MultiselectNoMoveToTop = {\n  args: {\n    placeholder: \"Filter by artist name\",\n    initialItemsToShow: 6,\n    order: [\n      [\"country\", \"name\"],\n      [\"asc\", \"asc\"],\n    ],\n    renderItemLabel: (item) => `${item.label}, ${item.country}`,\n    onChange: fn(),\n    items,\n    multiselect: true,\n    moveSelectedToTop: false,\n    enableSelectAll: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"FilterSelect with multiselect but selected items don't move to top.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,35 @@
 import React from "react";
 declare const _default: {
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: {
+    args: {
+        bg: string;
+        px: number;
+        py: number;
+        children: React.JSX.Element;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/elements/FullBleed/FullBleed.story.js

@@ -8,31 +8,54 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = require("../Box");
 var _Text = require("../Text");
 var _FullBleed = require("./FullBleed");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/FullBleed"
+  component: _FullBleed.FullBleed,
+  title: "Components/FullBleed",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that breaks out of its container to span the full width of the viewport."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono5",
-    maxWidth: 900,
-    mx: "auto",
-    px: 2,
-    py: 1
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    my: 2,
-    variant: "sm-display"
-  }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."), /*#__PURE__*/_react.default.createElement(_FullBleed.FullBleed, {
+var Default = exports.Default = {
+  args: {
     bg: "blue10",
     px: 2,
-    py: 1
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    my: 2,
-    variant: "sm-display"
-  }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis.")), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    my: 2,
-    variant: "sm-display"
-  }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."));
+    py: 1,
+    children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis.")
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono5",
+      maxWidth: 900,
+      mx: "auto",
+      px: 2,
+      py: 1
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."), /*#__PURE__*/_react.default.createElement(_FullBleed.FullBleed, args), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FullBleed component breaking out of its container."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=FullBleed.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FullBleed.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_FullBleed","obj","__esModule","default","_default","exports","title","Default","createElement","Box","bg","maxWidth","mx","px","py","Text","my","variant","FullBleed","displayName"],"sources":["../../../src/elements/FullBleed/FullBleed.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { FullBleed } from \"./FullBleed\"\n\nexport default {\n  title: \"Components/FullBleed\",\n}\n\nexport const Default = () => {\n  return (\n    <Box bg=\"mono5\" maxWidth={900} mx=\"auto\" px={2} py={1}>\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n\n      <FullBleed bg=\"blue10\" px={2} py={1}>\n        <Text my={2} variant=\"sm-display\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n          temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n          accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n          cupiditate adipisci omnis.\n        </Text>\n      </FullBleed>\n\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAuC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAExB;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEZ,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,IAAA,CAAAW,GAAG;IAACC,EAAE,EAAC,OAAO;IAACC,QAAQ,EAAE,GAAI;IAACC,EAAE,EAAC,MAAM;IAACC,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBACpDnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,eAEPtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAkB,SAAS;IAACR,EAAE,EAAC,QAAQ;IAACG,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBAClCnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACG,eAEZtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACH;AAEV,CAAC;AA3BYV,OAAO,CAAAY,WAAA"}
+{"version":3,"file":"FullBleed.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_FullBleed","_storybookBlocklist","obj","__esModule","default","_default","exports","component","FullBleed","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","bg","px","py","children","createElement","Text","my","variant","render","Box","maxWidth","mx","story"],"sources":["../../../src/elements/FullBleed/FullBleed.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { FullBleed } from \"./FullBleed\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: FullBleed,\n  title: \"Components/FullBleed\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A component that breaks out of its container to span the full width of the viewport.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    bg: \"blue10\",\n    px: 2,\n    py: 1,\n    children: (\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    ),\n  },\n  render: (args) => (\n    <Box bg=\"mono5\" maxWidth={900} mx=\"auto\" px={2} py={1}>\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n\n      <FullBleed {...args} />\n\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"FullBleed component breaking out of its container.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAA0E,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAE3D;EACbG,SAAS,EAAEC,oBAAS;EACpBC,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXN,SAAS,EACP;MACJ;IACF,CAAC;IACDO,QAAQ,EAAE;MACNC,OAAO,EAAEC;IACX;EACJ;AACF,CAAC;AAEM,IAAMC,OAAO,GAAAX,OAAA,CAAAW,OAAA,GAAG;EACrBC,IAAI,EAAE;IACJC,EAAE,EAAE,QAAQ;IACZC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,QAAQ,eACN3B,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACxB,KAAA,CAAAyB,IAAI;MAACC,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC;EAEJ,CAAC;EACDC,MAAM,EAAE,SAARA,MAAMA,CAAGT,IAAI;IAAA,oBACXvB,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACzB,IAAA,CAAA8B,GAAG;MAACT,EAAE,EAAC,OAAO;MAACU,QAAQ,EAAE,GAAI;MAACC,EAAE,EAAC,MAAM;MAACV,EAAE,EAAE,CAAE;MAACC,EAAE,EAAE;IAAE,gBACpD1B,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACxB,KAAA,CAAAyB,IAAI;MAACC,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC,CAAO,eAEP/B,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACvB,UAAA,CAAAQ,SAAS,EAAKU,IAAI,CAAI,eAEvBvB,MAAA,CAAAS,OAAA,CAAAmB,aAAA,CAACxB,KAAA,CAAAyB,IAAI;MAACC,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC,CAAO,CACH;EAAA,CACP;EACDf,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXkB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,23 +1,61 @@
 import React from "react";
 declare const _default: {
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import("..").CSSGridProps> & import("..").CSSGridProps, never>> & string;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
 export declare const RealWorldExample: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        position: string;
+        m: number;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const KitchenSink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        border: string;
+        position: string;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const CustomGutters: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        gridColumnGap: number;
+        gridRowGap: number;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };