From d54ded8c83ad1de5128c3ba59940c3755e076a56 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Mon, 1 Apr 2024 17:44:25 +0200 Subject: [PATCH] feat: animated status line --- build-storybook.log | 59 +++++++++++++++++++ src/app/common/date-utils.ts | 6 ++ .../account/account-list-item.layout.tsx | 2 +- .../brc20-token-asset-item.layout.tsx | 2 +- .../crypto-currency-asset-item.layout.tsx | 2 +- ...tacks-fungible-token-asset-item.layout.tsx | 2 +- .../transaction-item.layout.tsx | 2 +- src/app/features/approver/approver-demo.tsx | 2 +- .../features/approver/approver.stories.tsx | 4 +- src/app/features/approver/approver.tsx | 2 + .../approver/components/approver-status.tsx | 42 +++++++++++-- .../pages/receive/components/receive-item.tsx | 2 +- .../components/swap-asset-item.tsx | 2 +- .../loading-striped-gradient.stories.tsx | 21 +++++++ .../animations/loading-striped-gradient.tsx | 16 +++++ .../bullet-separator/bullet-separator.tsx | 9 ++- .../dropdown-menu/dropdown-menu.tsx | 2 +- .../item-layout/item-layout-with-buttons.tsx | 2 +- .../ui/components/item-layout/item-layout.tsx | 24 +++++--- .../pressable/pressable.stories.tsx | 8 +-- .../{ => components}/pressable/pressable.tsx | 0 src/app/ui/components/select/select.tsx | 2 +- theme/keyframes.ts | 8 +++ 23 files changed, 188 insertions(+), 33 deletions(-) create mode 100644 build-storybook.log create mode 100644 src/app/ui/animations/loading-striped-gradient.stories.tsx create mode 100644 src/app/ui/animations/loading-striped-gradient.tsx rename src/app/ui/{ => components}/pressable/pressable.stories.tsx (91%) rename src/app/ui/{ => components}/pressable/pressable.tsx (100%) diff --git a/build-storybook.log b/build-storybook.log new file mode 100644 index 00000000000..3330ab98880 --- /dev/null +++ b/build-storybook.log @@ -0,0 +1,59 @@ + +> @leather-wallet/extension@6.32.1 build-storybook /Users/kyranjamie/dev/leather/wallet +> storybook build "--output-dir" "/var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl" "--webpack-stats-json" "/var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl" + +@storybook/cli v8.0.1 + +info => Cleaning outputDir: ../../../../../var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl +info => Loading presets +WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version. +WARN It's recommended you read this document: +WARN https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm +WARN +WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. +info Found existing addon {"name":"@storybook/addon-docs","options":{"csfPluginOptions":null,"mdxPluginOptions":{},"transcludeMarkdown":true}}, skipping. +info Found existing addon {"name":"@storybook/addon-docs","options":{"csfPluginOptions":null,"mdxPluginOptions":{},"transcludeMarkdown":true}}, skipping. +info => Building manager.. +info => Manager built (116 ms) +info => Building preview.. +info => Copying static files: public at ../../../../../var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl +info => Using implicit CSS loaders +info => [@storybook/addon-styling-webpack] Applying custom Storybook webpack configuration styling. +info => [@storybook/addon-styling-webpack] Replacing Storybook's webpack rules for styles with given rules. +info => Using default Webpack5 setup +🐼 warn [token] Reference not found: `colors.focus` in "3px solid {colors.focus}" +🐼 warn [token] Reference not found: `colors.focus` in "3px solid {colors.focus}" +🐼 warn [token] Reference not found: `focus` in "3px solid {focus}" +🐼 info [hrtime] Extracted in (1132.02ms) +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/breakpoints.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/colors.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/index.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/keyframes.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/semantic-tokens.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/tokens.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/typography.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/.storybook/preview.ts" but does not match its "include" patterns +WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): +WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/.storybook/viewports.ts" but does not match its "include" patterns +WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). +WARN This can impact web performance. +WARN Assets: +WARN 8510.0add2d64.iframe.bundle.js (769 KiB) +WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. +WARN Entrypoints: +WARN main (1010 KiB) +WARN runtime~main.57e1694f.iframe.bundle.js +WARN 8510.0add2d64.iframe.bundle.js +WARN main.d66cdef4.iframe.bundle.js +WARN +info => Preview built (6.26 s) +info => preview stats written to /var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl/preview-stats.json +info => Output directory: /var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl diff --git a/src/app/common/date-utils.ts b/src/app/common/date-utils.ts index 952f4ad50f0..0fd1a4a8fdc 100644 --- a/src/app/common/date-utils.ts +++ b/src/app/common/date-utils.ts @@ -2,6 +2,7 @@ import dayjs from 'dayjs'; import advancedFormat from 'dayjs/plugin/advancedFormat'; import isToday from 'dayjs/plugin/isToday'; import isYesterday from 'dayjs/plugin/isYesterday'; +import localizedFormat from 'dayjs/plugin/localizedFormat'; import timezone from 'dayjs/plugin/timezone'; import utc from 'dayjs/plugin/utc'; @@ -10,6 +11,7 @@ dayjs.extend(isYesterday); dayjs.extend(advancedFormat); dayjs.extend(utc); dayjs.extend(timezone); +dayjs.extend(localizedFormat); export function todaysIsoDate() { return new Date().toISOString().split('T')[0]; @@ -20,6 +22,10 @@ export function isoDateToLocalDate(isoDate: string): string { return dayjs.tz(isoDate).format('YYYY-MM-DD'); } +export function toLocalizedDateFormat(date: dayjs.Dayjs) { + return date.format('lll'); +} + // txDate is of the form YYYY-MM-DD export function displayDate(txDate: string): string { const date = dayjs(txDate); diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx index 42dfc80fde0..d0de4f738d8 100644 --- a/src/app/components/account/account-list-item.layout.tsx +++ b/src/app/components/account/account-list-item.layout.tsx @@ -3,8 +3,8 @@ import { ReactNode } from 'react'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { Spinner } from '@app/ui/components/spinner'; -import { Pressable } from '@app/ui/pressable/pressable'; interface AccountListItemLayoutProps { accountAddresses: ReactNode; diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx index 3b1ac5d65f1..a38942dd0cb 100644 --- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx @@ -6,8 +6,8 @@ import { formatBalance } from '@app/common/format-balance'; import { Brc20Token } from '@app/query/bitcoin/bitcoin-client'; import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; -import { Pressable } from '@app/ui/pressable/pressable'; interface Brc20TokenAssetItemLayoutProps { token: Brc20Token; diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index 5c3466fc19a..70b23240f77 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx @@ -6,9 +6,9 @@ import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-bala import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { Caption } from '@app/ui/components/typography/caption'; -import { Pressable } from '@app/ui/pressable/pressable'; import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils'; diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx index d6a2ae51f1c..8a51e08e766 100644 --- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx @@ -4,8 +4,8 @@ import { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-bal import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; -import { Pressable } from '@app/ui/pressable/pressable'; import { parseStacksFungibleTokenAssetBalance } from './fungible-token-asset.utils'; diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx index defc57cfb2e..8ceda5e7139 100644 --- a/src/app/components/transaction-item/transaction-item.layout.tsx +++ b/src/app/components/transaction-item/transaction-item.layout.tsx @@ -3,8 +3,8 @@ import { ReactNode } from 'react'; import { HStack, styled } from 'leather-styles/jsx'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { Caption } from '@app/ui/components/typography/caption'; -import { Pressable } from '@app/ui/pressable/pressable'; interface TransactionItemLayoutProps { openTxLink(): void; diff --git a/src/app/features/approver/approver-demo.tsx b/src/app/features/approver/approver-demo.tsx index b63f8e4f2c1..2156087fb30 100644 --- a/src/app/features/approver/approver-demo.tsx +++ b/src/app/features/approver/approver-demo.tsx @@ -4,10 +4,10 @@ import { Button } from '@app/ui/components/button/button'; import { Callout } from '@app/ui/components/callout/callout'; import { Flag } from '@app/ui/components/flag/flag'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { TooltipProvider } from '@app/ui/components/tooltip/tooltip'; import { InfoCircleIcon } from '@app/ui/icons'; -import { Pressable } from '@app/ui/pressable/pressable'; import { Approver } from './approver'; diff --git a/src/app/features/approver/approver.stories.tsx b/src/app/features/approver/approver.stories.tsx index 30a784932d2..f5f01ce1df0 100644 --- a/src/app/features/approver/approver.stories.tsx +++ b/src/app/features/approver/approver.stories.tsx @@ -5,8 +5,8 @@ import { Button } from '@app/ui/components/button/button'; import { Callout } from '@app/ui/components/callout/callout'; import { Flag } from '@app/ui/components/flag/flag'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { ZapIcon } from '@app/ui/icons'; -import { Pressable } from '@app/ui/pressable/pressable'; import { Approver } from './approver'; @@ -31,7 +31,7 @@ export const ExampleOne: Story = { children: ( <> - Hey watch out for this sketchy app + Subheader with icon diff --git a/src/app/features/approver/approver.tsx b/src/app/features/approver/approver.tsx index fcaf22ad255..f9f1676bf99 100644 --- a/src/app/features/approver/approver.tsx +++ b/src/app/features/approver/approver.tsx @@ -8,6 +8,7 @@ import { ApproverAdvanced } from './components/approver-advanced'; import { ApproverContainer } from './components/approver-container'; import { ApproverHeader } from './components/approver-header'; import { ApproverSection } from './components/approver-section'; +import { ApproverStatus } from './components/approver-status'; import { ApproverSubheader } from './components/approver-subheader'; function Approver(props: HasChildren) { @@ -24,6 +25,7 @@ function Approver(props: HasChildren) { } Approver.Header = ApproverHeader; +Approver.Status = ApproverStatus; Approver.Subheader = ApproverSubheader; Approver.Section = ApproverSection; Approver.Advanced = ApproverAdvanced; diff --git a/src/app/features/approver/components/approver-status.tsx b/src/app/features/approver/components/approver-status.tsx index 037905dc919..e03338713e2 100644 --- a/src/app/features/approver/components/approver-status.tsx +++ b/src/app/features/approver/components/approver-status.tsx @@ -1,18 +1,48 @@ import dayjs from 'dayjs'; import { styled } from 'leather-styles/jsx'; +import { toLocalizedDateFormat } from '@app/common/date-utils'; +import { capitalize } from '@app/common/utils'; +import { loadingStripedGradient } from '@app/ui/animations/loading-striped-gradient'; import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator'; +type ApproverStatus = 'completed' | 'error' | 'pending'; + +interface StatusIndicatorLineProps { + status: ApproverStatus; +} +function StatusIndicatorLine({ status }: StatusIndicatorLineProps) { + switch (status) { + case 'pending': + return ; + case 'error': + return ; + case 'completed': + return ; + default: + return null; + } +} + interface ApproverStatusProps { - status: 'completed' | 'error' | 'pending'; + status: ApproverStatus; } export function ApproverStatus({ status }: ApproverStatusProps) { return ( - - - {status} - {dayjs(new Date()).format()} - + + + + + {capitalize(status)} + {toLocalizedDateFormat(dayjs())} + + ); } diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx index 0c93714bf2f..d75f648b773 100644 --- a/src/app/pages/receive/components/receive-item.tsx +++ b/src/app/pages/receive/components/receive-item.tsx @@ -1,8 +1,8 @@ import { IconButton } from '@app/ui/components/icon-button/icon-button'; import { ItemLayoutWithButtons } from '@app/ui/components/item-layout/item-layout-with-buttons'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { CopyIcon } from '@app/ui/icons/copy-icon'; import { QrCodeIcon } from '@app/ui/icons/qr-code-icon'; -import { Pressable } from '@app/ui/pressable/pressable'; import { truncateMiddle } from '@app/ui/utils/truncate-middle'; interface ReceiveItemProps { diff --git a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx index bb8699069a3..5e9556daf41 100644 --- a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx +++ b/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx @@ -5,7 +5,7 @@ import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungi import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils'; import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; -import { Pressable } from '@app/ui/pressable/pressable'; +import { Pressable } from '@app/ui/components/pressable/pressable'; import { useAlexSdkBalanceAsFiat } from '../../../hooks/use-alex-sdk-fiat-price'; import { SwapAsset } from '../../../hooks/use-swap-form'; diff --git a/src/app/ui/animations/loading-striped-gradient.stories.tsx b/src/app/ui/animations/loading-striped-gradient.stories.tsx new file mode 100644 index 00000000000..7cec12174dc --- /dev/null +++ b/src/app/ui/animations/loading-striped-gradient.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { styled } from 'leather-styles/jsx'; + +import { loadingStripedGradient } from './loading-striped-gradient'; + +function LoadingStripedGradient() { + return ; +} + +const meta: Meta = { + component: LoadingStripedGradient, + tags: ['autodocs'], + title: 'Animation/LoadingStripedGradient', +}; + +export default meta; +type Story = StoryObj; + +export const Item: Story = { + render: () => , +}; diff --git a/src/app/ui/animations/loading-striped-gradient.tsx b/src/app/ui/animations/loading-striped-gradient.tsx new file mode 100644 index 00000000000..6177eeb51cc --- /dev/null +++ b/src/app/ui/animations/loading-striped-gradient.tsx @@ -0,0 +1,16 @@ +import { css } from 'leather-styles/css'; + +export const loadingStripedGradient = css({ + pos: 'relative', + overflow: 'hidden', + content: '""', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundImage: + 'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)', + animation: 'barberpole 30s linear infinite', + backgroundSize: '193% 100%', +}); diff --git a/src/app/ui/components/bullet-separator/bullet-separator.tsx b/src/app/ui/components/bullet-separator/bullet-separator.tsx index a403ed1e79e..beca7a640c9 100644 --- a/src/app/ui/components/bullet-separator/bullet-separator.tsx +++ b/src/app/ui/components/bullet-separator/bullet-separator.tsx @@ -1,6 +1,7 @@ import { cloneElement, isValidElement } from 'react'; import { Circle, CircleProps } from 'leather-styles/jsx'; +import type { SpacingToken } from 'leather-styles/tokens'; export function BulletOperator(props: CircleProps) { return ( @@ -18,13 +19,17 @@ export function BulletOperator(props: CircleProps) { interface BulletSeparatorSeparatorProps { children: React.ReactNode; + spacing?: SpacingToken; } -export function BulletSeparator({ children }: BulletSeparatorSeparatorProps) { +export function BulletSeparator({ children, spacing }: BulletSeparatorSeparatorProps) { const parsedChildren = Array.isArray(children) ? children : [children]; const content = parsedChildren .flatMap((child, index) => { if (!isValidElement(child)) return null; - return [cloneElement(child, { key: index }), ]; + return [ + cloneElement(child, { key: index }), + , + ]; }) .filter(val => val !== null) .slice(0, -1); diff --git a/src/app/ui/components/dropdown-menu/dropdown-menu.tsx b/src/app/ui/components/dropdown-menu/dropdown-menu.tsx index edf39d6a5bf..f6e12b68c0e 100644 --- a/src/app/ui/components/dropdown-menu/dropdown-menu.tsx +++ b/src/app/ui/components/dropdown-menu/dropdown-menu.tsx @@ -4,8 +4,8 @@ import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu'; import { css } from 'leather-styles/css'; import { type HTMLStyledProps, styled } from 'leather-styles/jsx'; +import { pressableBaseStyles, pressableStyles } from '@app/ui/components/pressable/pressable'; import { ChevronDownIcon } from '@app/ui/icons'; -import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable'; import { Flag } from '../flag/flag'; diff --git a/src/app/ui/components/item-layout/item-layout-with-buttons.tsx b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx index 41154bf7d9d..7204b44c584 100644 --- a/src/app/ui/components/item-layout/item-layout-with-buttons.tsx +++ b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { Flex, HStack, Stack, styled } from 'leather-styles/jsx'; -import { pressableCaptionStyles } from '@app/ui/pressable/pressable'; +import { pressableCaptionStyles } from '@app/ui/components/pressable/pressable'; import { Flag } from '../flag/flag'; diff --git a/src/app/ui/components/item-layout/item-layout.tsx b/src/app/ui/components/item-layout/item-layout.tsx index 348eee1a99c..59fb86c3710 100644 --- a/src/app/ui/components/item-layout/item-layout.tsx +++ b/src/app/ui/components/item-layout/item-layout.tsx @@ -1,9 +1,13 @@ import { ReactNode, isValidElement } from 'react'; -import { Flex, HStack, Stack, styled } from 'leather-styles/jsx'; +import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx'; -import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable'; +import { + pressableCaptionStyles, + pressableChevronStyles, +} from '@app/ui/components/pressable/pressable'; +import { CheckmarkIcon } from '../../icons/checkmark-icon'; import { ChevronUpIcon } from '../../icons/chevron-up-icon'; import { Flag, type FlagProps } from '../flag/flag'; @@ -28,10 +32,11 @@ export function ItemLayout({ ...props }: ItemLayoutProps) { return ( - + - {titleLeft} - + {titleLeft} + )} + {isSelected && ( + + + )} {isValidElement(captionLeft) ? ( @@ -55,11 +63,11 @@ export function ItemLayout({ )} - + {isValidElement(titleRight) ? ( titleRight ) : ( - + {titleRight} )} diff --git a/src/app/ui/pressable/pressable.stories.tsx b/src/app/ui/components/pressable/pressable.stories.tsx similarity index 91% rename from src/app/ui/pressable/pressable.stories.tsx rename to src/app/ui/components/pressable/pressable.stories.tsx index 2771422bb84..3b40e4b5e97 100644 --- a/src/app/ui/pressable/pressable.stories.tsx +++ b/src/app/ui/components/pressable/pressable.stories.tsx @@ -2,13 +2,13 @@ import { Meta, StoryObj } from '@storybook/react'; import { styled } from 'leather-styles/jsx'; import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; +import { Pressable as Component } from '@app/ui/components/pressable/pressable'; import { CopyIcon } from '@app/ui/icons/copy-icon'; import { QrCodeIcon } from '@app/ui/icons/qr-code-icon'; -import { Pressable as Component } from '@app/ui/pressable/pressable'; -import { Button } from '../components/button/button'; -import { ItemLayout } from '../components/item-layout/item-layout'; -import { ItemLayoutWithButtons } from '../components/item-layout/item-layout-with-buttons'; +import { Button } from '../button/button'; +import { ItemLayout } from '../item-layout/item-layout'; +import { ItemLayoutWithButtons } from '../item-layout/item-layout-with-buttons'; const meta: Meta = { component: Component, diff --git a/src/app/ui/pressable/pressable.tsx b/src/app/ui/components/pressable/pressable.tsx similarity index 100% rename from src/app/ui/pressable/pressable.tsx rename to src/app/ui/components/pressable/pressable.tsx diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx index 28671f15d1d..05333f393ac 100644 --- a/src/app/ui/components/select/select.tsx +++ b/src/app/ui/components/select/select.tsx @@ -3,7 +3,7 @@ import { ReactNode, forwardRef } from 'react'; import * as RadixSelect from '@radix-ui/react-select'; import { css } from 'leather-styles/css'; -import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable'; +import { pressableBaseStyles, pressableStyles } from '@app/ui/components/pressable/pressable'; export interface SelectItem { iconLeft?: ReactNode; diff --git a/theme/keyframes.ts b/theme/keyframes.ts index 23225294b17..aa04d60765a 100644 --- a/theme/keyframes.ts +++ b/theme/keyframes.ts @@ -17,4 +17,12 @@ export const keyframes: CssKeyframes = { maskPosition: 'left', }, }, + barberpole: { + '0%': { + backgroundPosition: '300% 0', + }, + '100%': { + backgroundPosition: '0 0', + }, + }, };