feat(anchor): href optional

Wizleap-Inc · Jul 14, 2024 · 9772efb · 9772efb
1 parent 28eb127
commit 9772efb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/packages/wiz-ui-react/src/components/base/anchor/components/anchor.tsx b/packages/wiz-ui-react/src/components/base/anchor/components/anchor.tsx
@@ -31,15 +31,14 @@ type Props<T extends ElementType> = BaseProps & {
   iconPosition?: "left" | "right";
   nowrap?: boolean;
   children: ReactNode;
+  href?: string;
 } & (
     | {
-        href: string;
         as?: never;
         asProps?: never;
         openInNewTab?: boolean;
       }
     | {
-        href?: never;
         as: T;
         asProps: ComponentProps<T>;
         openInNewTab?: never;
@@ -59,15 +58,18 @@ const Anchor = forwardRef(
       openInNewTab,
       nowrap = false,
       children,
+      href,
       ...props
     }: Props<T>,
     ref: ForwardedRef<HTMLAnchorElement>
   ) => {
-    const isAnchor = "href" in props;
-    const LinkComponent = isAnchor ? "a" : props.as;
+    const isAnchor = !!href;
+    // const LinkComponent = isAnchor ? "a" : props.as;
+    // if props.as is never then "a" else props.as
+    const LinkComponent = props.as || "a";
     const linkProps = isAnchor
       ? {
-          href: props.href,
+          href: href,
           target: openInNewTab ? "_blank" : undefined,
           rel: openInNewTab ? "noopener noreferrer" : undefined,
         }

diff --git a/packages/wiz-ui-react/src/components/base/anchor/stories/anchor.stories.tsx b/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",
   },