From 7c36ab793fd15f833a19709647022fe568419721 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 22 Nov 2023 19:02:30 -0300 Subject: [PATCH 01/10] feat(ui): input component --- packages/ui/src/design-system/index.ts | 1 + packages/ui/src/design-system/input/index.ts | 2 + .../design-system/input/input.component.tsx | 74 +++++++++++++++ .../ui/src/design-system/input/input.css.ts | 70 ++++++++++++++ .../design-system/input/input.stories.css.ts | 9 ++ .../src/design-system/input/input.stories.tsx | 91 +++++++++++++++++++ 6 files changed, 247 insertions(+) create mode 100644 packages/ui/src/design-system/input/index.ts create mode 100644 packages/ui/src/design-system/input/input.component.tsx create mode 100644 packages/ui/src/design-system/input/input.css.ts create mode 100644 packages/ui/src/design-system/input/input.stories.css.ts create mode 100644 packages/ui/src/design-system/input/input.stories.tsx diff --git a/packages/ui/src/design-system/index.ts b/packages/ui/src/design-system/index.ts index f865c3f124..09176187cc 100644 --- a/packages/ui/src/design-system/index.ts +++ b/packages/ui/src/design-system/index.ts @@ -27,3 +27,4 @@ export { PasswordBox } from './password-box'; export { Metadata } from './metadata'; export { TextLink } from './text-link'; export * as ProfileDropdown from './profile-dropdown'; +export { Input } from './input'; diff --git a/packages/ui/src/design-system/input/index.ts b/packages/ui/src/design-system/input/index.ts new file mode 100644 index 0000000000..ff0e7390eb --- /dev/null +++ b/packages/ui/src/design-system/input/index.ts @@ -0,0 +1,2 @@ +export { Input } from './input.component'; +export type { InputProps } from './input.component'; diff --git a/packages/ui/src/design-system/input/input.component.tsx b/packages/ui/src/design-system/input/input.component.tsx new file mode 100644 index 0000000000..b0600b7f67 --- /dev/null +++ b/packages/ui/src/design-system/input/input.component.tsx @@ -0,0 +1,74 @@ +import React from 'react'; + +import * as Form from '@radix-ui/react-form'; +import cn from 'classnames'; + +import { Flex } from '../flex'; +import * as Typography from '../typography'; + +import * as cx from './input.css'; + +export interface InputProps extends Form.FormControlProps { + required?: boolean; + disabled?: boolean; + id?: string; + label: string; + name?: string; + value: string; + errorMessage?: string; + onChange?: (event: Readonly>) => void; + containerClassName?: string; + containerStyle?: React.CSSProperties; +} + +export const Input = ({ + required = false, + disabled = false, + id, + label, + name, + value, + errorMessage = '', + containerClassName = '', + onChange, + containerStyle, +}: Readonly): JSX.Element => { + return ( + + + + + + + + {label} + + + + {errorMessage && ( + + {errorMessage} + + )} + + ); +}; diff --git a/packages/ui/src/design-system/input/input.css.ts b/packages/ui/src/design-system/input/input.css.ts new file mode 100644 index 0000000000..d897ee97ee --- /dev/null +++ b/packages/ui/src/design-system/input/input.css.ts @@ -0,0 +1,70 @@ +import { globalStyle, vars, style } from '../../design-tokens'; + +export const container = style({ + background: vars.colors.$input_container_bgColor, + paddingTop: vars.spacing.$12, + maxHeight: vars.spacing.$52, + borderRadius: vars.radius.$medium, + width: vars.spacing.$380, + + ':hover': { + outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, + }, +}); + +export const disabledContainer = style({ + ':hover': { + outline: 'none', + }, +}); + +export const input = style({ + width: 'calc(100% - 90px)', + fontSize: vars.fontSizes.$18, + fontFamily: vars.fontFamily.$nova, + padding: `${vars.spacing.$10} ${vars.spacing.$20}`, + border: 'none', + outline: 'none', + background: 'transparent', + color: vars.colors.$input_value_color, + fontWeight: vars.fontWeights.$semibold, + + ':disabled': { + opacity: vars.opacities.$0_5, + }, +}); + +export const label = style({ + position: 'relative', + display: 'block', + left: vars.spacing.$20, + top: '-40px', + transitionDuration: '0.2s', + pointerEvents: 'none', + fontFamily: vars.fontFamily.$nova, + color: vars.colors.$input_label_color, + fontSize: vars.fontSizes.$18, + fontWeight: vars.fontWeights.$semibold, +}); + +export const disabledLabel = style({ + opacity: vars.opacities.$0_5, +}); + +export const errorMessage = style({ + color: vars.colors.$input_error_message_color, + marginLeft: vars.spacing.$20, + fontWeight: vars.fontWeights.$semibold, +}); + +globalStyle( + `${input}:focus + ${label}, ${input}:not(:placeholder-shown) + ${label}`, + { + top: '-52px', + fontSize: vars.fontSizes.$12, + }, +); + +globalStyle(`${container}:has(${input}:focus)`, { + outline: `3px solid ${vars.colors.$input_container_focused_outline_color}`, +}); diff --git a/packages/ui/src/design-system/input/input.stories.css.ts b/packages/ui/src/design-system/input/input.stories.css.ts new file mode 100644 index 0000000000..b71497ab2f --- /dev/null +++ b/packages/ui/src/design-system/input/input.stories.css.ts @@ -0,0 +1,9 @@ +import { style, vars } from '../../design-tokens'; + +export const hoverEffect = style({ + outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, +}); + +export const focusEffect = style({ + outline: `3px solid ${vars.colors.$input_container_focused_outline_color}`, +}); diff --git a/packages/ui/src/design-system/input/input.stories.tsx b/packages/ui/src/design-system/input/input.stories.tsx new file mode 100644 index 0000000000..9d6dfcd876 --- /dev/null +++ b/packages/ui/src/design-system/input/input.stories.tsx @@ -0,0 +1,91 @@ +import React from 'react'; + +import type { Meta } from '@storybook/react'; + +import { LocalThemeProvider, ThemeColorScheme } from '../../design-tokens'; +import { page, Section, Variants } from '../decorators'; +import { Divider } from '../divider'; +import { Flex } from '../flex'; +import { Cell, Grid } from '../grid'; + +import { Input } from './input.component'; +import * as cx from './input.stories.css'; + +export default { + title: 'Input Fields/Input', + component: Input, + decorators: [ + page({ + title: 'Input', + }), + ], +} as Meta; + +const MainComponents = (): JSX.Element => ( + <> + + + + + + + + + + + + + + + + + + + + + +); + +export const Overview = (): JSX.Element => { + const [value, setValue] = React.useState(''); + + return ( + + +
+ + { + setValue(event.target.value); + }} + /> + +
+ + + +
+ + + + + + + + +
+ + + ); +}; From a3ed6d6659de004a902c26a7468bc065cca81367 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 22 Nov 2023 19:03:16 -0300 Subject: [PATCH 02/10] feat(extension): edit account drawer --- .../EditAccount/EditAccountDrawer.tsx | 59 +++++++++++++++++++ .../account/components/EditAccount/hooks.ts | 11 ++++ .../src/lib/translations/en.json | 9 +++ 3 files changed, 79 insertions(+) create mode 100644 apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx create mode 100644 apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx new file mode 100644 index 0000000000..e0da9b0a6c --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx @@ -0,0 +1,59 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, Flex, Button, Text, Input } from '@lace/ui'; +import { Drawer, DrawerNavigation } from '@lace/common'; + +export type Props = { + onSave: (name: string) => void; + visible: boolean; + hide: () => void; + name: string; + index: string; +}; + +export const EditAccountDrawer = ({ name, index, visible, onSave, hide }: Props): React.ReactElement => { + const { t } = useTranslation(); + const [currentName, setName] = useState(name); + + return ( + } + footer={ + + + onSave(currentName)} + data-testid="edit-account-save-btn" + label={t('account.edit.footer.save')} + /> + + + + } + > +
+ + {t('account.edit.title')} + + + {t('account.edit.subtitle')} + + setName(e.target.value)} + /> +
+ + ); +}; diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts b/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts new file mode 100644 index 0000000000..f17ee3d5f8 --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts @@ -0,0 +1,11 @@ +import { useState } from 'react'; + +export const useEditAccountDrawer = (): { isOpen: boolean; open: () => void; hide: () => void } => { + const [visible, setVisible] = useState(false); + + return { + isOpen: visible, + open: () => setVisible(true), + hide: () => setVisible(false) + }; +}; diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json index a383db68f8..6b60b78510 100644 --- a/apps/browser-extension-wallet/src/lib/translations/en.json +++ b/apps/browser-extension-wallet/src/lib/translations/en.json @@ -1313,5 +1313,14 @@ "errorText": "Wallet failed to sync", "successText": "Wallet synced successfully" } + }, + "account": { + "edit": { + "title": "Edit account name", + "subtitle": "Choose a name to identify your account", + "input.label": "Account name", + "footer.save": "Save", + "footer.cancel": "Cancel" + } } } From de3223c3ff036c44061c65326a9ce4ffb4e13d91 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 23 Nov 2023 09:55:17 -0300 Subject: [PATCH 03/10] feat(extension): add unit test --- .../EditAccount/EditAccountDrawer.test.tsx | 57 +++++++++++++++++++ .../EditAccount/EditAccountDrawer.tsx | 7 ++- .../design-system/input/input.component.tsx | 3 + .../src/design-system/input/input.stories.tsx | 42 +++++++------- 4 files changed, 84 insertions(+), 25 deletions(-) create mode 100644 apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx new file mode 100644 index 0000000000..7f06c9d6d2 --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import { EditAccountDrawer } from './EditAccountDrawer'; +import '@testing-library/jest-dom'; + +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ t: jest.fn() }) +})); + +describe('EditAccountDrawer', () => { + const onSaveMock = jest.fn(); + const hideMock = jest.fn(); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('displays default account name', () => { + render(); + + expect(screen.getByTestId('edit-account')).toBeInTheDocument(); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Account #1'); + expect(screen.getByTestId('edit-account-name-input')).toHaveValue(''); + expect(screen.getByTestId('edit-account-save-btn')).toBeDisabled(); + }); + + it('displays correct account name', () => { + render(); + + expect(screen.getByTestId('edit-account')).toBeInTheDocument(); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Test Account'); + expect(screen.getByTestId('edit-account-name-input')).toHaveValue('Test Account'); + expect(screen.getByTestId('edit-account-save-btn')).toBeDisabled(); + }); + + it('updates input value on change and enables save button', () => { + render(); + + const input = screen.getByTestId('edit-account-name-input'); + + fireEvent.change(input, { target: { value: 'New Account Name' } }); + fireEvent.click(screen.getByTestId('edit-account-save-btn')); + + expect(input).toHaveValue('New Account Name'); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Test Account'); + expect(screen.getByTestId('edit-account-save-btn')).toBeEnabled(); + expect(onSaveMock).toHaveBeenCalledWith('New Account Name'); + }); + + it('calls hide function when Cancel button is clicked', () => { + render(); + + fireEvent.click(screen.getByTestId('edit-account-cancel-btn')); + + expect(hideMock).toHaveBeenCalled(); + }); +}); diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx index e0da9b0a6c..b71125b6df 100644 --- a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx @@ -13,12 +13,12 @@ export type Props = { export const EditAccountDrawer = ({ name, index, visible, onSave, hide }: Props): React.ReactElement => { const { t } = useTranslation(); - const [currentName, setName] = useState(name); + const [currentName, setCurrentName] = useState(name); return ( } footer={ @@ -48,10 +48,11 @@ export const EditAccountDrawer = ({ name, index, visible, onSave, hide }: Props) {t('account.edit.subtitle')} setName(e.target.value)} + onChange={(e) => setCurrentName(e.target.value)} /> diff --git a/packages/ui/src/design-system/input/input.component.tsx b/packages/ui/src/design-system/input/input.component.tsx index b0600b7f67..2f900cee43 100644 --- a/packages/ui/src/design-system/input/input.component.tsx +++ b/packages/ui/src/design-system/input/input.component.tsx @@ -19,6 +19,7 @@ export interface InputProps extends Form.FormControlProps { onChange?: (event: Readonly>) => void; containerClassName?: string; containerStyle?: React.CSSProperties; + 'data-testid'?: string; } export const Input = ({ @@ -32,6 +33,7 @@ export const Input = ({ containerClassName = '', onChange, containerStyle, + ...rest }: Readonly): JSX.Element => { return ( @@ -55,6 +57,7 @@ export const Input = ({ value={value} onChange={onChange} id={id} + data-testid={rest['data-testid']} /> ( - <> - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); export const Overview = (): JSX.Element => { From 69f3f66a01e77f6075db1a8966d3ee26eae7bf2f Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 24 Nov 2023 11:44:12 -0300 Subject: [PATCH 04/10] feat: rename input component --- .../EditAccount/EditAccountDrawer.tsx | 4 ++-- packages/ui/src/design-system/index.ts | 2 +- packages/ui/src/design-system/input/index.ts | 2 -- .../ui/src/design-system/text-box/index.ts | 2 ++ .../text-box.component.tsx} | 8 +++---- .../input.css.ts => text-box/text-box.css.ts} | 0 .../text-box.stories.css.ts} | 0 .../text-box.stories.tsx} | 24 +++++++++---------- 8 files changed, 21 insertions(+), 21 deletions(-) delete mode 100644 packages/ui/src/design-system/input/index.ts create mode 100644 packages/ui/src/design-system/text-box/index.ts rename packages/ui/src/design-system/{input/input.component.tsx => text-box/text-box.component.tsx} (91%) rename packages/ui/src/design-system/{input/input.css.ts => text-box/text-box.css.ts} (100%) rename packages/ui/src/design-system/{input/input.stories.css.ts => text-box/text-box.stories.css.ts} (100%) rename packages/ui/src/design-system/{input/input.stories.tsx => text-box/text-box.stories.tsx} (75%) diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx index b71125b6df..1e1f27b568 100644 --- a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Box, Flex, Button, Text, Input } from '@lace/ui'; +import { Box, Flex, Button, Text, TextBox } from '@lace/ui'; import { Drawer, DrawerNavigation } from '@lace/common'; export type Props = { @@ -47,7 +47,7 @@ export const EditAccountDrawer = ({ name, index, visible, onSave, hide }: Props) {t('account.edit.subtitle')} - ): JSX.Element => { +}: Readonly): JSX.Element => { return ( diff --git a/packages/ui/src/design-system/input/input.css.ts b/packages/ui/src/design-system/text-box/text-box.css.ts similarity index 100% rename from packages/ui/src/design-system/input/input.css.ts rename to packages/ui/src/design-system/text-box/text-box.css.ts diff --git a/packages/ui/src/design-system/input/input.stories.css.ts b/packages/ui/src/design-system/text-box/text-box.stories.css.ts similarity index 100% rename from packages/ui/src/design-system/input/input.stories.css.ts rename to packages/ui/src/design-system/text-box/text-box.stories.css.ts diff --git a/packages/ui/src/design-system/input/input.stories.tsx b/packages/ui/src/design-system/text-box/text-box.stories.tsx similarity index 75% rename from packages/ui/src/design-system/input/input.stories.tsx rename to packages/ui/src/design-system/text-box/text-box.stories.tsx index 1dd8d1fa38..50e4851eb3 100644 --- a/packages/ui/src/design-system/input/input.stories.tsx +++ b/packages/ui/src/design-system/text-box/text-box.stories.tsx @@ -8,15 +8,15 @@ import { Divider } from '../divider'; import { Flex } from '../flex'; import { Cell, Grid } from '../grid'; -import { Input } from './input.component'; -import * as cx from './input.stories.css'; +import { TextBox } from './text-box.component'; +import * as cx from './text-box.stories.css'; export default { - title: 'Input Fields/Input', - component: Input, + title: 'Input Fields/TextBox', + component: TextBox, decorators: [ page({ - title: 'Input', + title: 'TextBox', }), ], } as Meta; @@ -24,22 +24,22 @@ export default { const MainComponents = (): JSX.Element => ( - + - + - + - + - + - + ); @@ -52,7 +52,7 @@ export const Overview = (): JSX.Element => {
- { From e8d9ff5b864b473377424361ba1a20b0823032c4 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 24 Nov 2023 11:46:39 -0300 Subject: [PATCH 05/10] feat(ui): use pseudo parameters --- .../ui/src/design-system/text-box/text-box.css.ts | 8 ++++---- .../text-box/text-box.stories.css.ts | 9 --------- .../design-system/text-box/text-box.stories.tsx | 15 +++++++++++---- 3 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 packages/ui/src/design-system/text-box/text-box.stories.css.ts diff --git a/packages/ui/src/design-system/text-box/text-box.css.ts b/packages/ui/src/design-system/text-box/text-box.css.ts index d897ee97ee..9d5d642b11 100644 --- a/packages/ui/src/design-system/text-box/text-box.css.ts +++ b/packages/ui/src/design-system/text-box/text-box.css.ts @@ -6,10 +6,6 @@ export const container = style({ maxHeight: vars.spacing.$52, borderRadius: vars.radius.$medium, width: vars.spacing.$380, - - ':hover': { - outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, - }, }); export const disabledContainer = style({ @@ -68,3 +64,7 @@ globalStyle( globalStyle(`${container}:has(${input}:focus)`, { outline: `3px solid ${vars.colors.$input_container_focused_outline_color}`, }); + +globalStyle(`${container}:has(${input}:hover)`, { + outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, +}); diff --git a/packages/ui/src/design-system/text-box/text-box.stories.css.ts b/packages/ui/src/design-system/text-box/text-box.stories.css.ts deleted file mode 100644 index b71497ab2f..0000000000 --- a/packages/ui/src/design-system/text-box/text-box.stories.css.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { style, vars } from '../../design-tokens'; - -export const hoverEffect = style({ - outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, -}); - -export const focusEffect = style({ - outline: `3px solid ${vars.colors.$input_container_focused_outline_color}`, -}); diff --git a/packages/ui/src/design-system/text-box/text-box.stories.tsx b/packages/ui/src/design-system/text-box/text-box.stories.tsx index 50e4851eb3..6e19512b6d 100644 --- a/packages/ui/src/design-system/text-box/text-box.stories.tsx +++ b/packages/ui/src/design-system/text-box/text-box.stories.tsx @@ -9,14 +9,14 @@ import { Flex } from '../flex'; import { Cell, Grid } from '../grid'; import { TextBox } from './text-box.component'; -import * as cx from './text-box.stories.css'; export default { title: 'Input Fields/TextBox', component: TextBox, decorators: [ page({ - title: 'TextBox', + title: 'Text Box', + subtitle: 'A text input', }), ], } as Meta; @@ -27,7 +27,7 @@ const MainComponents = (): JSX.Element => ( - + @@ -39,7 +39,7 @@ const MainComponents = (): JSX.Element => ( - + ); @@ -87,3 +87,10 @@ export const Overview = (): JSX.Element => { ); }; + +Overview.parameters = { + pseudo: { + hover: '#hover', + focus: '#focus', + }, +}; From 2060606849d6c7bcd8f2693465058bdf50377661 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 24 Nov 2023 13:11:48 -0300 Subject: [PATCH 06/10] feat(ui): input width --- packages/ui/src/design-system/text-box/text-box.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/design-system/text-box/text-box.css.ts b/packages/ui/src/design-system/text-box/text-box.css.ts index 9d5d642b11..ce8bcbb1e8 100644 --- a/packages/ui/src/design-system/text-box/text-box.css.ts +++ b/packages/ui/src/design-system/text-box/text-box.css.ts @@ -5,7 +5,7 @@ export const container = style({ paddingTop: vars.spacing.$12, maxHeight: vars.spacing.$52, borderRadius: vars.radius.$medium, - width: vars.spacing.$380, + width: 'auto', }); export const disabledContainer = style({ From 31ad4785d85998cdb44647627ce4d8415a59afa7 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 24 Nov 2023 13:12:40 -0300 Subject: [PATCH 07/10] feat(ui): input disabled style --- .../design-system/text-box/text-box.component.tsx | 1 - .../ui/src/design-system/text-box/text-box.css.ts | 14 ++++---------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/design-system/text-box/text-box.component.tsx b/packages/ui/src/design-system/text-box/text-box.component.tsx index 5a35934e24..7a37bcab55 100644 --- a/packages/ui/src/design-system/text-box/text-box.component.tsx +++ b/packages/ui/src/design-system/text-box/text-box.component.tsx @@ -41,7 +41,6 @@ export const TextBox = ({ Date: Fri, 24 Nov 2023 13:24:12 -0300 Subject: [PATCH 08/10] feat(extension): add ui package --- apps/browser-extension-wallet/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/browser-extension-wallet/package.json b/apps/browser-extension-wallet/package.json index 7b93f63baf..22f390146c 100644 --- a/apps/browser-extension-wallet/package.json +++ b/apps/browser-extension-wallet/package.json @@ -54,6 +54,7 @@ "@lace/common": "0.1.0", "@lace/core": "0.1.0", "@lace/staking": "0.1.0", + "@lace/ui": "^0.1.0", "@react-rxjs/core": "^0.9.8", "@react-rxjs/utils": "^0.9.5", "@vespaiach/axios-fetch-adapter": "^0.3.0", From 70778187e1ec953dd6d46e73665d37aa08bdeafc Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Mon, 27 Nov 2023 08:51:45 -0300 Subject: [PATCH 09/10] feat: update lock file --- yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/yarn.lock b/yarn.lock index fb109c846a..fda8b47d21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7853,6 +7853,7 @@ __metadata: "@lace/common": 0.1.0 "@lace/core": 0.1.0 "@lace/staking": 0.1.0 + "@lace/ui": ^0.1.0 "@react-rxjs/core": ^0.9.8 "@react-rxjs/utils": ^0.9.5 "@types/dotenv-webpack": 7.0.3 From 7391a3f09b2f3683b570adce5df59e5fc9052c19 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Mon, 27 Nov 2023 09:15:14 -0300 Subject: [PATCH 10/10] feat(ui): remove redundant styles --- .../text-box/text-box.component.tsx | 6 +----- .../design-system/text-box/text-box.css.ts | 19 ++++++------------- .../text-box/text-box.stories.tsx | 2 +- 3 files changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/design-system/text-box/text-box.component.tsx b/packages/ui/src/design-system/text-box/text-box.component.tsx index 7a37bcab55..4103d53e4a 100644 --- a/packages/ui/src/design-system/text-box/text-box.component.tsx +++ b/packages/ui/src/design-system/text-box/text-box.component.tsx @@ -59,11 +59,7 @@ export const TextBox = ({ data-testid={rest['data-testid']} /> - - {label} - + {label} {errorMessage && ( diff --git a/packages/ui/src/design-system/text-box/text-box.css.ts b/packages/ui/src/design-system/text-box/text-box.css.ts index 16fd39ad73..9743bda7c3 100644 --- a/packages/ui/src/design-system/text-box/text-box.css.ts +++ b/packages/ui/src/design-system/text-box/text-box.css.ts @@ -6,22 +6,18 @@ export const container = style({ maxHeight: vars.spacing.$52, borderRadius: vars.radius.$medium, width: 'auto', + fontWeight: vars.fontWeights.$semibold, + fontFamily: vars.fontFamily.$nova, }); export const input = style({ width: 'calc(100% - 90px)', fontSize: vars.fontSizes.$18, - fontFamily: vars.fontFamily.$nova, padding: `${vars.spacing.$10} ${vars.spacing.$20}`, border: 'none', outline: 'none', background: 'transparent', color: vars.colors.$input_value_color, - fontWeight: vars.fontWeights.$semibold, - - ':disabled': { - opacity: vars.opacities.$0_5, - }, }); export const label = style({ @@ -31,20 +27,13 @@ export const label = style({ top: '-40px', transitionDuration: '0.2s', pointerEvents: 'none', - fontFamily: vars.fontFamily.$nova, color: vars.colors.$input_label_color, fontSize: vars.fontSizes.$18, - fontWeight: vars.fontWeights.$semibold, -}); - -export const disabledLabel = style({ - opacity: vars.opacities.$0_5, }); export const errorMessage = style({ color: vars.colors.$input_error_message_color, marginLeft: vars.spacing.$20, - fontWeight: vars.fontWeights.$semibold, }); globalStyle( @@ -55,6 +44,10 @@ globalStyle( }, ); +globalStyle(`${container}:has(${input}:disabled)`, { + opacity: vars.opacities.$0_5, +}); + globalStyle(`${container}:has(${input}:hover:not(:disabled))`, { outline: `2px solid ${vars.colors.$input_container_hover_outline_color}`, }); diff --git a/packages/ui/src/design-system/text-box/text-box.stories.tsx b/packages/ui/src/design-system/text-box/text-box.stories.tsx index 6e19512b6d..eb5236347c 100644 --- a/packages/ui/src/design-system/text-box/text-box.stories.tsx +++ b/packages/ui/src/design-system/text-box/text-box.stories.tsx @@ -11,7 +11,7 @@ import { Cell, Grid } from '../grid'; import { TextBox } from './text-box.component'; export default { - title: 'Input Fields/TextBox', + title: 'Input Fields/Text Box', component: TextBox, decorators: [ page({