Fix style for recipe and link button component (#134)

yorkie-team · Jul 11, 2024 · d3411b0 · d3411b0
1 parent aff390f
commit d3411b0
Show file tree

Hide file tree

Showing 6 changed files with 349 additions and 43 deletions.
diff --git a/panda.config.ts b/panda.config.ts
@@ -165,36 +165,37 @@ export default defineConfig({
           },
         },
       },
-    },
-    slotRecipes: {
-      avatar: avatarSlotRecipe,
-      checkbox: checkboxSlotRecipe,
-      pagination: paginationSlotRecipe,
-      popover: popoverSlotRecipe,
-      radioGroup: radioGroupSlotRecipe,
-      tabs: tabsSlotRecipe,
-      tooltip: tooltipSlotRecipe,
-      accordion: accordionSlotRecipe,
-      switchs: switchSlotRecipe,
-      datePicker: datePickerSlotRecipe,
-      select: selectSlotRecipe,
-      card: cardSlotRecipe,
-      toast: toastSlotRecipe,
-      radio: radioGroupSlotRecipe,
-      dialog: dialogSlotRecipe,
-    },
-    recipes: {
-      button: buttonRecipe,
-      badge: badgeRecipe,
-      input: inputRecipe,
-      icon: iconRecipe,
-      text: textRecipe,
-      code: codeRecipe,
-      label: labelRecipe,
-      link: linkRecipe,
+      slotRecipes: {
+        avatar: avatarSlotRecipe,
+        checkbox: checkboxSlotRecipe,
+        pagination: paginationSlotRecipe,
+        popover: popoverSlotRecipe,
+        radioGroup: radioGroupSlotRecipe,
+        tabs: tabsSlotRecipe,
+        tooltip: tooltipSlotRecipe,
+        accordion: accordionSlotRecipe,
+        switchs: switchSlotRecipe,
+        datePicker: datePickerSlotRecipe,
+        select: selectSlotRecipe,
+        card: cardSlotRecipe,
+        toast: toastSlotRecipe,
+        radio: radioGroupSlotRecipe,
+        dialog: dialogSlotRecipe,
+      },
+      recipes: {
+        button: buttonRecipe,
+        badge: badgeRecipe,
+        input: inputRecipe,
+        icon: iconRecipe,
+        text: textRecipe,
+        code: codeRecipe,
+        label: labelRecipe,
+        link: linkRecipe,
+      },
     },
   },
   staticCss: {
+    recipes: '*',
     css: [
       {
         properties: {

diff --git a/src/components/ui/button/Button.mdx b/src/components/ui/button/Button.mdx
@@ -162,9 +162,58 @@ Can use a link as a button by `as` props: `link`
   source={{
     format: true,
     code: `
-       <Button variant="outline" as="link" href="https://yorkie.dev">
-        Website Link
-      </Button>
+        <Text fontSize="sm" fontWeight="500">
+          No Decoration
+        </Text>
+        <Button {...args} variant="link" decoration="ghost" as="link" href="https://yorkie.dev">
+          Button Link
+        </Button>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Decoration
+        </Text>
+        <Button {...args} variant="link" decoration="link" as="link" href="https://yorkie.dev">
+          Button Link
+        </Button>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Variant
+        </Text>
+        <Flex gap="6" align="center">
+          <Button {...args} variant="solid" decoration="ghost" as="link" href="https://yorkie.dev">
+            Solid
+          </Button>
+          <Button {...args} variant="ghost" decoration="ghost" as="link" href="https://yorkie.dev">
+            Outline
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev">
+            Ghost
+          </Button>
+          <Button {...args} variant="link" decoration="ghost" as="link" href="https://yorkie.dev">
+            Link
+          </Button>
+        </Flex>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Size{' '}
+        </Text>
+        <Flex gap="6" align="center">
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="xs">
+            XS
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="sm">
+            SM
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="md">
+            MD
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="lg">
+            LG
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="xl">
+            XL
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="2xl">
+            2XL
+          </Button>
+        </Flex>
     `,
   }}
 />
diff --git a/src/components/ui/button/Button.stories.tsx b/src/components/ui/button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button, Icons, Flex } from '@/components/ui';
+import { Button, Icons, Flex, Text } from '@/components/ui';
 const meta = {
   title: 'FORM / Button',
   component: Button,
@@ -147,11 +147,60 @@ export const Icon: Story = {
 export const Link: Story = {
   render: (args) => {
     return (
-      <Flex gap="6" align="center">
-        <Button {...args} variant="ghost" decoration="ghost" as="link" href="https://yorkie.dev">
+      <div>
+        <Text fontSize="sm" fontWeight="500">
+          No Decoration
+        </Text>
+        <Button {...args} variant="link" decoration="ghost" as="link" href="https://yorkie.dev">
           Button Link
         </Button>
-      </Flex>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Decoration
+        </Text>
+        <Button {...args} variant="link" decoration="link" as="link" href="https://yorkie.dev">
+          Button Link
+        </Button>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Variant
+        </Text>
+        <Flex gap="6" align="center">
+          <Button {...args} variant="solid" decoration="ghost" as="link" href="https://yorkie.dev">
+            Solid
+          </Button>
+          <Button {...args} variant="ghost" decoration="ghost" as="link" href="https://yorkie.dev">
+            Outline
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev">
+            Ghost
+          </Button>
+          <Button {...args} variant="link" decoration="ghost" as="link" href="https://yorkie.dev">
+            Link
+          </Button>
+        </Flex>
+        <Text fontSize="sm" fontWeight="500" marginTop="10">
+          Size{' '}
+        </Text>
+        <Flex gap="6" align="center">
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="xs">
+            XS
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="sm">
+            SM
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="md">
+            MD
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="lg">
+            LG
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="xl">
+            XL
+          </Button>
+          <Button {...args} variant="outline" decoration="ghost" as="link" href="https://yorkie.dev" size="2xl">
+            2XL
+          </Button>
+        </Flex>
+      </div>
     );
   },
 };
diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx
@@ -29,11 +29,23 @@ export type ButtonProps = HTMLStyledProps<'button'> &
 const StyledButton = styled(ark.button, button);
 
 export const Button = (props: ButtonProps) => {
-  const { children, icon, position, size, as = 'button', href, wLink, hLink, ...rest } = props;
+  const {
+    children,
+    icon,
+    position,
+    size = 'md',
+    as = 'button',
+    href,
+    wLink,
+    hLink,
+    variant,
+    decoration,
+    ...rest
+  } = props;
 
   if (as === 'link' && href) {
     return (
-      <Link href={href} width={wLink} height={hLink} decoration="ghost" {...rest}>
+      <Link {...rest} href={href} width={wLink} height={hLink} decoration={decoration} size={size} variant={variant}>
         {position === 'start' && icon && <Icon size={size} icon={icon} />}
         {children}
         {position === 'end' && icon && <Icon size={size} icon={icon} />}
@@ -42,7 +54,7 @@ export const Button = (props: ButtonProps) => {
   }
 
   return (
-    <StyledButton size={size} {...rest}>
+    <StyledButton {...rest} size={size}>
       {position === 'start' && icon && <Icon size={size} icon={icon} />}
       {children}
       {position === 'end' && icon && <Icon size={size} icon={icon} />}

diff --git a/src/components/ui/link/Link.tsx b/src/components/ui/link/Link.tsx
@@ -3,16 +3,18 @@ import { HTMLStyledProps, styled } from '@/styled/jsx';
 import { link, LinkVariantProps } from '@/styled/recipes';
 
 export type LinkProps = {
-  decoration?: string;
+  decoration?: 'ghost' | 'link';
+  variant?: 'solid' | 'outline' | 'ghost' | 'link';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 } & LinkVariantProps &
   HTMLStyledProps<'a'>;
 
 export const Link = (props: LinkProps) => {
-  const { decoration, children, ...rest } = props;
+  const { decoration, children, variant, size } = props;
   const Dynamic = styled(ark.a, link);
 
   return (
-    <Dynamic {...rest} className={link({ decoration })}>
+    <Dynamic {...props} className={link({ decoration, variant, size })}>
       {children}
     </Dynamic>
   );