-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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' of https://github.com/MetaMask/metamask-mobile in…
…to fix/buttonlink-bs
- Loading branch information
Showing
293 changed files
with
6,464 additions
and
3,973 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
40 changes: 40 additions & 0 deletions
40
app/component-library/components-temp/TagColored/README.md
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,40 @@ | ||
| # TagColored | ||
|
|
||
| ## TagColored Props | ||
|
|
||
| This component extends React Native's [ViewProps](https://reactnative.dev/docs/view) component. | ||
|
|
||
| ### `color` | ||
|
|
||
| Optional prop to configure the color of the TagColored | ||
|
|
||
| | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> | | ||
| | :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | | ||
| | [TagColor](./TagColored.types.ts) | No | TagColor.Default | | ||
|
|
||
| ### `children` | ||
|
|
||
| Content to wrap to display. | ||
|
|
||
| | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | | ||
| | :-------------------------------------------------- | :------------------------------------------------------ | | ||
| | string or ReactNode | Yes | | ||
|
|
||
| ## Usage | ||
|
|
||
| ```javascript | ||
| // Passing text to children | ||
| <TagColored color={TagColor.Default}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
|
|
||
| // Passing node to children | ||
| <TagColored color={TagColor.Default}> | ||
| <Text>SAMPLE TAGCOLORED TEXT</Text> | ||
| </TagColored>; | ||
|
|
||
| // Configuring different colors | ||
| <TagColored color={TagColor.Default}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
| <TagColored color={TagColor.Success}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
| <TagColored color={TagColor.Info}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
| <TagColored color={TagColor.Danger}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
| <TagColored color={TagColor.Warning}>SAMPLE TAGCOLORED TEXT</TagColored>; | ||
| ``` |
20 changes: 20 additions & 0 deletions
20
app/component-library/components-temp/TagColored/TagColored.constants.ts
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,20 @@ | ||
| /* eslint-disable import/prefer-default-export */ | ||
| // External dependencies | ||
| import { TextVariant } from '../../components/Texts/Text'; | ||
|
|
||
| // Internal dependencies | ||
| import { TagColor, TagColoredProps } from './TagColored.types'; | ||
|
|
||
| // Defaults | ||
| export const DEFAULT_TAGCOLORED_COLOR = TagColor.Default; | ||
| export const DEFAULT_TAGCOLORED_TEXTVARIANT = TextVariant.BodyXS; | ||
|
|
||
| // Test IDs | ||
| export const TAGCOLORED_TESTID = 'tagcolored'; | ||
| export const TAGCOLORED_TEXT_TESTID = 'tagcolored-text'; | ||
|
|
||
| // Sample consts | ||
| export const SAMPLE_TAGCOLORED_PROPS: TagColoredProps = { | ||
| color: DEFAULT_TAGCOLORED_COLOR, | ||
| children: 'Sample TagColored text', | ||
| }; |
29 changes: 29 additions & 0 deletions
29
app/component-library/components-temp/TagColored/TagColored.stories.tsx
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,29 @@ | ||
| // Internal dependencies. | ||
| import { default as TagColoredComponent } from './TagColored'; | ||
| import { TagColor } from './TagColored.types'; | ||
| import { SAMPLE_TAGCOLORED_PROPS } from './TagColored.constants'; | ||
|
|
||
| const TagColoredStoryMeta = { | ||
| title: 'Components Temp / TagColored', | ||
| component: TagColoredComponent, | ||
| argTypes: { | ||
| color: { | ||
| options: TagColor, | ||
| control: { | ||
| type: 'select', | ||
| }, | ||
| }, | ||
| children: { | ||
| control: { type: 'text' }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default TagColoredStoryMeta; | ||
|
|
||
| export const TagColored = { | ||
| args: { | ||
| color: SAMPLE_TAGCOLORED_PROPS.color, | ||
| children: SAMPLE_TAGCOLORED_PROPS.children, | ||
| }, | ||
| }; |
72 changes: 72 additions & 0 deletions
72
app/component-library/components-temp/TagColored/TagColored.styles.ts
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,72 @@ | ||
| // Third party dependencies. | ||
| import { StyleSheet, ViewStyle } from 'react-native'; | ||
|
|
||
| // External dependencies. | ||
| import { Theme } from '../../../util/theme/models'; | ||
|
|
||
| // Internal dependencies. | ||
| import { TagColoredStyleSheetVars, TagColor } from './TagColored.types'; | ||
|
|
||
| /** | ||
| * Style sheet function for TagColored component. | ||
| * | ||
| * @param params Style sheet params. | ||
| * @param params.theme App theme from ThemeContext. | ||
| * @param params.vars Inputs that the style sheet depends on. | ||
| * @returns StyleSheet object. | ||
| */ | ||
| const styleSheet = (params: { | ||
| theme: Theme; | ||
| vars: TagColoredStyleSheetVars; | ||
| }) => { | ||
| const { vars, theme } = params; | ||
| const { style, color } = vars; | ||
| let backgroundColor, textColor; | ||
| switch (color) { | ||
| case TagColor.Default: | ||
| backgroundColor = theme.colors.background.alternative; | ||
| textColor = theme.colors.text.alternative; | ||
| break; | ||
| case TagColor.Success: | ||
| backgroundColor = theme.colors.success.muted; | ||
| textColor = theme.colors.success.default; | ||
| break; | ||
| case TagColor.Info: | ||
| backgroundColor = theme.colors.primary.muted; | ||
| textColor = theme.colors.primary.default; | ||
| break; | ||
| case TagColor.Danger: | ||
| backgroundColor = theme.colors.error.muted; | ||
| textColor = theme.colors.error.default; | ||
| break; | ||
| case TagColor.Warning: | ||
| backgroundColor = theme.colors.warning.muted; | ||
| textColor = theme.colors.warning.default; | ||
| break; | ||
| default: | ||
| backgroundColor = theme.colors.background.alternative; | ||
| textColor = theme.colors.text.alternative; | ||
| } | ||
|
|
||
| return StyleSheet.create({ | ||
| base: Object.assign( | ||
| { | ||
| height: 20, | ||
| backgroundColor, | ||
| borderRadius: 4, | ||
| paddingHorizontal: 8, | ||
| alignSelf: 'flex-start', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| } as ViewStyle, | ||
| style, | ||
| ) as ViewStyle, | ||
| text: { | ||
| fontWeight: 'bold', | ||
| textTransform: 'uppercase', | ||
| color: textColor, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| export default styleSheet; |
144 changes: 144 additions & 0 deletions
144
app/component-library/components-temp/TagColored/TagColored.test.tsx
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,144 @@ | ||
| // Third party dependencies | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react-native'; | ||
|
|
||
| // External dependencies | ||
| import Text from '../../components/Texts/Text'; | ||
| import { mockTheme } from '../../../util/theme'; | ||
|
|
||
| // Internal dependencies | ||
| import TagColored from './TagColored'; | ||
| import { | ||
| DEFAULT_TAGCOLORED_TEXTVARIANT, | ||
| SAMPLE_TAGCOLORED_PROPS, | ||
| TAGCOLORED_TESTID, | ||
| TAGCOLORED_TEXT_TESTID, | ||
| } from './TagColored.constants'; | ||
| import { TagColor } from './TagColored.types'; | ||
|
|
||
| describe('TagColored', () => { | ||
| it('should render TagColored', () => { | ||
| const wrapper = render(<TagColored {...SAMPLE_TAGCOLORED_PROPS} />); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| expect(wrapper.queryByTestId(TAGCOLORED_TESTID)).not.toBe(null); | ||
| }); | ||
|
|
||
| it('should render children correctly when provided', () => { | ||
| const testText = 'TagColored'; | ||
| const ChildrenComponent = () => <Text>{testText}</Text>; | ||
|
|
||
| const { getByText } = render( | ||
| <TagColored> | ||
| <ChildrenComponent /> | ||
| </TagColored>, | ||
| ); | ||
|
|
||
| expect(getByText(testText)).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should render children correctly when a string is provided', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByText } = render(<TagColored>{testText}</TagColored>); | ||
|
|
||
| expect(getByText(testText)).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should render children with the right text variant if typeof children === string', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByText } = render(<TagColored>{testText}</TagColored>); | ||
|
|
||
| expect(getByText(testText).props.style.fontSize).toBe( | ||
| mockTheme.typography[DEFAULT_TAGCOLORED_TEXTVARIANT].fontSize, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct default color on default', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render(<TagColored>{testText}</TagColored>); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.background.alternative, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.text.alternative, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct default color when given', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render( | ||
| <TagColored color={TagColor.Default}>{testText}</TagColored>, | ||
| ); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.background.alternative, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.text.alternative, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct success color when given', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render( | ||
| <TagColored color={TagColor.Success}>{testText}</TagColored>, | ||
| ); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.success.muted, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.success.default, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct info color when given', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render( | ||
| <TagColored color={TagColor.Info}>{testText}</TagColored>, | ||
| ); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.primary.muted, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.primary.default, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct danger color when given', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render( | ||
| <TagColored color={TagColor.Danger}>{testText}</TagColored>, | ||
| ); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.error.muted, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.error.default, | ||
| ); | ||
| }); | ||
|
|
||
| it('should render the correct warning color when given', () => { | ||
| const testText = 'TagColored'; | ||
|
|
||
| const { getByTestId } = render( | ||
| <TagColored color={TagColor.Warning}>{testText}</TagColored>, | ||
| ); | ||
|
|
||
| expect(getByTestId(TAGCOLORED_TESTID).props.style.backgroundColor).toBe( | ||
| mockTheme.colors.warning.muted, | ||
| ); | ||
| expect(getByTestId(TAGCOLORED_TEXT_TESTID).props.style.color).toBe( | ||
| mockTheme.colors.warning.default, | ||
| ); | ||
| }); | ||
| }); |
Oops, something went wrong.