From bdde4f589a3acf1eb50d9a3da710dc1742a6a20c Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 6 Nov 2023 11:51:31 -0800 Subject: [PATCH 01/61] Finished all variants --- .../.storybook/native/storybook.requires.js | 1 + .../components/VAButton/VAButton.stories.tsx | 55 +++++++++ .../src/components/VAButton/VAButton.tsx | 110 ++++++++++++++++++ 3 files changed, 166 insertions(+) create mode 100644 packages/components/src/components/VAButton/VAButton.stories.tsx create mode 100644 packages/components/src/components/VAButton/VAButton.tsx diff --git a/packages/components/.storybook/native/storybook.requires.js b/packages/components/.storybook/native/storybook.requires.js index e8f664cb..b2887948 100644 --- a/packages/components/.storybook/native/storybook.requires.js +++ b/packages/components/.storybook/native/storybook.requires.js @@ -55,6 +55,7 @@ try { const getStories = () => { return { "./src/components/SegmentedControl/SegmentedControl.stories.tsx": require("../../src/components/SegmentedControl/SegmentedControl.stories.tsx"), + "./src/components/VAButton/VAButton.stories.tsx": require("../../src/components/VAButton/VAButton.stories.tsx"), }; }; diff --git a/packages/components/src/components/VAButton/VAButton.stories.tsx b/packages/components/src/components/VAButton/VAButton.stories.tsx new file mode 100644 index 00000000..8fc9216f --- /dev/null +++ b/packages/components/src/components/VAButton/VAButton.stories.tsx @@ -0,0 +1,55 @@ +import { Meta, StoryObj } from '@storybook/react-native' +import { VAButton, VAButtonProps } from './VAButton' +import { View } from 'react-native' +import React from 'react' + +const meta: Meta = { + title: 'VAButton', + component: VAButton, + argTypes: { + onPress: { + action: 'onPress event', + }, + }, + + decorators: [ + (Story) => ( + + + + ), + ], +} + +export default meta + +type Story = StoryObj + +export const Primary: Story = { + storyName: 'Primary', + args: { + text: 'Button text', + }, +} + +export const Secondary: Story = { + storyName: 'Secondary', + args: { + secondary: true, + text: 'Button text', + }, +} + +export const Destructive: Story = { + storyName: 'Destructive', + args: { + destructive: true, + text: 'Button text', + }, +} diff --git a/packages/components/src/components/VAButton/VAButton.tsx b/packages/components/src/components/VAButton/VAButton.tsx new file mode 100644 index 00000000..fbb0c0b8 --- /dev/null +++ b/packages/components/src/components/VAButton/VAButton.tsx @@ -0,0 +1,110 @@ +import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens' +import { + Pressable, + PressableStateCallbackType, + Text, + TextStyle, + ViewStyle, + useColorScheme, +} from 'react-native' +import React from 'react' + +import { webStorybookColorScheme } from '../../utils' + +export type VAButtonProps = { + onPress?: () => void + text: string + secondary?: boolean + destructive?: boolean + disabled?: boolean +} + +export const VAButton: React.FC = ({ + onPress, + text, + secondary, + destructive, + disabled, +}) => { + const colorScheme = webStorybookColorScheme() || useColorScheme() + let bgColor: string, + bgColorPressed: string, + textColor: string, + textColorPressed: string, + borderColor: string = 'none', + borderColorPressed: string = 'none' + + if (colorScheme === 'light') { + bgColor = '#005EA2' + bgColorPressed = '#162E51' + textColor = DesignTokens.colorGrayLightest + textColorPressed = DesignTokens.colorGrayLightest + + if (destructive) { + bgColor = '#B50909' + bgColorPressed = '#5C1111' + } else if (secondary) { + bgColor = DesignTokens.colorWhite + bgColorPressed = DesignTokens.colorWhite + borderColor = '#005EA2' + borderColorPressed = '#162E51' + textColor = '#005EA2' + textColorPressed = '#162E51' + } + } else { + bgColor = '#58B4FF' + bgColorPressed = '#E1F3F8' + textColor = '#000000' + textColorPressed = '#000000' + + if (destructive) { + bgColor = '#FB5A47' + bgColorPressed = '#F9DEDE' + } else if (secondary) { + bgColor = '#000' + bgColorPressed = '#000' + borderColor = '#005EA2' + borderColorPressed = DesignTokens.colorWhite + textColor = '#58B4FF' + textColorPressed = DesignTokens.colorWhite + } + } + + const getBackgroundStyle = ({ + pressed, + }: PressableStateCallbackType): ViewStyle => ({ + alignSelf: 'stretch', + alignItems: 'center', + padding: 10, + backgroundColor: pressed ? bgColorPressed : bgColor, + borderRadius: 4, + borderWidth: secondary ? 2 : 0, + borderColor: secondary + ? pressed + ? borderColorPressed + : borderColor + : 'none', + }) + + const getTextStyle = (pressed: boolean): TextStyle => { + // TODO: Replace with typography tokens + const font: TextStyle = { + fontFamily: 'SourceSansPro-Bold', + fontSize: 20, + lineHeight: 30, + } + + return { + ...font, + color: pressed ? textColorPressed : textColor, + } + } + + return ( + + {({ pressed }: PressableStateCallbackType) => ( + {text} + )} + + ) +} From 4c5dca316fe4f57e4307c9e2f4e5a1210bd91cb4 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 7 Nov 2023 17:32:04 -0800 Subject: [PATCH 02/61] Refactor to use buttonType. Add white variant --- .../components/VAButton/VAButton.stories.tsx | 21 +++-- .../src/components/VAButton/VAButton.tsx | 79 ++++++++++++++----- 2 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/components/src/components/VAButton/VAButton.stories.tsx b/packages/components/src/components/VAButton/VAButton.stories.tsx index 8fc9216f..665ba8d9 100644 --- a/packages/components/src/components/VAButton/VAButton.stories.tsx +++ b/packages/components/src/components/VAButton/VAButton.stories.tsx @@ -1,5 +1,5 @@ +import { ButtonTypesConstants, VAButton, VAButtonProps } from './VAButton' import { Meta, StoryObj } from '@storybook/react-native' -import { VAButton, VAButtonProps } from './VAButton' import { View } from 'react-native' import React from 'react' @@ -34,22 +34,31 @@ type Story = StoryObj export const Primary: Story = { storyName: 'Primary', args: { - text: 'Button text', + label: 'Button text', }, } export const Secondary: Story = { storyName: 'Secondary', args: { - secondary: true, - text: 'Button text', + buttonType: ButtonTypesConstants.buttonSecondary, + + label: 'Button text', }, } export const Destructive: Story = { storyName: 'Destructive', args: { - destructive: true, - text: 'Button text', + buttonType: ButtonTypesConstants.buttonDestructive, + label: 'Button text', + }, +} + +export const White: Story = { + storyName: 'White', + args: { + buttonType: ButtonTypesConstants.buttonWhite, + label: 'Button text', }, } diff --git a/packages/components/src/components/VAButton/VAButton.tsx b/packages/components/src/components/VAButton/VAButton.tsx index fbb0c0b8..4d9d4059 100644 --- a/packages/components/src/components/VAButton/VAButton.tsx +++ b/packages/components/src/components/VAButton/VAButton.tsx @@ -1,5 +1,6 @@ import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens' import { + AccessibilityState, Pressable, PressableStateCallbackType, Text, @@ -11,22 +12,52 @@ import React from 'react' import { webStorybookColorScheme } from '../../utils' +export const ButtonTypesConstants: { + buttonPrimary: ButtonTypes + buttonSecondary: ButtonTypes + buttonDestructive: ButtonTypes + buttonWhite: ButtonTypes +} = { + buttonPrimary: 'buttonPrimary', + buttonSecondary: 'buttonSecondary', + buttonDestructive: 'buttonDestructive', + buttonWhite: 'buttonWhite', +} + +export type ButtonTypes = + | 'buttonPrimary' + | 'buttonSecondary' + | 'buttonDestructive' + | 'buttonWhite' + export type VAButtonProps = { - onPress?: () => void - text: string - secondary?: boolean - destructive?: boolean - disabled?: boolean + /** text appearing in the button */ + label: string + /** function called when button is pressed */ + onPress: () => void + /** optional accessibility state */ + accessibilityState?: AccessibilityState + /** text to use as the accessibility hint */ + a11yHint?: string + /** specifies button styling type. defaults to primary if none specified */ + buttonType?: ButtonTypes + /** a string value used to set the buttons testID/accessibility label */ + testID?: string } export const VAButton: React.FC = ({ + label, onPress, - text, - secondary, - destructive, - disabled, + accessibilityState, + a11yHint, + buttonType, + testID, }) => { const colorScheme = webStorybookColorScheme() || useColorScheme() + const isDestructive = buttonType === ButtonTypesConstants.buttonDestructive + const isSecondary = buttonType === ButtonTypesConstants.buttonSecondary + const isWhite = buttonType === ButtonTypesConstants.buttonWhite + let bgColor: string, bgColorPressed: string, textColor: string, @@ -34,16 +65,20 @@ export const VAButton: React.FC = ({ borderColor: string = 'none', borderColorPressed: string = 'none' - if (colorScheme === 'light') { + if (isWhite) { + bgColor = DesignTokens.colorWhite + bgColorPressed = '#ffffffb3' + textColor = '#003e73' + } else if (colorScheme === 'light') { bgColor = '#005EA2' bgColorPressed = '#162E51' textColor = DesignTokens.colorGrayLightest textColorPressed = DesignTokens.colorGrayLightest - if (destructive) { + if (isDestructive) { bgColor = '#B50909' bgColorPressed = '#5C1111' - } else if (secondary) { + } else if (isSecondary) { bgColor = DesignTokens.colorWhite bgColorPressed = DesignTokens.colorWhite borderColor = '#005EA2' @@ -57,10 +92,10 @@ export const VAButton: React.FC = ({ textColor = '#000000' textColorPressed = '#000000' - if (destructive) { + if (isDestructive) { bgColor = '#FB5A47' bgColorPressed = '#F9DEDE' - } else if (secondary) { + } else if (isSecondary) { bgColor = '#000' bgColorPressed = '#000' borderColor = '#005EA2' @@ -78,8 +113,8 @@ export const VAButton: React.FC = ({ padding: 10, backgroundColor: pressed ? bgColorPressed : bgColor, borderRadius: 4, - borderWidth: secondary ? 2 : 0, - borderColor: secondary + borderWidth: isSecondary ? 2 : 0, + borderColor: isSecondary ? pressed ? borderColorPressed : borderColor @@ -101,9 +136,17 @@ export const VAButton: React.FC = ({ } return ( - + {({ pressed }: PressableStateCallbackType) => ( - {text} + {label} )} ) From 73615cbe8ed308773da3056de6f6e6d64472ed7e Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 7 Nov 2023 17:32:18 -0800 Subject: [PATCH 03/61] Add unit tests --- .../src/components/VAButton/VAButton.test.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 packages/components/src/components/VAButton/VAButton.test.tsx diff --git a/packages/components/src/components/VAButton/VAButton.test.tsx b/packages/components/src/components/VAButton/VAButton.test.tsx new file mode 100644 index 00000000..aff2e68b --- /dev/null +++ b/packages/components/src/components/VAButton/VAButton.test.tsx @@ -0,0 +1,39 @@ +import 'react-native' +import { RenderAPI, fireEvent, render } from '@testing-library/react-native' +import React from 'react' +// Note: test renderer must be required after react-native. +import 'jest-styled-components' +import { ReactTestInstance } from 'react-test-renderer' + +import { VAButton } from './VAButton' + +describe('VAButton', () => { + let component: RenderAPI + let testInstance: ReactTestInstance + + const onPressSpy = jest.fn() + + const initializeTestInstance = (): void => { + component = render() + + testInstance = component.UNSAFE_root + } + + beforeEach(() => { + initializeTestInstance() + }) + + it('initializes correctly', async () => { + expect(component).toBeTruthy() + }) + + it('should call onChange', async () => { + fireEvent.press(testInstance) + expect(onPressSpy).toBeCalled() + }) + + it('should render label', async () => { + component.debug() + expect(component.findByText('Button text')).toBeTruthy() + }) +}) From 6e4cac882f92da30291d5f38ed0efa157eb020b5 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 10:13:22 -0800 Subject: [PATCH 04/61] Add color tokens --- packages/tokens/src/tokens/colors.json | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index 074f05f9..42990712 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -1,11 +1,26 @@ { "color": { + "primary": { + "alt": { + "lightest": { + "value": "#e1f3f8" + } + } + }, + "secondary": { + "lightest": { + "value": "#f9dede" + } + }, "white": { "value": "#fff", "attributes": { "category": "color" } }, + "black": { + "value": "#000000" + }, "gray": { "*": { "value": "#5b616b", @@ -197,6 +212,21 @@ "cool-light" ] } + }, + "uswds-system-color-blue-vivid-60": { + "value": "#005ea2" + }, + "uswds-system-color-blue-warm-vivid-80": { + "value": "#162e51" + }, + "uswds-system-color-red-vivid-40": { + "value": "#b50909" + }, + "uswds-system-color-red-vivid-60": { + "value": "#b50909" + }, + "uswds-system-color-red-vivid-80": { + "value": "#b50909" } } } From 60208d3ad2d01cb74ebac217a7f5d100286f303c Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 18:16:31 +0000 Subject: [PATCH 05/61] Version bump: tokens-v0.0.13-alpha.0 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 4d5478f8..0c517671 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.0.12", + "version": "0.0.13-alpha.0", "description": "VA Design System Mobile Token Library", "main": "dist/js/tokens.js", "types": "dist/index.d.ts", From 1265e91ba8e47a2ba8489fe33710f3c43dde0e2f Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 10:22:58 -0800 Subject: [PATCH 06/61] Fix red color values --- packages/tokens/src/tokens/colors.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index 42990712..f62bbb9a 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -220,13 +220,13 @@ "value": "#162e51" }, "uswds-system-color-red-vivid-40": { - "value": "#b50909" + "value": "#FB5A47" }, "uswds-system-color-red-vivid-60": { "value": "#b50909" }, "uswds-system-color-red-vivid-80": { - "value": "#b50909" + "value": "#5C1111" } } } From 20e4377a8a51625935d9d660d4eb4e38293fb572 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 10:27:18 -0800 Subject: [PATCH 07/61] Add primary-darker color --- packages/tokens/src/tokens/colors.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index f62bbb9a..b5695f34 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -1,6 +1,9 @@ { "color": { "primary": { + "darker": { + "value": "#003e73" + }, "alt": { "lightest": { "value": "#e1f3f8" From f8e311aadb6595be773f30bb975cf3b91f1cb721 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 18:31:12 +0000 Subject: [PATCH 08/61] Version bump: tokens-v0.0.13-alpha.2 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 0c517671..9abe4fe0 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.0.13-alpha.0", + "version": "0.0.13-alpha.2", "description": "VA Design System Mobile Token Library", "main": "dist/js/tokens.js", "types": "dist/index.d.ts", From cee8a515395327b61fa9fd3a93cd6c2c97be3912 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 10:43:59 -0800 Subject: [PATCH 09/61] Add blue-vivid-30 --- packages/tokens/src/tokens/colors.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index b5695f34..d5b8b724 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -216,6 +216,9 @@ ] } }, + "uswds-system-color-blue-vivid-30": { + "value": "#58b4ff" + }, "uswds-system-color-blue-vivid-60": { "value": "#005ea2" }, From fba51b8ade3dafc4296411a132bbcc6480192a09 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 18:47:06 +0000 Subject: [PATCH 10/61] Version bump: tokens-v0.0.13-alpha.3 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 9abe4fe0..11f58933 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.0.13-alpha.2", + "version": "0.0.13-alpha.3", "description": "VA Design System Mobile Token Library", "main": "dist/js/tokens.js", "types": "dist/index.d.ts", From 279daaf2c1a9457e988472496d298ca883129c14 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 19:10:53 +0000 Subject: [PATCH 11/61] Version bump: tokens-v0.1.0 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 11f58933..c3f6d11e 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.0.13-alpha.3", + "version": "0.1.0", "description": "VA Design System Mobile Token Library", "main": "dist/js/tokens.js", "types": "dist/index.d.ts", From 96971bf03ee6af2ffbe9582dbd9049af7ad6e613 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 11:12:12 -0800 Subject: [PATCH 12/61] Use tokenized colors --- .../src/components/VAButton/VAButton.tsx | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/components/src/components/VAButton/VAButton.tsx b/packages/components/src/components/VAButton/VAButton.tsx index 4d9d4059..6c5f9e7e 100644 --- a/packages/components/src/components/VAButton/VAButton.tsx +++ b/packages/components/src/components/VAButton/VAButton.tsx @@ -66,41 +66,42 @@ export const VAButton: React.FC = ({ borderColorPressed: string = 'none' if (isWhite) { + // This is a one-off, mobile app only variant. Colors are not tokenized bgColor = DesignTokens.colorWhite bgColorPressed = '#ffffffb3' textColor = '#003e73' } else if (colorScheme === 'light') { - bgColor = '#005EA2' - bgColorPressed = '#162E51' + bgColor = DesignTokens.colorUswdsSystemColorBlueVivid60 + bgColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 textColor = DesignTokens.colorGrayLightest textColorPressed = DesignTokens.colorGrayLightest if (isDestructive) { - bgColor = '#B50909' - bgColorPressed = '#5C1111' + bgColor = DesignTokens.colorUswdsSystemColorRedVivid60 + bgColorPressed = DesignTokens.colorUswdsSystemColorRedVivid80 } else if (isSecondary) { bgColor = DesignTokens.colorWhite bgColorPressed = DesignTokens.colorWhite - borderColor = '#005EA2' - borderColorPressed = '#162E51' - textColor = '#005EA2' - textColorPressed = '#162E51' + borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60 + borderColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 + textColor = DesignTokens.colorUswdsSystemColorBlueVivid60 + textColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 } } else { - bgColor = '#58B4FF' - bgColorPressed = '#E1F3F8' - textColor = '#000000' - textColorPressed = '#000000' + bgColor = DesignTokens.colorUswdsSystemColorBlueVivid30 + bgColorPressed = DesignTokens.colorPrimaryAltLightest + textColor = DesignTokens.colorBlack + textColorPressed = DesignTokens.colorBlack if (isDestructive) { - bgColor = '#FB5A47' - bgColorPressed = '#F9DEDE' + bgColor = DesignTokens.colorUswdsSystemColorRedVivid40 + bgColorPressed = DesignTokens.colorSecondaryLightest } else if (isSecondary) { - bgColor = '#000' - bgColorPressed = '#000' - borderColor = '#005EA2' + bgColor = DesignTokens.colorBlack + bgColorPressed = DesignTokens.colorBlack + borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60 borderColorPressed = DesignTokens.colorWhite - textColor = '#58B4FF' + textColor = DesignTokens.colorUswdsSystemColorBlueVivid30 textColorPressed = DesignTokens.colorWhite } } From 754f3141ead4d909a5aa91e0e8a3725b82131081 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 11:12:25 -0800 Subject: [PATCH 13/61] Remove White story. Add a11yhint in Primary example --- packages/components/package.json | 2 +- .../src/components/VAButton/VAButton.stories.tsx | 10 +--------- packages/components/yarn.lock | 10 +++++----- yarn.lock | 10 +++++----- 4 files changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 814b414e..4db9be4a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -38,7 +38,7 @@ }, "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library", "dependencies": { - "@department-of-veterans-affairs/mobile-tokens": "0.0.10", + "@department-of-veterans-affairs/mobile-tokens": "0.1.0", "@os-team/i18next-react-native-language-detector": "^1.0.28", "i18next": "^23.4.3", "react-i18next": "^13.0.3", diff --git a/packages/components/src/components/VAButton/VAButton.stories.tsx b/packages/components/src/components/VAButton/VAButton.stories.tsx index 665ba8d9..e21213c9 100644 --- a/packages/components/src/components/VAButton/VAButton.stories.tsx +++ b/packages/components/src/components/VAButton/VAButton.stories.tsx @@ -35,6 +35,7 @@ export const Primary: Story = { storyName: 'Primary', args: { label: 'Button text', + a11yHint: 'My hint', }, } @@ -42,7 +43,6 @@ export const Secondary: Story = { storyName: 'Secondary', args: { buttonType: ButtonTypesConstants.buttonSecondary, - label: 'Button text', }, } @@ -54,11 +54,3 @@ export const Destructive: Story = { label: 'Button text', }, } - -export const White: Story = { - storyName: 'White', - args: { - buttonType: ButtonTypesConstants.buttonWhite, - label: 'Button text', - }, -} diff --git a/packages/components/yarn.lock b/packages/components/yarn.lock index 164981ff..103a2573 100644 --- a/packages/components/yarn.lock +++ b/packages/components/yarn.lock @@ -2929,7 +2929,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.22.15 "@babel/preset-env": ^7.22.15 "@babel/preset-typescript": ^7.22.15 - "@department-of-veterans-affairs/mobile-tokens": 0.0.10 + "@department-of-veterans-affairs/mobile-tokens": 0.1.0 "@expo/webpack-config": ^19.0.0 "@os-team/i18next-react-native-language-detector": ^1.0.28 "@react-native-async-storage/async-storage": 1.18.2 @@ -2988,10 +2988,10 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@npm:0.0.10": - version: 0.0.10 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.10" - checksum: 7590c87fb87e72891fe270f9dc53be8af3d0471d43cd448ead234b40d3f1fd5612740f049c121062c2beffd2597e81fa4e705e808bf3dc3110c33fbc1213f928 +"@department-of-veterans-affairs/mobile-tokens@npm:0.1.0": + version: 0.1.0 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.1.0" + checksum: 4d44c25ed247254b39df746b4de9d518d80c8624d973d5277a11a9f9d011155a59cf24aee0dc9aaae493db409a60b75b00f1a05dc5f18317efaf64f5f472ff99 languageName: node linkType: hard diff --git a/yarn.lock b/yarn.lock index 94799404..6404d975 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2707,7 +2707,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.22.15 "@babel/preset-env": ^7.22.15 "@babel/preset-typescript": ^7.22.15 - "@department-of-veterans-affairs/mobile-tokens": 0.0.10 + "@department-of-veterans-affairs/mobile-tokens": 0.1.0 "@expo/webpack-config": ^19.0.0 "@os-team/i18next-react-native-language-detector": ^1.0.28 "@react-native-async-storage/async-storage": 1.18.2 @@ -2766,10 +2766,10 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@npm:0.0.10": - version: 0.0.10 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.10" - checksum: 7590c87fb87e72891fe270f9dc53be8af3d0471d43cd448ead234b40d3f1fd5612740f049c121062c2beffd2597e81fa4e705e808bf3dc3110c33fbc1213f928 +"@department-of-veterans-affairs/mobile-tokens@npm:0.1.0": + version: 0.1.0 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.1.0" + checksum: 4d44c25ed247254b39df746b4de9d518d80c8624d973d5277a11a9f9d011155a59cf24aee0dc9aaae493db409a60b75b00f1a05dc5f18317efaf64f5f472ff99 languageName: node linkType: hard From 1662034d2c9972e7da9508b23a93aade308a24fb Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 19:16:16 +0000 Subject: [PATCH 14/61] Version bump: components-v0.1.1-alpha.0 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 4db9be4a..f449b825 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.0.31", + "version": "0.1.1-alpha.0", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From a1cd6ffb22ae81f5dd1d8e87c91d0a5cb6901c3b Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 11:30:05 -0800 Subject: [PATCH 15/61] export VAButton in index.tsx --- packages/components/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 2ea79964..482b3b3e 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -8,3 +8,4 @@ if (expoApp && App.initiateExpo) { // Export components here so they are exported through npm export { SegmentedControl } from './components/SegmentedControl/SegmentedControl' +export { VAButton } from './components/VAButton/VAButton' From 83ccad255c0f2a42fc950d82672d7cbfb32b3d6e Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 19:33:31 +0000 Subject: [PATCH 16/61] Version bump: components-v0.1.1-alpha.1 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index f449b825..357f6715 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.0", + "version": "0.1.1-alpha.1", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 9dfcb9dd13a65204a3775c4f6c9f6412e3688500 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 11:41:49 -0800 Subject: [PATCH 17/61] Export ButtonTypes --- packages/components/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 482b3b3e..229e42fc 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -8,4 +8,4 @@ if (expoApp && App.initiateExpo) { // Export components here so they are exported through npm export { SegmentedControl } from './components/SegmentedControl/SegmentedControl' -export { VAButton } from './components/VAButton/VAButton' +export { VAButton, ButtonTypes } from './components/VAButton/VAButton' From 3534b1175a7784666ed13aba608eca5ee4d40908 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 19:44:36 +0000 Subject: [PATCH 18/61] Version bump: components-v0.1.1-alpha.2 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 357f6715..ad6ac098 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.1", + "version": "0.1.1-alpha.2", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 5644693a8327e1f5adbdd2d3b31b513dbc29fbb9 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 12:17:20 -0800 Subject: [PATCH 19/61] Refactor VAButton constants and types into enum --- .../components/VAButton/VAButton.stories.tsx | 6 ++-- .../src/components/VAButton/VAButton.tsx | 29 ++++++------------- 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/packages/components/src/components/VAButton/VAButton.stories.tsx b/packages/components/src/components/VAButton/VAButton.stories.tsx index e21213c9..cf2cfd62 100644 --- a/packages/components/src/components/VAButton/VAButton.stories.tsx +++ b/packages/components/src/components/VAButton/VAButton.stories.tsx @@ -1,5 +1,5 @@ -import { ButtonTypesConstants, VAButton, VAButtonProps } from './VAButton' import { Meta, StoryObj } from '@storybook/react-native' +import { VAButton, VAButtonProps, VAButtonVariants } from './VAButton' import { View } from 'react-native' import React from 'react' @@ -42,7 +42,7 @@ export const Primary: Story = { export const Secondary: Story = { storyName: 'Secondary', args: { - buttonType: ButtonTypesConstants.buttonSecondary, + buttonType: VAButtonVariants.Secondary, label: 'Button text', }, } @@ -50,7 +50,7 @@ export const Secondary: Story = { export const Destructive: Story = { storyName: 'Destructive', args: { - buttonType: ButtonTypesConstants.buttonDestructive, + buttonType: VAButtonVariants.Destructive, label: 'Button text', }, } diff --git a/packages/components/src/components/VAButton/VAButton.tsx b/packages/components/src/components/VAButton/VAButton.tsx index 6c5f9e7e..f810ac98 100644 --- a/packages/components/src/components/VAButton/VAButton.tsx +++ b/packages/components/src/components/VAButton/VAButton.tsx @@ -12,24 +12,13 @@ import React from 'react' import { webStorybookColorScheme } from '../../utils' -export const ButtonTypesConstants: { - buttonPrimary: ButtonTypes - buttonSecondary: ButtonTypes - buttonDestructive: ButtonTypes - buttonWhite: ButtonTypes -} = { - buttonPrimary: 'buttonPrimary', - buttonSecondary: 'buttonSecondary', - buttonDestructive: 'buttonDestructive', - buttonWhite: 'buttonWhite', +export enum VAButtonVariants { + Primary, + Secondary, + Destructive, + White, } -export type ButtonTypes = - | 'buttonPrimary' - | 'buttonSecondary' - | 'buttonDestructive' - | 'buttonWhite' - export type VAButtonProps = { /** text appearing in the button */ label: string @@ -40,7 +29,7 @@ export type VAButtonProps = { /** text to use as the accessibility hint */ a11yHint?: string /** specifies button styling type. defaults to primary if none specified */ - buttonType?: ButtonTypes + buttonType?: VAButtonVariants /** a string value used to set the buttons testID/accessibility label */ testID?: string } @@ -54,9 +43,9 @@ export const VAButton: React.FC = ({ testID, }) => { const colorScheme = webStorybookColorScheme() || useColorScheme() - const isDestructive = buttonType === ButtonTypesConstants.buttonDestructive - const isSecondary = buttonType === ButtonTypesConstants.buttonSecondary - const isWhite = buttonType === ButtonTypesConstants.buttonWhite + const isDestructive = buttonType === VAButtonVariants.Destructive + const isSecondary = buttonType === VAButtonVariants.Secondary + const isWhite = buttonType === VAButtonVariants.White let bgColor: string, bgColorPressed: string, From 80aaac41602e4a721cd80040ebd864be264ab058 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 20:20:44 +0000 Subject: [PATCH 20/61] Version bump: components-v0.1.1-alpha.3 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index ad6ac098..c071a695 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.2", + "version": "0.1.1-alpha.3", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From daaf163e7e080dd2cc5410731414536f82a41a17 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 12:27:23 -0800 Subject: [PATCH 21/61] Add tsdoc --- .../components/src/components/VAButton/VAButton.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/src/components/VAButton/VAButton.tsx b/packages/components/src/components/VAButton/VAButton.tsx index f810ac98..7979ff7c 100644 --- a/packages/components/src/components/VAButton/VAButton.tsx +++ b/packages/components/src/components/VAButton/VAButton.tsx @@ -95,6 +95,11 @@ export const VAButton: React.FC = ({ } } + /** + * Get button styling based on pressed state + * @param pressed - boolean for pressed state + * @returns ViewStyle for background + */ const getBackgroundStyle = ({ pressed, }: PressableStateCallbackType): ViewStyle => ({ @@ -111,6 +116,11 @@ export const VAButton: React.FC = ({ : 'none', }) + /** + * Get text styling based on pressed state + * @param pressed - boolean for pressed state + * @returns TextStyle for text + */ const getTextStyle = (pressed: boolean): TextStyle => { // TODO: Replace with typography tokens const font: TextStyle = { From 488e51ce4de53fe710946d831a163c6fd5de5d6b Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 12:27:30 -0800 Subject: [PATCH 22/61] Export VAButtonVariants --- packages/components/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 229e42fc..0a610c0b 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -8,4 +8,4 @@ if (expoApp && App.initiateExpo) { // Export components here so they are exported through npm export { SegmentedControl } from './components/SegmentedControl/SegmentedControl' -export { VAButton, ButtonTypes } from './components/VAButton/VAButton' +export { VAButton, VAButtonVariants } from './components/VAButton/VAButton' From dd60e3e710c97f15940a0b1ab74fd5337fe2c766 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 20:31:08 +0000 Subject: [PATCH 23/61] Version bump: components-v0.1.1-alpha.4 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index c071a695..ad954252 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.3", + "version": "0.1.1-alpha.4", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 36014a98bd8f74c2cabd8f2e1928bf50c88a6930 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 12:53:05 -0800 Subject: [PATCH 24/61] Remove console log --- packages/components/src/components/VAButton/VAButton.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/VAButton/VAButton.test.tsx b/packages/components/src/components/VAButton/VAButton.test.tsx index aff2e68b..1b0fba9c 100644 --- a/packages/components/src/components/VAButton/VAButton.test.tsx +++ b/packages/components/src/components/VAButton/VAButton.test.tsx @@ -33,7 +33,6 @@ describe('VAButton', () => { }) it('should render label', async () => { - component.debug() expect(component.findByText('Button text')).toBeTruthy() }) }) From e3e9f4d3c98efb1c31f7bc1a7e6ebc0a682b17a1 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 12:55:29 -0800 Subject: [PATCH 25/61] Commit updated yarn.lock --- yarn.lock | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index 6404d975..fc1535bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2766,14 +2766,7 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@npm:0.1.0": - version: 0.1.0 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.1.0" - checksum: 4d44c25ed247254b39df746b4de9d518d80c8624d973d5277a11a9f9d011155a59cf24aee0dc9aaae493db409a60b75b00f1a05dc5f18317efaf64f5f472ff99 - languageName: node - linkType: hard - -"@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": +"@department-of-veterans-affairs/mobile-tokens@0.1.0, @department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": version: 0.0.0-use.local resolution: "@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens" dependencies: From f59998137a73855b3a367ad9b264c744c1612135 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 8 Nov 2023 21:01:03 +0000 Subject: [PATCH 26/61] Version bump: components-v0.1.1-alpha.5 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index bf597633..af4cb4bc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.4", + "version": "0.1.1-alpha.5", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 5bee594b2c715bb1602563f80ff92ca5592e06e1 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Thu, 9 Nov 2023 10:10:08 -0800 Subject: [PATCH 27/61] Clean up. Add gray colors for base style --- packages/tokens/src/tokens/colors.json | 195 +++---------------------- 1 file changed, 19 insertions(+), 176 deletions(-) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index d5b8b724..e9137444 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -16,204 +16,41 @@ } }, "white": { - "value": "#fff", - "attributes": { - "category": "color" - } + "value": "#ffffff" }, "black": { "value": "#000000" }, "gray": { "*": { - "value": "#5b616b", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#5b616b" - }, - "name": "color-gray", - "attributes": { - "category": "color", - "type": "gray", - "item": "*" - }, - "path": [ - "color", - "gray", - "*" - ] + "value": "#5b616b" }, "dark": { - "value": "#323a45", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#323a45" - }, - "name": "color-gray-dark", - "attributes": { - "category": "color", - "type": "gray", - "item": "dark" - }, - "path": [ - "color", - "gray", - "dark" - ] + "value": "#323a45" }, "medium": { - "value": "#757575", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#757575" - }, - "name": "color-gray-medium", - "attributes": { - "category": "color", - "type": "gray", - "item": "medium" - }, - "path": [ - "color", - "gray", - "medium" - ] + "value": "#757575" }, "light": { - "value": "#aeb0b5", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#aeb0b5" - }, - "name": "color-gray-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "light" - }, - "path": [ - "color", - "gray", - "light" - ] + "value": "#aeb0b5" }, "light-alt": { - "value": "#eeeeee", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#eeeeee" - }, - "name": "color-gray-light-alt", - "attributes": { - "category": "color", - "type": "gray", - "item": "light-alt" - }, - "path": [ - "color", - "gray", - "light-alt" - ] + "value": "#eeeeee" }, "lighter": { - "value": "#d6d7d9", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#d6d7d9" - }, - "name": "color-gray-lighter", - "attributes": { - "category": "color", - "type": "gray", - "item": "lighter" - }, - "path": [ - "color", - "gray", - "lighter" - ] + "value": "#d6d7d9" }, "lightest": { - "value": "#f1f1f1", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#f1f1f1" - }, - "name": "color-gray-lightest", - "attributes": { - "category": "color", - "type": "gray", - "item": "lightest" - }, - "path": [ - "color", - "gray", - "lightest" - ] + "value": "#f1f1f1" }, "warm-dark": { - "value": "#494440", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#494440" - }, - "name": "color-gray-warm-dark", - "attributes": { - "category": "color", - "type": "gray", - "item": "warm-dark" - }, - "path": [ - "color", - "gray", - "warm-dark" - ] + "value": "#494440" }, "warm-light": { - "value": "#e4e2e0", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#e4e2e0" - }, - "name": "color-gray-warm-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "warm-light" - }, - "path": [ - "color", - "gray", - "warm-light" - ] + "value": "#e4e2e0" }, "cool-light": { - "value": "#dce4ef", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#dce4ef" - }, - "name": "color-gray-cool-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "cool-light" - }, - "path": [ - "color", - "gray", - "cool-light" - ] + "value": "#dce4ef" } }, "uswds-system-color-blue-vivid-30": { @@ -225,14 +62,20 @@ "uswds-system-color-blue-warm-vivid-80": { "value": "#162e51" }, + "uswds-system-color-gray-30": { + "value": "#adadad" + }, + "uswds-system-color-gray-80": { + "value": "#2e2e2e" + }, "uswds-system-color-red-vivid-40": { - "value": "#FB5A47" + "value": "#fb5a47" }, "uswds-system-color-red-vivid-60": { "value": "#b50909" }, "uswds-system-color-red-vivid-80": { - "value": "#5C1111" + "value": "#5c1111" } } } From 2dcccdd90594131a786a78c4a317f8fa0ca7134b Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Thu, 9 Nov 2023 18:13:04 +0000 Subject: [PATCH 28/61] Version bump: tokens-v0.1.1-alpha.0 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index c3f6d11e..2f81b706 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.1.0", + "version": "0.1.1-alpha.0", "description": "VA Design System Mobile Token Library", "main": "dist/js/tokens.js", "types": "dist/index.d.ts", From 4b599996dc408682c71d3e0718ed7dcb8968eb0e Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Thu, 9 Nov 2023 18:17:22 +0000 Subject: [PATCH 29/61] Version bump: components-v0.1.1-alpha.6 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index af4cb4bc..c77f161a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.1.1-alpha.5", + "version": "0.1.1-alpha.6", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 6bac3e28a17130448eee7a8810c8009091af7927 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Thu, 9 Nov 2023 10:20:21 -0800 Subject: [PATCH 30/61] Rename VAButton to Button. Refactor styling to use switch statement. Remove empty files. Commit root yarn.lock --- .../.storybook/native/storybook.requires.js | 52 +++++----- .../Button.stories.tsx} | 14 +-- .../Button.test.tsx} | 6 +- .../VAButton.tsx => Button/Button.tsx} | 97 ++++++++++--------- packages/components/src/index.tsx | 2 +- packages/tokens/src/tokens.json | 0 packages/tokens/src/tokens.tsx | 0 yarn.lock | 9 +- 8 files changed, 95 insertions(+), 85 deletions(-) rename packages/components/src/components/{VAButton/VAButton.stories.tsx => Button/Button.stories.tsx} (73%) rename packages/components/src/components/{VAButton/VAButton.test.tsx => Button/Button.test.tsx} (85%) rename packages/components/src/components/{VAButton/VAButton.tsx => Button/Button.tsx} (55%) delete mode 100644 packages/tokens/src/tokens.json delete mode 100644 packages/tokens/src/tokens.tsx diff --git a/packages/components/.storybook/native/storybook.requires.js b/packages/components/.storybook/native/storybook.requires.js index b2887948..0e1dfff3 100644 --- a/packages/components/.storybook/native/storybook.requires.js +++ b/packages/components/.storybook/native/storybook.requires.js @@ -6,57 +6,57 @@ import { addParameters, addArgsEnhancer, clearDecorators, -} from "@storybook/react-native"; +} from '@storybook/react-native' global.STORIES = [ { - titlePrefix: "", - directory: "./src/components", - files: "**/*.stories.mdx", + titlePrefix: '', + directory: './src/components', + files: '**/*.stories.mdx', importPathMatcher: - "^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$", + '^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$', }, { - titlePrefix: "", - directory: "./src/components", - files: "**/*.stories.@(js|jsx|ts|tsx)", + titlePrefix: '', + directory: './src/components', + files: '**/*.stories.@(js|jsx|ts|tsx)', importPathMatcher: - "^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$", + '^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$', }, -]; +] -import "@storybook/addon-ondevice-controls/register"; -import "@storybook/addon-ondevice-actions/register"; +import '@storybook/addon-ondevice-controls/register' +import '@storybook/addon-ondevice-actions/register' -import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"; +import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs' -import { decorators, parameters } from "./preview"; +import { decorators, parameters } from './preview' if (decorators) { if (__DEV__) { // stops the warning from showing on every HMR - require("react-native").LogBox.ignoreLogs([ - "`clearDecorators` is deprecated and will be removed in Storybook 7.0", - ]); + require('react-native').LogBox.ignoreLogs([ + '`clearDecorators` is deprecated and will be removed in Storybook 7.0', + ]) } // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 - clearDecorators(); - decorators.forEach((decorator) => addDecorator(decorator)); + clearDecorators() + decorators.forEach((decorator) => addDecorator(decorator)) } if (parameters) { - addParameters(parameters); + addParameters(parameters) } try { - argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)); + argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)) } catch {} const getStories = () => { return { - "./src/components/SegmentedControl/SegmentedControl.stories.tsx": require("../../src/components/SegmentedControl/SegmentedControl.stories.tsx"), - "./src/components/VAButton/VAButton.stories.tsx": require("../../src/components/VAButton/VAButton.stories.tsx"), - }; -}; + './src/components/SegmentedControl/SegmentedControl.stories.tsx': require('../../src/components/SegmentedControl/SegmentedControl.stories.tsx'), + './src/components/Button/Button.stories.tsx': require('../../src/components/Button/Button.stories.tsx'), + } +} -configure(getStories, module, false); +configure(getStories, module, false) diff --git a/packages/components/src/components/VAButton/VAButton.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx similarity index 73% rename from packages/components/src/components/VAButton/VAButton.stories.tsx rename to packages/components/src/components/Button/Button.stories.tsx index cf2cfd62..fc78983a 100644 --- a/packages/components/src/components/VAButton/VAButton.stories.tsx +++ b/packages/components/src/components/Button/Button.stories.tsx @@ -1,11 +1,11 @@ +import { Button, ButtonProps, ButtonVariants } from './Button' import { Meta, StoryObj } from '@storybook/react-native' -import { VAButton, VAButtonProps, VAButtonVariants } from './VAButton' import { View } from 'react-native' import React from 'react' -const meta: Meta = { - title: 'VAButton', - component: VAButton, +const meta: Meta = { + title: 'Button', + component: Button, argTypes: { onPress: { action: 'onPress event', @@ -29,7 +29,7 @@ const meta: Meta = { export default meta -type Story = StoryObj +type Story = StoryObj export const Primary: Story = { storyName: 'Primary', @@ -42,7 +42,7 @@ export const Primary: Story = { export const Secondary: Story = { storyName: 'Secondary', args: { - buttonType: VAButtonVariants.Secondary, + buttonType: ButtonVariants.Secondary, label: 'Button text', }, } @@ -50,7 +50,7 @@ export const Secondary: Story = { export const Destructive: Story = { storyName: 'Destructive', args: { - buttonType: VAButtonVariants.Destructive, + buttonType: ButtonVariants.Destructive, label: 'Button text', }, } diff --git a/packages/components/src/components/VAButton/VAButton.test.tsx b/packages/components/src/components/Button/Button.test.tsx similarity index 85% rename from packages/components/src/components/VAButton/VAButton.test.tsx rename to packages/components/src/components/Button/Button.test.tsx index 1b0fba9c..a625c69f 100644 --- a/packages/components/src/components/VAButton/VAButton.test.tsx +++ b/packages/components/src/components/Button/Button.test.tsx @@ -5,16 +5,16 @@ import React from 'react' import 'jest-styled-components' import { ReactTestInstance } from 'react-test-renderer' -import { VAButton } from './VAButton' +import { Button } from './Button' -describe('VAButton', () => { +describe('Button', () => { let component: RenderAPI let testInstance: ReactTestInstance const onPressSpy = jest.fn() const initializeTestInstance = (): void => { - component = render() + component = render(