-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into narin-patch-icon
- Loading branch information
Showing
8 changed files
with
210 additions
and
12 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
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,67 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { View } from 'react-native' | ||
| import React from 'react' | ||
|
|
||
| import { Text, TextProps } from './Text' | ||
| import { generateDocs } from '../../utils/storybook' | ||
|
|
||
| const meta: Meta<TextProps> = { | ||
| title: 'Text', | ||
| component: Text, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <View | ||
| style={{ | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| margin: 12, | ||
| }}> | ||
| <Story /> | ||
| </View> | ||
| ), | ||
| ], | ||
| parameters: { | ||
| docs: generateDocs({ | ||
| name: 'Text', | ||
| // docUrl: | ||
| // 'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20Progress/Text', | ||
| }), | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<TextProps> | ||
|
|
||
| export const Body: Story = { | ||
| render: (props: TextProps) => ( | ||
| <> | ||
| <Text {...props} /> | ||
| <Text {...props} /> | ||
| </> | ||
| ), | ||
| args: { | ||
| children: | ||
| 'Lorem ipsum odor amet, consectetuer adipiscing elit. Ex ultricies auctor per eros et nec mauris. Ut nibh risus ligula vivamus est nascetur class auctor. Faucibus facilisis integer hac ullamcorper vulputate.', | ||
| variant: 'body', | ||
| size: 'md', | ||
| }, | ||
| } | ||
|
|
||
| const children = 'Lorem ipsum dolor sit amet.' | ||
|
|
||
| export const _Heading: Story = { | ||
| args: { | ||
| children, | ||
| variant: 'heading', | ||
| size: 'md', | ||
| }, | ||
| } | ||
|
|
||
| export const __Display: Story = { | ||
| args: { | ||
| children, | ||
| variant: 'display', | ||
| }, | ||
| } |
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,118 @@ | ||
| import { | ||
| Text as RNText, | ||
| TextProps as RNTextProps, | ||
| TextStyle, | ||
| } from 'react-native' | ||
| import { font } from '@department-of-veterans-affairs/mobile-tokens' | ||
| import React, { FC } from 'react' | ||
|
|
||
| import { SpacerSize } from '../Spacer/Spacer' | ||
| import { getSpacingToken, useTheme } from '../../utils' | ||
|
|
||
| type TextSizes = 'xs' | 'sm' | 'md' | 'lg' | ||
| type BaseTones = 'default' | 'subtle' | 'inverse' | ||
| type BodyTones = BaseTones | 'error' | ||
|
|
||
| type BodyProps = { | ||
| /** Size: xs, sm, md, or lg. Defaults to 'md' for body and heading */ | ||
| size?: TextSizes | ||
| /** Text color: default, subtle, inverse, error. Defaults to vadsColorForegroundDefault. */ | ||
| tone?: BodyTones | ||
| /** Variant: body, heading, or display */ | ||
| variant?: 'body' | ||
| } | ||
|
|
||
| type HeadingProps = { | ||
| /** Size: xs, sm, md, or lg. Defaults to 'md' for body and heading */ | ||
| size?: TextSizes | ||
| /** Text color: default, subtle, inverse. Defaults to vadsColorForegroundDefault. */ | ||
| tone?: BaseTones | ||
| /** Variant: body, heading, or display */ | ||
| variant?: 'heading' | ||
| } | ||
|
|
||
| type DisplayProps = { | ||
| size?: never | ||
| /** Text color: default, subtle, inverse. Defaults to vadsColorForegroundDefault. */ | ||
| tone?: BaseTones | ||
| /** Variant: body, heading, or display */ | ||
| variant?: 'display' | ||
| } | ||
|
|
||
| export type TextProps = { | ||
| children: React.ReactNode | ||
| /** AccessibilityLabel for the text */ | ||
| a11yLabel?: string | ||
| /** | ||
| * Optional bottom spacing if typography style default isn't desired. | ||
| * @see {@link SpacerSize} for possible values | ||
| **/ | ||
| bottomSpacing?: SpacerSize | ||
| } & (BodyProps | HeadingProps | DisplayProps) | ||
|
|
||
| export const Text: FC<TextProps> = ({ | ||
| a11yLabel, | ||
| bottomSpacing, | ||
| children, | ||
| size = 'md', | ||
| tone = 'default', | ||
| variant = 'body', | ||
| }) => { | ||
| const theme = useTheme() | ||
| const { typography } = font | ||
| let typographyKey, color | ||
|
|
||
| const prefix = 'vadsFont' | ||
|
|
||
| const sizeMap = { | ||
| xs: 'Xsmall', | ||
| sm: 'Small', | ||
| md: 'Medium', | ||
| lg: 'Large', | ||
| } | ||
|
|
||
| /** Build typography key based on variant and size props */ | ||
| switch (variant) { | ||
| case 'display': | ||
| typographyKey = `${prefix}Display` | ||
| break | ||
| case 'heading': | ||
| typographyKey = `${prefix}Heading${sizeMap[size]}` | ||
| break | ||
| default: | ||
| typographyKey = `${prefix}Body${sizeMap[size]}` | ||
| } | ||
|
|
||
| /** Set color based on tone */ | ||
| switch (tone) { | ||
| case 'subtle': | ||
| color = theme.vadsColorForegroundSubtle | ||
| break | ||
| case 'inverse': | ||
| color = theme.vadsColorForegroundInverse | ||
| break | ||
| case 'error': | ||
| color = theme.vadsColorForegroundError | ||
| break | ||
| default: | ||
| color = theme.vadsColorForegroundDefault | ||
| } | ||
|
|
||
| const style: TextStyle = { | ||
| ...typography[typographyKey as keyof typeof typography], | ||
| color, | ||
| } | ||
|
|
||
| /** Set bottom margin to custom bottomSpacing if provided */ | ||
| if (bottomSpacing) { | ||
| style.marginBottom = getSpacingToken(bottomSpacing) | ||
| } | ||
|
|
||
| const textProps: RNTextProps = { | ||
| accessibilityLabel: a11yLabel, | ||
| style, | ||
| role: variant === 'heading' ? 'heading' : undefined, | ||
| } | ||
|
|
||
| return <RNText {...textProps}>{children}</RNText> | ||
| } |
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,3 +1,4 @@ | ||
| export * from './accessibility' | ||
| export * from './OSfunctions' | ||
| export * from './style' | ||
| export * from './tokens' |
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,12 @@ | ||
| import { spacing } from '@department-of-veterans-affairs/mobile-tokens' | ||
|
|
||
| import { SpacerSize } from '../components/Spacer/Spacer' | ||
|
|
||
| /** | ||
| * Convenience function that accepts a spacing size abbreviation and returns the corresponding | ||
| * spacing token | ||
| */ | ||
| export function getSpacingToken(size: SpacerSize): number { | ||
| const key = `vadsSpace${size[0].toUpperCase()}${size.slice(1)}` | ||
| return spacing[key as keyof typeof spacing] | ||
| } |
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