Skip to content

Commit

Permalink
feat(external-link): spread props correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
psychedelicious committed Sep 19, 2024
1 parent dbc0d04 commit 163e51b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
32 changes: 32 additions & 0 deletions lib/components/link/external-link.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Flex } from '@chakra-ui/layout';
import type { Meta, StoryObj } from '@storybook/react';

import type { ExternalLinkProps } from './external-link';
import { ExternalLink } from './external-link';

const meta: Meta<typeof ExternalLink> = {
title: 'Primitives/ExternalLink',
tags: ['autodocs'],
component: ExternalLink,
args: {
label: 'External Link',
href: 'https://example.com',
},
};

export default meta;
type Story = StoryObj<typeof ExternalLink>;

const Component = (props: ExternalLinkProps) => {
return (
<Flex flexDir="column">
<ExternalLink fontSize="sm" {...props} />
<ExternalLink fontSize="sm" fontWeight="semibold" {...props} />
<ExternalLink {...props} />
</Flex>
);
};

export const Default: Story = {
render: Component,
};
6 changes: 3 additions & 3 deletions lib/components/link/external-link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { Link } from '.';

export type ExternalLinkProps = Omit<LinkProps, 'isExternal' | 'children'> & { label: string };

export const ExternalLink = (props: ExternalLinkProps) => {
export const ExternalLink = ({ label, ...rest }: ExternalLinkProps) => {
return (
<Link href={props.href} isExternal>
{props.label}
<Link isExternal {...rest} display="flex" alignItems="center">
{label}
<Icon display="inline" verticalAlign="middle" marginInlineStart={2} as={PiArrowSquareOutBold} />
</Link>
);
Expand Down

0 comments on commit 163e51b

Please sign in to comment.