From f25631d8182a10bf3494a2037d51fe6360c1efe3 Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Thu, 5 Jan 2023 16:07:40 +0800 Subject: [PATCH] updated components, README.md and copy README to thorin on publish --- .github/workflows/publish.yml | 4 + README.md | 24 +++- .../src/components/atoms/Banner/Banner.tsx | 29 ++--- components/src/components/atoms/Card/Card.tsx | 35 +++--- .../atoms/RecordItem/RecordItem.tsx | 96 +++++++-------- components/src/tokens/typography.ts | 2 +- docs/src/components/Nav.tsx | 2 +- docs/src/pages/index.mdx | 4 +- docs/src/reference/mdx/atoms/Banner.docs.mdx | 98 +-------------- docs/src/reference/mdx/atoms/Card.docs.mdx | 30 +---- .../reference/mdx/atoms/RecordItem.docs.mdx | 114 +++++++++++------- 11 files changed, 179 insertions(+), 259 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index b83c23c7..8ed66cf8 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -42,6 +42,10 @@ jobs: git add . git commit -m "${{ github.event.release.tag_name }}" + - name: Copy README + run: | + cp README.md components/README.md + - name: Publish Main if: ${{ github.ref == 'refs/heads/main'}} env: diff --git a/README.md b/README.md index 923abc7f..e1e6e10e 100644 --- a/README.md +++ b/README.md @@ -26,14 +26,30 @@ Checkout the project's [playroom](https://thorin.ens.domains/playroom) to previe In your App component, wrap the root of your app in a [`ThemeProvider`](https://styled-components.com/docs/advanced) module from [styled-components](https://styled-components.com). Import `ThorinGlobalStyles` and declare it as a child of `ThemeProvider` to set global styles. Set the theme by passing a theme object to `ThemeProvider`. ```tsx -import React, { useState } from 'react' import { ThemeProvider } from 'styled-components' -import { DefaultTheme, ThorinGlobalStyles } from '@ensdomains/thorin' +import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin' const App = () => { - const [theme, setTheme] = useState({ mode: 'light' }) return ( - + + + {children} + + ) +} +``` + +### Dark Theme + +To use the dark theme, import darkTheme and pass it to the ThemeProvider + +```tsx +import { ThemeProvider } from 'styled-components' +import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin' + +const App = () => { + return ( + {children} diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx index 6f923ac6..e5f94618 100644 --- a/components/src/components/atoms/Banner/Banner.tsx +++ b/components/src/components/atoms/Banner/Banner.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import styled, { css } from 'styled-components' +import { mq } from '@/src/utils/responsiveHelpers' + import { WithAlert, WithIcon } from '../../../types' import { Typography } from '../Typography' @@ -14,8 +16,6 @@ type BaseProps = { message: string /** The title for the banner */ title?: string - /** Controls the spacing of the banner */ - screen?: 'mobile' | 'desktop' as?: 'a' onDismiss?: () => void } & NativeDivProps @@ -40,9 +40,8 @@ type NonNullableAlert = NonNullable const Container = styled.div<{ $alert: NonNullableAlert - $screen: Props['screen'] }>( - ({ theme, $alert, $screen }) => css` + ({ theme, $alert }) => css` position: relative; background: ${theme.colors.backgroundPrimary}; border: 1px solid ${theme.colors.border}; @@ -65,10 +64,11 @@ const Container = styled.div<{ border: 1px solid ${theme.colors.yellowPrimary}; `}; - ${$screen === 'desktop' && - css` - gap: ${theme.space[6]}; - `} + ${mq.md.min( + css` + gap: ${theme.space[6]}; + `, + )} `, ) @@ -83,10 +83,9 @@ const Content = styled.div( ) const IconContainer = styled.div<{ - $screen: Props['screen'] $alert: NonNullableAlert }>( - ({ theme, $screen, $alert }) => css` + ({ theme, $alert }) => css` width: ${theme.space[8]}; height: ${theme.space[8]}; flex: 0 0 ${theme.space[8]}; @@ -97,12 +96,11 @@ const IconContainer = styled.div<{ height: 100%; } - ${$screen === 'desktop' && - css` + ${mq.md.min(css` width: ${theme.space[10]}; height: ${theme.space[10]}; flex: 0 0 ${theme.space[10]}; - `} + `)} ${$alert === 'error' && css` @@ -203,7 +201,6 @@ export const Banner = ({ title, alert = 'info', icon, - screen: screen, as: asProp, href, onDismiss, @@ -213,8 +210,8 @@ export const Banner = ({ icon || (alert && ['error', 'warning'].includes(alert) ? AlertSVG : EthSVG) return ( - - + + diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx index 85b8e736..632c4844 100644 --- a/components/src/components/atoms/Card/Card.tsx +++ b/components/src/components/atoms/Card/Card.tsx @@ -1,15 +1,16 @@ import * as React from 'react' import styled, { css } from 'styled-components' +import { mq } from '@/src/utils/responsiveHelpers' + import { Typography } from '../Typography' export type Props = { title?: string - variant?: 'mobile' | 'desktop' } & NativeDivProps -const Container = styled.div<{ $variant: Props['variant'] }>( - ({ theme, $variant }) => css` +const Container = styled.div( + ({ theme }) => css` display: flex; flex-direction: column; gap: ${theme.space['4']}; @@ -19,32 +20,34 @@ const Container = styled.div<{ $variant: Props['variant'] }>( background-color: ${theme.colors.backgroundPrimary}; border: 1px solid ${theme.colors.border}; - ${$variant === 'desktop' && - css` - padding: ${theme.space['6']}; - `} + ${mq.md.min( + css` + padding: ${theme.space['6']}; + `, + )} `, ) -const Divider = styled.div<{ $variant: Props['variant'] }>( - ({ theme, $variant }) => css` +const Divider = styled.div( + ({ theme }) => css` width: calc(100% + 2 * ${theme.space['4']}); height: 1px; background: ${theme.colors.border}; margin: 0 -${theme.space['4']}; - ${$variant === 'desktop' && - css` - margin: 0 -${theme.space['6']}; - width: calc(100% + 2 * ${theme.space['6']}); - `} + ${mq.md.min( + css` + margin: 0 -${theme.space['6']}; + width: calc(100% + 2 * ${theme.space['6']}); + `, + )} `, ) type NativeDivProps = React.HTMLAttributes -export const Card = ({ title, variant, children, ...props }: Props) => { +export const Card = ({ title, children, ...props }: Props) => { return ( - + {title && {title}} {children} diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx index 8e1d9cb4..fb93e6a0 100644 --- a/components/src/components/atoms/RecordItem/RecordItem.tsx +++ b/components/src/components/atoms/RecordItem/RecordItem.tsx @@ -7,14 +7,13 @@ import { CheckSVG, CopySVG, UpArrowSVG } from '@/src' import { Typography } from '../Typography/Typography' import { useCopied } from '../../../hooks/useCopied' -type Screen = 'desktop' | 'mobile' type Size = 'small' | 'large' type BaseProps = { value: string link?: string - screen?: Screen size?: Size + inline?: boolean icon?: ReactNode keyLabel?: string | ReactNode keySublabel?: string | ReactNode @@ -25,71 +24,67 @@ type BaseProps = { export type Props = BaseProps const Container = styled.button<{ - $size: Size + $inline: boolean }>( - ({ theme, $size }) => css` + ({ theme, $inline }) => css` display: flex; align-items: flex-start; gap: ${theme.space[2]}; padding: ${theme.space['2.5']} ${theme.space[3]}; - height: ${theme.space['10']}; - width: fit-content; + width: 100%; + height: fit-content; background: ${theme.colors.greySurface}; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radii.input}; - ${$size === 'large' && + ${$inline && css` - width: 100%; - height: fit-content; + width: fit-content; + height: ${theme.space['10']}; `} `, ) -const PrefixContainer = styled.div<{ $screen: Screen; $size: Size }>( - ({ theme, $size, $screen }) => css` +const PrefixContainer = styled.div<{ $size: Size; $inline: boolean }>( + ({ theme, $inline, $size }) => css` display: flex; gap: ${theme.space[2]}; align-items: flex-start; + width: ${$size === 'large' ? theme.space['30'] : theme.space['22.5']}; + flex: 0 0 ${$size === 'large' ? theme.space['30'] : theme.space['22.5']}; - ${$size === 'large' && + ${$inline && css` - width: ${$screen === 'desktop' ? theme.space['30'] : theme.space['22.5']}; - flex: 0 0 - ${$screen === 'desktop' ? theme.space['30'] : theme.space['22.5']}; + width: fit-content; + flex: initial; `} `, ) -const PrefixLabelsContainer = styled.div<{ $size: Size }>( - ({ theme, $size }) => css` +const PrefixLabelsContainer = styled.div<{ $inline: boolean }>( + ({ theme, $inline }) => css` display: flex; - gap: ${theme.space[2]}; - align-items: center; + flex-direction: column; + align-items: flex-start; + gap: 0; + overflow: hidden; - ${$size === 'large' && + ${$inline && css` - flex-direction: column; - align-items: flex-start; - gap: 0; + flex-direction: row; + gap: ${theme.space[2]}; + align-items: center; `} `, ) const PrefixLabel = styled(Typography)<{ - $screen: 'desktop' | 'mobile' - $size: 'small' | 'large' + $inline: boolean }>( () => css` text-align: left; - width: 100%; - `, -) - -const PrefixSublabel = styled(Typography)( - () => css` - text-align: left; + width: 100%; ; `, ) @@ -103,14 +98,15 @@ const PrefixIcon = styled.div( `, ) -const Label = styled(Typography)<{ $size: Size }>( - ({ $size }) => css` +const Label = styled(Typography)<{ $inline: boolean }>( + ({ $inline }) => css` flex: 1; text-align: left; + word-break: break-all; - ${$size === 'large' && + ${$inline && css` - word-break: break-all; + word-break: initial; `} `, ) @@ -131,8 +127,8 @@ const TrailingIcon = styled.svg<{ $rotate?: boolean }>( export const RecordItem = ({ link, - screen = 'mobile', size = 'small', + inline = false, icon, keyLabel, keySublabel, @@ -150,12 +146,10 @@ export const RecordItem = ({ const KeyLabel = typeof keyLabel === 'string' ? ( {keyLabel} @@ -165,12 +159,14 @@ export const RecordItem = ({ const KeySublabel = typeof keySublabel === 'string' ? ( - {keySublabel} - + ) : ( keySublabel ) @@ -182,7 +178,7 @@ export const RecordItem = ({ return ( {hasPrefix && ( - + {icon && {icon}} {hasLabels && ( - + {KeyLabel} {KeySublabel} @@ -205,8 +201,8 @@ export const RecordItem = ({ )} diff --git a/components/src/tokens/typography.ts b/components/src/tokens/typography.ts index fd452595..2606665e 100644 --- a/components/src/tokens/typography.ts +++ b/components/src/tokens/typography.ts @@ -27,7 +27,7 @@ export const fontSizes: { [key in FontSize]: string } = { large: '1.125rem', body: '1rem', small: '0.875rem', - extraSmall: '0.75rem', + extraSmall: '0.5625rem', } export const fontWeights: { [key in FontWeight]: string } = { diff --git a/docs/src/components/Nav.tsx b/docs/src/components/Nav.tsx index feddf292..f7c2474d 100644 --- a/docs/src/components/Nav.tsx +++ b/docs/src/components/Nav.tsx @@ -224,7 +224,7 @@ export const Nav = ({ links }: Props) => { Components {links.map((x) => ( - + {x.name} diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx index 357d8c73..fb430f3f 100644 --- a/docs/src/pages/index.mdx +++ b/docs/src/pages/index.mdx @@ -80,13 +80,13 @@ const App = () => { ## Use Components ```tsx -import { Button, LockClosedSVG } from '@ensdomains/thorin' +import { Button, LockSVG } from '@ensdomains/thorin' ``` ```tsx live=true expand=true
-
diff --git a/docs/src/reference/mdx/atoms/Banner.docs.mdx b/docs/src/reference/mdx/atoms/Banner.docs.mdx index aa170ca3..7982e372 100644 --- a/docs/src/reference/mdx/atoms/Banner.docs.mdx +++ b/docs/src/reference/mdx/atoms/Banner.docs.mdx @@ -19,44 +19,23 @@ import { Banner } from '@ensdomains/thorin' -## Screen +## Alert ```tsx live=true - - - @@ -69,42 +48,18 @@ import { Banner } from '@ensdomains/thorin' alert('dismissed')} - /> - alert('dismissed')} - /> - alert('dismissed')} - /> - alert('dismissed')} /> alert('dismissed')} /> alert('dismissed')} /> @@ -120,31 +75,6 @@ import { Banner } from '@ensdomains/thorin' as="a" href="#" message="Lorem ipsum dolor sit amet, consectetur adipiscing elit." - screen="desktop" - title="Heading" - /> - - - @@ -174,42 +102,18 @@ import { Banner } from '@ensdomains/thorin' alert="info" icon={FlameSVG} message="Lorem ipsum dolor sit amet, consectetur adipiscing elit." - screen="desktop" - title="Heading" - /> - - - diff --git a/docs/src/reference/mdx/atoms/Card.docs.mdx b/docs/src/reference/mdx/atoms/Card.docs.mdx index 5ff64b93..57626d63 100644 --- a/docs/src/reference/mdx/atoms/Card.docs.mdx +++ b/docs/src/reference/mdx/atoms/Card.docs.mdx @@ -22,7 +22,7 @@ import { Card } from '@ensdomains/thorin' ```tsx live=true - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -30,23 +30,7 @@ import { Card } from '@ensdomains/thorin' Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -62,16 +46,6 @@ import { Card } from '@ensdomains/thorin' ```tsx live=true - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/docs/src/reference/mdx/atoms/RecordItem.docs.mdx b/docs/src/reference/mdx/atoms/RecordItem.docs.mdx index f995dbfc..0de2f149 100644 --- a/docs/src/reference/mdx/atoms/RecordItem.docs.mdx +++ b/docs/src/reference/mdx/atoms/RecordItem.docs.mdx @@ -19,14 +19,18 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - 0xb794...9268 - }>0xb794...9268 - + 0xb794f5ea0ba39494ce839613fffba74279579268 - } size="large"> + }> 0xb794f5ea0ba39494ce839613fffba74279579268 + + 0xb794...9268 + + } inline> + 0xb794...9268 + ``` @@ -34,48 +38,48 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - } screen="desktop" size="small"> - Small on desktop with icon - - - Small on desktop with label + } size="small"> + Small with icon - } screen="mobile" size="small"> - Small on mobile with icon - - - Small on mobile with label - - } screen="desktop" size="large"> - Large on desktop with icon - - - Large on desktop with label + } size="large"> + Large with icon - } screen="mobile" size="large"> - Large on mobile with icon + + Small with label - - Large on mobile with label + + Large with label ``` -## Screen +## Inline ```tsx live=true - } screen="desktop"> - Desktop with icon + } size="small"> + Small with icon - } screen="mobile"> - Mobile with icon + + Small with label - - Desktop with label + } size="large"> + Large with icon + + + Large with label + + } inline size="small"> + Small and inline with icon + + + Small and inline with label - - Mobile with label + } inline size="large"> + Large and inline with icon + + + Large and inline with label ``` @@ -84,17 +88,39 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - } link="https://ens.domains" screen="desktop"> - Desktop with link - - } screen="desktop"> - Desktop without link - - - Mobile with link - - - Mobile without link + } link="https://ens.domains" size="small"> + Small with icon + + + Small with label + + } link="https://ens.domains" size="large"> + Large with icon + + + Large with label + + } + inline + link="https://ens.domains" + size="small" + > + Small and inline with icon + + + Small and inline with label + + } + inline + link="https://ens.domains" + size="large" + > + Large and inline with icon + + + Large and inline with label ```