diff options
Diffstat (limited to 'app/components/button')
-rw-r--r-- | app/components/button/button.presets.ts | 16 | ||||
-rw-r--r-- | app/components/button/button.props.ts | 11 | ||||
-rw-r--r-- | app/components/button/button.story.tsx | 44 | ||||
-rw-r--r-- | app/components/button/button.tsx | 12 |
4 files changed, 55 insertions, 28 deletions
diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts index b140fd2..bc0ad3f 100644 --- a/app/components/button/button.presets.ts +++ b/app/components/button/button.presets.ts @@ -1,5 +1,5 @@ -import { ViewStyle, TextStyle } from "react-native" -import { color, spacing } from "../../theme" +import { ViewStyle, TextStyle } from 'react-native' +import { color, spacing } from '../../theme' /** * All text will start off looking like this. @@ -8,8 +8,8 @@ const BASE_VIEW: ViewStyle = { paddingVertical: spacing[2], paddingHorizontal: spacing[2], borderRadius: 4, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', } const BASE_TEXT: TextStyle = { @@ -34,12 +34,16 @@ export const viewPresets: Record<string, ViewStyle> = { ...BASE_VIEW, paddingHorizontal: 0, paddingVertical: 0, - alignItems: "flex-start", + alignItems: 'flex-start', } as ViewStyle, } export const textPresets: Record<ButtonPresetNames, TextStyle> = { - primary: { ...BASE_TEXT, fontSize: 9, color: color.palette.white } as TextStyle, + primary: { + ...BASE_TEXT, + fontSize: 9, + color: color.palette.white, + } as TextStyle, link: { ...BASE_TEXT, color: color.text, diff --git a/app/components/button/button.props.ts b/app/components/button/button.props.ts index 1377a7e..5f26136 100644 --- a/app/components/button/button.props.ts +++ b/app/components/button/button.props.ts @@ -1,6 +1,11 @@ -import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native" -import { ButtonPresetNames } from "./button.presets" -import { TxKeyPath } from "../../i18n" +import { + StyleProp, + TextStyle, + TouchableOpacityProps, + ViewStyle, +} from 'react-native' +import { ButtonPresetNames } from './button.presets' +import { TxKeyPath } from '../../i18n' export interface ButtonProps extends TouchableOpacityProps { /** diff --git a/app/components/button/button.story.tsx b/app/components/button/button.story.tsx index 4861772..5dc21c1 100644 --- a/app/components/button/button.story.tsx +++ b/app/components/button/button.story.tsx @@ -1,30 +1,48 @@ -import * as React from "react" -import { ViewStyle, TextStyle, Alert } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Button } from "./button" +import * as React from 'react' +import { ViewStyle, TextStyle, Alert } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Button } from './button' declare let module -const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }] +const buttonStyleArray: ViewStyle[] = [ + { paddingVertical: 100 }, + { borderRadius: 0 }, +] -const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: "#a511dc" }] +const buttonTextStyleArray: TextStyle[] = [ + { fontSize: 20 }, + { color: '#a511dc' }, +] -storiesOf("Button", module) +storiesOf('Button', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary button."> - <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} /> + <Button + text="Click It" + preset="primary" + onPress={() => Alert.alert('pressed')} + /> </UseCase> - <UseCase text="Disabled" usage="The disabled behaviour of the primary button."> - <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} disabled /> + <UseCase + text="Disabled" + usage="The disabled behaviour of the primary button." + > + <Button + text="Click It" + preset="primary" + onPress={() => Alert.alert('pressed')} + disabled + /> </UseCase> <UseCase text="Array Style" usage="Button with array style"> <Button text="Click It" preset="primary" - onPress={() => Alert.alert("pressed")} + onPress={() => Alert.alert('pressed')} style={buttonStyleArray} textStyle={buttonTextStyleArray} /> diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx index a5662ff..03b8f85 100644 --- a/app/components/button/button.tsx +++ b/app/components/button/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { TouchableOpacity } from "react-native" -import { Text } from "../text/text" -import { viewPresets, textPresets } from "./button.presets" -import { ButtonProps } from "./button.props" +import * as React from 'react' +import { TouchableOpacity } from 'react-native' +import { Text } from '../text/text' +import { viewPresets, textPresets } from './button.presets' +import { ButtonProps } from './button.props' /** * For your text displaying needs. @@ -12,7 +12,7 @@ import { ButtonProps } from "./button.props" export function Button(props: ButtonProps) { // grab the props const { - preset = "primary", + preset = 'primary', tx, text, style: styleOverride, |