From df7c5d22408a93073e074a50a44820004cd155e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20=C5=81ucka?= Date: Sat, 27 Jul 2019 21:39:01 +0200 Subject: [PATCH 01/36] Style Input type=color (#341) --- src/Input/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Input/index.js b/src/Input/index.js index e39aedc3..16139169 100644 --- a/src/Input/index.js +++ b/src/Input/index.js @@ -38,6 +38,11 @@ const StyledInput = styled.input` pointer-events: none; } + &[type="color"] { + width: 200px; + padding: 14px; + } + .was-validated & { &:valid { border-color: ${themeGet('colors.success')}; From ec61025c7f07562d1145659cf78924993c1a23a6 Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Thu, 3 Oct 2019 16:00:20 -0400 Subject: [PATCH 02/36] add styled components babel plugin for better debugging --- package.json | 1 + yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e2f8575b..091af5a2 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@babel/plugin-syntax-import-meta": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", + "babel-plugin-styled-components": "^1.10.6", "cross-env": "^5.1.4", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", diff --git a/yarn.lock b/yarn.lock index 3b310e6a..0f29ab35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2210,7 +2210,7 @@ babel-plugin-named-asset-import@^0.3.4: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd" integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw== -"babel-plugin-styled-components@>= 1": +"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6: version "1.10.6" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== From feecef78ca07671e4f816f8c15b537fbb51df6c5 Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Thu, 3 Oct 2019 16:00:35 -0400 Subject: [PATCH 03/36] configute styled components plugin --- .babelrc | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.babelrc b/.babelrc index dd6cdbde..690a81e9 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,10 @@ { "presets": [ - "@babel/preset-env", - "@babel/preset-react" + ["@babel/preset-react", {"modules": false}], + ["@babel/preset-env", {"modules": false}] ], "plugins": [ + ["babel-plugin-styled-components", { "pure": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } From a774e0cb211332e830b44fb8525c4bae45be16f2 Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Thu, 3 Oct 2019 16:00:58 -0400 Subject: [PATCH 04/36] re-ordered index.js --- src/index.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/index.js b/src/index.js index 373d8922..7b3dace9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,32 @@ +export { default as theme } from './theme'; +export { default as ThemeProvider } from './ThemeProvider'; + +// layout export { default as Box } from './Box'; export { default as Flex } from './Flex'; -export { default as Card } from './Card'; -export { default as Image } from './Image'; -export { default as Button } from './Button'; -export { default as Flash } from './Flash'; -export { default as Form } from './Form'; -export { default as MetaMaskButton } from './MetaMaskButton'; -export { default as UPortButton } from './UPortButton'; + +// components export { default as Avatar } from './Avatar'; export { default as Blockie } from './Blockie'; +export { default as Button } from './Button'; +export { default as Card } from './Card'; export { default as Checkbox } from './Checkbox'; +export { default as EthAddress } from './EthAddress'; +export { default as Flash } from './Flash'; +export { default as Form } from './Form'; export { default as Field } from './Field'; export { default as Heading } from './Heading'; export { default as Input } from './Input'; +export { default as Icon } from './Icon'; +export { default as Image } from './Image'; export { default as Link } from './Link'; +export { default as Loader } from './Loader'; +export { default as Modal } from './Modal'; +export { default as MetaMaskButton } from './MetaMaskButton'; export { default as Progress } from './Progress'; +export { default as Pill } from './Pill'; +export { default as Portal } from './Portal'; +export { default as QR } from './QR'; export { default as Radio } from './Radio'; export { default as Select } from './Select'; export { default as Slider } from './Slider'; @@ -22,13 +34,5 @@ export { default as Table } from './Table'; export { default as Text } from './Text'; export { default as Textarea } from './Textarea'; export { default as Tooltip } from './Tooltip'; -export { default as theme } from './theme'; -export { default as ThemeProvider } from './ThemeProvider'; -export { default as Icon } from './Icon'; -export { default as Loader } from './Loader'; export { default as ToastMessage } from './ToastMessage'; -export { default as Pill } from './Pill'; -export { default as Portal } from './Portal'; -export { default as Modal } from './Modal'; -export { default as QR } from './QR'; -export { default as EthAddress } from './EthAddress'; +export { default as UPortButton } from './UPortButton'; From 3e9a5f1a337e18c92260b2a2e79b0d928258655d Mon Sep 17 00:00:00 2001 From: Michael Lockwitz Date: Mon, 21 Oct 2019 22:13:33 +0900 Subject: [PATCH 05/36] Ml add theme breakpoints #383 (#384) * Added breakpoints to theme. Fixes #383 * Updated snapshots. --- src/Flash/__snapshots__/Flash.test.js.snap | 25 +++ .../__snapshots__/MetaMaskButton.test.js.snap | 10 + src/Select/__snapshots__/Select.test.js.snap | 5 + .../__snapshots__/ToastMessage.test.js.snap | 210 ++++++++++++++++++ .../__snapshots__/Tooltip.test.js.snap | 40 ++++ .../__snapshots__/uportbutton.test.js.snap | 10 + src/theme.js | 1 + 7 files changed, 301 insertions(+) diff --git a/src/Flash/__snapshots__/Flash.test.js.snap b/src/Flash/__snapshots__/Flash.test.js.snap index 63732fa9..9084a23c 100644 --- a/src/Flash/__snapshots__/Flash.test.js.snap +++ b/src/Flash/__snapshots__/Flash.test.js.snap @@ -21,6 +21,11 @@ exports[`Select component sanity matches danger variant snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -292,6 +297,11 @@ exports[`Select component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -563,6 +573,11 @@ exports[`Select component sanity matches info variant snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -834,6 +849,11 @@ exports[`Select component sanity matches success variant snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1178,6 +1198,11 @@ exports[`Select component sanity matches warning variant snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/MetaMaskButton/__snapshots__/MetaMaskButton.test.js.snap b/src/MetaMaskButton/__snapshots__/MetaMaskButton.test.js.snap index 48390f93..19a2a621 100644 --- a/src/MetaMaskButton/__snapshots__/MetaMaskButton.test.js.snap +++ b/src/MetaMaskButton/__snapshots__/MetaMaskButton.test.js.snap @@ -31,6 +31,11 @@ exports[`MetaMaskButton component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -283,6 +288,11 @@ exports[`MetaMaskButton component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/Select/__snapshots__/Select.test.js.snap b/src/Select/__snapshots__/Select.test.js.snap index d09b2b4b..b2c4a545 100644 --- a/src/Select/__snapshots__/Select.test.js.snap +++ b/src/Select/__snapshots__/Select.test.js.snap @@ -30,6 +30,11 @@ exports[`Select component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap b/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap index 8fc9892f..0c307aa3 100644 --- a/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap +++ b/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap @@ -273,6 +273,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -519,6 +524,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1075,6 +1085,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1333,6 +1348,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1624,6 +1644,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1882,6 +1907,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2133,6 +2163,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2422,6 +2457,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2677,6 +2717,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2926,6 +2971,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -3189,6 +3239,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -3693,6 +3748,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -3944,6 +4004,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -4233,6 +4298,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -4496,6 +4566,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -4749,6 +4824,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -5161,6 +5241,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -5414,6 +5499,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -5667,6 +5757,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -5921,6 +6016,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -6211,6 +6311,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -6486,6 +6591,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -6739,6 +6849,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -7151,6 +7266,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -7404,6 +7524,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -7657,6 +7782,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -7911,6 +8041,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -8201,6 +8336,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -8486,6 +8626,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -8740,6 +8885,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -9153,6 +9303,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -9408,6 +9563,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -9663,6 +9823,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -9918,6 +10083,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -10209,6 +10379,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -10480,6 +10655,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -10734,6 +10914,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -11175,6 +11360,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -11433,6 +11623,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -11691,6 +11886,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -11947,6 +12147,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -12362,6 +12567,11 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`] 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/Tooltip/__snapshots__/Tooltip.test.js.snap b/src/Tooltip/__snapshots__/Tooltip.test.js.snap index 528894f3..b8fac9a3 100644 --- a/src/Tooltip/__snapshots__/Tooltip.test.js.snap +++ b/src/Tooltip/__snapshots__/Tooltip.test.js.snap @@ -533,6 +533,11 @@ exports[`Tooltip component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -791,6 +796,11 @@ exports[`Tooltip component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1190,6 +1200,11 @@ exports[`Tooltip component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1603,6 +1618,11 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -1849,6 +1869,11 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2523,6 +2548,11 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -2781,6 +2811,11 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -3180,6 +3215,11 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/UPortButton/__snapshots__/uportbutton.test.js.snap b/src/UPortButton/__snapshots__/uportbutton.test.js.snap index 0d816248..f50faa1b 100644 --- a/src/UPortButton/__snapshots__/uportbutton.test.js.snap +++ b/src/UPortButton/__snapshots__/uportbutton.test.js.snap @@ -31,6 +31,11 @@ exports[`UPortButton component sanity matches default snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", @@ -288,6 +293,11 @@ exports[`UPortButton component sanity matches themed snapshot 1`] = ` 0, "1px solid transparent", ], + "breakpoints": Array [ + "40em", + "52em", + "64em", + ], "buttonSizes": Object { "large": Object { "fontSize": "1.5rem", diff --git a/src/theme.js b/src/theme.js index 2c2e1346..8d627642 100644 --- a/src/theme.js +++ b/src/theme.js @@ -26,6 +26,7 @@ export default { maxHeights: [0, 16, 32, 64, 128, 256], borders: [0, '1px solid transparent'], borderWidths: ['0', '1px', '2px', '4px'], + breakpoints: ['40em', '52em', '64em'], shadows: [ '0', '0px 2px 4px rgba(0, 0, 0, 0.1)', From bea17acc9f2f642bcbeb333be9bb32fb5ae73f14 Mon Sep 17 00:00:00 2001 From: Michael Lockwitz Date: Tue, 22 Oct 2019 21:21:58 +0900 Subject: [PATCH 06/36] Upgraded husky hook. Fixes #372. (#385) --- package.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e2f8575b..ab17d99b 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,7 @@ "build": "rollup -c", "start": "rollup -c -w", "prepare": "yarn run build", - "predeploy": "cd example && yarn install && yarn run build", - "precommit": "lint-staged" + "predeploy": "cd example && yarn install && yarn run build" }, "dependencies": { "@d8660091/react-popper": "^1.0.4", @@ -101,5 +100,10 @@ "prettier --config .prettierrc --write", "git add" ] + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } } } From f71a4745f5393713099303cee1cd6a44f3ef21f6 Mon Sep 17 00:00:00 2001 From: Michael Lockwitz Date: Tue, 22 Oct 2019 21:22:54 +0900 Subject: [PATCH 07/36] Updated latest rimble-ui version in Bug issue template. (#386) --- .github/ISSUE_TEMPLATE/bug_report.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 70072638..63cae565 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -25,18 +25,20 @@ If applicable, add screenshots to help explain your problem. **Rimble UI Version** -- 0.7.1 (latest) +- 0.10.1 (latest) **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. From 97568dd143864edfb8f6609424527528f2614d2f Mon Sep 17 00:00:00 2001 From: Michael Lockwitz Date: Wed, 23 Oct 2019 17:41:10 +0900 Subject: [PATCH 08/36] Added default font-size to Heading by as prop (#387) * Added default fontsize to Heading component based on as prop. Updated tests and snapshots. * Update storybook stories with as prop on Headings. --- demo/src/App.js | 16 +++++++-------- src/Heading/Heading.test.js | 4 ++-- .../__snapshots__/Heading.test.js.snap | 14 +++++++++---- src/Heading/index.js | 18 +++++++++++++++++ storybook/stories/Heading.stories.js | 20 ++++++++++++------- 5 files changed, 50 insertions(+), 22 deletions(-) diff --git a/demo/src/App.js b/demo/src/App.js index 918b4153..94afeefe 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -52,9 +52,7 @@ const testComponents = props => ( I'm a Link! - + ( diff --git a/src/Heading/Heading.test.js b/src/Heading/Heading.test.js index 927d309c..2435c7d9 100644 --- a/src/Heading/Heading.test.js +++ b/src/Heading/Heading.test.js @@ -8,14 +8,14 @@ describe('Heading component sanity', () => { }); it('matches default snapshot', () => { - const component = render(); + const component = render(Heading 1); expect(component).toMatchSnapshot(); }); it('matches themed snapshot', () => { const component = render( - + Heading 1 ); expect(component).toMatchSnapshot(); diff --git a/src/Heading/__snapshots__/Heading.test.js.snap b/src/Heading/__snapshots__/Heading.test.js.snap index 20d55e6e..fe3d1bf1 100644 --- a/src/Heading/__snapshots__/Heading.test.js.snap +++ b/src/Heading/__snapshots__/Heading.test.js.snap @@ -8,14 +8,17 @@ exports[`Heading component sanity matches default snapshot 1`] = ` font-size: 24px; font-weight: 600; line-height: 1.25; + font-size: 48px; } -

+> + Heading 1 +

`; exports[`Heading component sanity matches themed snapshot 1`] = ` @@ -26,6 +29,7 @@ exports[`Heading component sanity matches themed snapshot 1`] = ` font-size: 24px; font-weight: 600; line-height: 1.25; + font-size: 48px; } .c0 { @@ -37,11 +41,13 @@ exports[`Heading component sanity matches themed snapshot 1`] = `
-

+ > + Heading 1 +

`; diff --git a/src/Heading/index.js b/src/Heading/index.js index 3fc3ca95..22cda7e0 100644 --- a/src/Heading/index.js +++ b/src/Heading/index.js @@ -16,6 +16,24 @@ const defaultProps = { const StyledHeading = styled.div` ${COMMON} ${TYPOGRAPHY} + font-size: ${props => { + switch (props.as) { + case 'h1': + return props.theme.fontSizes[6]; + case 'h2': + return props.theme.fontSizes[5]; + case 'h3': + return props.theme.fontSizes[4]; + case 'h4': + return props.theme.fontSizes[3]; + case 'h5': + return props.theme.fontSizes[2]; + case 'h6': + return props.theme.fontSizes[1]; + default: + return props.theme.fontSizes[4]; + } + }}px `; StyledHeading.defaultProps = { diff --git a/storybook/stories/Heading.stories.js b/storybook/stories/Heading.stories.js index 7b936537..58600198 100644 --- a/storybook/stories/Heading.stories.js +++ b/storybook/stories/Heading.stories.js @@ -1,12 +1,18 @@ import React from 'react'; -import { Heading } from 'rimble-ui' +import { Heading } from 'rimble-ui'; export default { - title: 'Heading' -} + title: 'Heading', +}; export const heading = () => ( - - The quick brown fox jumps over the lazy dog - -) + <> + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog + +); From e377947379b1af9091cc070efb022bf335b280bc Mon Sep 17 00:00:00 2001 From: Michael Lockwitz Date: Wed, 23 Oct 2019 20:00:53 +0900 Subject: [PATCH 09/36] Added output.globals to each object in output array. Added external array of libraries. Fixes #376. (#377) --- rollup.config.js | 40 +++++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 255f06e9..3a07fb87 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,39 +1,49 @@ -import babel from 'rollup-plugin-babel' -import commonjs from 'rollup-plugin-commonjs' -import external from 'rollup-plugin-peer-deps-external' -import resolve from 'rollup-plugin-node-resolve' -import url from 'rollup-plugin-url' -import svgr from '@svgr/rollup' +import babel from 'rollup-plugin-babel'; +import commonjs from 'rollup-plugin-commonjs'; +import external from 'rollup-plugin-peer-deps-external'; +import resolve from 'rollup-plugin-node-resolve'; +import url from 'rollup-plugin-url'; +import svgr from '@svgr/rollup'; -import pkg from './package.json' +import pkg from './package.json'; + +const outputGlobals = { + react: 'React', + 'react-dom': 'ReactDOM', + 'prop-types': 'PropTypes', + 'styled-components': 'styled', +}; export default { input: 'src/index.js', + external: ['react', 'react-dom', 'prop-types', 'styled-components'], output: [ { file: pkg.main, format: 'umd', name: 'rimble', - sourcemap: true + sourcemap: true, + globals: outputGlobals, }, { file: pkg.module, format: 'es', name: 'rimble', - sourcemap: true - } + sourcemap: true, + globals: outputGlobals, + }, ], plugins: [ external(), url(), svgr({ ref: true, - icon: true + icon: true, }), babel({ - exclude: 'node_modules/**' + exclude: 'node_modules/**', }), resolve(), - commonjs() - ] -} + commonjs(), + ], +}; From b7311265c50ddbdd90d0b0a9ff344746f8d59bee Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Tue, 12 Nov 2019 16:38:15 -0500 Subject: [PATCH 10/36] update demo app packages --- demo/package.json | 3 +- demo/yarn.lock | 103 ++-------------------------------------------- 2 files changed, 4 insertions(+), 102 deletions(-) diff --git a/demo/package.json b/demo/package.json index 4eae5b0d..fa0e8afd 100644 --- a/demo/package.json +++ b/demo/package.json @@ -6,8 +6,7 @@ "react": "link:../node_modules/react", "react-dom": "link:../node_modules/react-dom", "react-scripts": "3.1.2", - "rimble-ui": "link:..", - "styled-components": "^4.3.2" + "rimble-ui": "link:.." }, "scripts": { "start": "react-scripts start", diff --git a/demo/yarn.lock b/demo/yarn.lock index 9a5f5c6f..1402eb08 100644 --- a/demo/yarn.lock +++ b/demo/yarn.lock @@ -913,23 +913,6 @@ prop-types "^15.6.2" recompose "^0.27.1" -"@emotion/is-prop-valid@^0.8.1": - version "0.8.3" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz#cbe62ddbea08aa022cdf72da3971570a33190d29" - integrity sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig== - dependencies: - "@emotion/memoize" "0.7.3" - -"@emotion/memoize@0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" - integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== - -"@emotion/unitless@^0.7.0": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" - integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== - "@hapi/address@2.x.x": version "2.1.2" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222" @@ -1963,21 +1946,6 @@ babel-plugin-named-asset-import@^0.3.4: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd" integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw== -"babel-plugin-styled-components@>= 1": - version "1.10.6" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" - integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" - integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= - babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -2370,11 +2338,6 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -camelize@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" - integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= - caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -2883,11 +2846,6 @@ css-blank-pseudo@^0.1.4: dependencies: postcss "^7.0.5" -css-color-keywords@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" - integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= - css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -2958,15 +2916,6 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" -css-to-react-native@^2.2.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" - integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== - dependencies: - camelize "^1.0.0" - css-color-keywords "^1.0.0" - postcss-value-parser "^3.3.0" - css-tree@1.0.0-alpha.29: version "1.0.0-alpha.29" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39" @@ -5246,11 +5195,6 @@ is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= -is-what@^3.3.1: - version "3.3.1" - resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe" - integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA== - is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -6182,11 +6126,6 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -memoize-one@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" - integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== - memory-fs@^0.4.0, memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -6195,13 +6134,6 @@ memory-fs@^0.4.0, memory-fs@^0.4.1: errno "^0.1.3" readable-stream "^2.0.1" -merge-anything@^2.2.4: - version "2.4.1" - resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.1.tgz#e9bccaec1e49ec6cb5f77ca78c5770d1a35315e6" - integrity sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ== - dependencies: - is-what "^3.3.1" - merge-deep@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2" @@ -7977,7 +7909,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8206,7 +8138,7 @@ react-error-overlay@^6.0.2: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.2.tgz#642bd6157c6a4b6e9ca4a816f7ed30b868c47f81" integrity sha512-DHRuRk3K4Lg9obI6J4Y+nKvtwjasYRU9CFL3ud42x9YJG1HbQjSNublapC/WBJOA726gNUbqbj0U2df9+uzspQ== -react-is@^16.6.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.8.1, react-is@^16.8.4: version "16.10.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f" integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw== @@ -9373,25 +9305,6 @@ style-loader@1.0.0: loader-utils "^1.2.3" schema-utils "^2.0.1" -styled-components@^4.3.2: - version "4.4.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b" - integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.0.0" - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/unitless" "^0.7.0" - babel-plugin-styled-components ">= 1" - css-to-react-native "^2.2.2" - memoize-one "^5.0.0" - merge-anything "^2.2.4" - prop-types "^15.5.4" - react-is "^16.6.0" - stylis "^3.5.0" - stylis-rule-sheet "^0.0.10" - supports-color "^5.5.0" - styled-system@^2.0.0: version "2.3.6" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.3.6.tgz#a38c1ffa04a5c35adec46473984e463c48b16f7c" @@ -9416,22 +9329,12 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" -stylis-rule-sheet@^0.0.10: - version "0.0.10" - resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" - integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== - -stylis@^3.5.0: - version "3.5.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== - supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From 90c940c390734578156bedb6c40c02c8d3ca0b95 Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Tue, 12 Nov 2019 16:38:32 -0500 Subject: [PATCH 11/36] add baseline grid component to demo --- demo/src/App.js | 65 ++++++++++++++++------------- demo/src/components/BaseLineGrid.js | 21 ++++++++++ src/BaseStyles.js | 30 +++++++++++++ 3 files changed, 87 insertions(+), 29 deletions(-) create mode 100644 demo/src/components/BaseLineGrid.js create mode 100644 src/BaseStyles.js diff --git a/demo/src/App.js b/demo/src/App.js index 918b4153..599b7848 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -34,6 +34,8 @@ import { theme, } from 'rimble-ui'; +import BaseLineGrid from './components/BaseLineGrid'; + const myTheme = { ...theme, colors: { @@ -50,6 +52,25 @@ const selectOptions = [ const testComponents = props => ( + {/* H1+ - Quick zephyrs blow, vexing daft Jim. */} + + H1 - Quick zephyrs blow, vexing daft Jim. + + H2 - Quick zephyrs blow, vexing daft Jim. + + H3 - Quick zephyrs blow, vexing daft Jim. + + H4 - Quick zephyrs blow, vexing daft Jim. + + H5 - Quick zephyrs blow, vexing daft Jim. + + H6 - Quick zephyrs blow, vexing daft Jim. + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta + quibusdam, assumenda officiis. + + I'm a Link! ( - hover me + hover me +