From 1b2b8397258202855f1a4bcdf1dc1a2ed3188a0d Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 13:23:22 +1100 Subject: [PATCH 01/11] docs pkg update --- docs/package.json | 14 ++--- docs/yarn.lock | 151 +++++++++++++++++++++++++--------------------- 2 files changed, 89 insertions(+), 76 deletions(-) diff --git a/docs/package.json b/docs/package.json index 18af551..54c88e2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -9,23 +9,23 @@ "deploy": "yarn build && yarn export" }, "dependencies": { - "artifak": "^1.1.4", + "artifak": "^1.1.5", "csstype": "^3.0.4", - "next": "10.0.0", - "next-seo": "^4.14.0", - "react": "^16.11.0", + "next": "10.0.1", + "next-seo": "^4.15.1", + "react": "^16.14.0", "react-custom-scrollbars": "^4.2.1", - "react-dom": "^16.11.0", + "react-dom": "^16.14.0", "react-intl": "^5.8.8", "react-markings": "^1.3.0", "react-spring": "^8.0.27", - "react-syntax-highlighter": "^15.2.1", + "react-syntax-highlighter": "^15.3.0", "styled-components": "^5.2.0", "styled-normalize": "^8.0.7", "styled-system": "^5.1.5" }, "devDependencies": { - "@types/node": "^14.14.5", + "@types/node": "^14.14.7", "@types/react": "^16.9.46", "@types/styled-components": "^5.1.3", "@types/styled-system": "^5.1.10", diff --git a/docs/yarn.lock b/docs/yarn.lock index eeb8040..82be8ca 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -86,10 +86,10 @@ dependencies: "@artifak/component-generator" "^1.1.4" -"@artifak/typography@^1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@artifak/typography/-/typography-1.1.4.tgz#dcc28d01c32c4ef512cc1e252c6cc5d5e8d6bf9b" - integrity sha512-yyKhXtcOQTGsanNsRe39/LIBu9EmcttLv/fEl0RSQXmxUxJeiFpF74xqWzhRDMsRjJXpEs/GN1GjGS3kYReTcg== +"@artifak/typography@^1.1.5": + version "1.1.5" + resolved "https://registry.yarnpkg.com/@artifak/typography/-/typography-1.1.5.tgz#60c14422b9b61d974c9b8885749b52014e3ab193" + integrity sha512-83Zb6UiJ01e4PhGTRFRJn/eoSVqfg3Dd1pmgPmNjuottk8c8m/xE43J71V+WxUxdndcy1nqjUURI97WpqDQe+Q== dependencies: "@artifak/component-generator" "^1.1.4" @@ -1150,20 +1150,20 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6" integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw== -"@next/env@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.0.tgz#eb0239062226a9c8b604d58d4a4204e26c22eb16" - integrity sha512-59+6BnOxPoMY64Qy2crDGHtvQgHwIL1SIkWeNiEud1V6ASs59SM9oDGN+Bo/EswII1nn+wQRpMvax0IIN2j+VQ== +"@next/env@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1.tgz#5f49329fcc4fe8948737aeb8108c9d7d75155f93" + integrity sha512-6dwx5YXKG88IR9Q1aai+pprF7WKcmtl0ShQy/iENj5yMWMzsQCem6hxe198u9j7z1IsWyGDXZPsaLEJEatOpeQ== -"@next/polyfill-module@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.0.tgz#17f59cb7325a03f23b66b979fccc56d133411b0a" - integrity sha512-FLSwwWQaP/sXjlS7w4YFu+oottbo/bjoh+L+YED7dblsaRJT89ifV+h8zvLvh1hCL7FJUYVar4rehvj/VO5T9w== +"@next/polyfill-module@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1.tgz#483c8f8692d842800f6badb59f8de74b540580a9" + integrity sha512-Vf8HYy74jx8aQgv/ftFXQtD/udJY4/OXYiiBepqrxC0T3PPl4cns1cbrr5f15xjPELMfcqulxwMYEurioBmv+w== -"@next/react-dev-overlay@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.0.tgz#ba1acc79bc9d874f1801a0b312e6a45de74bf425" - integrity sha512-HJ44TJXtaGfGxVtljPECZvqw+GctVvBr60Rsedo5A+wU2GIiycJ8n5yUSdc9UiYTnPuxfJFicJec6kgR6GSWKA== +"@next/react-dev-overlay@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1.tgz#38f99f78316e9e7fa61a95e1d883e90d6d1fa4d0" + integrity sha512-VYwwGBtV9hqpqYoVABvZEFHBt3oL6PMpiLrDmnHaOwsPDQ+kQsiWd1L8tsYvAC2dgu/x/a/TG0D81FGF77Tohw== dependencies: "@babel/code-frame" "7.10.4" ally.js "1.4.1" @@ -1176,10 +1176,10 @@ stacktrace-parser "0.1.10" strip-ansi "6.0.0" -"@next/react-refresh-utils@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.0.tgz#45cdd1ad3b55ac442f8431cdc43ff53c3dc44d16" - integrity sha512-V1/oiDWb2C1Do0eZONsKX1aqGNkqCUqxUahIiCjwKFu9c3bps+Ygg4JjtaCd9oycv0KzYImUZnU+nqveFUjxUw== +"@next/react-refresh-utils@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1.tgz#ea6f808a9a6242d2da85138edee5562f17c0243a" + integrity sha512-K3thGrgD0uic/x4PZh9oRK/+LWTsn6zmDSHoEXgdft1gtlOjQIVGz7yuPMvuEB9oXDl+giuvRbU+JRlhtSf/eQ== "@npmcli/move-file@^1.0.1": version "1.0.1" @@ -1283,6 +1283,13 @@ resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== +"@types/hast@^2.0.0": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9" + integrity sha512-viwwrB+6xGzw+G1eWpF9geV3fnsDgXqHG+cqgiHrvQfDUW5hzhCyV7Sy3UJxhfRFBsgky2SSW33qi/YrIkjX5Q== + dependencies: + "@types/unist" "*" + "@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" @@ -1296,10 +1303,10 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== -"@types/node@^14.14.5": - version "14.14.5" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.5.tgz#e92d3b8f76583efa26c1a63a21c9d3c1143daa29" - integrity sha512-H5Wn24s/ZOukBmDn03nnGTp18A60ny9AmCwnEcgJiTgSGsCO7k+NWP7zjCCbhlcnVCoI+co52dUAt9GMhOSULw== +"@types/node@^14.14.7": + version "14.14.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.7.tgz#8ea1e8f8eae2430cf440564b98c6dfce1ec5945d" + integrity sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg== "@types/prop-types@*": version "15.7.3" @@ -1338,6 +1345,11 @@ dependencies: csstype "^3.0.2" +"@types/unist@*": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" + integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ== + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -1660,17 +1672,17 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= -artifak@^1.1.4: - version "1.1.4" - resolved "https://registry.yarnpkg.com/artifak/-/artifak-1.1.4.tgz#e7af44be4745a83280b0037098bb0ddebefdffc8" - integrity sha512-+hXGKxDT0ZGKLvdNRY6LcP76V/zzyRLq6Y1Gl5a/Ps6U3p9cP8UtnYK0qlo1inxtnbdhcxMaqDI+ja8mejqFLw== +artifak@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/artifak/-/artifak-1.1.5.tgz#844d1d493a62b29f3c86b3596dfebbb7f60c69cc" + integrity sha512-TXAxGZ4z4Of4Z+mw1BoQSP1YXDQHZns0227GJQZ0kzgg1Wt7ilhvhhCJ0RHXvB4JLFpAfrBz7hSuf3jGyo97WQ== dependencies: "@artifak/block" "^1.1.4" "@artifak/component-generator" "^1.1.4" "@artifak/flex" "^1.1.4" "@artifak/grid" "^1.1.4" "@artifak/imagery" "^1.0.6" - "@artifak/typography" "^1.1.4" + "@artifak/typography" "^1.1.5" asn1.js@^5.2.0: version "5.4.1" @@ -3170,11 +3182,12 @@ hast-util-parse-selector@^2.0.0: resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974" integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA== -hastscript@^5.0.0: - version "5.1.2" - resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a" - integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ== +hastscript@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640" + integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w== dependencies: + "@types/hast" "^2.0.0" comma-separated-tokens "^1.0.0" hast-util-parse-selector "^2.0.0" property-information "^5.0.0" @@ -3973,20 +3986,20 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== -next-seo@^4.14.0: - version "4.14.0" - resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.14.0.tgz#8a3243286f65606da81f6fdb0f8b1673ab5dd5a6" - integrity sha512-HHL82n2bx1Aj0z8kpy31LoJxzWpZwC/RlXleoO5zNNjJjEGtNS7uZ+wrvAbFGUqC4V54I1sZa4f0WZV+mpOx6w== +next-seo@^4.15.1: + version "4.15.1" + resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.15.1.tgz#d1cb51615739690040110b581bfb51d979307a1f" + integrity sha512-jRYUOKbSFirwNRTaYFThu0BLBA1oWJIUq076QQ8uXBP6GG6Eh2/aPcXDoeOt33S1qghTJ60MwW1BkCbN889MIg== next-tick@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= -next@10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/next/-/next-10.0.0.tgz#fbc82fa69f05bf82fb5c4e160151f38fb9615e99" - integrity sha512-hpJkikt6tqwj7DfD5Mizwc1kDsaaS73TQK6lJL+++Ht8QXIEs+KUqTZULgdMk80mDV2Zhzo9/JYMEranWwAFLA== +next@10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/next/-/next-10.0.1.tgz#e1366b41b8547dfc7e9a14d1f7dd8a8584dcf0b2" + integrity sha512-EFlcWe82CQc1QkeIhNogcdC25KBz4CBwjyzfRHhig+wp28GW1O2P/mX+2a7EG1wXg69GyW1JYXOkKk2/VjIwVg== dependencies: "@ampproject/toolbox-optimizer" "2.7.0-alpha.1" "@babel/code-frame" "7.10.4" @@ -4007,10 +4020,10 @@ next@10.0.0: "@babel/runtime" "7.11.2" "@babel/types" "7.11.5" "@hapi/accept" "5.0.1" - "@next/env" "10.0.0" - "@next/polyfill-module" "10.0.0" - "@next/react-dev-overlay" "10.0.0" - "@next/react-refresh-utils" "10.0.0" + "@next/env" "10.0.1" + "@next/polyfill-module" "10.0.1" + "@next/react-dev-overlay" "10.0.1" + "@next/react-refresh-utils" "10.0.1" ast-types "0.13.2" babel-plugin-transform-define "2.0.0" babel-plugin-transform-react-remove-prop-types "0.4.24" @@ -4476,10 +4489,10 @@ prefix-style@2.0.1: resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY= -prismjs@^1.21.0, prismjs@~1.21.0: - version "1.21.0" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3" - integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw== +prismjs@^1.22.0, prismjs@~1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa" + integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w== optionalDependencies: clipboard "^2.0.0" @@ -4622,10 +4635,10 @@ react-custom-scrollbars@^4.2.1: prop-types "^15.5.10" raf "^3.1.0" -react-dom@^16.11.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" - integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== +react-dom@^16.14.0: + version "16.14.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" + integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -4676,21 +4689,21 @@ react-spring@^8.0.27: "@babel/runtime" "^7.3.1" prop-types "^15.5.8" -react-syntax-highlighter@^15.2.1: - version "15.2.1" - resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.2.1.tgz#63a42be96a645407a394cd7b93b99622f3ea179f" - integrity sha512-xrSfqX5Rztf9x4Fa6W+DbbKaJmi5zvh+tAvG2MnktZPDLeX/iMkumwxJdGYn5M1jM3d4+EJTloVAB8UvD7O0nA== +react-syntax-highlighter@^15.3.0: + version "15.3.0" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.3.0.tgz#d8bf103123550e0d637fe8cb1feaf68e22bf9944" + integrity sha512-ghJkkmNw/3wRf9XEvfGeG7tfTuAMyThdNxJy50s9CmnwS3QusKDC+F5lX6lvX3mm+V0CwN+zpRioQb0kgdT11w== dependencies: "@babel/runtime" "^7.3.1" highlight.js "^10.1.1" lowlight "^1.14.0" - prismjs "^1.21.0" - refractor "^3.1.0" + prismjs "^1.22.0" + refractor "^3.2.0" -react@^16.11.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" - integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== +react@^16.14.0: + version "16.14.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" + integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -4734,14 +4747,14 @@ readdirp@~3.4.0: dependencies: picomatch "^2.2.1" -refractor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.1.0.tgz#b05a43c8a1b4fccb30001ffcbd5cd781f7f06f78" - integrity sha512-bN8GvY6hpeXfC4SzWmYNQGLLF2ZakRDNBkgCL0vvl5hnpMrnyURk8Mv61v6pzn4/RBHzSWLp44SzMmVHqMGNww== +refractor@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.2.0.tgz#bc46f7cfbb6adbf45cd304e8e299b7fa854804e0" + integrity sha512-hSo+EyMIZTLBvNNgIU5lW4yjCzNYMZ4dcEhBq/3nReGfqzd2JfVhdlPDfU9rEsgcAyWx+OimIIUoL4ZU7NtYHQ== dependencies: - hastscript "^5.0.0" + hastscript "^6.0.0" parse-entities "^2.0.0" - prismjs "~1.21.0" + prismjs "~1.22.0" regenerate-unicode-properties@^8.2.0: version "8.2.0" From 658a10318ff480d5d4ffabb2df6aa525eac21d4e Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 13:24:17 +1100 Subject: [PATCH 02/11] initial Media docs draft --- docs/codeExamples/media/and.ts | 14 ++ docs/codeExamples/media/index.ts | 6 + docs/codeExamples/media/max.ts | 14 ++ docs/codeExamples/media/min.ts | 13 ++ docs/codeExamples/media/minMax.ts | 14 ++ docs/codeExamples/media/or.ts | 14 ++ docs/codeExamples/media/single.ts | 14 ++ docs/components/Header/index.tsx | 10 +- docs/containers/Media.tsx | 261 ++++++++++++++++++++++++++++++ docs/containers/index.tsx | 4 +- 10 files changed, 361 insertions(+), 3 deletions(-) create mode 100644 docs/codeExamples/media/and.ts create mode 100644 docs/codeExamples/media/index.ts create mode 100644 docs/codeExamples/media/max.ts create mode 100644 docs/codeExamples/media/min.ts create mode 100644 docs/codeExamples/media/minMax.ts create mode 100644 docs/codeExamples/media/or.ts create mode 100644 docs/codeExamples/media/single.ts create mode 100644 docs/containers/Media.tsx diff --git a/docs/codeExamples/media/and.ts b/docs/codeExamples/media/and.ts new file mode 100644 index 0000000..b2ad78e --- /dev/null +++ b/docs/codeExamples/media/and.ts @@ -0,0 +1,14 @@ +export const and = ` + import { media, screen } from 'artifak'; + import styled from 'styled-components'; + + const Badge = styled.div\` + display: none; + margin: 0 auto; + width: 100%; + + media({ screen, width: '>= 768px' })\` + display: block; + \` + \`; +`; diff --git a/docs/codeExamples/media/index.ts b/docs/codeExamples/media/index.ts new file mode 100644 index 0000000..c8a5617 --- /dev/null +++ b/docs/codeExamples/media/index.ts @@ -0,0 +1,6 @@ +export { min } from './min'; +export { max } from './max'; +export { minMax } from './minMax'; +export { and } from './and'; +export { or } from './or'; +export { single } from './single'; diff --git a/docs/codeExamples/media/max.ts b/docs/codeExamples/media/max.ts new file mode 100644 index 0000000..5336770 --- /dev/null +++ b/docs/codeExamples/media/max.ts @@ -0,0 +1,14 @@ +export const max = ` + import { media } from 'artifak'; + import styled from 'styled-components'; + + const Badge = styled.div\` + display: none; + margin: 0 auto; + width: 100%; + + media({ width: '<= 768px' })\` + display: block; + \` + \`; +`; diff --git a/docs/codeExamples/media/min.ts b/docs/codeExamples/media/min.ts new file mode 100644 index 0000000..4aefcf9 --- /dev/null +++ b/docs/codeExamples/media/min.ts @@ -0,0 +1,13 @@ +export const min = ` + import { media } from 'artifak'; + import styled from 'styled-components'; + + const Container = styled.div\` + margin: 0 auto; + width: 100%; + + media({ width: '>= 768px' })\` + max-width: 680px; + \` + \`; +`; diff --git a/docs/codeExamples/media/minMax.ts b/docs/codeExamples/media/minMax.ts new file mode 100644 index 0000000..c874af5 --- /dev/null +++ b/docs/codeExamples/media/minMax.ts @@ -0,0 +1,14 @@ +export const minMax = ` + import { media } from 'artifak'; + import styled from 'styled-components'; + + const Container = styled.div\` + margin: 0 auto; + width: 100%; + + media({ width: '768px >= width <= 1200px' })\` + max-width: 680px; + background: red; + \` + \`; +`; diff --git a/docs/codeExamples/media/or.ts b/docs/codeExamples/media/or.ts new file mode 100644 index 0000000..b8db72a --- /dev/null +++ b/docs/codeExamples/media/or.ts @@ -0,0 +1,14 @@ +export const or = ` + import { media, screen, landscape } from 'artifak'; + import styled from 'styled-components'; + + const Badge = styled.div\` + display: none; + margin: 0 auto; + width: 100%; + + media({ screen, width: '<= 768px' }, { landscape })\` + display: block; + \` + \`; +`; diff --git a/docs/codeExamples/media/single.ts b/docs/codeExamples/media/single.ts new file mode 100644 index 0000000..a29becb --- /dev/null +++ b/docs/codeExamples/media/single.ts @@ -0,0 +1,14 @@ +export const single = ` + import { media } from 'artifak'; + import styled from 'styled-components'; + + const Badge = styled.div\` + display: none; + margin: 0 auto; + width: 100%; + + media({ width: '768px' })\` + display: block; + \` + \`; +`; diff --git a/docs/components/Header/index.tsx b/docs/components/Header/index.tsx index 7f15e09..2fcb8e9 100644 --- a/docs/components/Header/index.tsx +++ b/docs/components/Header/index.tsx @@ -46,13 +46,19 @@ const links = [ title: 'Generator', selected: false, key: 'modules' + }, + { + id: 'media', + title: 'Media', + selected: false, + key: 'modules' } // { // id: 'variants', // title: 'Variants', // selected: false, - // key: 'location' - // }, + // key: 'modules' + // } ]; export function Header() { diff --git a/docs/containers/Media.tsx b/docs/containers/Media.tsx new file mode 100644 index 0000000..7517208 --- /dev/null +++ b/docs/containers/Media.tsx @@ -0,0 +1,261 @@ +import { Paragraph } from '../components/Typography'; +import { Syntax } from '../components/Syntax'; +import { min, max, minMax, and, or, single } from '../codeExamples/media'; +import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; +import { HR } from '../components/HR'; +import { ArticleDoc } from '../components/ArticleDoc'; +import { APIheading } from '../components/APIheading'; +import { FlexTable } from '../components/FlexTable'; + +export function Media() { + return ( + + + + ); +} + +export function MediaContent() { + return ( + <> + + A styled-component mixin, Media helps you write media queries for your + styled components. At its current incarnation, the mixin supports "and" + and "or" media query operators. The "not" operator is not supported yet. + + +
+ + + + The mixin currently supports the following media queries. Below are a + list of props and their respective values. + + + + + + +
+ + + + The following queries can also be used with "min" and "max". + + + + +
+ + + + +
+ + + + +
+ + + + +
+ + Usage + + Usage is quite straightforward. For ranged queries like min and max, + include the values that you desire and for others like orientatation, + simply import and include them in the query object. Below are some usage + demos. + + +
+ + + Returns an equivalent of "@media (width: 768px)" + {single} + +
+ + + + Returns an equivalent of "@media (min-width: 768px)" + + {min} + +
+ + + + Returns an equivalent of "@media (max-width: 768px)" + + {max} + +
+ + + + Returns an equivalent of "@media (min-width: 768px) and (max-width: + 1200px)" + + {minMax} + +
+ + + + To formulate queries with the "and" operator, simply add your query to + the same query object. Below will formulate a query equivalent to: + "@media screen and (min-width: 768px)" + + {and} + +
+ + + + To formulate queries with the "or" operator, simply add another query + object as argument. Below will formulate a query equivalent to: "@media + screen and (min-width: 768px), (orientation: landscape)" + + {or} + + ); +} diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index b214bd6..d2704c3 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -5,6 +5,7 @@ import { Typography } from './Typography'; import { Flex } from './Flex'; import { Generator } from './Generator'; import { Imagery } from './Imagery'; +import { Media } from './Media'; export const content = { Introduction, @@ -13,5 +14,6 @@ export const content = { Typography, Flex, Generator, - Imagery + Imagery, + Media }; From 75be2d49d361bb97529422fef3da3b6ca77853d3 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 13:24:28 +1100 Subject: [PATCH 03/11] remove unused components --- docs/components/Nav/Nav.tsx | 47 ------- docs/components/Nav/components/NavLink.tsx | 44 ------- docs/components/Nav/components/SubNav.tsx | 124 ------------------ docs/components/Nav/components/index.tsx | 2 - .../components/NavMenu/components/NavLink.tsx | 49 ------- docs/components/NavMenu/index.tsx | 48 ------- docs/components/NavMenu/styled/Flex.tsx | 23 ---- docs/components/NavMenu/styled/Marker.tsx | 14 -- docs/components/NavMenu/styled/index.tsx | 2 - 9 files changed, 353 deletions(-) delete mode 100644 docs/components/Nav/Nav.tsx delete mode 100644 docs/components/Nav/components/NavLink.tsx delete mode 100644 docs/components/Nav/components/SubNav.tsx delete mode 100644 docs/components/Nav/components/index.tsx delete mode 100644 docs/components/NavMenu/components/NavLink.tsx delete mode 100644 docs/components/NavMenu/index.tsx delete mode 100644 docs/components/NavMenu/styled/Flex.tsx delete mode 100644 docs/components/NavMenu/styled/Marker.tsx delete mode 100644 docs/components/NavMenu/styled/index.tsx diff --git a/docs/components/Nav/Nav.tsx b/docs/components/Nav/Nav.tsx deleted file mode 100644 index b54d46f..0000000 --- a/docs/components/Nav/Nav.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { NavLink, NavLinkWithChildren } from './components'; - -const links = [ - { - title: 'Modules', - children: [ - 'Block', - 'Grid', - 'Flex', - 'Typography', - 'Imagery', - 'Generator' - ] - }, - { title: 'Extension' }, - { title: 'Variants' } -] - -export function Nav() { - return ( - - {links.map(({ title, children }, i) => { - const hasChildren = !!children; - - if (hasChildren) { - return ( - - ) - } - - return ( - - ); - })} - - ); -} - -const NavContainer = styled.nav` - text-align: center; -`; diff --git a/docs/components/Nav/components/NavLink.tsx b/docs/components/Nav/components/NavLink.tsx deleted file mode 100644 index c587bc8..0000000 --- a/docs/components/Nav/components/NavLink.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Link from 'next/link'; -import styled, { css } from 'styled-components'; - -type Props = { - name: string; - query: { content: string }; -}; - -export function NavLink({ name, query }: Props) { - return ( - - - {name} - - - ); -} - -const NextLinkAnchor = styled.a` - display: inline-block; - position: relative; - cursor: pointer; - text-decoration: none; - transition: color 400ms ease-out; - position: relative; - margin: 0 1em; - transition: color 300ms ease-out; - - ${({ theme }) => css` - color: ${theme.colors.text}; - font-family: ${theme.fontFamily.poppins}; - font-size: 20px; - - &:hover { - color: ${theme.colors.primary}; - } - `} -`; - -const LinkText = styled.span` - position: relative; - left: 0; - transition: left 300ms ease-out; -`; diff --git a/docs/components/Nav/components/SubNav.tsx b/docs/components/Nav/components/SubNav.tsx deleted file mode 100644 index ea47fcf..0000000 --- a/docs/components/Nav/components/SubNav.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { NavLink } from './NavLink'; - -export function NavLinkWithChildren({ parentName, navChildren }) { - return ( - - - {parentName} - - - - - - ) -} - -type Props = { - navChildren: string[]; -} - -export function SubNav({ navChildren }: Props) { - return ( - - { - navChildren.map((nav, i) => { - return ( - - ); - }) - } - - ); -} - -const SubNavContainer = styled.nav` - ${({ theme }) => ` - background: ${theme.colors.primary}; - position: absolute; - top: 2em; - left: 1.2em; - padding: 1em 0.5em 0.5em; - text-align: left; - z-index: 2; - opacity: 0; - visibility: hidden; - transition: opacity 300ms ease-out, transform 300ms ease-out; - - > a { - display: block; - margin-bottom: 0.5em; - color: ${theme.colors.white}; - } - `} -`; - -const SubNavParent = styled.div` - display: inline-block; - position: relative; - - &:hover { - > ${SubNavContainer} { - opacity: 1; - visibility: visible; - } - } -`; - -const SubNavDownArrow = styled.div` - display: inline-block; - vertical-align: middle; - position: relative; - margin-left: 0.5em; - - ${({ theme }) => ` - border-radius: 50%; - width: 20px; - height: 20px; - border: 1px solid ${theme.colors.grey}; - transition: border 300ms ease-out; - - &::before { - content: ''; - display: block; - position: absolute; - top: 7px; - left: 4px; - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 8px solid ${theme.colors.grey}; - transition: border 300ms ease-out; - } - `} -`; - -const SubNavParentLinkText = styled.div` - display: inline-block; - cursor: text; - text-decoration: none; - transition: color 400ms ease-out; - position: relative; - margin: 0 1em; - - font-family: Poppins,sans-serif; - font-size: 20px; - transition: color 300ms ease-out; - - ${({ theme }) => ` - color: ${theme.colors.grey}; - - &:hover { - color: ${theme.colors.primary}; - - ${SubNavDownArrow} { - border-color: ${theme.colors.primary}; - &::before { - border-top-color: ${theme.colors.primary}; - } - } - } - `} -`; \ No newline at end of file diff --git a/docs/components/Nav/components/index.tsx b/docs/components/Nav/components/index.tsx deleted file mode 100644 index 9dfe521..0000000 --- a/docs/components/Nav/components/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { NavLink } from './NavLink'; -export { NavLinkWithChildren } from './SubNav'; \ No newline at end of file diff --git a/docs/components/NavMenu/components/NavLink.tsx b/docs/components/NavMenu/components/NavLink.tsx deleted file mode 100644 index 16ffbd6..0000000 --- a/docs/components/NavMenu/components/NavLink.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import Link from 'next/link'; -import styled, { css } from 'styled-components'; -import { Marker } from '../styled'; - -type Props = { - name: string; - query: { content: string }; -}; - -export function NavLink({ name, query }: Props) { - return ( - - - - {name} - - - ); -} - -const NextLinkAnchor = styled.a` - display: block; - cursor: pointer; - text-decoration: none; - transition: color 400ms ease-out; - position: relative; - - ${({ theme }) => css` - color: ${theme.colors.text}; - font-family: ${theme.fontFamily.poppins}; - font-size: 20px; - - &:hover { - ${LinkText} { - left: 22px; - } - - ${Marker} { - transform: scale(1); - } - } - `} -`; - -const LinkText = styled.span` - position: relative; - left: 0; - transition: left 300ms ease-out; -`; diff --git a/docs/components/NavMenu/index.tsx b/docs/components/NavMenu/index.tsx deleted file mode 100644 index 305e2a7..0000000 --- a/docs/components/NavMenu/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import styled, { css } from 'styled-components'; -import { Grid, GridItem } from 'artifak'; -import { FlexContainer, FlexItem } from './styled'; -import { NavLink } from './components/NavLink'; - -const navMap = { - Introduction: 'Introduction', - Block: 'Block', - Grid: 'Grid', - Typography: 'Typography', - Flex: 'Flex', - Generator: 'Generator', - Imagery: 'Imagery' - // Forms: 'Forms', - // Media: 'Media' -}; - -export function NavMenu() { - return ( - - - - - - {Object.keys(navMap).map((key, i) => { - return ( - - ); - })} - - - - - - ); -} - -const NavMenuGrid = styled(Grid)` - ${({ theme }) => css` - @media (min-width: ${theme.breakpoints[2]}) { - grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); - } - `} -`; diff --git a/docs/components/NavMenu/styled/Flex.tsx b/docs/components/NavMenu/styled/Flex.tsx deleted file mode 100644 index 353e462..0000000 --- a/docs/components/NavMenu/styled/Flex.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components'; - -export const FlexContainer = styled.div` - display: flex; - flex-direction: column; - - @media (min-width: 1025px) { - flex-direction: row; - - > div { - flex: 1 1 50%; - } - } -`; - -export const FlexItem = styled.div` - display: flex; - flex-direction: column; - - a { - padding-bottom: 15px; - } -`; diff --git a/docs/components/NavMenu/styled/Marker.tsx b/docs/components/NavMenu/styled/Marker.tsx deleted file mode 100644 index 1051f98..0000000 --- a/docs/components/NavMenu/styled/Marker.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import styled from 'styled-components'; - -export const Marker = styled.div` - width: 0; - height: 0; - border-top: 8px solid transparent; - border-left: 16px solid #ffffff; - border-bottom: 8px solid transparent; - position: absolute; - top: 3px; - left: 0; - transform: scale(0); - transition: transform 300ms ease-out; -`; diff --git a/docs/components/NavMenu/styled/index.tsx b/docs/components/NavMenu/styled/index.tsx deleted file mode 100644 index c33096a..0000000 --- a/docs/components/NavMenu/styled/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { FlexContainer, FlexItem } from './Flex'; -export { Marker } from './Marker'; From 220fda6c7e4809708cb0554a6bb4fde9b17e3f36 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 14:16:11 +1100 Subject: [PATCH 04/11] add initial Variants draft --- .../variants/generateWithVariants.ts | 30 +++++++++++++++++++ docs/codeExamples/variants/index.ts | 1 + docs/components/Header/index.tsx | 12 ++++---- docs/containers/Variants.tsx | 30 +++++++++++++++++++ docs/containers/index.tsx | 4 ++- 5 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 docs/codeExamples/variants/generateWithVariants.ts create mode 100644 docs/codeExamples/variants/index.ts create mode 100644 docs/containers/Variants.tsx diff --git a/docs/codeExamples/variants/generateWithVariants.ts b/docs/codeExamples/variants/generateWithVariants.ts new file mode 100644 index 0000000..c64c439 --- /dev/null +++ b/docs/codeExamples/variants/generateWithVariants.ts @@ -0,0 +1,30 @@ +export const generateWithVariants = ` + import { createStyledComponent, createBaseComponents } from 'artifak'; + import { position, PositionProps } from 'styled-system'; + + // if you have default styles you can declare like so: + const baseStyles = { + display: 'block', + width: '100%', + minHeight: '400px' + }; + + // Usually you will have them declared in your theme, but as a short example... + const variants = { + variants: { + primary: { + color: 'red'; + }, + secondary: { + color: 'blue'; + } + } + }; + + // From here, you can use createStyledComponent to create your + // base styled component with the variants you want. + // "[position]" is a CSS property from styled-system and is included + // here to demonstrate adding custom CSS properties. + // Note that the last argument is optional and defaults to a "DIV" element + const baseBackground = createStyledComponent(baseStyles, variants, [position], 'div'); +`; diff --git a/docs/codeExamples/variants/index.ts b/docs/codeExamples/variants/index.ts new file mode 100644 index 0000000..7a30cf9 --- /dev/null +++ b/docs/codeExamples/variants/index.ts @@ -0,0 +1 @@ +export { generateWithVariants } from './generateWithVariants'; diff --git a/docs/components/Header/index.tsx b/docs/components/Header/index.tsx index 2fcb8e9..4205e44 100644 --- a/docs/components/Header/index.tsx +++ b/docs/components/Header/index.tsx @@ -52,13 +52,13 @@ const links = [ title: 'Media', selected: false, key: 'modules' + }, + { + id: 'variants', + title: 'Variants', + selected: false, + key: 'modules' } - // { - // id: 'variants', - // title: 'Variants', - // selected: false, - // key: 'modules' - // } ]; export function Header() { diff --git a/docs/containers/Variants.tsx b/docs/containers/Variants.tsx new file mode 100644 index 0000000..ae187e3 --- /dev/null +++ b/docs/containers/Variants.tsx @@ -0,0 +1,30 @@ +import { Paragraph } from '../components/Typography'; +import { Syntax } from '../components/Syntax'; +import { generateWithVariants } from '../codeExamples/variants'; +import { ArticleDoc } from '../components/ArticleDoc'; +import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; + +export function Variants() { + return ( + + + + ); +} + +export function VariantsContent() { + return ( + <> + + Generating Components With Variants + + + + For occasions that you want to create components and include variants + with them, you can turn to the Generator library to do so. + + + {generateWithVariants} + + ); +} diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index d2704c3..b4f96bc 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -6,6 +6,7 @@ import { Flex } from './Flex'; import { Generator } from './Generator'; import { Imagery } from './Imagery'; import { Media } from './Media'; +import { Variants } from './Variants'; export const content = { Introduction, @@ -15,5 +16,6 @@ export const content = { Flex, Generator, Imagery, - Media + Media, + Variants }; From 33d7f4384aeb5eed24a30c70074c207d7b420cba Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 14:16:20 +1100 Subject: [PATCH 05/11] update node ver --- docs/containers/Introduction/content/Specs/Specs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/containers/Introduction/content/Specs/Specs.tsx b/docs/containers/Introduction/content/Specs/Specs.tsx index d153b45..e7790f0 100644 --- a/docs/containers/Introduction/content/Specs/Specs.tsx +++ b/docs/containers/Introduction/content/Specs/Specs.tsx @@ -15,7 +15,7 @@ export function Specs() { - + Date: Tue, 10 Nov 2020 14:16:36 +1100 Subject: [PATCH 06/11] change demo to use shorthand for custom CSS prop --- docs/codeExamples/generator/systemExtensionUsage.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/codeExamples/generator/systemExtensionUsage.ts b/docs/codeExamples/generator/systemExtensionUsage.ts index 0053d77..a4f36af 100644 --- a/docs/codeExamples/generator/systemExtensionUsage.ts +++ b/docs/codeExamples/generator/systemExtensionUsage.ts @@ -14,9 +14,7 @@ export const systemExtensionUsage = ` // add your prop via "system" // for more on how "system" works: https://styled-system.com/custom-props/ const myStylesConfig = system({ - textDecoration: { - property: 'textDecoration', - }, + textDecoration: true }); // Create the styled component. From a5fa68826593f0bbb9a651486974a26a8e54f210 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 14:16:52 +1100 Subject: [PATCH 07/11] remove custom system props --- docs/containers/Generator.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/docs/containers/Generator.tsx b/docs/containers/Generator.tsx index 152827a..ee798f6 100644 --- a/docs/containers/Generator.tsx +++ b/docs/containers/Generator.tsx @@ -3,14 +3,12 @@ import { Syntax } from '../components/Syntax'; import { createStyledComponentUsage, - createBaseComponentsUsage, - systemExtensionUsage + createBaseComponentsUsage } from '../codeExamples/generator'; import { HR } from '../components/HR'; import { ArticleDoc } from '../components/ArticleDoc'; import { APIheading } from '../components/APIheading'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; export function Generator() { return ( @@ -68,19 +66,6 @@ export function GeneratorContent() { {createBaseComponentsUsage} - -
- - - Customising/Adding CSS properties to the system - - - - To add to the previous createBaseComponents components example, let's - say you'd like to extend the system with some extra CSS properties. - - - {systemExtensionUsage} ); } From c6bb637eb1724a87fd463e46366f0a1ff33a66f1 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 14:16:59 +1100 Subject: [PATCH 08/11] remove params --- docs/containers/Media.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/containers/Media.tsx b/docs/containers/Media.tsx index 7517208..fe855a4 100644 --- a/docs/containers/Media.tsx +++ b/docs/containers/Media.tsx @@ -26,7 +26,7 @@ export function MediaContent() {
- + The mixin currently supports the following media queries. Below are a list of props and their respective values. From 99441cba9478edb6a3aab6c725bd7e5b548aa302 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 14:27:08 +1100 Subject: [PATCH 09/11] add Props type to FC --- docs/components/ArticleContentBlock.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/ArticleContentBlock.tsx b/docs/components/ArticleContentBlock.tsx index 0d46800..cc900b9 100644 --- a/docs/components/ArticleContentBlock.tsx +++ b/docs/components/ArticleContentBlock.tsx @@ -6,7 +6,7 @@ type Props = { content: React.ReactNodeArray; }; -export function ArticleContentBlock({ sectionTitle, content }) { +export function ArticleContentBlock({ sectionTitle, content }: Props) { return (

{sectionTitle}

From 79200c47c6db25ecd8a11237275c2501ab033808 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 11 Nov 2020 14:35:45 +1100 Subject: [PATCH 10/11] update next-seo, react-intl, styled-components --- docs/package.json | 6 +-- docs/yarn.lock | 125 +++++++++++++++++++++++++--------------------- 2 files changed, 70 insertions(+), 61 deletions(-) diff --git a/docs/package.json b/docs/package.json index 54c88e2..e2f6a15 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,15 +12,15 @@ "artifak": "^1.1.5", "csstype": "^3.0.4", "next": "10.0.1", - "next-seo": "^4.15.1", + "next-seo": "^4.16.0", "react": "^16.14.0", "react-custom-scrollbars": "^4.2.1", "react-dom": "^16.14.0", - "react-intl": "^5.8.8", + "react-intl": "^5.10.0", "react-markings": "^1.3.0", "react-spring": "^8.0.27", "react-syntax-highlighter": "^15.3.0", - "styled-components": "^5.2.0", + "styled-components": "^5.2.1", "styled-normalize": "^8.0.7", "styled-system": "^5.1.5" }, diff --git a/docs/yarn.lock b/docs/yarn.lock index 82be8ca..425d558 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1085,49 +1085,58 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== -"@formatjs/ecma402-abstract@^1.2.6": - version "1.2.6" - resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.6.tgz#8929525dcb49af31f348fcb4789263743872b57f" - integrity sha512-5/wUWuOFEaZeHhDvc+xgkFZxjYcij9/CjyUHngTfWhx+NwYqo8/xusVYv9SnTYDHAahek3OSCP93tzcv4M+7Xw== +"@formatjs/ecma402-abstract@1.3.2": + version "1.3.2" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.3.2.tgz#e9c1e990bd0fcde4db982d2272af990ba55cdcfc" + integrity sha512-O9VaOzf7uMmu08omHZgakntyPYAaQ6uJmVk5c6UbitYmWl0IgxnKWbf1MWVA7N0uQjbP9kvR4+hv09PAnqXuIw== dependencies: tslib "^2.0.1" -"@formatjs/intl-displaynames@^3.4.1": - version "3.4.1" - resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-3.4.1.tgz#b63276045065761cd9d4a2548f337fb3a430a898" - integrity sha512-bStuATYAecjxMNVv9TOBLiTK90F7jTbVioiZCrbNt97zbBoShYwddLMdgczGMeyvy/bwJ7NBXY1+5bg1vKUVvA== +"@formatjs/intl-datetimeformat@2.8.3": + version "2.8.3" + resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-2.8.3.tgz#6699901c85f4a1a965c5b877d5905a0c7789c1ed" + integrity sha512-0aTx4tqsyAO9nJ8o0vGeZXCX/IgZymMfUOYWj0LqcKDhC/bEmUb6E7UhdlCkMuw68lDRRgTbuT/S0nCRauafzQ== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" + "@formatjs/ecma402-abstract" "1.3.2" tslib "^2.0.1" -"@formatjs/intl-listformat@^4.3.1": - version "4.3.1" - resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-4.3.1.tgz#273747c42c6d6fd4e16e3588be3dc2743a68d77e" - integrity sha512-BSJ3mzxD0xxfRLAuQCRUHcO4b+JA0/kfLybyLew6nD+TeBMpfxFWTcgN4E8qa3752eYK7eXM4XrXrJYm0nWWmg== +"@formatjs/intl-displaynames@3.4.5": + version "3.4.5" + resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-3.4.5.tgz#b47b07ce71a9b1bc871a748b593d6173483ba420" + integrity sha512-IGZVNL+2Br1Cfrjw0jCaHHCFFCThRO6EkkOFohDQuVGU6YL1LgUXTvKALjBe9jyLexGVGwuEqXVwld/z6FtHAA== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" + "@formatjs/ecma402-abstract" "1.3.2" tslib "^2.0.1" -"@formatjs/intl-relativetimeformat@^7.3.1": - version "7.3.1" - resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.3.1.tgz#eb90e856f89c1367245b3ece53bb8854458c7c2e" - integrity sha512-OcPSa2sU262MSTTRAgGggs9V9tXWJSu54Ugwe5x/sNUUDlbsen0HZc7N05JJSDTW/XWxGzHKkhSqC9TB49+Caw== +"@formatjs/intl-listformat@4.3.5": + version "4.3.5" + resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-4.3.5.tgz#0d8a0a347816e6c9ccbcb1b7b91edf61759fdbb7" + integrity sha512-I/EOqMyMFXnYyVFd14FqRKYx/S3h/Ckfz0z/bKltthnMrL+CFRjDNxsZ/xHlaNI3dYuJZw46uJgrIdpPGqG6JQ== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" + "@formatjs/ecma402-abstract" "1.3.2" tslib "^2.0.1" -"@formatjs/intl@^1.3.8": - version "1.3.8" - resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.3.8.tgz#de7ce5119e5c04d70398681d8471f1d2d12f7b7b" - integrity sha512-vksg+ksKEtdaMb5M2POx41C5SQy98xdny6maMOyjcSvaaz8hyNuRsaIVVdy5ThRCsuXlsWkcjPUTXQqKM3SLaw== +"@formatjs/intl-relativetimeformat@7.3.5": + version "7.3.5" + resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.3.5.tgz#b4667c98d2cf5ed2648109b0f4c8c1e04e3a5b69" + integrity sha512-OV/OJjX/1rNVEbxHfymrk9QURsR/ZxacKPd2LrDawygKw5J8QxROVkOtaJPUyxaM8kBJbDHiDy67nbV9bktxRg== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" - "@formatjs/intl-displaynames" "^3.4.1" - "@formatjs/intl-listformat" "^4.3.1" - "@formatjs/intl-relativetimeformat" "^7.3.1" + "@formatjs/ecma402-abstract" "1.3.2" + tslib "^2.0.1" + +"@formatjs/intl@1.4.4": + version "1.4.4" + resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.4.4.tgz#a3ca95a42c3993f932f7c0797ef28a33b2a9a94a" + integrity sha512-QWEaK/PrLqIl1ZfXsUI64jehq8SnkW6zO05kdcu2BCltJYzU1mbVNGSgTaIoMUyb7ZALOiM1T/ZUFqjw5BhWKg== + dependencies: + "@formatjs/ecma402-abstract" "1.3.2" + "@formatjs/intl-datetimeformat" "2.8.3" + "@formatjs/intl-displaynames" "3.4.5" + "@formatjs/intl-listformat" "4.3.5" + "@formatjs/intl-relativetimeformat" "7.3.5" fast-memoize "^2.5.2" - intl-messageformat "^9.3.12" - intl-messageformat-parser "^6.0.11" + intl-messageformat "9.3.17" + intl-messageformat-parser "6.0.15" tslib "^2.0.1" "@hapi/accept@5.0.1": @@ -3312,21 +3321,21 @@ ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== -intl-messageformat-parser@^6.0.11: - version "6.0.11" - resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.11.tgz#b5769990f9eb8c015ef726cf4d782a9445544993" - integrity sha512-0avgk5LN8KGpH6CC8OsDAttzkTtR/6Oy50dYaUpbulnNUDrSxPFMc79IJRktN8PT+HwOzhk26vvfJHXyPdf6ZA== +intl-messageformat-parser@6.0.15: + version "6.0.15" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.15.tgz#84c5840a4c382b27d7a62c3be6ec01b987363f4b" + integrity sha512-W+dAY3M0XVkowapa4LzzpUO9awevcbt5hCB3uof7yM2InzgR6/nfC9H7GnUcRPkKpIDRd6iZ+FtvCcPbNBvfiQ== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" + "@formatjs/ecma402-abstract" "1.3.2" tslib "^2.0.1" -intl-messageformat@^9.3.12: - version "9.3.12" - resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.12.tgz#a5a3f02b7cb275ac1f5bc8127a86763c24fc1255" - integrity sha512-+BrnExt/3ICcMVTQoN1aTueTvCblZ94UH/hQQ4sTFaN7E59BPqTN/vBF5W446JFWuYY0cGjuielBbjSsye+13w== +intl-messageformat@9.3.17: + version "9.3.17" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.17.tgz#7a2645a5d3cb9ae190ecc11def5b9a96d99f3fe0" + integrity sha512-CreK24I6+sWsAvo6GkJoOxCNry2k2LLo3daXguuU+cOaGTxdjDJo4CfGxiBlngmL0ZPbqkAA4XoRiFt83fSPqg== dependencies: fast-memoize "^2.5.2" - intl-messageformat-parser "^6.0.11" + intl-messageformat-parser "6.0.15" tslib "^2.0.1" invariant@^2.2.2, invariant@^2.2.4: @@ -3986,10 +3995,10 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== -next-seo@^4.15.1: - version "4.15.1" - resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.15.1.tgz#d1cb51615739690040110b581bfb51d979307a1f" - integrity sha512-jRYUOKbSFirwNRTaYFThu0BLBA1oWJIUq076QQ8uXBP6GG6Eh2/aPcXDoeOt33S1qghTJ60MwW1BkCbN889MIg== +next-seo@^4.16.0: + version "4.16.0" + resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.16.0.tgz#e976432553425d35ae145dd09389a28ea96af9c2" + integrity sha512-32dS768q9q3QcTCeBWlThhAqE8yjchWUvyM8sB4ioaW3VPXEVlfK7wQqHHIg/dkfKALFUK9wQ8DdsRGD1UYGog== next-tick@~1.0.0: version "1.0.0" @@ -4645,21 +4654,21 @@ react-dom@^16.14.0: prop-types "^15.6.2" scheduler "^0.19.1" -react-intl@^5.8.8: - version "5.8.8" - resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.8.8.tgz#8f292c96bbc764b2cb937a5e2a7f2c6bd3d08e28" - integrity sha512-Ib1TovHjIHI50TWMs6LSFntBIMugB2VBbrZLKijkYGNm6DaQK4Zmp74zuERfjxa3+EZr38pJGwU3cRsIraDCKw== +react-intl@^5.10.0: + version "5.10.0" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.10.0.tgz#076d73a2ec08fe0eaa02a856a29496863dec8acd" + integrity sha512-s+y+eIbM6u50n4GeAOx/6gAblwMFyMCVG5nJXUlPMG0ga4uv9nDThgPlZQFOO9/E9co8GhkRtWBqFxJd/C7QiQ== dependencies: - "@formatjs/ecma402-abstract" "^1.2.6" - "@formatjs/intl" "^1.3.8" - "@formatjs/intl-displaynames" "^3.4.1" - "@formatjs/intl-listformat" "^4.3.1" - "@formatjs/intl-relativetimeformat" "^7.3.1" + "@formatjs/ecma402-abstract" "1.3.2" + "@formatjs/intl" "1.4.4" + "@formatjs/intl-displaynames" "3.4.5" + "@formatjs/intl-listformat" "4.3.5" + "@formatjs/intl-relativetimeformat" "7.3.5" "@types/hoist-non-react-statics" "^3.3.1" fast-memoize "^2.5.2" hoist-non-react-statics "^3.3.2" - intl-messageformat "^9.3.12" - intl-messageformat-parser "^6.0.11" + intl-messageformat "9.3.17" + intl-messageformat-parser "6.0.15" shallow-equal "^1.2.1" tslib "^2.0.1" @@ -5328,10 +5337,10 @@ style-loader@1.2.1: loader-utils "^2.0.0" schema-utils "^2.6.6" -styled-components@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.0.tgz#6dcb5aa8a629c84b8d5ab34b7167e3e0c6f7ed74" - integrity sha512-9qE8Vgp8C5cpGAIdFaQVAl89Zgx1TDM4Yf4tlHbO9cPijtpSXTMLHy9lmP0lb+yImhgPFb1AmZ1qMUubmg3HLg== +styled-components@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" + integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.4.5" From 29fc6724bed888a767503516fbc043b2368c5fbb Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 11 Nov 2020 14:36:55 +1100 Subject: [PATCH 11/11] Update Docs - update Variants copy - add initial Customisation doc draft - move systemExtensionUsage to customisation - add types to FlexTable - update Media copy --- docs/codeExamples/customisation/index.tsx | 1 + .../systemExtensionUsage.ts | 7 ++-- .../generator/createBaseComponentsUsage.ts | 4 +-- .../generator/createStyledComponentUsage.ts | 4 +-- docs/codeExamples/generator/index.tsx | 1 - docs/components/FlexTable.tsx | 9 +++-- docs/components/Header/index.tsx | 6 ++++ docs/containers/Customisation.tsx | 33 +++++++++++++++++ docs/containers/Media.tsx | 36 ++++++++++--------- docs/containers/Variants.tsx | 4 ++- docs/containers/index.tsx | 4 ++- 11 files changed, 79 insertions(+), 30 deletions(-) create mode 100644 docs/codeExamples/customisation/index.tsx rename docs/codeExamples/{generator => customisation}/systemExtensionUsage.ts (89%) create mode 100644 docs/containers/Customisation.tsx diff --git a/docs/codeExamples/customisation/index.tsx b/docs/codeExamples/customisation/index.tsx new file mode 100644 index 0000000..627d91c --- /dev/null +++ b/docs/codeExamples/customisation/index.tsx @@ -0,0 +1 @@ +export { systemExtensionUsage } from '../customisation/systemExtensionUsage'; diff --git a/docs/codeExamples/generator/systemExtensionUsage.ts b/docs/codeExamples/customisation/systemExtensionUsage.ts similarity index 89% rename from docs/codeExamples/generator/systemExtensionUsage.ts rename to docs/codeExamples/customisation/systemExtensionUsage.ts index a4f36af..0801948 100644 --- a/docs/codeExamples/generator/systemExtensionUsage.ts +++ b/docs/codeExamples/customisation/systemExtensionUsage.ts @@ -1,5 +1,6 @@ export const systemExtensionUsage = ` import { system } from 'styled-system'; + import { Property } from 'csstype'; import { createStyledComponent, createBaseComponents } from 'artifak'; import { Theme, RequiredTheme, ResponsiveValue } from 'styled-system'; @@ -8,7 +9,7 @@ export const systemExtensionUsage = ` // You will find most of what you need via @types/styled-system but if you don't // well... here's an example of making your own. export interface TextDecorationProps { - textDecoration?: ResponsiveValue; + textDecoration?: ResponsiveValue; } // add your prop via "system" @@ -19,7 +20,9 @@ export const systemExtensionUsage = ` // Create the styled component. // In this example, we're assuming we want to generate a bunch of components from this base. - const MyBaseComponent = createStyledComponent([myStylesConfig]); + const MyBaseComponent = createStyledComponent( + {}, {}, [myStylesConfig] + ); const myStyles = { Component1: { diff --git a/docs/codeExamples/generator/createBaseComponentsUsage.ts b/docs/codeExamples/generator/createBaseComponentsUsage.ts index 2fc9774..887cd36 100644 --- a/docs/codeExamples/generator/createBaseComponentsUsage.ts +++ b/docs/codeExamples/generator/createBaseComponentsUsage.ts @@ -4,9 +4,7 @@ export const createBaseComponentsUsage = ` // Create your base component const BaseComponent = createStyledComponent( - [position], - { position: 'relative' }, - 'article' + { position: 'relative' }, {}, [position], 'article' ); // Define your styles diff --git a/docs/codeExamples/generator/createStyledComponentUsage.ts b/docs/codeExamples/generator/createStyledComponentUsage.ts index b1d6127..2d9b985 100644 --- a/docs/codeExamples/generator/createStyledComponentUsage.ts +++ b/docs/codeExamples/generator/createStyledComponentUsage.ts @@ -2,8 +2,6 @@ export const createStyledComponentUsage = ` import { position, PositionProps } from 'styled-system'; const StyledArticle = createStyledComponent( - [position], - { position: 'relative' }, - 'article' + { position: 'relative' }, {}, [position], 'article' ); `; diff --git a/docs/codeExamples/generator/index.tsx b/docs/codeExamples/generator/index.tsx index ac9760b..1a185ed 100644 --- a/docs/codeExamples/generator/index.tsx +++ b/docs/codeExamples/generator/index.tsx @@ -1,3 +1,2 @@ export { createStyledComponentUsage } from './createStyledComponentUsage'; export { createBaseComponentsUsage } from './createBaseComponentsUsage'; -export { systemExtensionUsage } from './systemExtensionUsage'; diff --git a/docs/components/FlexTable.tsx b/docs/components/FlexTable.tsx index ce52048..9923630 100644 --- a/docs/components/FlexTable.tsx +++ b/docs/components/FlexTable.tsx @@ -8,7 +8,12 @@ import { SmallParagraph } from '../components/Typography'; -export function FlexTable({ title, cells }) { +type Props = { + title?: string; + cells: { prop: string; content: string }[]; +}; + +export function FlexTable({ title, cells }: Props) { return ( - + {!!title && } {!!cells && cells.length && diff --git a/docs/components/Header/index.tsx b/docs/components/Header/index.tsx index 4205e44..6036caa 100644 --- a/docs/components/Header/index.tsx +++ b/docs/components/Header/index.tsx @@ -58,6 +58,12 @@ const links = [ title: 'Variants', selected: false, key: 'modules' + }, + { + id: 'customisation', + title: 'Customisation', + selected: false, + key: 'modules' } ]; diff --git a/docs/containers/Customisation.tsx b/docs/containers/Customisation.tsx new file mode 100644 index 0000000..39b0ca1 --- /dev/null +++ b/docs/containers/Customisation.tsx @@ -0,0 +1,33 @@ +import { Paragraph, Strong } from '../components/Typography'; +import { Syntax } from '../components/Syntax'; + +import { systemExtensionUsage } from '../codeExamples/customisation'; + +import { HR } from '../components/HR'; +import { ArticleDoc } from '../components/ArticleDoc'; +import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; + +export function Customisation() { + return ( + + + + ); +} + +export function CustomisationContent() { + return ( + <> + + Customising/Adding CSS properties + + + + To add to the previous createBaseComponents components example, let's + say you'd like to extend the system with some extra CSS properties. + + + {systemExtensionUsage} + + ); +} diff --git a/docs/containers/Media.tsx b/docs/containers/Media.tsx index fe855a4..b7c692e 100644 --- a/docs/containers/Media.tsx +++ b/docs/containers/Media.tsx @@ -1,4 +1,4 @@ -import { Paragraph } from '../components/Typography'; +import { Paragraph, Strong } from '../components/Typography'; import { Syntax } from '../components/Syntax'; import { min, max, minMax, and, or, single } from '../codeExamples/media'; import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; @@ -19,9 +19,12 @@ export function MediaContent() { return ( <> - A styled-component mixin, Media helps you write media queries for your - styled components. At its current incarnation, the mixin supports "and" - and "or" media query operators. The "not" operator is not supported yet. + Although most width related queries should be taken care of via Styled + System, sometimes our concern goes beyond that and what's more, there + are currently newer media queries that we can specify now. Therefore, a + media query mixin is included with Artifak to help in regards to this. + At its current incarnation, the mixin only supports "and" and "or" media + query operators. The "not" operator is not supported yet.
@@ -35,7 +38,6 @@ export function MediaContent() { - Returns an equivalent of "@media (width: 768px)" + + Returns an equivalent of "@media (width: 768px)" + {single}
- Returns an equivalent of "@media (min-width: 768px)" + Returns an equivalent of "@media (min-width: 768px)" {min} @@ -224,7 +224,7 @@ export function MediaContent() { - Returns an equivalent of "@media (max-width: 768px)" + Returns an equivalent of "@media (max-width: 768px)" {max} @@ -232,8 +232,8 @@ export function MediaContent() { - Returns an equivalent of "@media (min-width: 768px) and (max-width: - 1200px)" + Returns an equivalent of{' '} + "@media (min-width: 768px) and (max-width: 1200px)" {minMax} @@ -243,7 +243,7 @@ export function MediaContent() { To formulate queries with the "and" operator, simply add your query to the same query object. Below will formulate a query equivalent to: - "@media screen and (min-width: 768px)" + "@media screen and (min-width: 768px)" {and} @@ -252,8 +252,10 @@ export function MediaContent() { To formulate queries with the "or" operator, simply add another query - object as argument. Below will formulate a query equivalent to: "@media - screen and (min-width: 768px), (orientation: landscape)" + object as argument. Below will formulate a query equivalent to:{' '} + + "@media screen and (min-width: 768px), (orientation: landscape)" + {or} diff --git a/docs/containers/Variants.tsx b/docs/containers/Variants.tsx index ae187e3..4689804 100644 --- a/docs/containers/Variants.tsx +++ b/docs/containers/Variants.tsx @@ -21,7 +21,9 @@ export function VariantsContent() { For occasions that you want to create components and include variants - with them, you can turn to the Generator library to do so. + with them, you can use the createStyledComponent utility function to do + so and after you can use the createBaseComponents to generate off of + your newly created base Styled Component if you wish to. {generateWithVariants} diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index b4f96bc..c4a7db9 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -7,6 +7,7 @@ import { Generator } from './Generator'; import { Imagery } from './Imagery'; import { Media } from './Media'; import { Variants } from './Variants'; +import { Customisation } from './Customisation'; export const content = { Introduction, @@ -17,5 +18,6 @@ export const content = { Generator, Imagery, Media, - Variants + Variants, + Customisation };