diff options
Diffstat (limited to 'app/components/form-row/form-row.story.tsx')
-rw-r--r-- | app/components/form-row/form-row.story.tsx | 46 |
1 files changed, 27 insertions, 19 deletions
diff --git a/app/components/form-row/form-row.story.tsx b/app/components/form-row/form-row.story.tsx index 509afbb..97e43a2 100644 --- a/app/components/form-row/form-row.story.tsx +++ b/app/components/form-row/form-row.story.tsx @@ -1,23 +1,23 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Text, FormRow } from "../" -import { color } from "../../theme/color" -import { ViewStyle } from "react-native" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Text, FormRow } from '../' +import { color } from '../../theme/color' +import { ViewStyle } from 'react-native' declare let module const TEXT_STYLE_OVERRIDE = { color: color.storybookTextColor, } -const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: "#32cd32" }] +const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }] -storiesOf("FormRow", module) +storiesOf('FormRow', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Assembled", () => ( + .add('Assembled', () => ( <Story> <UseCase text="Fully Assembled" @@ -30,9 +30,10 @@ storiesOf("FormRow", module) </FormRow> <FormRow preset="middle"> <Text style={TEXT_STYLE_OVERRIDE}> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum - impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt - possimus incidunt, obcaecati numquam officiis. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi + officia quo rerum impedit asperiores hic ex quae, quam dolores vel + odit doloribus, tempore atque deserunt possimus incidunt, obcaecati + numquam officiis. </Text> </FormRow> <FormRow preset="middle"> @@ -47,20 +48,25 @@ storiesOf("FormRow", module) <UseCase text="Alternatives" usage="Less commonly used presets."> <FormRow preset="clear"> <Text style={TEXT_STYLE_OVERRIDE}> - My borders are still there, but they are clear. This causes the text to still align - properly due to the box model of flexbox. + My borders are still there, but they are clear. This causes the text + to still align properly due to the box model of flexbox. </Text> </FormRow> <FormRow preset="soloRound"> <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text> </FormRow> - <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: "#ffe" }}> - <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text> + <FormRow + preset="soloStraight" + style={{ marginTop: 10, backgroundColor: '#ffe' }} + > + <Text style={TEXT_STYLE_OVERRIDE}> + I'm square and have a custom style. + </Text> </FormRow> </UseCase> </Story> )) - .add("Presets", () => ( + .add('Presets', () => ( <Story> <UseCase text="top" usage="The top of a form."> <FormRow preset="top"> @@ -70,7 +76,9 @@ storiesOf("FormRow", module) </UseCase> <UseCase text="middle" usage="A row in the middle of a form."> <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text> + <Text style={TEXT_STYLE_OVERRIDE}> + No curves and empty at the bottom. + </Text> </FormRow> </UseCase> <UseCase text="bottom" usage="The bottom of a form."> @@ -96,7 +104,7 @@ storiesOf("FormRow", module) </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="Style array" usage="Form row with an array of styles"> <FormRow preset="soloStraight" style={arrayStyle}> |