Merge pull request #291 from element-hq/florianduros/link-size-small

Add small size to `Link`

src/components/Link/Link.module.css

@@ -52,3 +52,7 @@ limitations under the License.
 .link[data-kind="critical"]:active {
   background: var(--cpd-color-text-critical-primary);
 }
+
+.link[data-size="small"] {
+  font-size: var(--cpd-font-size-body-sm);
+}

src/components/Link/Link.stories.tsx

@@ -24,7 +24,9 @@ export default {
   component: LinkComponent,
   tags: ["autodocs"],
   argTypes: {},
-  args: {},
+  args: {
+    size: "medium",
+  },
 } as Meta<typeof LinkComponent>;
 
 const Template: StoryFn<typeof LinkComponent> = (args) => (
@@ -33,3 +35,8 @@ const Template: StoryFn<typeof LinkComponent> = (args) => (
 
 export const Round = Template.bind({});
 Round.args = {};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "small",
+};

src/components/Link/Link.test.tsx

@@ -25,4 +25,9 @@ describe("Link", () => {
     const { asFragment } = render(<Link />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it("renders width a small size", () => {
+    const { asFragment } = render(<Link size="small" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

src/components/Link/Link.tsx

@@ -25,22 +25,32 @@ type LinkProps = {
   className?: string;
   /**
    * The type of link.
+   * @default "primary"
    */
   kind?: "primary" | "critical";
-} & Omit<React.HTMLProps<HTMLAnchorElement>, "rel">;
+  /**
+   * The size of link.
+   * @default "medium"
+   */
+  size?: "small" | "medium";
+} & Omit<React.HTMLProps<HTMLAnchorElement>, "rel" | "size">;
 
 /**
  * A link component.
  */
 export const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
-  function Link({ children, className, kind = "primary", ...props }, ref) {
+  function Link(
+    { children, className, kind = "primary", size = "medium", ...props },
+    ref,
+  ) {
     return (
       <a
         ref={ref}
         {...props}
         rel="noreferrer noopener"
         className={classNames(styles.link, className)}
         data-kind={kind}
+        data-size={size}
       >
         {children}
       </a>

src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -5,6 +5,18 @@ exports[`Link > renders 1`] = `
   <a
     class="_link_379d57"
     data-kind="primary"
+    data-size="medium"
+    rel="noreferrer noopener"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link > renders width a small size 1`] = `
+<DocumentFragment>
+  <a
+    class="_link_379d57"
+    data-kind="primary"
+    data-size="small"
     rel="noreferrer noopener"
   />
 </DocumentFragment>