diff --git a/.size-snapshot.json b/.size-snapshot.json index 5ab44b84..3dd6e146 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,8 +1,8 @@ { "dist/index.js": { - "bundled": 74014, - "minified": 46422, - "gzipped": 8970 + "bundled": 88776, + "minified": 58882, + "gzipped": 10585 }, "dist/index.es.js": { "bundled": 71172, @@ -24,16 +24,16 @@ "gzipped": 8795 }, "es/index.js": { - "bundled": 72918, - "minified": 45478, - "gzipped": 8733, + "bundled": 87646, + "minified": 57908, + "gzipped": 10344, "treeshaked": { "rollup": { - "code": 35116, + "code": 42405, "import_statements": 98 }, "webpack": { - "code": 37634 + "code": 45291 } } } diff --git a/.storybook/addons.js b/.storybook/addons.js index fa1376d8..57b42bff 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,5 +1,4 @@ import "@storybook/addon-knobs/register"; import "@storybook/addon-viewport/register"; -import "@storybook/addon-storysource/register"; import "@storybook/addon-actions/register"; import "@storybook/addon-options/register"; diff --git a/.storybook/config.ts b/.storybook/config.ts index bc77d206..d4387529 100644 --- a/.storybook/config.ts +++ b/.storybook/config.ts @@ -1,3 +1,4 @@ +import { withInfo } from "@storybook/addon-info"; import { withKnobs } from "@storybook/addon-knobs"; import { setOptions } from "@storybook/addon-options"; import { @@ -8,14 +9,7 @@ import { addDecorator, configure } from "@storybook/react"; import "./storybook.sass"; -// addon-info is currently broken with prop types -// import { withInfo } from "@storybook/addon-info"; -// addDecorator( -// withInfo({ -// // propTables: false, -// source: false, -// }), -// ); +addDecorator(withInfo()); setOptions({ name: "👟 rbx - Bulma UI", @@ -27,8 +21,9 @@ addDecorator(withKnobs); configureViewport({ defaultViewport: "responsive", - // tslint:disable:object-literal-sort-keys viewports: { + // tslint:disable:object-literal-sort-keys + responsive: INITIAL_VIEWPORTS.responsive, mobileSmall: { name: "Mobile @ 480px", styles: { @@ -89,9 +84,12 @@ configureViewport({ width: "2880px", }, }, - ...INITIAL_VIEWPORTS, + ...Object.keys(INITIAL_VIEWPORTS) + .filter(key => key !== "responsive") + .map(key => ({ [key]: INITIAL_VIEWPORTS[key] })) + .reduce((acc, cv) => ({ ...acc, ...cv }), {}), + // tslint:enable:object-literal-sort-keys }, - // tslint:enable:object-literal-sort-keys }); function loadStories() { diff --git a/README.md b/README.md index cb1db3ab..ef826360 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ ### To Install -`npm install rbx` or `yarn add rbx` +`npm install rbx bulma@0.7.2` or `yarn add rbx bulma@0.7.2` ### To Use diff --git a/package-lock.json b/package-lock.json index 6ae951b6..09e165c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1211,67 +1211,6 @@ "util-deprecate": "^1.0.2" } }, - "@storybook/addon-storysource": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-4.1.1.tgz", - "integrity": "sha512-pSBOsjT+MLUmMrgaZc477TAamH9F5NHUifSbhEtaioeu4BmsKx4N3nKEshpkpOzmpRMP7WTHEb5MMqIuU+d+zA==", - "dev": true, - "requires": { - "@storybook/addons": "4.1.1", - "@storybook/components": "4.1.1", - "core-js": "^2.5.7", - "estraverse": "^4.2.0", - "loader-utils": "^1.1.0", - "prettier": "^1.14.3", - "prop-types": "^15.6.2", - "react-syntax-highlighter": "^10.0.0", - "regenerator-runtime": "^0.12.1" - }, - "dependencies": { - "@storybook/addons": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.1.tgz", - "integrity": "sha512-Q6d754uRHBEf2aUCyAgIfL4JF0RZ6Yf/FcZYXKG1MsKVLonbRVSGjsm+R4wsndjvnZF3Ts37WhpZ/1fGP78Zzg==", - "dev": true, - "requires": { - "@storybook/channels": "4.1.1", - "@storybook/components": "4.1.1", - "global": "^4.3.2", - "util-deprecate": "^1.0.2" - } - }, - "@storybook/channels": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-4.1.1.tgz", - "integrity": "sha512-ILOi+y9wtqOP7cYcVNBCx8vYTXsObz6O9jFKxQKL55lbnlUqyRVTEf4qlA1ilkZqPBM7PwtZs+zX31hgJfWYog==", - "dev": true - }, - "@storybook/components": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-4.1.1.tgz", - "integrity": "sha512-dJE1vKg8NOiWt/FpQ60ym7xn+WcVkoiUeXG8vXPFxOqcI00yZizHtwJexWT6ltX8u7i2ODF6IU9dyUI3L2nOyQ==", - "dev": true, - "requires": { - "@emotion/core": "^0.13.1", - "@emotion/provider": "^0.11.2", - "@emotion/styled": "^0.10.6", - "global": "^4.3.2", - "lodash": "^4.17.11", - "prop-types": "^15.6.2", - "react-inspector": "^2.3.0", - "react-split-pane": "^0.1.84", - "react-textarea-autosize": "^7.0.4", - "render-fragment": "^0.1.1" - } - }, - "regenerator-runtime": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", - "dev": true - } - } - }, "@storybook/addon-viewport": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-4.1.0.tgz", @@ -4277,24 +4216,6 @@ "supports-color": "^5.3.0" } }, - "character-entities": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz", - "integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ==", - "dev": true - }, - "character-entities-legacy": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz", - "integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA==", - "dev": true - }, - "character-reference-invalid": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz", - "integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ==", - "dev": true - }, "chardet": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", @@ -4551,18 +4472,6 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, - "clipboard": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", - "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", - "dev": true, - "optional": true, - "requires": { - "good-listener": "^1.2.2", - "select": "^1.1.2", - "tiny-emitter": "^2.0.0" - } - }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", @@ -5516,13 +5425,6 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, - "delegate": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", - "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", - "dev": true, - "optional": true - }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -6480,15 +6382,6 @@ "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", "dev": true }, - "fault": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz", - "integrity": "sha512-o2eo/X2syzzERAtN5LcGbiVQ0WwZSlN3qLtadwAz3X8Bu+XWD16dja/KMsjZLiQr+BLGPDnHGkc4yUJf1Xpkpw==", - "dev": true, - "requires": { - "format": "^0.2.2" - } - }, "faye-websocket": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz", @@ -6726,12 +6619,6 @@ "mime-types": "^2.1.12" } }, - "format": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", - "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", - "dev": true - }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -7603,16 +7490,6 @@ "minimatch": "~3.0.2" } }, - "good-listener": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", - "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", - "dev": true, - "optional": true, - "requires": { - "delegate": "^3.1.2" - } - }, "got": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", @@ -7842,12 +7719,6 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, - "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=", - "dev": true - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8386,22 +8257,6 @@ } } }, - "is-alphabetical": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.2.tgz", - "integrity": "sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==", - "dev": true - }, - "is-alphanumerical": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz", - "integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==", - "dev": true, - "requires": { - "is-alphabetical": "^1.0.0", - "is-decimal": "^1.0.0" - } - }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -8479,12 +8334,6 @@ "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=", "dev": true }, - "is-decimal": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz", - "integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg==", - "dev": true - }, "is-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", @@ -8576,12 +8425,6 @@ "is-extglob": "^2.1.1" } }, - "is-hexadecimal": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz", - "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==", - "dev": true - }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -10423,16 +10266,6 @@ "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "dev": true }, - "lowlight": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", - "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", - "dev": true, - "requires": { - "fault": "^1.0.2", - "highlight.js": "~9.12.0" - } - }, "lru-cache": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", @@ -11693,20 +11526,6 @@ "mocha": "^5.2.0" } }, - "parse-entities": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.0.tgz", - "integrity": "sha512-XXtDdOPLSB0sHecbEapQi6/58U/ODj/KWfIXmmMCJF/eRn8laX6LZbOyioMoETOOJoWRW8/qTSl5VQkUIfKM5g==", - "dev": true, - "requires": { - "character-entities": "^1.0.0", - "character-entities-legacy": "^1.0.0", - "character-reference-invalid": "^1.0.0", - "is-alphanumerical": "^1.0.0", - "is-decimal": "^1.0.0", - "is-hexadecimal": "^1.0.0" - } - }, "parse-glob": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz", @@ -12173,12 +11992,6 @@ "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", "dev": true }, - "prettier": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.3.tgz", - "integrity": "sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==", - "dev": true - }, "pretty-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", @@ -12213,15 +12026,6 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, - "prismjs": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", - "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==", - "dev": true, - "requires": { - "clipboard": "^2.0.0" - } - }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -12875,19 +12679,6 @@ "prop-types": "^15.5.4" } }, - "react-syntax-highlighter": { - "version": "10.1.2", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.1.2.tgz", - "integrity": "sha512-p/xy9rb13Cr+SaErdOvJWTYH8moDrlszv4LPDd314pk5PmT6OTWQYFy66tBZFWhM2xk6bh4BttTU9SYje5c75g==", - "dev": true, - "requires": { - "@babel/runtime": "^7.1.2", - "highlight.js": "~9.12.0", - "lowlight": "~1.9.1", - "prismjs": "^1.8.4", - "refractor": "^2.4.1" - } - }, "react-test-renderer": { "version": "16.6.3", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.6.3.tgz", @@ -13100,17 +12891,6 @@ "symbol-observable": "^1.2.0" } }, - "refractor": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz", - "integrity": "sha512-AMNEGkhaXfhoa0/0mW0bHdfizDJnuHDK29/D5oQaKICf6DALQ+kDEHW/36oDHCdfva4XrZ+cdMhRvPsTI4OIjA==", - "dev": true, - "requires": { - "hastscript": "^5.0.0", - "parse-entities": "^1.1.2", - "prismjs": "~1.15.0" - } - }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -14020,13 +13800,6 @@ } } }, - "select": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", - "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", - "dev": true, - "optional": true - }, "semver": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz", @@ -15146,13 +14919,6 @@ "setimmediate": "^1.0.4" } }, - "tiny-emitter": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", - "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", - "dev": true, - "optional": true - }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/package.json b/package.json index ae2a60ae..f123cbab 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "@storybook/addon-info": "4.1.0", "@storybook/addon-knobs": "4.1.0", "@storybook/addon-options": "4.1.0", - "@storybook/addon-storysource": "^4.1.1", "@storybook/addon-viewport": "4.1.0", "@storybook/react": "^4.1.0", "@storybook/storybook-deployer": "^2.8.1", diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap index 1ccfa63a..d8658bb8 100644 --- a/src/__tests__/__snapshots__/index.test.ts.snap +++ b/src/__tests__/__snapshots__/index.test.ts.snap @@ -541,7 +541,7 @@ Object { "clipped": [Function], "desktop": [Function], "fullhd": [Function], - "gap": [Function], + "gapSize": [Function], "gapless": [Function], "hidden": [Function], "invisible": [Function], diff --git a/src/base/generic.tsx b/src/base/generic.tsx index d0c8baef..0d03fb8f 100644 --- a/src/base/generic.tsx +++ b/src/base/generic.tsx @@ -7,6 +7,7 @@ import { HelpersProps, helpersPropTypes, transformHelpers } from "./helpers"; export type GenericProps = HelpersProps; export const propTypes = { + /** The component this should render as */ as: PropTypes.oneOfType([ PropTypes.func, PropTypes.string, diff --git a/src/components/dropdown/__tests__/helpers.ts b/src/components/dropdown/__tests__/context.ts similarity index 100% rename from src/components/dropdown/__tests__/helpers.ts rename to src/components/dropdown/__tests__/context.ts diff --git a/src/components/dropdown/__tests__/dropdown-item.test.tsx b/src/components/dropdown/__tests__/dropdown-item.test.tsx index a7f9f873..a2f3d15a 100644 --- a/src/components/dropdown/__tests__/dropdown-item.test.tsx +++ b/src/components/dropdown/__tests__/dropdown-item.test.tsx @@ -9,7 +9,7 @@ import { testGenericPropTypes, validatePropType, } from "@/__tests__/testing"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; describe("DropdownItem component", () => { hasProperties(DropdownItem, { diff --git a/src/components/dropdown/__tests__/dropdown-trigger.test.tsx b/src/components/dropdown/__tests__/dropdown-trigger.test.tsx index 24103ad5..9b84b1c2 100644 --- a/src/components/dropdown/__tests__/dropdown-trigger.test.tsx +++ b/src/components/dropdown/__tests__/dropdown-trigger.test.tsx @@ -9,7 +9,7 @@ import { testGenericPropTypes, validatePropType, } from "@/__tests__/testing"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; describe("DropdownTrigger component", () => { hasProperties(DropdownTrigger, { diff --git a/src/components/modal/__tests__/helpers.ts b/src/components/modal/__tests__/context.ts similarity index 100% rename from src/components/modal/__tests__/helpers.ts rename to src/components/modal/__tests__/context.ts diff --git a/src/components/modal/__tests__/modal-background.test.tsx b/src/components/modal/__tests__/modal-background.test.tsx index a4db88ab..d495f9da 100644 --- a/src/components/modal/__tests__/modal-background.test.tsx +++ b/src/components/modal/__tests__/modal-background.test.tsx @@ -8,7 +8,7 @@ import { testGenericPropTypes, validatePropType, } from "@/__tests__/testing"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; describe("ModalBackground component", () => { hasProperties(ModalBackground, { diff --git a/src/components/modal/__tests__/modal-card-head.test.tsx b/src/components/modal/__tests__/modal-card-head.test.tsx index 69d90d3a..cc22d795 100644 --- a/src/components/modal/__tests__/modal-card-head.test.tsx +++ b/src/components/modal/__tests__/modal-card-head.test.tsx @@ -9,7 +9,7 @@ import { shallowInContext, testGenericPropTypes, } from "@/__tests__/testing"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; describe("ModalCardHead component", () => { hasProperties(ModalCardHead, { diff --git a/src/components/modal/__tests__/modal-close.test.tsx b/src/components/modal/__tests__/modal-close.test.tsx index cdde6912..b30eb7fd 100644 --- a/src/components/modal/__tests__/modal-close.test.tsx +++ b/src/components/modal/__tests__/modal-close.test.tsx @@ -2,7 +2,7 @@ import Enzyme from "enzyme"; import React from "react"; import { ModalClose } from "../modal-close"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; import { hasProperties, diff --git a/src/components/navbar/__tests__/helpers.ts b/src/components/navbar/__tests__/context.ts similarity index 100% rename from src/components/navbar/__tests__/helpers.ts rename to src/components/navbar/__tests__/context.ts diff --git a/src/components/navbar/__tests__/navbar-burger.test.tsx b/src/components/navbar/__tests__/navbar-burger.test.tsx index 1be9fdb5..43dfe4cb 100644 --- a/src/components/navbar/__tests__/navbar-burger.test.tsx +++ b/src/components/navbar/__tests__/navbar-burger.test.tsx @@ -2,7 +2,7 @@ import Enzyme from "enzyme"; import React from "react"; import { NavbarBurger } from "../navbar-burger"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; import { hasProperties, diff --git a/src/components/navbar/__tests__/navbar-menu.test.tsx b/src/components/navbar/__tests__/navbar-menu.test.tsx index 7e75c25c..62ee0fa8 100644 --- a/src/components/navbar/__tests__/navbar-menu.test.tsx +++ b/src/components/navbar/__tests__/navbar-menu.test.tsx @@ -2,7 +2,7 @@ import Enzyme from "enzyme"; import React from "react"; import { NavbarMenu } from "../navbar-menu"; -import { contextFactory } from "./helpers"; +import { contextFactory } from "./context"; import { hasProperties, diff --git a/src/grid/columns/__tests__/columns.test.tsx b/src/grid/columns/__tests__/columns.test.tsx index 91354cc2..b115f0d4 100644 --- a/src/grid/columns/__tests__/columns.test.tsx +++ b/src/grid/columns/__tests__/columns.test.tsx @@ -3,7 +3,7 @@ import React from "react"; import { BREAKPOINTS } from "@/base/helpers"; import { Column } from "../column"; -import { Columns, COLUMNS_GAPS } from "../columns"; +import { Columns, COLUMNS_GAP_SIZES } from "../columns"; import { hasProperties, @@ -84,10 +84,10 @@ describe("Columns component", () => { }), ); - COLUMNS_GAPS.map(gap => - it(`should have gap ${gap}`, () => { - const wrapper = Enzyme.shallow(); - expect(wrapper.hasClass(`is-${gap}`)).toBe(true); + COLUMNS_GAP_SIZES.map(gapSize => + it(`should have gapSize ${gapSize}`, () => { + const wrapper = Enzyme.shallow(); + expect(wrapper.hasClass(`is-${gapSize}`)).toBe(true); expect(wrapper.hasClass("is-variable")).toBe(true); }), ); @@ -102,11 +102,11 @@ describe("Columns component", () => { BREAKPOINTS.map(breakpoint => describe(`for ${breakpoint}`, () => { - COLUMNS_GAPS.map(gap => - it(`should have gap ${gap}`, () => { - const props = { [breakpoint]: { gap } }; + COLUMNS_GAP_SIZES.map(gapSize => + it(`should have gapSize ${gapSize}`, () => { + const props = { [breakpoint]: { gapSize } }; const wrapper = Enzyme.shallow(); - expect(wrapper.hasClass(`is-${gap}-${breakpoint}`)).toBe(true); + expect(wrapper.hasClass(`is-${gapSize}-${breakpoint}`)).toBe(true); expect(wrapper.hasClass("is-variable")).toBe(true); }), ); @@ -120,21 +120,23 @@ describe("Columns component", () => { validateBoolPropType(propTypes, "centered"); validateBoolPropType(propTypes, "gapless"); validateBoolPropType(propTypes, "multiline"); - validateOneOfPropType(propTypes, "gap", COLUMNS_GAPS); + validateOneOfPropType(propTypes, "gapSize", COLUMNS_GAP_SIZES); BREAKPOINTS.map(breakpoint => { describe(breakpoint, () => { validatePropType(propTypes, breakpoint, [ - ...COLUMNS_GAPS.map(value => ({ - descriptor: `gap = ${value}`, + ...COLUMNS_GAP_SIZES.map(value => ({ + descriptor: `gapSize = ${value}`, valid: true, - value: { gap: value }, + value: { gapSize: value }, })), { - descriptor: "narrow = 'string'", - error: new RegExp(`Warning.+Failed prop.+ \`${breakpoint}.gap\``), + descriptor: "gapSize = 'string'", + error: new RegExp( + `Warning.+Failed prop.+ \`${breakpoint}.gapSize\``, + ), valid: false, - value: { gap: "__UNKNOWN" }, + value: { gapSize: "__UNKNOWN" }, }, ]); }); diff --git a/src/grid/columns/columns.tsx b/src/grid/columns/columns.tsx index 04fc2a61..37c16479 100644 --- a/src/grid/columns/columns.tsx +++ b/src/grid/columns/columns.tsx @@ -12,18 +12,18 @@ import { Breakpoints, BREAKPOINTS } from "../../base/helpers"; import { tuple } from "../../utils"; import { Column } from "./column"; -export const COLUMNS_GAPS = tuple(0, 1, 2, 3, 4, 5, 6, 7, 8); -export type ColumnsGaps = (typeof COLUMNS_GAPS)[number]; +export const COLUMNS_GAP_SIZES = tuple(0, 1, 2, 3, 4, 5, 6, 7, 8); +export type ColumnsGapSizes = (typeof COLUMNS_GAP_SIZES)[number]; export type ColumnsBreakpointProps = Partial<{ /** * The column gap size for Tablet devices (Between 769px and 1023px) */ - gap: ColumnsGaps; + gapSize: ColumnsGapSizes; }>; const ColumnsBreakpointPropTypes = { - gap: PropTypes.oneOf(COLUMNS_GAPS), + gapSize: PropTypes.oneOf(COLUMNS_GAP_SIZES), }; type ColumnsModifierProps = Partial< @@ -95,8 +95,8 @@ export const Columns = Object.assign( centered, desktop, fullhd, - gap, gapless, + gapSize, mobile, multiline, tablet, @@ -106,7 +106,7 @@ export const Columns = Object.assign( } = transformHelpers(props); const gapClassNames = classNames( - { [`is-${gap}`]: typeof gap === "number" }, + { [`is-${gapSize}`]: typeof gapSize === "number" }, Object.entries({ desktop, fullhd, @@ -117,7 +117,7 @@ export const Columns = Object.assign( }) .filter(([key, value]) => value) .map(([key, value]) => ({ - [`is-${value!.gap}-${key}`]: typeof value!.gap === "number", + [`is-${value!.gapSize}-${key}`]: typeof value!.gapSize === "number", })) .reduce((acc, cv) => ({ ...acc, ...cv }), {}), ); diff --git a/stories/base/base.story.tsx b/stories/base/generic.story.tsx similarity index 75% rename from stories/base/base.story.tsx rename to stories/base/generic.story.tsx index 1c5738ae..248f1e37 100644 --- a/stories/base/base.story.tsx +++ b/stories/base/generic.story.tsx @@ -5,8 +5,8 @@ import { Generic } from "@/base"; import { BREAKPOINTS } from "@/base/helpers"; import { Section } from "@/layout"; -import { iterableToSelectObject, selectFactory } from "../helpers"; -import { modifiersKnobs as mk } from "../modifiers"; +import { iterableToSelectObject, selectFactory } from "../utils"; +import { helpersKnobs } from "./helpers"; const genericKnobs = { as: selectFactory( @@ -48,34 +48,37 @@ storiesOf("Base", module) const props = filterUndefined({ as: genericKnobs.as({ group: "as" }), // colors - ...mapFactories(mk.color, "Color"), + ...mapFactories(helpersKnobs.color, "Color"), // helpers - ...mapFactories(mk.helpers.float, "Helpers"), - ...mapFactories(mk.helpers.spacing, "Helpers"), - ...mapFactories(mk.helpers.other, "Helpers"), + ...mapFactories(helpersKnobs.helpers.float, "Helpers"), + ...mapFactories(helpersKnobs.helpers.spacing, "Helpers"), + ...mapFactories(helpersKnobs.helpers.other, "Helpers"), // responsive responsive: filterResponsive(({ ...BREAKPOINTS.map(breakpoint => ({ [breakpoint]: { display: mapFactories( - mk.responsive[breakpoint].display, + helpersKnobs.responsive[breakpoint].display, + "Responsive", + ), + hide: mapFactories( + helpersKnobs.responsive[breakpoint].hide, "Responsive", ), - hide: mapFactories(mk.responsive[breakpoint].hide, "Responsive"), textAlignment: mapFactories( - mk.responsive[breakpoint].textAlignment, + helpersKnobs.responsive[breakpoint].textAlignment, "Responsive", ), textSize: mapFactories( - mk.responsive[breakpoint].textSize, + helpersKnobs.responsive[breakpoint].textSize, "Responsive", ), }, })).reduce((acc, cv) => ({ ...acc, ...cv }), {}), } as unknown) as any), - ...mapFactories(mk.helpers.other, "Helpers"), + ...mapFactories(helpersKnobs.helpers.other, "Helpers"), // typography - ...mapFactories(mk.typography, "Typography"), + ...mapFactories(helpersKnobs.typography, "Typography"), }); return ( diff --git a/stories/modifiers.ts b/stories/base/helpers.ts similarity index 90% rename from stories/modifiers.ts rename to stories/base/helpers.ts index 6403b907..94c3cb2a 100644 --- a/stories/modifiers.ts +++ b/stories/base/helpers.ts @@ -1,5 +1,3 @@ -import { select } from "@storybook/addon-knobs"; - import { COLORS, GREY_COLORS } from "@/base/helpers"; import { BREAKPOINTS, DISPLAYS } from "@/base/helpers"; import { @@ -14,15 +12,9 @@ import { booleanFactory, iterableToSelectObject, selectFactory, -} from "./helpers"; - -export const colorKnob = (title: string = "Color") => - select(title, iterableToSelectObject(COLORS, { undefined: "" }), ""); - -export const breakpointKnob = (title: string = "Breakpoint") => - select(title, iterableToSelectObject(BREAKPOINTS, { undefined: "" }), ""); +} from "../utils"; -export const modifiersKnobs = { +export const helpersKnobs = { color: { backgroundColor: selectFactory( "backgroundColor", diff --git a/stories/common.ts b/stories/common.ts new file mode 100644 index 00000000..e30e0649 --- /dev/null +++ b/stories/common.ts @@ -0,0 +1,12 @@ +import { select } from "@storybook/addon-knobs"; + +import { COLORS } from "@/base/helpers"; +import { BREAKPOINTS } from "@/base/helpers"; + +import { iterableToSelectObject } from "./utils"; + +export const colorKnob = (title: string = "Color") => + select(title, iterableToSelectObject(COLORS, { undefined: "" }), ""); + +export const breakpointKnob = (title: string = "Breakpoint") => + select(title, iterableToSelectObject(BREAKPOINTS, { undefined: "" }), ""); diff --git a/stories/components/breadcrumb.story.tsx b/stories/components/breadcrumb.story.tsx index 984746f3..b1e291ea 100644 --- a/stories/components/breadcrumb.story.tsx +++ b/stories/components/breadcrumb.story.tsx @@ -18,7 +18,7 @@ import { import { Icon } from "@/elements"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { align: (title: string = "Alignment") => diff --git a/stories/components/dropdown.story.tsx b/stories/components/dropdown.story.tsx index e4d95dc9..4a6b4ebe 100644 --- a/stories/components/dropdown.story.tsx +++ b/stories/components/dropdown.story.tsx @@ -10,7 +10,7 @@ import { DROPDOWN_ALIGNMENTS } from "@/components/dropdown/dropdown"; import { Button, Icon } from "@/elements"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { active: (title: string = "Active") => diff --git a/stories/components/level.story.tsx b/stories/components/level.story.tsx index d7d54ce6..f780350f 100644 --- a/stories/components/level.story.tsx +++ b/stories/components/level.story.tsx @@ -5,7 +5,7 @@ import { Level } from "@/components"; import { Button, Control, Field, Heading, Input, Title } from "@/elements"; import { Section } from "@/layout"; -import { breakpointKnob } from "../modifiers"; +import { breakpointKnob } from "../common"; storiesOf("Components/Level", module) .addDecorator(story =>
) diff --git a/stories/components/message.story.tsx b/stories/components/message.story.tsx index 9fd24192..1f288caa 100644 --- a/stories/components/message.story.tsx +++ b/stories/components/message.story.tsx @@ -7,8 +7,8 @@ import { MESSAGE_SIZES } from "@/components/message/message"; import { Delete } from "@/elements"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; +import { iterableToSelectObject } from "../utils"; export const knobs = { size: (title: string = "Size") => diff --git a/stories/components/navbar.story.tsx b/stories/components/navbar.story.tsx index 72fde6c0..75056c16 100644 --- a/stories/components/navbar.story.tsx +++ b/stories/components/navbar.story.tsx @@ -7,8 +7,8 @@ import { NAVBAR_FIXED_ALIGNMENTS } from "@/components/navbar/navbar"; import { Button } from "@/elements"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; +import { iterableToSelectObject } from "../utils"; export const knobs = { active: (title: string = "Active (mobile display)") => diff --git a/stories/components/pagination.story.tsx b/stories/components/pagination.story.tsx index d3b76dd4..176fd48f 100644 --- a/stories/components/pagination.story.tsx +++ b/stories/components/pagination.story.tsx @@ -9,7 +9,7 @@ import { } from "@/components/pagination/pagination"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { align: (title: string = "Position") => diff --git a/stories/components/tabs.story.tsx b/stories/components/tabs.story.tsx index 72407378..4489c2c1 100644 --- a/stories/components/tabs.story.tsx +++ b/stories/components/tabs.story.tsx @@ -10,7 +10,7 @@ import { } from "@/components/tabs/tabs"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { align: (title: string = "Align") => diff --git a/stories/elements/button.story.tsx b/stories/elements/button.story.tsx index d34b3cbb..017323a9 100644 --- a/stories/elements/button.story.tsx +++ b/stories/elements/button.story.tsx @@ -25,7 +25,7 @@ import { import { BUTTON_GROUP_POSITIONS } from "@/elements/button/button-group"; import { Section } from "@/layout"; -import { iterableToSelectObject, titleize } from "../helpers"; +import { iterableToSelectObject, titleize } from "../utils"; export const knobs = { disabled: (title: string = "Disabled") => boolean(title, false), diff --git a/stories/elements/container.story.tsx b/stories/elements/container.story.tsx index 2da3c8f7..5b242e38 100644 --- a/stories/elements/container.story.tsx +++ b/stories/elements/container.story.tsx @@ -6,7 +6,7 @@ import { BREAKPOINTS } from "@/base/helpers"; import { Container, Notification } from "@/elements"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { breakapoint: (title: string = "Breakpoint") => diff --git a/stories/elements/content.story.tsx b/stories/elements/content.story.tsx index d7065f5f..91efddea 100644 --- a/stories/elements/content.story.tsx +++ b/stories/elements/content.story.tsx @@ -7,7 +7,7 @@ import { CONTENT_SIZES } from "@/elements/content/content"; import { CONTENT_ORDERED_LIST_TYPES } from "@/elements/content/content-ordered-list"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { orderedList: { diff --git a/stories/elements/form/field.story.tsx b/stories/elements/form/field.story.tsx index 7063cc80..ef5d1d40 100644 --- a/stories/elements/form/field.story.tsx +++ b/stories/elements/form/field.story.tsx @@ -26,8 +26,8 @@ import { LABEL_SIZES } from "@/elements/form/label"; import { Columns } from "@/grid"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../../helpers"; -import { colorKnob } from "../../modifiers"; +import { colorKnob } from "../../common"; +import { iterableToSelectObject } from "../../utils"; export const knobs = { align: (title: string = "Alignment") => diff --git a/stories/elements/form/file.story.tsx b/stories/elements/form/file.story.tsx index f5011d28..0c872904 100644 --- a/stories/elements/form/file.story.tsx +++ b/stories/elements/form/file.story.tsx @@ -8,8 +8,8 @@ import { Control, File } from "@/elements"; import { FILE_ALIGNMENTS, FILE_SIZES, FileProps } from "@/elements/form/file"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../../helpers"; -import { colorKnob } from "../../modifiers"; +import { colorKnob } from "../../common"; +import { iterableToSelectObject } from "../../utils"; export const knobs = { align: (title: string = "Alignment") => diff --git a/stories/elements/form/input.story.tsx b/stories/elements/form/input.story.tsx index 2615194c..7b4731e1 100644 --- a/stories/elements/form/input.story.tsx +++ b/stories/elements/form/input.story.tsx @@ -11,8 +11,8 @@ import { } from "@/elements/form/input"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../../helpers"; -import { colorKnob } from "../../modifiers"; +import { colorKnob } from "../../common"; +import { iterableToSelectObject } from "../../utils"; export type ControlledInputProps = Prefer< InputProps, diff --git a/stories/elements/form/select.story.tsx b/stories/elements/form/select.story.tsx index 2173ad3b..d0fcbd8d 100644 --- a/stories/elements/form/select.story.tsx +++ b/stories/elements/form/select.story.tsx @@ -11,8 +11,8 @@ import { } from "@/elements/form/select-container"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../../helpers"; -import { colorKnob } from "../../modifiers"; +import { colorKnob } from "../../common"; +import { iterableToSelectObject } from "../../utils"; export const knobs = { container: { diff --git a/stories/elements/form/textarea.story.tsx b/stories/elements/form/textarea.story.tsx index 9ad97dd8..d6029971 100644 --- a/stories/elements/form/textarea.story.tsx +++ b/stories/elements/form/textarea.story.tsx @@ -6,8 +6,8 @@ import { Control, Textarea } from "@/elements/form"; import { TEXTAREA_SIZES, TEXTAREA_STATES } from "@/elements/form/textarea"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../../helpers"; -import { colorKnob } from "../../modifiers"; +import { colorKnob } from "../../common"; +import { iterableToSelectObject } from "../../utils"; export const knobs = { disabled: (title: string = "Disabled") => boolean(title, false), diff --git a/stories/elements/icon.story.tsx b/stories/elements/icon.story.tsx index 88861a8c..4b317d75 100644 --- a/stories/elements/icon.story.tsx +++ b/stories/elements/icon.story.tsx @@ -9,8 +9,8 @@ import { Icon } from "@/elements"; import { ICON_ALIGNMENTS, ICON_SIZES, IconSizes } from "@/elements/icon/icon"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; +import { iterableToSelectObject } from "../utils"; const faSizeMap: { [k in IconSizes | "default"]: FAProps["size"] } = { default: "1x", diff --git a/stories/elements/image.story.tsx b/stories/elements/image.story.tsx index 9bf742dc..392a8712 100644 --- a/stories/elements/image.story.tsx +++ b/stories/elements/image.story.tsx @@ -10,7 +10,7 @@ import { } from "@/elements/image/image-container"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { container: { diff --git a/stories/elements/notification.story.tsx b/stories/elements/notification.story.tsx index 0194c94e..474e2f17 100644 --- a/stories/elements/notification.story.tsx +++ b/stories/elements/notification.story.tsx @@ -4,7 +4,7 @@ import React from "react"; import { Delete, Notification } from "@/elements"; import { Section } from "@/layout"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; storiesOf("Elements/Notification", module) .addDecorator(story =>
) diff --git a/stories/elements/other.story.tsx b/stories/elements/other.story.tsx index fb4ad05b..32773ff4 100644 --- a/stories/elements/other.story.tsx +++ b/stories/elements/other.story.tsx @@ -16,7 +16,7 @@ import { import { DELETE_SIZES } from "@/elements/other/delete"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { deleteSize: (title: string = "Size") => diff --git a/stories/elements/progress.story.tsx b/stories/elements/progress.story.tsx index 16bfc3e2..fe4a30f1 100644 --- a/stories/elements/progress.story.tsx +++ b/stories/elements/progress.story.tsx @@ -6,8 +6,8 @@ import { Progress } from "@/elements"; import { PROGRESS_SIZES } from "@/elements/progress/progress"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; +import { iterableToSelectObject } from "../utils"; export const knobs = { max: (title: string = "Max") => diff --git a/stories/elements/tag.story.tsx b/stories/elements/tag.story.tsx index bd30e03e..4733bf97 100644 --- a/stories/elements/tag.story.tsx +++ b/stories/elements/tag.story.tsx @@ -6,8 +6,8 @@ import { Control, Delete, Field, Tag } from "@/elements"; import { TAG_SIZES } from "@/elements/tag/tag"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; -import { colorKnob } from "../modifiers"; +import { colorKnob } from "../common"; +import { iterableToSelectObject } from "../utils"; export const knobs = { delete: (title: string = "Delete") => boolean(title, false), diff --git a/stories/elements/title.story.tsx b/stories/elements/title.story.tsx index 86a2e280..8a4d6f37 100644 --- a/stories/elements/title.story.tsx +++ b/stories/elements/title.story.tsx @@ -6,7 +6,7 @@ import { Title } from "@/elements"; import { TITLE_SIZES } from "@/elements/title/title"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { size: (title: string = "Size") => diff --git a/stories/grid/columns.story.tsx b/stories/grid/columns.story.tsx index 2d5c440b..3e36ebfe 100644 --- a/stories/grid/columns.story.tsx +++ b/stories/grid/columns.story.tsx @@ -8,16 +8,20 @@ import { Box, Notification, Title } from "@/elements"; import { Columns } from "@/grid"; import { ColumnProps } from "@/grid/columns/column"; import { COLUMN_SIZES, ColumnSizes } from "@/grid/columns/column"; -import { COLUMNS_GAPS, ColumnsGaps } from "@/grid/columns/columns"; +import { COLUMNS_GAP_SIZES, ColumnsGapSizes } from "@/grid/columns/columns"; import { Section } from "@/layout"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { breakpoint: (title: string = "Breakpoint") => select(title, iterableToSelectObject(BREAKPOINTS, { undefined: "" }), ""), gap: (title: string = "Gap") => - select(title, iterableToSelectObject(COLUMNS_GAPS, { undefined: "" }), ""), + select( + title, + iterableToSelectObject(COLUMNS_GAP_SIZES, { undefined: "" }), + "", + ), gapless: (title: string = "Gapless") => boolean(title, false), }; @@ -199,15 +203,15 @@ storiesOf("Grid/Columns", module) .add("Gap (variable)", () => { const gap = knobs.gap(); const normalizedGap = - gap === "" ? undefined : (parseInt(gap, 10) as ColumnsGaps); + gap === "" ? undefined : (parseInt(gap, 10) as ColumnsGapSizes); return ( - + - + {[1, 2, 3].map(key => ( - + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(key => ( boolean(title, false), diff --git a/stories/layout/section.story.tsx b/stories/layout/section.story.tsx index 0c765f18..4372a853 100644 --- a/stories/layout/section.story.tsx +++ b/stories/layout/section.story.tsx @@ -6,7 +6,7 @@ import { Container, Title } from "@/elements"; import { Section } from "@/layout"; import { SECTION_SIZES } from "@/layout/section/section"; -import { iterableToSelectObject } from "../helpers"; +import { iterableToSelectObject } from "../utils"; export const knobs = { size: (title: string = "Size") => diff --git a/stories/helpers.ts b/stories/utils.ts similarity index 100% rename from stories/helpers.ts rename to stories/utils.ts