Feat(anchor): hrefを任意プロパティに変更する

.changeset/thirty-taxis-search.md

@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+---
+
+Feat(anchor): href を任意プロパティに変更する

packages/wiz-ui-react/src/components/base/anchor/components/anchor.tsx

@@ -33,7 +33,7 @@ type Props<T extends ElementType> = BaseProps & {
   children: ReactNode;
 } & (
     | {
-        href: string;
+        href?: string;
         as?: never;
         asProps?: never;
         openInNewTab?: boolean;
@@ -63,8 +63,9 @@ const Anchor = forwardRef(
     }: Props<T>,
     ref: ForwardedRef<HTMLAnchorElement>
   ) => {
-    const isAnchor = "href" in props;
-    const LinkComponent = isAnchor ? "a" : props.as;
+    const isAnchor = "href" in props && props.as === undefined;
+    const LinkComponent = props.as || "a";
+
     const linkProps = isAnchor
       ? {
           href: props.href,

packages/wiz-ui-react/src/components/base/anchor/stories/anchor.stories.tsx

@@ -23,9 +23,7 @@ export const Default: Story = {
       },
     },
   },
-  args: {
-    href: "#",
-  },
+  args: {},
   render: (args) => <WizAnchor {...args}>○○へ飛ぶ</WizAnchor>,
 };
 
@@ -39,7 +37,6 @@ export const Color: Story = {
     },
   },
   args: {
-    href: "#",
     color: "red.800",
   },
   render: (args) => <WizAnchor {...args}>○○へ飛ぶ</WizAnchor>,
@@ -55,7 +52,6 @@ export const FontSize: Story = {
     },
   },
   args: {
-    href: "#",
     fontSize: "sm",
   },
   render: (args) => <WizAnchor {...args}>○○へ飛ぶ</WizAnchor>,
@@ -70,7 +66,6 @@ export const FontWeight: Story = {
     },
   },
   args: {
-    href: "#",
     fontWeight: "bold",
   },
   render: (args) => <WizAnchor {...args}>○○へ飛ぶ</WizAnchor>,
@@ -86,7 +81,6 @@ export const Icon: Story = {
     },
   },
   args: {
-    href: "#",
     icon: WizIArrowRight,
   },
   render: (args) => <WizAnchor {...args}>○○へ飛ぶ</WizAnchor>,
@@ -105,7 +99,6 @@ export const IconPosition: Story = {
     },
   },
   args: {
-    href: "#",
     icon: WizIArrowRight,
     iconPosition: "right",
   },