Skip to content

Commit

Permalink
fix(suite): Flex naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvaclavik
jvaclavik committed May 16, 2024
1 parent b616726 commit f2e4b07
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 50 deletions.
11 changes: 11 additions & 0 deletions packages/components/src/components/Flex/Flex.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
flexAlignItems,
flexDirection,
flexJustifyContent,
flexWrap,
} from './Flex';
import { spacings } from '@trezor/theme';
import styled from 'styled-components';
Expand Down Expand Up @@ -48,6 +49,7 @@ export const Flex: StoryObj<FlexProps> = {
direction: 'row',
gap: 8,
margin: { top: undefined, right: undefined, bottom: undefined, left: undefined },
flexWrap: 'wrap',
},
argTypes: {
direction: {
Expand All @@ -74,6 +76,15 @@ export const Flex: StoryObj<FlexProps> = {
type: 'select',
},
},
flex: {
type: 'string',
},
flexWrap: {
options: Object.values(flexWrap),
control: {
type: 'select',
},
},
margin: {
table: {
category: 'Frame props',
Expand Down
14 changes: 11 additions & 3 deletions packages/components/src/components/Flex/Flex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 & {
Expand All @@ -45,6 +47,7 @@ const Container = styled.div<
$alignItems: FlexAlignItems;
$direction: FlexDirection;
$flex: Flex;
$flexWrap: FlexWrap;
}
>`
display: flex;
Expand All @@ -53,6 +56,8 @@ const Container = styled.div<
gap: ${({ $gap }) => $gap}px;
justify-content: ${({ $justifyContent }) => $justifyContent};
align-items: ${({ $alignItems }) => $alignItems};
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
flex-wrap: ${({ $flexWrap }) => $flexWrap};
${withFrameProps}
`;
Expand All @@ -64,6 +69,7 @@ export type FlexProps = FrameProps & {
children: React.ReactNode;
direction?: FlexDirection;
flex?: Flex;
flexWrap?: FlexWrap;
};

export const Flex = ({
Expand All @@ -74,6 +80,7 @@ export const Flex = ({
direction = 'row',
margin,
flex = 'auto',
flexWrap = 'nowrap',
}: FlexProps) => {
const frameProps = {
margin,
Expand All @@ -86,12 +93,13 @@ export const Flex = ({
$alignItems={alignItems}
$direction={direction}
$flex={flex}
$flexWrap={flexWrap}
{...makePropsTransient(frameProps)}
>
{children}
</Container>
);
};

export const Rows = (props: FlexProps) => <Flex {...props} direction="column" />;
export const Columns = (props: FlexProps) => <Flex {...props} direction="row" />;
export const Column = (props: FlexProps) => <Flex {...props} direction="column" />;
export const Row = (props: FlexProps) => <Flex {...props} direction="row" />;
12 changes: 6 additions & 6 deletions packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>`
Expand All @@ -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;
Expand Down Expand Up @@ -58,15 +58,15 @@ export const PassphraseTypeCardHeading = ({
const theme = useTheme();

return (
<Columns gap={spacings.xl}>
<Row gap={spacings.xl}>
<IconWrapper $type={type}>
{type === 'standard' ? (
<Icon size={24} icon="WALLET" color={theme.iconPrimaryDefault} />
) : (
<Icon size={24} icon="LOCK" color={theme.iconSubdued} />
)}
</IconWrapper>
<Rows justifyContent="center" flex="1">
<Column justifyContent="center" flex="1">
<WalletTitle
$withMargin={type === 'hidden'}
data-test={type === 'hidden' && '@tooltip/passphrase-tooltip'}
Expand All @@ -86,12 +86,12 @@ export const PassphraseTypeCardHeading = ({
)}
</WalletTitle>
<Description>{description}</Description>
</Rows>
</Column>
{type === 'standard' && (
<ArrowCol>
<Icon icon="ARROW_RIGHT" color={theme.iconSubdued} />
</ArrowCol>
)}
</Columns>
</Row>
);
};
18 changes: 9 additions & 9 deletions ...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -19,11 +19,11 @@ export const PassphraseWalletConfirmationStep1 = ({
<PassphraseHeading>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_TITLE" />
</PassphraseHeading>
<Rows gap={8}>
<Column gap={8}>
<Card
paddingType="small"
label={
<Columns justifyContent="space-between">
<Row justifyContent="space-between">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT" />
<TrezorLink type="hint" variant="nostyle" href={HELP_CENTER_PASSPHRASE_URL}>
<Button
Expand All @@ -35,10 +35,10 @@ export const PassphraseWalletConfirmationStep1 = ({
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT_LINK" />
</Button>
</TrezorLink>
</Columns>
</Row>
}
>
<Rows gap={12}>
<Column gap={12}>
<Text typographyStyle="highlight">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_DESCRIPTION" />
</Text>
Expand All @@ -52,10 +52,10 @@ export const PassphraseWalletConfirmationStep1 = ({
>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_BUTTON" />
</Button>
</Rows>
</Column>
</Card>
<Card paddingType="small">
<Rows gap={12}>
<Column gap={12}>
<Text typographyStyle="highlight">
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_DESCRIPTION" />
</Text>
Expand All @@ -68,8 +68,8 @@ export const PassphraseWalletConfirmationStep1 = ({
>
<Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_BUTTON" />
</Button>
</Rows>
</Column>
</Card>
</Rows>
</Column>
</>
);
6 changes: 3 additions & 3 deletions packages/suite/src/views/backup/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -221,12 +221,12 @@ export const Backup = ({ cancelable, onCancel }: ForegroundAppProps) => {
)}

{backup.status === 'error' && (
<Flex justifyContent="center">
<Row justifyContent="center">
<VerticalCenter>
<StyledImage image="UNI_ERROR" />
<StyledP data-test="@backup/error-message">{backup.error}</StyledP>
</VerticalCenter>
</Flex>
</Row>
)}
</StyledModal>
);
Expand Down
25 changes: 6 additions & 19 deletions packages/suite/src/views/suite/SwitchDevice/DeviceItem/AddWalletButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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[];
Expand Down Expand Up @@ -73,7 +60,7 @@ export const AddWalletButton = ({
cursor="pointer"
placement="bottom"
>
<Columns>
<Column flex={1} gap={spacings.xs}>
{!emptyPassphraseWalletExists && (
<Button
data-test="@switch-device/add-wallet-button"
Expand All @@ -95,11 +82,11 @@ export const AddWalletButton = ({
isDisabled={isLocked}
onClick={onAddWallet}
>
<Rows>
<Row gap={spacings.xs}>
<Translation id="TR_ADD_HIDDEN_WALLET" />
</Rows>
</Row>
</Button>
</Columns>
</Column>
</StyledTooltip>
</AddWallet>
);
Expand Down
14 changes: 4 additions & 10 deletions ...e/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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};
Expand Down Expand Up @@ -100,13 +94,13 @@ export const EmptyStakingCard = () => {
<DashboardSection heading={<Translation id="TR_STAKE_ETH" />}>
<StyledCard>
<Header>
<Flex>
<Row alignItems="center" gap={spacings.xxs}>
<Icon icon="QUESTION_FILLED" size={11} color={theme.iconPrimaryDefault} />

<GreenP>
<Translation id="TR_STAKE_WHAT_IS_STAKING" />
</GreenP>
</Flex>
</Row>
<StyledP>
<Translation
id="TR_STAKE_STAKING_IS"
Expand Down

0 comments on commit f2e4b07

Please sign in to comment.