feat(LinkStyle): add LinkStyle component

packages/components/src/LinkStyle/LinkStyle.module.scss

@@ -0,0 +1,49 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.linkStyle {
+  position: relative;
+  cursor: pointer;
+  padding: unset;
+  background: none;
+  color: $color-blue-500;
+  text-decoration: underline;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: $color-blue-600;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible::after {
+    content: "";
+    position: absolute;
+    background: transparent;
+    border-radius: 4px;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $color-blue-500;
+    inset: -5px;
+  }
+}
+
+.isReversed {
+  color: $color-white;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: rgba($color-white-rgb, 0.8);
+  }
+
+  &:focus-visible {
+    &::after {
+      border-color: $color-blue-300;
+    }
+  }
+}

packages/components/src/LinkStyle/LinkStyle.spec.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { HTMLAttributes } from "react"
+import { render, screen } from "@testing-library/react"
+import classnames from "classnames"
+import { Text } from "~components/Text"
+import textStyles from "~components/Text/Text.module.scss"
+import { LinkStyle } from "./LinkStyle"
+import linkStyles from "./LinkStyle.module.scss"
+
+describe("<LinkStyle />", () => {
+  it("combines with className from child", () => {
+    render(
+      <LinkStyle>
+        <a href="#" className="custom-classname">
+          Coffee
+        </a>
+      </LinkStyle>
+    )
+    expect(screen.getByText("Coffee").classList).toContain(linkStyles.linkStyle)
+    expect(screen.getByText("Coffee").classList).toContain("custom-classname")
+  })
+
+  it("combines with styles of child", () => {
+    const Coffee = (props: HTMLAttributes<HTMLDivElement>): JSX.Element => (
+      <div {...props} className={classnames("coffee", props.className)}>
+        Coffee
+      </div>
+    )
+
+    render(
+      <LinkStyle>
+        <Coffee className="custom-classname" />
+      </LinkStyle>
+    )
+    expect(screen.getByText("Coffee").classList).toContain(linkStyles.linkStyle)
+    expect(screen.getByText("Coffee").classList).toContain("coffee")
+    expect(screen.getByText("Coffee").classList).toContain("custom-classname")
+  })
+
+  it("combines with classNameOverride from child", () => {
+    render(
+      <LinkStyle classNamePropName="classNameOverride">
+        <Text tag="span" variant="body" classNameOverride="custom-classname">
+          Coffee
+        </Text>
+      </LinkStyle>
+    )
+    expect(screen.getByText("Coffee").classList).toContain(linkStyles.linkStyle)
+    expect(screen.getByText("Coffee").classList).toContain(textStyles.body)
+    expect(screen.getByText("Coffee").classList).toContain("custom-classname")
+  })
+})

packages/components/src/LinkStyle/LinkStyle.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import classnames from "classnames"
+import { StringSuggestions } from "~types/StringSuggestions"
+import styles from "./LinkStyle.module.scss"
+
+export type LinkStyleProps = {
+  /**
+   * A single ReactElement (dom element or component) you want to add link styles to.
+   */
+  children: React.ReactElement
+  isReversed?: boolean
+  /**
+   * The name of the className prop for your element in `children`
+   * (eg. `classNameOverride` for Kaizen components).
+   */
+  classNamePropName?: StringSuggestions<"className" | "classNameOverride">
+}
+
+export const LinkStyle = ({
+  children,
+  isReversed = false,
+  classNamePropName = "className",
+}: LinkStyleProps): JSX.Element => {
+  const linkClassNames = classnames(
+    styles.linkStyle,
+    isReversed && styles.isReversed
+  )
+
+  const newProps = {
+    [classNamePropName]: classnames(
+      linkClassNames,
+      children.props[classNamePropName]
+    ),
+  }
+
+  return React.Children.only(React.cloneElement(children, newProps))
+}
+
+LinkStyle.displayName = "LinkStyle"

packages/components/src/LinkStyle/_docs/LinkStyle.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as LinkStyleStories from "./LinkStyle.stories"
+
+<Meta of={LinkStyleStories} />
+
+# LinkStyle
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LinkStyle"
+  figma=""
+  designGuidelines=""
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { LinkStyle } from "@kaizen/components"'
+/>
+
+## Overview
+
+Style an element/component to look like a link (eg. `<a>`, `<button>`, `<Router>`).
+
+Note that the component inherits font (eg. `font-family`, `font-size`), so ensure you
+define the values (eg. wrap it in `<Text>`).
+
+<Canvas of={LinkStyleStories.Playground} />
+<Controls of={LinkStyleStories.Playground} />
+
+## API
+
+### Children
+
+The `children` prop accepts a **single** ReactElement (dom element or component).
+
+If the element you are passing in uses a different prop name to apply classNames, remember
+to also use the `classNamePropName` prop (see [Child with different className prop](#child-with-different-classname-prop)).
+
+<Canvas of={LinkStyleStories.Children} />
+<Controls of={LinkStyleStories.Children} />
+
+### Reversed
+
+Add reversed styles using `isReversed` when sitting on a dark background.
+
+<Canvas of={LinkStyleStories.Reversed} />
+
+### Child with different className prop
+
+If the component you use in `children` uses a different prop for `className` (eg. `classNameOverride`),
+use the `classNamePropName` prop to re-assign where the LinkStyle classes should be assigned.
+
+<Canvas of={LinkStyleStories.ClassNamePropName} />