diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx index 21c28bea..4b025db4 100644 --- a/components/src/components/atoms/Avatar/Avatar.tsx +++ b/components/src/components/atoms/Avatar/Avatar.tsx @@ -1,12 +1,11 @@ import * as React from 'react' -import { sprinkles } from '@/src/css/sprinkles.css' - -import { rawColorToRGBA } from '@/src/tokens/color' +import { iconClass, img, placeholder } from './styles.css' import { Box, type BoxProps } from '../Box/Box' -import { avatar } from './styles.css' +import { avatar, overlay } from './styles.css' import { CheckSVG } from '../../../index' +import clsx from 'clsx' type NativeImgAttributes = React.ImgHTMLAttributes @@ -39,19 +38,23 @@ const Placeholder = ({ $disabled, $url, ...props -}: PlaceholderProps & BoxProps) => ( - -) +}: PlaceholderProps & BoxProps) => { + return ( + + ) +} export type AvatarProps = { /** Accessibility text. */ @@ -67,7 +70,7 @@ export type AvatarProps = { /** An element that overlays the avatar */ checked?: boolean /** An svg to overlay over the avatar */ - icon?: React.ReactElement + icon?: React.FC /** The deconding attribute of an img element */ decoding?: NativeImgAttributes['decoding'] /** A custom sizing for the avatar */ @@ -115,38 +118,21 @@ export const Avatar: React.FC = ({ const isImageVisible = showImage && !!src - const { - className: imgClassName, - style: imgStyle, - otherProps: imgOtherProps, - } = sprinkles({ - display: isImageVisible ? 'block' : 'none', - position: 'absolute', - height: 'full', - objectFit: 'cover', - width: 'full', - filter: disabled ? 'grayscale(1)' : undefined, - ...props, - }) - - const overlay = React.useMemo(() => { - if (disabled || (!icon && !checked)) return null + const Overlay = React.useMemo(() => { + if (!checked) return null return ( - } wh="40%" /> + ) }, [checked, disabled, icon]) + return ( {!isImageVisible && ( @@ -157,9 +143,8 @@ export const Avatar: React.FC = ({ /> )} {label} = ({ onError={() => setShowImage(false)} onLoad={() => setShowImage(true)} /> - {overlay} + {Overlay} ) } diff --git a/components/src/components/atoms/Avatar/styles.css.ts b/components/src/components/atoms/Avatar/styles.css.ts index a36ad451..13104ed6 100644 --- a/components/src/components/atoms/Avatar/styles.css.ts +++ b/components/src/components/atoms/Avatar/styles.css.ts @@ -1,7 +1,59 @@ -import { globalStyle, style } from '@vanilla-extract/css' +import { globalStyle, style, styleVariants } from '@vanilla-extract/css' +import { commonVars } from '@/src/css/theme.css' +import { recipe } from '@vanilla-extract/recipes' export const avatar = style({}) +export const img = recipe({ + base: { + display: 'none', + position: 'absolute', + height: commonVars.space.full, + width: commonVars.space.full, + objectFit: 'cover', + }, + variants: { + loaded: { + true: { + display: 'block', + }, + }, + disabled: { + true: { + filter: 'grayscale(1)', + }, + }, + }, +}) + +export const overlay = recipe({ + variants: { + checked: { + true: { + background: `rgba(56, 137, 255, 0.75)`, + }, + false: { + background: `rgba(0,0,0, 0.25)`, + }, + }, + disabled: { + true: { + background: 'transparent', + }, + }, + }, +}) + +export const iconClass = style({ + width: '40%', +}) + +export const placeholder = styleVariants({ + disabled: { + filter: 'grayscale(1)', + }, +}) + globalStyle(`${avatar} > * `, { position: 'absolute', top: 0, diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx index d32a80d2..39461523 100644 --- a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx +++ b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx @@ -25,7 +25,7 @@ export const BackdropSurface = React.forwardRef ), ) diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx index 4bcc6b5c..639db468 100644 --- a/components/src/components/atoms/Banner/Banner.tsx +++ b/components/src/components/atoms/Banner/Banner.tsx @@ -158,7 +158,7 @@ const ActionButtonIconBox = ({ ) const ActionButtonSVGBox = (props: BoxProps) => ( - + ) const ActionButton = ({ @@ -168,7 +168,7 @@ const ActionButton = ({ onDismiss, }: Pick & { hasHref: boolean } & WithIcon) => { if (onDismiss) { - const Icon = (icon || ) as React.ReactElement + const Icon = (icon || CrossSVG) as React.ReactElement return ( onDismiss()}> @@ -178,7 +178,7 @@ const ActionButton = ({ ) } if (hasHref || icon) { - const Icon = (icon || ) as React.ReactElement + const Icon = (icon || UpRightArrowSVG) return ( @@ -207,15 +207,17 @@ export const Banner = React.forwardRef< = icon || (alert && ['error', 'warning'].includes(alert) ? ( - + AlertSVG ) : ( - + EthSVG )) const hasHref = !!props.href const hasAction = hasHref || !!props.onClick + console.log('as', asProp, props) + return ( { translate: string, mobileTranslate: string } + isDesktop: boolean, +) => string export type DynamicPopoverButtonProps = { pressed?: boolean @@ -104,6 +106,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = ( verticalClearance: number, side: string, mobileSide: string, + isDesktop: boolean, ) => { let translate = '' if (side === 'top') translate = `translate(0, -${verticalClearance}px)` @@ -121,7 +124,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = ( mobileTranslate = `translate(0, ${verticalClearance}px)` else mobileTranslate = `translate(-${horizontalClearance}px, 0)` - return { translate, mobileTranslate } + return isDesktop ? translate : mobileTranslate } const checkRectContainsPoint = ( @@ -138,12 +141,11 @@ const checkRectContainsPoint = ( } const makeWidth = (width: number | string) => - typeof width === 'number' ? `${width}px` : width + typeof width === 'number' ? width : width type PopoverBoxProps = { $state: TransitionState $translate: string - $mobileTranslate: string $width: number | string $mobileWidth: number | string $x: number @@ -158,7 +160,6 @@ const PopoverBox = React.forwardRef( { $state, $translate, - $mobileTranslate, $width, $mobileWidth, $x, @@ -176,18 +177,23 @@ const PopoverBox = React.forwardRef( className={container} display="block" fontFamily="sans" - left={getValueForTransitionState($state.status, 'leftFunc')($x)} + style={{ + left: getValueForTransitionState($state.status, 'leftFunc')($x), + top: getValueForTransitionState($state.status, 'topFunc')($y), + transform: `translate3d(0,0,0) ${$translate}`, + }} + // left={getValueForTransitionState($state.status, 'leftFunc')($x)} opacity={getValueForTransitionState($state.status, 'opacity')} overflow={$hideOverflow ? 'hidden' : 'visible'} pointerEvents={getValueForTransitionState($state.status, 'pointerEvents')} position="absolute" ref={ref} - top={getValueForTransitionState($state.status, 'topFunc')($y)} - transform={{ - base: `translate3d(0, 0, 0) ${$mobileTranslate}`, - sm: `translate3d(0, 0, 0) ${$translate}`, - }} - transitionDuration={`${$transitionDuration}ms`} + // top={getValueForTransitionState($state.status, 'topFunc')($y)} + // transform={{ + // base: `translate3d(0, 0, 0) ${$mobileTranslate}`, + // sm: `translate3d(0, 0, 0) ${$translate}`, + // }} + transitionDuration={$transitionDuration} transitionProperty={getValueForTransitionState( $state.status, 'transitionProperty', @@ -206,11 +212,11 @@ export const DynamicPopover: React.FC = ({ animationFn: _animationFn, anchorRef, onShowCallback, - width = 250, - mobileWidth = 150, + width = 60, + mobileWidth = 36, useIdealPlacement = false, additionalGap = 0, - transitionDuration = 350, + transitionDuration = 300, isOpen, align = 'center', hideOverflow, @@ -329,20 +335,23 @@ export const DynamicPopover: React.FC = ({ verticalClearance: number, side: DynamicPopoverSide, mobileSide: DynamicPopoverSide, + isDesktop: boolean, ) => - _animationFn(horizontalClearance, verticalClearance, side, mobileSide) + _animationFn(horizontalClearance, verticalClearance, side, mobileSide, isDesktop) } return ( horizontalClearance: number, verticalClearance: number, side: DynamicPopoverSide, mobileSide: DynamicPopoverSide, + isDesktop: boolean, ) => defaultAnimationFunc( horizontalClearance, verticalClearance, side, mobileSide, + isDesktop, ) }, [_animationFn]) @@ -439,11 +448,15 @@ export const DynamicPopover: React.FC = ({ ? positionState.idealMobilePlacement : mobilePlacement - const { translate, mobileTranslate } = animationFn( + const breakpoints = useBreakPoints() + console.log('breakpoints', breakpoints) + + const translate = animationFn( positionState.horizontalClearance, positionState.verticalClearance, _placement, _mobilePlacement, + breakpoints.sm, ) const renderCallback = React.useCallback(() => { @@ -456,7 +469,6 @@ export const DynamicPopover: React.FC = ({ ( 'not-allowed') - .with([false, true], () => 'none') - .with([false, false], () => 'pointer') + .with([true, P._], () => 'not-allowed' as const) + .with([false, true], () => 'default' as const) + .with([false, false], () => 'pointer' as const) .exhaustive()} display="flex" flexBasis="auto" diff --git a/components/src/components/atoms/Tag/Tag.tsx b/components/src/components/atoms/Tag/Tag.tsx index 19957d1a..361a4217 100644 --- a/components/src/components/atoms/Tag/Tag.tsx +++ b/components/src/components/atoms/Tag/Tag.tsx @@ -4,12 +4,13 @@ import { translateY } from '@/src/css/utils/common' import { removeNullishProps } from '@/src/utils/removeNullishProps' -import type { WithColorStyle } from './utils/withColorStyle' -import { getValueForColorStyle } from './utils/withColorStyle' import * as styles from './styles.css' import type { BoxProps } from '../Box/Box' import { Box } from '../Box/Box' import clsx from 'clsx' +import type { Colors, ColorStyles } from '@/src/tokens' +import { getColorStyleParts } from '@/src/utils/getColorStyleParts' +import { match } from 'ts-pattern' export type TagProps = { /** Element type of container */ @@ -18,8 +19,8 @@ export type TagProps = { hover?: boolean /** Size of element */ size?: 'small' | 'medium' -} & Omit & -WithColorStyle + colorStyle?: ColorStyles +} & Omit export const Tag: React.FC = ({ as = 'div', @@ -30,21 +31,25 @@ export const Tag: React.FC = ({ className, ...props }) => { + const [baseColor, baseTheme] = getColorStyleParts(colorStyle) return ( `${baseColor}Primary` as Colors) + .otherwise(() => `${baseColor}Surface` as Colors), + hover: match(baseTheme) + .with('Primary', (): Colors => hover ? `${baseColor}Bright` : `${baseColor}Primary`) + .otherwise((): Colors => hover ? `${baseColor}Light` : `${baseColor}Surface`), + active: match(baseTheme) + .with('Primary', (): Colors => `${baseColor}Bright`) + .otherwise((): Colors => `${baseColor}Light`), }} borderRadius="full" - color={getValueForColorStyle(colorStyle, 'content')} + color={match(baseTheme).with('Primary', (): Colors => 'textAccent').otherwise((): Colors => `${baseColor}Primary`)} display="flex" fontSize={size === 'small' ? 'extraSmall' : 'small'} fontWeight="bold" diff --git a/components/src/components/atoms/Tag/utils/withColorStyle.ts b/components/src/components/atoms/Tag/utils/withColorStyle.ts deleted file mode 100644 index 112cf018..00000000 --- a/components/src/components/atoms/Tag/utils/withColorStyle.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { P, match } from 'ts-pattern' - -import type { Hue } from '@/src/tokens/color' -import { validatePrimaryColor } from '@/src/tokens/color' - -type Shade = 'Primary' | 'Secondary' - -type ColorStyle = Hue | `${Hue}${Shade}` - -export type WithColorStyle = { colorStyle?: ColorStyle } - -type Properties = { - background: string - content: string - hover: string -} - -type Property = keyof Properties - -const getPrimaryColor = (color: Hue, property: Property): string => - match(property) - .with('background', () => `${color}Primary`) - .with('content', () => 'textAccent') - .with('hover', () => `${color}Bright`) - .exhaustive() - -const getSecondaryColor = (color: Hue, property: Property): string => - match(property) - .with('background', () => `${color}Surface`) - .with('content', () => `${color}Primary`) - .with('hover', () => `${color}Light`) - .exhaustive() - -export const getValueForColorStyle = ( - colorStyle: ColorStyle, - property: Property, -): string => { - const matches = colorStyle.match('^(.*?)(Primary|Secondary)?$') - const color = matches?.[1] || 'accent' - const style = matches?.[2] - return match([color, style]) - .with([P._, 'Secondary'], ([color]) => - getSecondaryColor(validatePrimaryColor(color), property), - ) - .otherwise(([color]) => - getPrimaryColor(validatePrimaryColor(color), property), - ) -} diff --git a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx index fdffd512..dd467c25 100644 --- a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx +++ b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx @@ -64,7 +64,7 @@ const Circle = ({ return ( ( currentCount) .with([false, false], () => ( } + as={CheckSVG} data-testid="countdown-complete-check" display="block" id="countdown-complete-check" overflow="visible" strokeWidth="1.5" + width={size === 'large' ? '5' : '4'} /> )) .exhaustive()} diff --git a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx index d6fad51c..4371c389 100644 --- a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx +++ b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx @@ -45,9 +45,7 @@ const Label = ({ left="1/2" position="absolute" top="1/2" - transform={$type === 'eth' ? 'translateX(-50%)' : 'translateX(50%)'} transition="color 0.1s linear" - translate="-50% -50%" width={getValuesForKnob($size, 'width')} /> ) @@ -87,7 +85,6 @@ const Slider = ({ position="absolute" top="1/2" transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out" - translate="-50% -50%" width={getValuesForKnob($size, 'width')} /> ) diff --git a/components/src/components/molecules/CurrencyToggle/styles.css.ts b/components/src/components/molecules/CurrencyToggle/styles.css.ts index 0747ccb2..e1a11e60 100644 --- a/components/src/components/molecules/CurrencyToggle/styles.css.ts +++ b/components/src/components/molecules/CurrencyToggle/styles.css.ts @@ -2,20 +2,27 @@ import { globalStyle, style } from '@vanilla-extract/css' import { modeVars } from '@/src/css/theme.css' -export const labelEth = style({}) +export const labelEth = style({ + transform: 'translate(-100%, -50%)', +}) -export const labelFiat = style({}) +export const labelFiat = style({ + transform: 'translate(0%, -50%)', +}) export const checkbox = style({}) -export const slider = style({}) +export const slider = style({ + transition: 'transform 0.3s ease-in-out, background-color 0.1s ease-in-out', + transform: 'translate(-50%, -50%)', +}) globalStyle(`${checkbox}:not(:checked) ~ ${slider}`, { - transform: 'translateX(-50%)', + transform: 'translate(-100%, -50%)', }) globalStyle(`${checkbox}:checked ~ ${slider}`, { - transform: 'translateX(50%)', + transform: 'translate(0%, -50%)', }) globalStyle(`${checkbox}:disabled ~ ${slider}`, { diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx index 68b7e489..74650cb5 100644 --- a/components/src/components/molecules/Dropdown/Dropdown.tsx +++ b/components/src/components/molecules/Dropdown/Dropdown.tsx @@ -20,6 +20,7 @@ import { DynamicPopover } from '../../atoms/DynamicPopover/DynamicPopover' import { debounce } from '@/src/utils/debounce' import { DownChevronSVG } from '@/src/icons' import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox' +import { menu } from './styles.css' type Align = 'left' | 'right' type LabelAlign = 'flex-start' | 'flex-end' | 'center' @@ -111,44 +112,66 @@ type DropdownMenuContainerProps = { const DropdownMenuBox = React.forwardRef< HTMLElement, BoxProps & DropdownMenuContainerProps ->(({ $shortThrow, $direction, $state, ...props }, ref) => ( - `translateY(0)`) - .with( - [P._, 'up', true], - () => `translateY(calc(${commonVars.space['2.5']}))`, - ) - .with( - [P._, 'down', true], - () => `translateY(calc(-1 * ${commonVars.space['2.5']}))`, - ) - .with( - [P._, 'up', false], - () => `translateY(calc(${commonVars.space['12']}))`, - ) - .with( - [P._, 'down', false], - () => `translateY(calc(-1 * ${commonVars.space['12']}))`, - ) - .exhaustive()} - transition="all .35s cubic-bezier(1, 0, 0.22, 1.6)" - width="full" - zIndex={1} - /> -)) +>(({ $shortThrow, $direction, $state, ...props }, ref) => { + const transformVariant = match([$state, $direction, $shortThrow]) + .with([P.union('entering', 'entered'), P._, P._], () => 'enteringOrEntered' as const) + .with( + [P._, 'up', true], + () => 'upShort' as const, + ) + .with( + [P._, 'down', true], + () => 'downShort' as const, + ) + .with( + [P._, 'up', false], + () => 'upLong' as const, + ) + .with( + [P._, 'down', false], + () => 'downLong' as const, + ) + .exhaustive() + return ( + `translateY(0)`) + // .with( + // [P._, 'up', true], + // () => `translateY(calc(${commonVars.space['2.5']}))`, + // ) + // .with( + // [P._, 'down', true], + // () => `translateY(calc(-1 * ${commonVars.space['2.5']}))`, + // ) + // .with( + // [P._, 'up', false], + // () => `translateY(calc(${commonVars.space['12']}))`, + // ) + // .with( + // [P._, 'down', false], + // () => `translateY(calc(-1 * ${commonVars.space['12']}))`, + // ) + // .exhaustive()} + // transition="all .35s cubic-bezier(1, 0, 0.22, 1.6)" + width="full" + zIndex={1} + /> + ) +}) interface MenuButtonProps { $color?: Colors @@ -164,7 +187,7 @@ const MenuButton = React.forwardRef( backgroundColor={{ base: 'backgroundPrimary', hover: 'greySurface' }} borderRadius="large" color={ - disabled ? 'textTertiary' : $color ? `$${$color}` : 'textPrimary' + disabled ? 'textTertiary' : $color ? $color : 'textPrimary' } cursor={disabled ? 'not-allowed' : 'pointer'} display="flex" @@ -179,7 +202,7 @@ const MenuButton = React.forwardRef( ref={ref} transform={{ base: 'translateY(0px)', active: 'translateY(0px)' }} transitionDuration={150} - transitionProperty="color, transform, filter" + // transitionProperty="color, transform, filter" transitionTimingFunction="ease-in-out" width="full" > @@ -187,7 +210,7 @@ const MenuButton = React.forwardRef( ? ( ( backgroundColor={ typeof $showIndicator === 'boolean' ? 'accent' - : `$${$showIndicator}` + : $showIndicator } borderRadius="full" position="absolute" @@ -341,19 +364,23 @@ const rotation = (direction: Direction, open: boolean) => const Chevron = ({ $open, $direction, -}: { $open?: boolean, $direction: Direction } & BoxProps) => ( - } - fill="currentColor" - marginLeft="1" - marginRight="0.5" - transform={rotation($direction, !!$open)} - transitionDuration="200" - transitionProperty="all" - transitionTimingFunction="inOut" - width="3" - /> -) + enabled, +}: { $open?: boolean, $direction: Direction, enabled: boolean } & BoxProps) => { + if (!enabled) return null + return ( + + ) +} interface DropdownButtonProps { children?: React.ReactNode @@ -419,7 +446,7 @@ const DropdownButton: React.FC = ({ data-testid="dropdown-btn" pressed={isOpen} ref={buttonRef} - suffix={chevron && } + suffix={() => } width="fit" onClick={() => setIsOpen(prev => !prev)} {...buttonPropsWithIndicator} @@ -486,7 +513,7 @@ export const Dropdown: React.FC = ({ switch (status) { case 'complete': { statusText = 'Complete' - statusTone = 'green' + statusTone = 'greenSecondary' break } case 'required': case 'pending': { statusText = status === 'pending' ? 'Pending' : 'Required' - statusTone = 'accent' + statusTone = 'accentSecondary' break } case 'optional': { statusText = 'Optional' - statusTone = 'grey' + statusTone = 'greySecondary' break } } @@ -104,7 +104,7 @@ export const FieldSet: React.FC = ({ - + {legend} {statusTone && statusText && ( diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx index 0c751a30..183aad70 100644 --- a/components/src/components/molecules/Input/Input.tsx +++ b/components/src/components/molecules/Input/Input.tsx @@ -197,28 +197,26 @@ const ActionButton = ({ $size, ...props }: BoxProps & { $size: Size, $icon?: React.ReactNode }) => { - const Icon: React.ReactElement = React.isValidElement($icon) - ? ( - $icon - ) - : ( - - ) + const Icon: React.FC = typeof $icon === 'function' + ? $icon + : CrossCircleSVG + return ( @@ -307,7 +305,7 @@ const InnerContainer = ({ overflow="hidden" position="relative" transitionDuration={150} - transitionProperty="color, border-color, background-color" + // transitionProperty="color, border-color, background-color" transitionTimingFunction="inOut" wh="full" /> @@ -463,8 +461,7 @@ export const Input = React.forwardRef( - {/* +
- */} + ) } diff --git a/docs/src/components/PropsTable.tsx b/docs/src/components/PropsTable.tsx index ebec2e9b..10475c7a 100644 --- a/docs/src/components/PropsTable.tsx +++ b/docs/src/components/PropsTable.tsx @@ -147,12 +147,12 @@ export const PropsTable = ({ sourceLink, types }: Props) => { {!!props.length && (
- {/* */} +
)} {sourceLink && (
- {/* */} +
)} diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx index e15b6e92..fa665e11 100644 --- a/docs/src/pages/index.mdx +++ b/docs/src/pages/index.mdx @@ -84,7 +84,7 @@ import { Button, LockSVG } from '@ensdomains/thorin' ```tsx live=true expand=true
-
diff --git a/docs/src/reference/mdx/atoms/Avatar.docs.mdx b/docs/src/reference/mdx/atoms/Avatar.docs.mdx index bc57d108..090eef93 100644 --- a/docs/src/reference/mdx/atoms/Avatar.docs.mdx +++ b/docs/src/reference/mdx/atoms/Avatar.docs.mdx @@ -79,31 +79,31 @@ The placeholder is shown if the src property is undefined or if an error occurs } + icon={CrossSVG} src={avatars.noun97} - wh="10" + size="10" /> } + icon={PersonSVG} src={avatars.noun97} - wh="10" + size="10" /> ``` @@ -130,7 +130,7 @@ The placeholder is shown if the src property is undefined or if an error occurs If you are using Next.js and configured [`next/image`](https://nextjs.org/docs/api-reference/next/image) appropriately, you can pass it in with the `as` prop. ```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 4521c5f7..f281da51 100644 --- a/docs/src/reference/mdx/atoms/Banner.docs.mdx +++ b/docs/src/reference/mdx/atoms/Banner.docs.mdx @@ -69,13 +69,13 @@ import { Banner } from '@ensdomains/thorin' ```tsx live=true - } title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. - } title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. - } title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -85,13 +85,13 @@ import { Banner } from '@ensdomains/thorin' ```tsx live=true - } alert="info" title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. - } alert="warning" title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. - } alert="error" title="Heading"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/docs/src/reference/mdx/atoms/Button.docs.mdx b/docs/src/reference/mdx/atoms/Button.docs.mdx index 624d22d7..6d8d1569 100644 --- a/docs/src/reference/mdx/atoms/Button.docs.mdx +++ b/docs/src/reference/mdx/atoms/Button.docs.mdx @@ -95,10 +95,10 @@ The loading icon will replace either the prefix or suffix in that order. If no p ```tsx live=true - - @@ -110,13 +110,13 @@ The loading icon will replace either the prefix or suffix in that order. If no p ```tsx live=true - - - diff --git a/docs/src/reference/mdx/atoms/RecordItem.docs.mdx b/docs/src/reference/mdx/atoms/RecordItem.docs.mdx index 714c0bb9..ec9d2345 100644 --- a/docs/src/reference/mdx/atoms/RecordItem.docs.mdx +++ b/docs/src/reference/mdx/atoms/RecordItem.docs.mdx @@ -8,7 +8,7 @@ import { RecordItem } from '@ensdomains/thorin' ``` ```tsx live=true expand=true -} value="user#123">user#123 +user#123 ``` ## Props @@ -22,13 +22,13 @@ import { RecordItem } from '@ensdomains/thorin' 0xb794f5ea0ba39494ce839613fffba74279579268 - } value="0xb794f5ea0ba39494ce839613fffba74279579268"> + 0xb794f5ea0ba39494ce839613fffba74279579268 0xb794...9268 - } inline value="0xb794f5ea0ba39494ce839613fffba74279579268"> + 0xb794...9268 @@ -38,10 +38,10 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - } size="small" value="Small with icon"> + Small with icon - } size="large" value="Large with icon"> + Large with icon @@ -57,25 +57,25 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - } size="small" value="Small with icon"> + Small with icon Small with label - } size="large" value="Large with icon"> + Large with icon Large with label - } inline size="small" value="Small and inline with icon"> + Small and inline with icon Small and inline with label - } inline size="large" value="Large and inline with icon"> + Large and inline with icon @@ -88,20 +88,20 @@ import { RecordItem } from '@ensdomains/thorin' ```tsx live=true - } link="https://ens.domains" size="small"> + Small with icon Small with label - } link="https://ens.domains" size="large"> + Large with icon Large with label } + icon={FlameSVG} inline link="https://ens.domains" size="small" @@ -112,7 +112,7 @@ import { RecordItem } from '@ensdomains/thorin' Small and inline with label } + icon={FlameSVG} inline link="https://ens.domains" size="large" diff --git a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx index 75306b20..ce8e5c54 100644 --- a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx +++ b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx @@ -15,13 +15,13 @@ import { Dropdown } from '@ensdomains/thorin' label: 'Dashboard', onClick: () => null, color: 'text', - icon: , + icon: DotGridSVG, }, { label: 'Disconnect', onClick: () => null, color: 'red', - icon: , + icon: ExitSVG, }, ]} label="Account" @@ -163,7 +163,7 @@ import { Dropdown } from '@ensdomains/thorin' ```tsx live=true expand=true minHeight=300px null }, { label: 'Text Label 2', onClick: () => null }, @@ -188,25 +188,25 @@ import { Dropdown } from '@ensdomains/thorin' label: 'None', onClick: () => null, color: 'text', - icon: , + icon: DotGridSVG, }, { label: 'Default', onClick: () => null, color: 'text', - icon: , + icon: CogSVG, showIndicator: true, }, { label: 'Custom', onClick: () => null, color: 'red', - icon: , + icon: ExitSVG, showIndicator: 'red', }, ]} label="Account" - width={200} + width={52} /> ``` @@ -221,25 +221,25 @@ import { Dropdown } from '@ensdomains/thorin' label: 'None', onClick: () => null, color: 'text', - icon: , + icon: DotGridSVG, }, { label: 'Default', onClick: () => null, color: 'text', - icon: , + icon: CogSVG, showIndicator: true, }, { label: 'Custom', onClick: () => null, color: 'red', - icon: , + icon: ExitSVG, showIndicator: 'red', }, ]} label="Account" - width={200} + width={52} /> ``` @@ -266,14 +266,14 @@ import { Dropdown } from '@ensdomains/thorin' items={[ , - , ]} @@ -290,13 +290,13 @@ import { Dropdown } from '@ensdomains/thorin' label: 'None', onClick: () => null, color: 'text', - icon: , + icon: DotGridSVG, }, { label: 'Default', onClick: () => null, color: 'text', - icon: , + icon: CogSVG, }, ]} label="Custom"