From 51b631ffbf152c61ba084c8e51181b8887085235 Mon Sep 17 00:00:00 2001 From: CJies Date: Thu, 7 Jun 2018 11:04:05 +0800 Subject: [PATCH] Separate storyshots (#155) * Add editorconfig * Load custom babelrc in web storybook * Separate storyshots * Fix permission for CI --- .circleci/config.yml | 4 +- .editorconfig | 8 + .eslintrc | 3 + packages/web/.storybook/.babelrc | 3 + packages/web/.storybook/storyshots.test.js | 19 + .../__snapshots__/Overview.stories.storyshot | 780 + .../__snapshots__/storyshots.test.js.snap | 61838 ---------------- .../__snapshots__/Avatar.stories.storyshot | 21 + .../__snapshots__/Box.stories.storyshot | 10 + .../__snapshots__/Button.stories.storyshot | 131 + .../__snapshots__/Card.stories.storyshot | 283 + .../__snapshots__/Checkbox.stories.storyshot | 159 + .../__snapshots__/Form.stories.storyshot | 763 + .../__snapshots__/Icon.stories.storyshot | 11546 +++ .../__snapshots__/Layout.stories.storyshot | 92 + .../__snapshots__/List.stories.storyshot | 389 + .../__snapshots__/Menu.stories.storyshot | 108 + .../__snapshots__/Modal.stories.storyshot | 13 + .../Pagination.stories.storyshot | 157 + .../__snapshots__/Pill.stories.storyshot | 112 + .../ProgressBar.stories.storyshot | 39 + .../__snapshots__/Radio.stories.storyshot | 143 + .../__snapshots__/Slider.stories.storyshot | 121 + .../__snapshots__/Switch.stories.storyshot | 117 + .../__snapshots__/Table.stories.storyshot | 118 + .../__snapshots__/Tabs.stories.storyshot | 73 + packages/web/stories/storyshots.test.js | 4 - .../__snapshots__/space.stories.storyshot | 9 + 28 files changed, 15219 insertions(+), 61844 deletions(-) create mode 100644 .editorconfig create mode 100644 packages/web/.storybook/.babelrc create mode 100644 packages/web/.storybook/storyshots.test.js create mode 100644 packages/web/stories/__snapshots__/Overview.stories.storyshot delete mode 100644 packages/web/stories/__snapshots__/storyshots.test.js.snap create mode 100644 packages/web/stories/examples/__snapshots__/Avatar.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Box.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Button.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Card.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Checkbox.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Form.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Icon.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Layout.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/List.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Menu.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Modal.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Pagination.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Pill.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/ProgressBar.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Radio.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Slider.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Switch.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Table.stories.storyshot create mode 100644 packages/web/stories/examples/__snapshots__/Tabs.stories.storyshot delete mode 100644 packages/web/stories/storyshots.test.js create mode 100644 packages/web/stories/utils/__snapshots__/space.stories.storyshot diff --git a/.circleci/config.yml b/.circleci/config.yml index b3648c1c7..1ad47b9d2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -38,8 +38,8 @@ jobs: name: Install Dependencies command: | sudo npm install -g yarn - yarn config set cache-folder .yarn-cache - yarn install --pure-lockfile + sudo yarn config set cache-folder .yarn-cache + sudo yarn install --pure-lockfile - run: yarn cache dir - save_cache: key: yarn-cache-{{ checksum "yarn.lock" }} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..79fe80267 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +insert_final_newline = true diff --git a/.eslintrc b/.eslintrc index 40f300c21..a2a08b618 100644 --- a/.eslintrc +++ b/.eslintrc @@ -28,5 +28,8 @@ ] } } + }, + "env": { + "jest": true } } diff --git a/packages/web/.storybook/.babelrc b/packages/web/.storybook/.babelrc new file mode 100644 index 000000000..851856e59 --- /dev/null +++ b/packages/web/.storybook/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../../../.babelrc" +} diff --git a/packages/web/.storybook/storyshots.test.js b/packages/web/.storybook/storyshots.test.js new file mode 100644 index 000000000..0de3f2025 --- /dev/null +++ b/packages/web/.storybook/storyshots.test.js @@ -0,0 +1,19 @@ +/* eslint-disable import/no-extraneous-dependencies */ + +import initStoryshots, { + multiSnapshotWithOptions, +} from '@storybook/addon-storyshots'; +import 'jest-styled-components' + +/** + * Mock methods of addon-info so that "Show Info" button don't go into snapshots. + * https://github.com/storybooks/storybook/issues/1011#issuecomment-322698049 + */ +jest.mock('@storybook/addon-info', () => ({ + withInfo: () => storyFn => storyFn, + setDefaults: () => {}, +})); + +initStoryshots({ + test: multiSnapshotWithOptions({}) +}); diff --git a/packages/web/stories/__snapshots__/Overview.stories.storyshot b/packages/web/stories/__snapshots__/Overview.stories.storyshot new file mode 100644 index 000000000..7c4bfe00d --- /dev/null +++ b/packages/web/stories/__snapshots__/Overview.stories.storyshot @@ -0,0 +1,780 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Getting Started Overview 1`] = ` +
+
+
+ Avatar +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ + + 99+ + +
+
+
+
+
+ Button +
+
+ + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+
+ Card +
+
+
+
+ + + +
+ Congrats +
+
+ Let’s Get Started +
+
+
+
+ +
+
+
+
+
+
+`; + +exports[`Storyshots Getting Started Theme 1`] = ` +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/packages/web/stories/__snapshots__/storyshots.test.js.snap b/packages/web/stories/__snapshots__/storyshots.test.js.snap deleted file mode 100644 index fa5d9445d..000000000 --- a/packages/web/stories/__snapshots__/storyshots.test.js.snap +++ /dev/null @@ -1,61838 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Components | Avatar Basic 1`] = ` -
-
-
- - -
-
- -
- -
-
-
-

- Components | Avatar -

-

- Basic -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
- - < - Avatar - - - - - - badge - - - = - - " - - 99+ - - " - - - - - - - gender - - - = - - " - - unknown - - " - - - - - - - /> - -
-
- -
-
-
-

- Prop Types -

-
-

- " - Avatar - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- badge - - - unknown - - - - - - - null - - -
- src - - - unknown - - - - - - - null - - -
- round - - - unknown - - - - - - - false - - -
- size - - - unknown - - - - - - - medium - - -
- outline - - - unknown - - - - - - - false - - -
- imageStyle - - - unknown - - - - - - - null - - -
- containerStyle - - - unknown - - - - - - - null - - -
- badgeStyle - - - unknown - - - - - - - null - - -
-
-
-
-
-
-
-`; - -exports[`Storyshots Components | Box Basic 1`] = ` -
-
-
- This is a box! -
-
- -
- -
-
-
-

- Components | Box -

-

- Basic -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Styled(Box) - - - - - - padding - - - = - - " - - 20px - - " - - - - - - - > - -
-
- - This is a box! - -
-
- - </ - Styled(Box) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - Styled(Box) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button ButtonGroup 1`] = ` -
-
-
- - - -
-
- -
- -
-
-
-

- Components | Button -

-

- ButtonGroup -

-
-
-
- Button Group -
-
-
-

- Story Source -

-
-            
-
-
- - < - ButtonGroup - - - - > - -
-
-
- - < - WithTheme(Button) - - - - > - -
-
- - Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
-
- - < - WithTheme(Button) - - - - > - -
-
- - Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
-
- - < - WithTheme(Button) - - - - > - -
-
- - Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- - </ - ButtonGroup - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - ButtonGroup - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- marginHorizontal - - - unknown - - - - - - - 5px - - -
- style - - - unknown - - - - - - - null - - -
-
-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Circular style 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Circular style -

-
- -
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - circle - - - - - - > - -
-
- - < - Cp - - - - - - name - - - = - - " - - plus - - " - - - - - - - color - - - = - - " - - #3b5998 - - " - - - - - - - /> - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - Cp - " Component -

- - No propTypes defined! - -
-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Default 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Default -

-
-
-
- Buttons default style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - nature - - - = - - " - - default - - " - - - - - - - size - - - = - - " - - medium - - " - - - - - - - > - -
-
- - Default Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Disable 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Disable -

-
-
-
- Buttons disable style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - disabled - - - - - - > - -
-
- - Disable Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Flat 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Flat -

-
-
-
- Buttons Flat style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - flat - - - - - - nature - - - = - - " - - default - - " - - - - - - - > - -
-
- - Flat Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Light 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Light -

-
-
-
- Button Light Style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - light - - - - - - nature - - - = - - " - - default - - " - - - - - - - > - -
-
- - Light Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Link 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Link -

-
-
-
- Link style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - link - - - - - - dark - - - = - - { - - false - - } - - - - - - - underline - - - = - - { - - false - - } - - - - - - - > - -
-
- - Link Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Button Subtle 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Button -

-

- Subtle -

-
-
-
- subtle style -
-
-
-

- Story Source -

-
-            
-
-
- - < - WithTheme(Button) - - - - - - subtle - - - - - - > - -
-
- - Subtle Button - -
-
- - </ - WithTheme(Button) - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Card Default Full Button type 1`] = ` -
-
-
-
-
- Title -
-
- - 99+ - -
-
-
- Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. -
-
-
- -
-
- -
-
-
-
- -
- -
-
-
-

- Components | Card -

-

- Default Full Button type -

-
-
-
- Info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Card - - - - - - width - - - = - - " - - 300px - - " - - - - - - - height - - - = - - " - - 220px - - " - - - - - - - > - -
-
- - < - Header - - - - - - badge - - - = - - " - - 99+ - - " - - - - - - - title - - - = - - " - - Title - - " - - - - - - - /> - -
-
-
- - < - Container - - - - > - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - </ - Container - > - -
-
-
-
- - < - Footer - - - - > - -
-
-
- - < - FooterButton - - - - > - -
-
- - Cancel - -
-
- - </ - FooterButton - > - -
-
-
-
- - < - FooterButton - - - - - - primary - - - - - - > - -
-
- - Confirm - -
-
- - </ - FooterButton - > - -
-
-
- - </ - Footer - > - -
-
-
- - </ - Card - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - Card - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- width - - - unknown - - - - - - - auto - - -
- height - - - unknown - - - - - - - auto - - -
- shadow - - - unknown - - - - - - - false - - -
-
-
-

- " - Container - " Component -

- - No propTypes defined! - -
-
-

- " - Footer - " Component -

- - No propTypes defined! - -
-
-

- " - FooterButton - " Component -

- - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- primary - - - unknown - - - - - - - false - - -
-
-
-

- " - Header - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- title - - - unknown - - - - - - - null - - -
- image - - - unknown - - - - - - - null - - -
- badge - - - unknown - - - - - - - null - - -
- titleStyle - - - unknown - - - - - - - null - - -
-
-
-
-
-
-
-`; - -exports[`Storyshots Components | Card Hero Image 1`] = ` -
-
-
-
-

- Title -

-
-
- Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. -
-
-
- -
-
- -
-
-
-
- -
- -
-
-
-

- Components | Card -

-

- Hero Image -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Card - - - - - - width - - - = - - " - - 300px - - " - - - - - - - height - - - = - - " - - 400px - - " - - - - - - - > - -
-
- - < - Header - - - - - - image - - - = - - " - - test-file-stub - - " - - - - - - - title - - - = - - " - - Title - - " - - - - - - - /> - -
-
-
- - < - Container - - - - > - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - </ - Container - > - -
-
-
-
- - < - Footer - - - - > - -
-
-
- - < - FooterButton - - - - > - -
-
- - Cancel - -
-
- - </ - FooterButton - > - -
-
-
-
- - < - FooterButton - - - - - - primary - - - - - - > - -
-
- - Confirm - -
-
- - </ - FooterButton - > - -
-
-
- - </ - Footer - > - -
-
-
- - </ - Card - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - Card - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- width - - - unknown - - - - - - - auto - - -
- height - - - unknown - - - - - - - auto - - -
- shadow - - - unknown - - - - - - - false - - -
-
-
-

- " - Container - " Component -

- - No propTypes defined! - -
-
-

- " - Footer - " Component -

- - No propTypes defined! - -
-
-

- " - FooterButton - " Component -

- - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- primary - - - unknown - - - - - - - false - - -
-
-
-

- " - Header - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- title - - - unknown - - - - - - - null - - -
- image - - - unknown - - - - - - - null - - -
- badge - - - unknown - - - - - - - null - - -
- titleStyle - - - unknown - - - - - - - null - - -
-
-
-
-
-
-
-`; - -exports[`Storyshots Components | Card With Flat Button 1`] = ` -
-
-
-
-
- Title -
-
-
- Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. -
-
-
- - -
-
-
-
- -
- -
-
-
-

- Components | Card -

-

- With Flat Button -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Card - - - - - - width - - - = - - " - - 300px - - " - - - - - - - height - - - = - - " - - 220px - - " - - - - - - - > - -
-
- - < - Header - - - - - - title - - - = - - " - - Title - - " - - - - - - - /> - -
-
-
- - < - Container - - - - > - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - </ - Container - > - -
-
-
-
- - < - Footer - - - - > - -
-
-
- - < - ButtonGroup - - - - - - style - - - = - - { - - { - - - padding - - - : - - 10 - - } - - } - - - - - - - > - -
-
-
- - < - WithTheme(Button) - - - - > - -
-
- - Cancel - -
-
- - </ - WithTheme(Button) - > - -
-
-
-
- - < - WithTheme(Button) - - - - - - flat - - - - - - nature - - - = - - " - - primary - - " - - - - - - - > - -
-
- - Confirm - -
-
- - </ - WithTheme(Button) - > - -
-
-
- - </ - ButtonGroup - > - -
-
-
- - </ - Footer - > - -
-
-
- - </ - Card - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - ButtonGroup - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- marginHorizontal - - - unknown - - - - - - - 5px - - -
- style - - - unknown - - - - - - - null - - -
-
-
-

- " - Card - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- width - - - unknown - - - - - - - auto - - -
- height - - - unknown - - - - - - - auto - - -
- shadow - - - unknown - - - - - - - false - - -
-
-
-

- " - Container - " Component -

- - No propTypes defined! - -
-
-

- " - Footer - " Component -

- - No propTypes defined! - -
-
-

- " - Header - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- title - - - unknown - - - - - - - null - - -
- image - - - unknown - - - - - - - null - - -
- badge - - - unknown - - - - - - - null - - -
- titleStyle - - - unknown - - - - - - - null - - -
-
-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Card With Icon 1`] = ` -
-
-
-
- - - -
- Congrats -
-
- Let’s Get Started -
-
-
-
- -
-
-
-
- -
- -
-
-
-

- Components | Card -

-

- With Icon -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Card - - - - - - width - - - = - - " - - 300px - - " - - - - - - - > - -
-
-
- - < - Container - - - - - - style - - - = - - { - - { - - - textAlign - - - : - - 'center' - - } - - } - - - - - - - > - -
-
- - < - Cp - - - - - - name - - - = - - " - - thumbs-up - - " - - - - - - - size - - - = - - " - - 90 - - " - - - - - - - color - - - = - - " - - #0e86fe - - " - - - - - - - /> - -
-
-
- - < - div - - - - - - style - - - = - - { - - { - - -
- - -
- - fontSize - -
- : - - '1.25rem' - - , - - -
- - -
- - lineHeight - -
- : - - '1.5rem' - - , - - -
- - -
- - overflow - -
- : - - 'hidden' - - , - - -
- - -
- … -
- -
- -
- } -
- } -
-
- -
-
- - > - -
-
- - Congrats - -
-
- - </ - div - > - -
-
-
-
- - < - div - - - - - - style - - - = - - { - - { - - - fontSize - - - : - - '0.93333rem' - - , - - - lineHeight - - - : - - '1.25rem' - - , - - - paddingTop - - - : - - '10px' - - } - - } - - - - - - - > - -
-
- - Let’s Get Started - -
-
- - </ - div - > - -
-
-
- - </ - Container - > - -
-
-
-
- - < - Footer - - - - > - -
-
-
- - < - FooterButton - - - - - - primary - - - - - - > - -
-
- - Confirm - -
-
- - </ - FooterButton - > - -
-
-
- - </ - Footer - > - -
-
-
- - </ - Card - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - Card - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- width - - - unknown - - - - - - - auto - - -
- height - - - unknown - - - - - - - auto - - -
- shadow - - - unknown - - - - - - - false - - -
-
-
-

- " - Container - " Component -

- - No propTypes defined! - -
-
-

- " - Cp - " Component -

- - No propTypes defined! - -
-
-

- " - Footer - " Component -

- - No propTypes defined! - -
-
-

- " - FooterButton - " Component -

- - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- primary - - - unknown - - - - - - - false - - -
-
-
-
-
-
-
-`; - -exports[`Storyshots Components | Card With Link Button 1`] = ` -
-
-
-
-
- Title -
-
-
- Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. -
-
-
- - -
-
-
-
- -
- -
-
-
-

- Components | Card -

-

- With Link Button -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - Card - - - - - - width - - - = - - " - - 300px - - " - - - - - - - height - - - = - - " - - 220px - - " - - - - - - - > - -
-
- - < - Header - - - - - - title - - - = - - " - - Title - - " - - - - - - - /> - -
-
-
- - < - Container - - - - > - -
-
- - Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. - -
-
- - </ - Container - > - -
-
-
-
- - < - Footer - - - - > - -
-
-
- - < - ButtonGroup - - - - - - style - - - = - - { - - { - - - padding - - - : - - 10 - - } - - } - - - - - - - > - -
-
-
- - < - WithTheme(Button) - - - - - - link - - - - - - > - -
-
- - Cancel - -
-
- - </ - WithTheme(Button) - > - -
-
-
-
- - < - WithTheme(Button) - - - - - - link - - - - - - nature - - - = - - " - - primary - - " - - - - - - - > - -
-
- - Confirm - -
-
- - </ - WithTheme(Button) - > - -
-
-
- - </ - ButtonGroup - > - -
-
-
- - </ - Footer - > - -
-
-
- - </ - Card - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - ButtonGroup - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- marginHorizontal - - - unknown - - - - - - - 5px - - -
- style - - - unknown - - - - - - - null - - -
-
-
-

- " - Card - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- width - - - unknown - - - - - - - auto - - -
- height - - - unknown - - - - - - - auto - - -
- shadow - - - unknown - - - - - - - false - - -
-
-
-

- " - Container - " Component -

- - No propTypes defined! - -
-
-

- " - Footer - " Component -

- - No propTypes defined! - -
-
-

- " - Header - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- title - - - unknown - - - - - - - null - - -
- image - - - unknown - - - - - - - null - - -
- badge - - - unknown - - - - - - - null - - -
- titleStyle - - - unknown - - - - - - - null - - -
-
-
-

- " - WithTheme(Button) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Checkbox Checkbox 1`] = ` -
-
- -
- -
- -
-
-
-

- Components | Checkbox -

-

- Checkbox -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
- - < - WithTheme(Checkbox) - - - - - - isRound - - - = - - { - - false - - } - - - - - - - isDisabled - - - = - - { - - false - - } - - - - - - - label - - - = - - " - - Label - - " - - - - - - - /> - -
-
- -
-
-
-

- Prop Types -

-
-

- " - WithTheme(Checkbox) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Checkbox CheckboxGroup 1`] = ` -
-
-
- - - -
-
- -
- -
-
-
-

- Components | Checkbox -

-

- CheckboxGroup -

-
-
-
- info -
-
-
-

- Story Source -

-
-            
-
-
- - < - CheckboxGroup - - - - > - -
-
- - < - WithTheme(Checkbox) - - - - - - isRound - - - = - - { - - false - - } - - - - - - - isDisabled - - - = - - { - - false - - } - - - - - - - label - - - = - - " - - Label - - " - - - - - - - /> - -
-
- - < - WithTheme(Checkbox) - - - - - - isRound - - - = - - { - - false - - } - - - - - - - isDisabled - - - = - - { - - false - - } - - - - - - - label - - - = - - " - - Label - - " - - - - - - - /> - -
-
- - < - WithTheme(Checkbox) - - - - - - isRound - - - = - - { - - false - - } - - - - - - - isDisabled - - - = - - { - - false - - } - - - - - - - label - - - = - - " - - Label - - " - - - - - - - /> - -
-
- - </ - CheckboxGroup - > - -
-
-
- -
-
-
-

- Prop Types -

-
-

- " - CheckboxGroup - " Component -

- - No propTypes defined! - -
-
-

- " - WithTheme(Checkbox) - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Components | Form Full Example 1`] = ` -
-
-
-
- - Username - -
- -
-
-
- - Fullname - -
-
-
- -
-
-
-
- -
-
-
-
-
- - Birthday - -
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
- - Website - -
-
-
- http:// -
-
-
-
- -
-
-
-
-
- - Comment - -