From c49ec93b2909a69dc45b7a2ceb052a75271f34e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Thu, 16 May 2024 15:01:41 +0200 Subject: [PATCH] fix(suite): Flex naming --- .../src/components/Flex/Flex.stories.tsx | 133 ++++++++++++------ .../components/src/components/Flex/Flex.tsx | 14 +- .../Passphrase/PassphraseTypeCardHeading.tsx | 12 +- .../PassphraseWalletConfirmationStep1.tsx | 18 +-- packages/suite/src/views/backup/index.tsx | 6 +- .../DeviceItem/AddWalletButton.tsx | 25 +--- .../components/EmptyStakingCard.tsx | 14 +- 7 files changed, 131 insertions(+), 91 deletions(-) diff --git a/packages/components/src/components/Flex/Flex.stories.tsx b/packages/components/src/components/Flex/Flex.stories.tsx index 06eb1bbb5594..05a75762079f 100644 --- a/packages/components/src/components/Flex/Flex.stories.tsx +++ b/packages/components/src/components/Flex/Flex.stories.tsx @@ -1,10 +1,13 @@ -import { Meta, StoryObj } from '@storybook/react'; +import { ArgTypes, Meta, StoryObj } from '@storybook/react'; import { Flex as FlexComponent, FlexProps, flexAlignItems, flexDirection, flexJustifyContent, + flexWrap, + Row as RowComponent, + Column as ColumnComponent, } from './Flex'; import { spacings } from '@trezor/theme'; import styled from 'styled-components'; @@ -13,6 +16,10 @@ const Container = styled.div` width: 100%; `; +const Strong = styled.span` + color: red; + font-weight: 900; +`; const Box = styled.div<{ $color: string }>` background: ${({ $color }) => $color}; padding: 10px 20px; @@ -21,63 +28,109 @@ const Box = styled.div<{ $color: string }>` font-weight: 900; `; +const args: Partial = { + children: [ + + A + , + + B + , + + C + , + ], + + gap: 8, + margin: { top: undefined, right: undefined, bottom: undefined, left: undefined }, + flexWrap: 'wrap', +}; +const argTypes: Partial> = { + justifyContent: { + options: flexJustifyContent, + control: { + type: 'select', + }, + }, + alignItems: { + options: flexAlignItems, + control: { + type: 'select', + }, + }, + gap: { + options: Object.values(spacings), + control: { + type: 'select', + }, + }, + flex: { + type: 'string', + }, + flexWrap: { + options: Object.values(flexWrap), + control: { + type: 'select', + }, + }, + margin: { + table: { + category: 'Frame props', + }, + }, +}; + const meta: Meta = { title: 'Misc/Flex', component: FlexComponent, + parameters: { + docs: { + description: { + component: 'Flexbox komponenta umožňující snadné nastavení uspořádání prvků.', + }, + }, + }, } as Meta; export default meta; +export const Row: StoryObj = { + render: args => ( + + + + ), + args, + argTypes, +}; + +export const Column: StoryObj = { + render: args => ( + + + + ), + args, + argTypes, +}; + export const Flex: StoryObj = { render: args => ( +

+ Please prefer using Row or Column component +

+
), - args: { - children: [ - - A - , - - B - , - - C - , - ], - direction: 'row', - gap: 8, - margin: { top: undefined, right: undefined, bottom: undefined, left: undefined }, - }, + args: { ...args, direction: 'row' }, argTypes: { + ...argTypes, direction: { options: flexDirection, control: { type: 'radio', }, }, - justifyContent: { - options: flexJustifyContent, - control: { - type: 'select', - }, - }, - alignItems: { - options: flexAlignItems, - control: { - type: 'select', - }, - }, - gap: { - options: Object.values(spacings), - control: { - type: 'select', - }, - }, - margin: { - table: { - category: 'Frame props', - }, - }, }, }; diff --git a/packages/components/src/components/Flex/Flex.tsx b/packages/components/src/components/Flex/Flex.tsx index fb97bdd510d6..b97b20aa6182 100644 --- a/packages/components/src/components/Flex/Flex.tsx +++ b/packages/components/src/components/Flex/Flex.tsx @@ -4,6 +4,7 @@ import { FrameProps, TransientFrameProps, withFrameProps } from '../common/frame import { makePropsTransient } from '../../utils/transientProps'; export const flexDirection = ['column-reverse', 'column', 'row-reverse', 'row'] as const; +export const flexWrap = ['nowrap', 'wrap', 'wrap-reverse'] as const; export const flexJustifyContent = [ 'center', @@ -36,7 +37,8 @@ export const flexAlignItems = [ export type FlexDirection = (typeof flexDirection)[number]; export type FlexJustifyContent = (typeof flexJustifyContent)[number]; export type FlexAlignItems = (typeof flexAlignItems)[number]; -export type Flex = string; +export type Flex = string | number; +export type FlexWrap = (typeof flexWrap)[number]; const Container = styled.div< TransientFrameProps & { @@ -45,11 +47,12 @@ const Container = styled.div< $alignItems: FlexAlignItems; $direction: FlexDirection; $flex: Flex; + $flexWrap: FlexWrap; } >` display: flex; + flex-flow: ${({ $direction, $flexWrap }) => `${$direction} ${$flexWrap}`}; flex: ${({ $flex }) => $flex}; - flex-direction: ${({ $direction }) => $direction}; gap: ${({ $gap }) => $gap}px; justify-content: ${({ $justifyContent }) => $justifyContent}; align-items: ${({ $alignItems }) => $alignItems}; @@ -64,6 +67,7 @@ export type FlexProps = FrameProps & { children: React.ReactNode; direction?: FlexDirection; flex?: Flex; + flexWrap?: FlexWrap; }; export const Flex = ({ @@ -74,6 +78,7 @@ export const Flex = ({ direction = 'row', margin, flex = 'auto', + flexWrap = 'nowrap', }: FlexProps) => { const frameProps = { margin, @@ -86,6 +91,7 @@ export const Flex = ({ $alignItems={alignItems} $direction={direction} $flex={flex} + $flexWrap={flexWrap} {...makePropsTransient(frameProps)} > {children} @@ -93,5 +99,5 @@ export const Flex = ({ ); }; -export const Rows = (props: FlexProps) => ; -export const Columns = (props: FlexProps) => ; +export const Column = (props: FlexProps) => ; +export const Row = (props: FlexProps) => ; diff --git a/packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx b/packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx index fcecde74f6dc..a71727e00997 100644 --- a/packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx +++ b/packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx @@ -4,7 +4,7 @@ import styled, { useTheme } from 'styled-components'; import { Tooltip, TooltipProps } from '../Tooltip/Tooltip'; import { WalletType } from './types'; import { Icon } from '../assets/Icon/Icon'; -import { Columns, Rows } from '../Flex/Flex'; +import { Column, Row } from '../Flex/Flex'; import { ReactNode } from 'react'; const IconWrapper = styled.div<{ $type: WalletType }>` @@ -26,7 +26,7 @@ const Description = styled.div<{ $hasTopMargin?: boolean }>` ${typography.label} `; -const ArrowCol = styled(Rows)` +const ArrowCol = styled(Column)` flex: 0 0 auto; height: 100%; justify-content: center; @@ -58,7 +58,7 @@ export const PassphraseTypeCardHeading = ({ const theme = useTheme(); return ( - + {type === 'standard' ? ( @@ -66,7 +66,7 @@ export const PassphraseTypeCardHeading = ({ )} - + {description} - + {type === 'standard' && ( )} - + ); }; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx index e04369f0d9cb..b81c53e61691 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx @@ -1,4 +1,4 @@ -import { Rows, Card, Columns, Button, Text } from '@trezor/components'; +import { Column, Card, Row, Button, Text } from '@trezor/components'; import { HELP_CENTER_PASSPHRASE_URL } from '@trezor/urls'; import { Translation } from 'src/components/suite/Translation'; import { TrezorLink } from 'src/components/suite/TrezorLink'; @@ -19,11 +19,11 @@ export const PassphraseWalletConfirmationStep1 = ({ - + + - + } > - + @@ -52,10 +52,10 @@ export const PassphraseWalletConfirmationStep1 = ({ > - + - + @@ -68,8 +68,8 @@ export const PassphraseWalletConfirmationStep1 = ({ > - + - + ); diff --git a/packages/suite/src/views/backup/index.tsx b/packages/suite/src/views/backup/index.tsx index 80846a89a371..d72382ac30d1 100644 --- a/packages/suite/src/views/backup/index.tsx +++ b/packages/suite/src/views/backup/index.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Paragraph, Button, Image, Flex } from '@trezor/components'; +import { Paragraph, Button, Image, Row } from '@trezor/components'; import { HELP_CENTER_FAILED_BACKUP_URL } from '@trezor/urls'; import { selectDevice } from '@suite-common/wallet-core'; @@ -221,12 +221,12 @@ export const Backup = ({ cancelable, onCancel }: ForegroundAppProps) => { )} {backup.status === 'error' && ( - + {backup.error} - + )} ); diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx index 94b22f088562..168ec5ff1d1e 100644 --- a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx +++ b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components'; -import { Button, Tooltip } from '@trezor/components'; +import { Button, Column, Row, Tooltip } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { TrezorDevice, AcquiredDevice } from 'src/types/suite'; import { useSelector } from 'src/hooks/suite'; import { SUITE } from 'src/actions/suite/constants'; -import { spacingsPx } from '@trezor/theme'; +import { spacings } from '@trezor/theme'; const AddWallet = styled.div` display: flex; @@ -18,19 +18,6 @@ const StyledTooltip = styled(Tooltip)` width: 100%; `; -const Rows = styled.div` - display: flex; - flex-direction: row; - gap: ${spacingsPx.xs}; -`; - -const Columns = styled.div` - display: flex; - flex: 1; - flex-direction: column; - gap: ${spacingsPx.xs}; -`; - interface AddWalletButtonProps { device: TrezorDevice; instances: AcquiredDevice[]; @@ -73,7 +60,7 @@ export const AddWalletButton = ({ cursor="pointer" placement="bottom" > - + {!emptyPassphraseWalletExists && ( - + ); diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx index 93accd4216b4..3fb51155b6f3 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import styled, { useTheme } from 'styled-components'; -import { Button, Card, Icon, Paragraph, variables } from '@trezor/components'; -import { spacingsPx } from '@trezor/theme'; +import { Button, Card, Icon, Paragraph, Row, variables } from '@trezor/components'; +import { spacings, spacingsPx } from '@trezor/theme'; import { Translation, StakingFeature } from 'src/components/suite'; import { openModal } from 'src/actions/suite/modalActions'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -14,12 +14,6 @@ const StyledCard = styled(Card)` flex-direction: column; `; -const Flex = styled.div` - display: flex; - gap: ${spacingsPx.xxs}; - align-items: center; -`; - const StyledP = styled(Paragraph)` margin-top: ${spacingsPx.xs}; color: ${({ theme }) => theme.textSubdued}; @@ -100,13 +94,13 @@ export const EmptyStakingCard = () => { }>
- + - +