Skip to content

Commit

Permalink
feat: minor refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@Matt561
Matt561 committed Sep 18, 2024
1 parent 632eefc commit 1761159
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 141 deletions.
49 changes: 22 additions & 27 deletions app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
// Third party dependencies.
import React from 'react';

// External dependencies
import { withNavigation } from '../../../../storybook/decorators';
import ethLogo from '../../../images/eth-logo-new.png';

// Internal dependencies
import { View, StyleSheet } from 'react-native';
import KeyValueRowComponent, { TooltipSizes } from './index';
import Text, { TextColor, TextVariant } from '../../components/Texts/Text';
Expand Down Expand Up @@ -35,51 +30,51 @@ export const KeyValueRow = {
<Title>KeyValueRow Component</Title>
<Text variant={TextVariant.BodySM}>
Prebuilt component displayed below but KeyValueRow stubs are available
to create new types fo KeyValueRow types.
to create new KeyValueRow variants.
</Text>
<View style={styles.listItem}>
<KeyValueRowComponent
keyText={{
textPrimary: { text: 'Sample Key Text' },
field={{
primary: { text: 'Sample Key Text' },
}}
valueText={{ textPrimary: { text: 'Sample Value Text' } }}
value={{ primary: { text: 'Sample Value Text' } }}
/>
<KeyValueRowComponent
keyText={{
textPrimary: { text: 'Sample Key Text' },
textSecondary: {
field={{
primary: { text: 'Sample Key Text' },
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
},
}}
valueText={{
textPrimary: { text: 'Sample Value Text' },
textSecondary: {
value={{
primary: { text: 'Sample Value Text' },
secondary: {
text: 'Secondary Value Text',
variant: TextVariant.BodyXSMedium,
color: TextColor.Success,
},
}}
/>
<KeyValueRowComponent
keyText={{
textPrimary: {
field={{
primary: {
text: 'Sample Key Text',
tooltip: {
title: 'Sample Tooltip',
text: 'Quis sunt ullamco incididunt id ad. Magna deserunt quis aliqua non laborum nostrud exercitation adipisicing commodo.',
},
},
textSecondary: {
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
},
}}
valueText={{
textPrimary: { text: 'Sample Value Text' },
textSecondary: {
value={{
primary: { text: 'Sample Value Text' },
secondary: {
text: 'Secondary Value Text',
variant: TextVariant.BodyXSMedium,
color: TextColor.Warning,
Expand All @@ -92,23 +87,23 @@ export const KeyValueRow = {
}}
/>
<KeyValueRowComponent
keyText={{
textPrimary: {
field={{
primary: {
text: 'Sample Key Text',
tooltip: {
title: 'Sample Tooltip',
text: 'Quis sunt ullamco incididunt id ad. Magna deserunt quis aliqua non laborum nostrud exercitation adipisicing commodo.',
},
},
textSecondary: {
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
},
}}
valueText={{
textPrimary: { text: 'Sample Value Text' },
textSecondary: {
value={{
primary: { text: 'Sample Value Text' },
secondary: {
text: 'Secondary Value Text',
icon: {
name: 'Ethereum Logo',
Expand Down
42 changes: 21 additions & 21 deletions app/component-library/components-temp/KeyValueRow/KeyValueRow.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ describe('KeyValueRow', () => {
it('should render when there is only primary text', () => {
const { toJSON } = render(
<KeyValueRow
keyText={{
textPrimary: { text: 'Sample Key Text' },
field={{
primary: { text: 'Sample Key Text' },
}}
valueText={{ textPrimary: { text: 'Sample Value Text' } }}
value={{ primary: { text: 'Sample Value Text' } }}
/>,
);

Expand All @@ -38,17 +38,17 @@ describe('KeyValueRow', () => {
it('should render both primary and secondary text', () => {
const { toJSON } = render(
<KeyValueRow
keyText={{
textPrimary: { text: 'Primary Key Text' },
textSecondary: {
field={{
primary: { text: 'Primary Key Text' },
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
},
}}
valueText={{
textPrimary: { text: 'Primary Value Text' },
textSecondary: {
value={{
primary: { text: 'Primary Value Text' },
secondary: {
text: 'Secondary Value Text',
variant: TextVariant.BodyXSMedium,
color: TextColor.Success,
Expand All @@ -63,15 +63,15 @@ describe('KeyValueRow', () => {
it('should render both primary and secondary text with tooltips', () => {
const { toJSON } = render(
<KeyValueRow
keyText={{
textPrimary: {
field={{
primary: {
text: 'Primary Key Text',
tooltip: {
title: 'Sample Tooltip 1',
text: 'Tooltip 1 text',
},
},
textSecondary: {
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
Expand All @@ -81,15 +81,15 @@ describe('KeyValueRow', () => {
},
},
}}
valueText={{
textPrimary: {
value={{
primary: {
text: 'Primary Value Text',
tooltip: {
title: 'Sample Tooltip 3',
text: 'Tooltip 3 text',
},
},
textSecondary: {
secondary: {
text: 'Secondary Value Text',
variant: TextVariant.BodyXSMedium,
color: TextColor.Success,
Expand All @@ -108,16 +108,16 @@ describe('KeyValueRow', () => {
it('should render both primary and secondary text with icons', () => {
const { toJSON } = render(
<KeyValueRow
keyText={{
textPrimary: {
field={{
primary: {
text: 'Primary Key Text',
icon: {
name: 'Ethereum Logo',
isIpfsGatewayCheckBypassed: true,
src: ethLogo,
},
},
textSecondary: {
secondary: {
text: 'Secondary Key Text',
variant: TextVariant.BodySMMedium,
color: TextColor.Alternative,
Expand All @@ -128,16 +128,16 @@ describe('KeyValueRow', () => {
},
},
}}
valueText={{
textPrimary: {
value={{
primary: {
text: 'Primary Value Text',
icon: {
name: 'Ethereum Logo',
isIpfsGatewayCheckBypassed: true,
src: ethLogo,
},
},
textSecondary: {
secondary: {
text: 'Secondary Value Text',
variant: TextVariant.BodyXSMedium,
color: TextColor.Success,
Expand Down
Loading

0 comments on commit 1761159

Please sign in to comment.