Skip to content

Commit

Permalink
dev: Improved social icons
Browse files Browse the repository at this point in the history
  • Loading branch information
eric-crowell committed Jun 28, 2024
1 parent 19b2c28 commit 5ed816c
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 25 deletions.
4 changes: 3 additions & 1 deletion packages/ui/src/components.ts
Original file line number Diff line number Diff line change
@@ -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';
28 changes: 8 additions & 20 deletions packages/ui/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<NonNullable<ButtonProps['variant']>, string> = {
const variantStyles: Record<ButtonVariant, string> = {
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',
Expand All @@ -31,7 +19,7 @@ const variantStyles: Record<NonNullable<ButtonProps['variant']>, string> = {
/**
* Define tailwind classes for the sizes.
*/
const sizeStyles: Record<NonNullable<ButtonProps['size']>, string> = {
const sizeStyles: Record<ButtonSize, string> = {
sm: 'px-2 h-8 text-sm',
md: 'px-4 h-11 text-base',
lg: 'px-6 h-14 text-xl',
Expand All @@ -40,7 +28,7 @@ const sizeStyles: Record<NonNullable<ButtonProps['size']>, string> = {
/**
* Define tailwind classes for the sizes in non-text context.
*/
const sizeComponetStyles: Record<NonNullable<ButtonProps['size']>, string> = {
const sizeComponetStyles: Record<ButtonSize, string> = {
sm: 'px-2 min-h-8 text-sm',
md: 'px-4 min-h-11 text-base',
lg: 'px-6 min-h-14 text-xl',
Expand All @@ -49,7 +37,7 @@ const sizeComponetStyles: Record<NonNullable<ButtonProps['size']>, string> = {
/**
* Define tailwind classes for the sizes.
*/
const sizeIconStyles: Record<NonNullable<ButtonProps['size']>, string> = {
const sizeIconStyles: Record<ButtonSize, string> = {
sm: 'size-8 text-sm [&_svg]:size-5',
md: 'size-11 text-base [&_svg]:size-7',
lg: 'size-14 text-lg [&_svg]:size-10',
Expand All @@ -59,7 +47,7 @@ const sizeIconStyles: Record<NonNullable<ButtonProps['size']>, string> = {
* Button
*/
export function Button<
Element extends React.ElementType
Element extends React.ElementType = typeof AriaButton
>({
as,
children,
Expand All @@ -72,7 +60,7 @@ export function Button<
iconify = false,
href,
...props
}: ButtonProps<Element> & React.ComponentPropsWithoutRef<Element>) {
}: ButtonProps & Polymorphic<Element>) {

const Tag = as ?? (href ? AriaLink : AriaButton);

Expand Down
16 changes: 16 additions & 0 deletions packages/ui/src/components/Button/Button.types.ts
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 9 additions & 0 deletions packages/ui/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<Element>;

/**
* A call to some action
*/
Expand Down
8 changes: 5 additions & 3 deletions packages/ui/src/widgets/SocialButtons/SocialButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -18,6 +17,8 @@ const socialIcons: Record<Socials, () => Promise<React.ComponentType<React.HTMLA

export async function SocialButtons({
socials = [],
variant = 'faded',
size = 'md',
className,
...props
}: SocialButtonsProps & React.ComponentProps<typeof Group>) {
Expand All @@ -39,15 +40,16 @@ export async function SocialButtons({
'flex gap-2',
className,
)}
aria-label="Social links"
{...props}
>
{icons.map((icon) => (
<Button
key={icon.type}
href={icon.url}
iconify
variant="filled"
size="sm"
variant={variant}
size={size}
>
<icon.Icon />
</Button>
Expand Down
8 changes: 7 additions & 1 deletion packages/ui/src/widgets/SocialButtons/SocialButtons.types.ts
Original file line number Diff line number Diff line change
@@ -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;
};

0 comments on commit 5ed816c

Please sign in to comment.