-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #663 from CraveFood/storybook
Update storybook to the latest version
- Loading branch information
Showing
90 changed files
with
6,531 additions
and
7,529 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import registerRequireContextHook from "babel-plugin-require-context-hook/register"; | ||
| registerRequireContextHook(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| module.exports = api => { | ||
| api.cache(true); | ||
| return { | ||
| presets: ["@babel/preset-env", "@babel/preset-react"], | ||
| plugins: [ | ||
| // Stage 2 plugins | ||
| ["@babel/plugin-proposal-decorators", { legacy: true }], | ||
| "@babel/plugin-proposal-function-sent", | ||
| "@babel/plugin-proposal-export-namespace-from", | ||
| "@babel/plugin-proposal-numeric-separator", | ||
| "@babel/plugin-proposal-throw-expressions", | ||
| // Stage 3 plugins | ||
| "@babel/plugin-syntax-dynamic-import", | ||
| "@babel/plugin-syntax-import-meta", | ||
| ["@babel/plugin-proposal-class-properties", { loose: false }], | ||
| "@babel/plugin-proposal-json-strings" | ||
| ], | ||
| env: { | ||
| test: { | ||
| plugins: ["babel-plugin-require-context-hook"] | ||
| } | ||
| }, | ||
| //allow imports from transpiled farmblocks packages | ||
| sourceType: "unambiguous" | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1,91 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { storiesOf } from "@storybook/react"; | ||
| import { withInfo } from "@storybook/addon-info"; | ||
| import { action } from "@storybook/addon-actions"; | ||
|
|
||
| import Alert from "."; | ||
| import { POSITIVE, NEWS, NEGATIVE, ATTENTION } from "./constants/alertTypes"; | ||
|
|
||
| const ExtendedAlert = styled(Alert)` | ||
| const StyledAlert = styled(Alert)` | ||
| transform: rotate(5deg); | ||
| `; | ||
|
|
||
| const ExtendedAlert = props => <StyledAlert {...props} />; | ||
|
|
||
| storiesOf("Alert", module) | ||
| .add( | ||
| "default", | ||
| withInfo()(() => ( | ||
| <Alert text="Default is set to news type, and have default onDismiss function that hides the alert." /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "default at bottom", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| bottomAligned | ||
| text="Default is set to news type, and have default onDismiss function that hides the alert." | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "visibleTime 2 seconds", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| text="This message will self-destruct in 2 seconds" | ||
| visibleTime={2000} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "non dismissable", | ||
| withInfo()(() => <Alert dismissable={false} text="I can't be dismissed!" />) | ||
| ) | ||
| .add( | ||
| "with custom z-index", | ||
| withInfo()(() => ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| width: 120, | ||
| height: 120, | ||
| position: "absolute", | ||
| zIndex: 10, | ||
| background: "gray" | ||
| }} | ||
| /> | ||
| <div | ||
| style={{ | ||
| width: 100, | ||
| height: 100, | ||
| position: "absolute", | ||
| zIndex: 12, | ||
| background: "rgba(0, 0, 0, 0.7)" | ||
| }} | ||
| /> | ||
| <Alert text="should display between the two" zIndex={11} /> | ||
| </div> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type positive", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={POSITIVE} | ||
| text="Positive alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type news", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEWS} | ||
| text="New alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type negative", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEGATIVE} | ||
| text="Negative alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| .add("default", () => ( | ||
| <Alert text="Default is set to news type, and have default onDismiss function that hides the alert." /> | ||
| )) | ||
| .add("default at bottom", () => ( | ||
| <Alert | ||
| bottomAligned | ||
| text="Default is set to news type, and have default onDismiss function that hides the alert." | ||
| /> | ||
| )) | ||
| .add("visibleTime 2 seconds", () => ( | ||
| <Alert | ||
| text="This message will self-destruct in 2 seconds" | ||
| visibleTime={2000} | ||
| /> | ||
| )) | ||
| .add("non dismissable", () => ( | ||
| <Alert dismissable={false} text="I can't be dismissed!" /> | ||
| )) | ||
| .add("with custom z-index", () => ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| width: 120, | ||
| height: 120, | ||
| position: "absolute", | ||
| zIndex: 10, | ||
| background: "gray" | ||
| }} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type attention", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={ATTENTION} | ||
| text="Attention alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| <div | ||
| style={{ | ||
| width: 100, | ||
| height: 100, | ||
| position: "absolute", | ||
| zIndex: 12, | ||
| background: "rgba(0, 0, 0, 0.7)" | ||
| }} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "extended style", | ||
| withInfo()(() => ( | ||
| <ExtendedAlert text="Extended with 'transform: rotate(5deg)'" /> | ||
| )) | ||
| ); | ||
| <Alert text="should display between the two" zIndex={11} /> | ||
| </div> | ||
| )) | ||
| .add("type positive", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={POSITIVE} | ||
| text="Positive alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type news", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEWS} | ||
| text="New alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type negative", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEGATIVE} | ||
| text="Negative alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type attention", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={ATTENTION} | ||
| text="Attention alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("extended style", () => ( | ||
| <ExtendedAlert text="Extended with 'transform: rotate(5deg)'" /> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,16 @@ | ||
| import React from "react"; | ||
| import { storiesOf } from "@storybook/react"; | ||
| import { withInfo } from "@storybook/addon-info"; | ||
|
|
||
| import BrieflyDisplay from "./BrieflyDisplay"; | ||
|
|
||
| storiesOf("Alert (private)/BrieflyDisplay", module) | ||
| .add( | ||
| "default", | ||
| withInfo()(() => ( | ||
| <BrieflyDisplay> | ||
| <p>this text should be displayed for the default time</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| ) | ||
| .add( | ||
| "display for 5 seconds", | ||
| withInfo()(() => ( | ||
| <BrieflyDisplay time={5000}> | ||
| <p>This text should be displayed for 5 seconds</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| ); | ||
| .add("default", () => ( | ||
| <BrieflyDisplay> | ||
| <p>this text should be displayed for the default time</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| .add("display for 5 seconds", () => ( | ||
| <BrieflyDisplay time={5000}> | ||
| <p>This text should be displayed for 5 seconds</p> | ||
| </BrieflyDisplay> | ||
| )); |
Oops, something went wrong.