From 5ed816ca492104831f1498fea3c8743b354c91c1 Mon Sep 17 00:00:00 2001 From: Eric Crowell Date: Sat, 29 Jun 2024 00:51:14 +0200 Subject: [PATCH] dev: Improved social icons --- packages/ui/src/components.ts | 4 ++- packages/ui/src/components/Button/Button.tsx | 28 ++++++------------- .../ui/src/components/Button/Button.types.ts | 16 +++++++++++ packages/ui/src/types.ts | 9 ++++++ .../widgets/SocialButtons/SocialButtons.tsx | 8 ++++-- .../SocialButtons/SocialButtons.types.ts | 8 +++++- 6 files changed, 48 insertions(+), 25 deletions(-) create mode 100644 packages/ui/src/components/Button/Button.types.ts diff --git a/packages/ui/src/components.ts b/packages/ui/src/components.ts index 2d52f5c..52eb236 100644 --- a/packages/ui/src/components.ts +++ b/packages/ui/src/components.ts @@ -1,4 +1,6 @@ -export { Button, type ButtonProps } from './components/Button/Button'; +export { Button } from './components/Button/Button'; +export type { ButtonProps, ButtonColor, ButtonSize, ButtonVariant } from './components/Button/Button.types'; + export { Image, type ImageProps } from './components/Image/Image'; export { Link, type LinkProps } from './components/Link/Link'; export { Popover, type PopoverProps } from './components/Popover/Popover'; diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 11dae94..c11fd5e 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -3,25 +3,13 @@ import React from 'react'; import { Button as AriaButton, Link as AriaLink } from 'react-aria-components'; import { fillStyles, emptyStyles, cn, interactiveStyles } from '@do-ob/ui/utility'; - -export interface ButtonProps< - Element extends React.ElementType = typeof AriaButton -> { - as?: Element; - variant?: 'bordered' | 'filled' | 'faded' | 'light'; - size?: 'sm' | 'md' | 'lg'; - color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger'; - startContent?: React.ReactNode; - endContent?: React.ReactNode; - className?: string; - iconify?: boolean; - href?: string; -} +import { ButtonProps, ButtonVariant, ButtonSize } from './Button.types'; +import { Polymorphic } from '@do-ob/ui/types'; /** * Define tailwind classes for the variants. */ -const variantStyles: Record, string> = { +const variantStyles: Record = { bordered: 'border-2 bg-transparent hover:brightness-75 active:brightness-50', filled: 'border-2 hover:brightness-75 active:brightness-50 [&_svg]:fill-background dark:[&_svg]:fill-background-dark', faded: 'border-2 border-transparent dark:border-transparent hover:brightness-75 active:brightness-50 bg-opacity-20 dark:bg-opacity-20 hover:bg-opacity-30 active:bg-opacity-50', @@ -31,7 +19,7 @@ const variantStyles: Record, string> = { /** * Define tailwind classes for the sizes. */ -const sizeStyles: Record, string> = { +const sizeStyles: Record = { sm: 'px-2 h-8 text-sm', md: 'px-4 h-11 text-base', lg: 'px-6 h-14 text-xl', @@ -40,7 +28,7 @@ const sizeStyles: Record, string> = { /** * Define tailwind classes for the sizes in non-text context. */ -const sizeComponetStyles: Record, string> = { +const sizeComponetStyles: Record = { sm: 'px-2 min-h-8 text-sm', md: 'px-4 min-h-11 text-base', lg: 'px-6 min-h-14 text-xl', @@ -49,7 +37,7 @@ const sizeComponetStyles: Record, string> = { /** * Define tailwind classes for the sizes. */ -const sizeIconStyles: Record, string> = { +const sizeIconStyles: Record = { sm: 'size-8 text-sm [&_svg]:size-5', md: 'size-11 text-base [&_svg]:size-7', lg: 'size-14 text-lg [&_svg]:size-10', @@ -59,7 +47,7 @@ const sizeIconStyles: Record, string> = { * Button */ export function Button< - Element extends React.ElementType + Element extends React.ElementType = typeof AriaButton >({ as, children, @@ -72,7 +60,7 @@ export function Button< iconify = false, href, ...props -}: ButtonProps & React.ComponentPropsWithoutRef) { +}: ButtonProps & Polymorphic) { const Tag = as ?? (href ? AriaLink : AriaButton); diff --git a/packages/ui/src/components/Button/Button.types.ts b/packages/ui/src/components/Button/Button.types.ts new file mode 100644 index 0000000..edfb318 --- /dev/null +++ b/packages/ui/src/components/Button/Button.types.ts @@ -0,0 +1,16 @@ +export type ButtonVariant = 'bordered' | 'filled' | 'faded' | 'light'; + +export type ButtonSize = 'sm' | 'md' | 'lg'; + +export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'; + +export interface ButtonProps { + variant?: ButtonVariant; + size?: ButtonSize; + color?: ButtonColor; + startContent?: React.ReactNode; + endContent?: React.ReactNode; + className?: string; + iconify?: boolean; + href?: string; +} diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 3c3e6ee..e2ff10c 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -2,6 +2,15 @@ export * from './types/actions'; export * from './types/locale'; +/** + * Polymorphic component. + */ +export type Polymorphic< + Element extends React.ElementType +> = { + as?: Element; +} & React.ComponentPropsWithoutRef; + /** * A call to some action */ diff --git a/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx b/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx index 661351f..87349b0 100644 --- a/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx +++ b/packages/ui/src/widgets/SocialButtons/SocialButtons.tsx @@ -4,7 +4,6 @@ import { Socials } from '@do-ob/ui/types'; import { SocialButtonsProps } from './SocialButtons.types'; import { cn } from '@do-ob/ui/utility'; - /** * Map of social keys to async imports of social icon components. */ @@ -18,6 +17,8 @@ const socialIcons: Record Promise) { @@ -39,6 +40,7 @@ export async function SocialButtons({ 'flex gap-2', className, )} + aria-label="Social links" {...props} > {icons.map((icon) => ( @@ -46,8 +48,8 @@ export async function SocialButtons({ key={icon.type} href={icon.url} iconify - variant="filled" - size="sm" + variant={variant} + size={size} > diff --git a/packages/ui/src/widgets/SocialButtons/SocialButtons.types.ts b/packages/ui/src/widgets/SocialButtons/SocialButtons.types.ts index ea71fe7..a8af660 100644 --- a/packages/ui/src/widgets/SocialButtons/SocialButtons.types.ts +++ b/packages/ui/src/widgets/SocialButtons/SocialButtons.types.ts @@ -1,5 +1,11 @@ import type { SocialLinks } from '@do-ob/ui/types'; +import type { ButtonSize, ButtonVariant } from '@do-ob/ui/components'; export interface SocialButtonsProps { - socials: SocialLinks; + + socials?: SocialLinks; + + variant?: ButtonVariant; + + size?: ButtonSize; };