@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Tag/tests/Tag.unit.test.js

@@ -0,0 +1,93 @@
+import { render } from "@testing-library/react";
+
+import { Tag } from "../Tag";
+import { TagButton } from "../TagButton";
+import { colors } from "../Tag";
+
+describe("rendering", () => {
+  describe("initial state", () => {
+    it("has default className tag", () => {
+      const { getByText } = render(<Tag>Tag</Tag>);
+      expect(getByText("Tag")).toHaveClass("tag");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Tag>Tag</Tag>);
+      expect(getByText("Tag")).toBeInTheDocument();
+    });
+
+    it("renders children as node", () => {
+      const { getByTestId } = render(
+        <Tag>
+          <span data-testid="child">Children</span>
+        </Tag>,
+      );
+      expect(getByTestId("child")).toBeInTheDocument();
+    });
+
+    colors.map((color) => {
+      it(`has tag--${color} class when ${color}`, () => {
+        const { getByText } = render(
+          <Tag color={color} key={color}>
+            Tag
+          </Tag>,
+        );
+        expect(getByText("Tag")).toHaveClass(`tag--${color}`);
+      });
+    });
+
+    it("passes other props", () => {
+      const { getByTestId } = render(<Tag data-testid="test">Tag</Tag>);
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+
+    describe("size prop", () => {
+      it("adds tag--small class when size is small", () => {
+        const { getByText } = render(<Tag size="small">Small Tag</Tag>);
+        expect(getByText("Small Tag")).toHaveClass("tag--small");
+      });
+
+      it("adds tag--large class when size is large", () => {
+        const { getByText } = render(<Tag size="large">Large Tag</Tag>);
+        expect(getByText("Large Tag")).toHaveClass("tag--large");
+      });
+    });
+
+    describe("action button", () => {
+      it("renders with action button", () => {
+        const { getByRole } = render(
+          <Tag actionButton={<TagButton iconName="close" ariaLabel="Close" />}>
+            Tag with button
+          </Tag>,
+        );
+        expect(getByRole("button")).toBeInTheDocument();
+      });
+
+      it("passes size prop to action button", () => {
+        const { getByRole } = render(
+          <Tag
+            size="large"
+            actionButton={<TagButton iconName="close" ariaLabel="Close" />}
+          >
+            Large Tag with button
+          </Tag>,
+        );
+        expect(getByRole("button")).toHaveClass("tag__action--large");
+      });
+
+      it("passes isDisabled prop to action button", () => {
+        const { getByRole } = render(
+          <Tag
+            isDisabled
+            actionButton={<TagButton iconName="close" ariaLabel="Close" />}
+          >
+            Disabled Tag with button
+          </Tag>,
+        );
+        expect(getByRole("button")).toHaveAttribute("aria-disabled", "true");
+      });
+    });
+  });
+});

package/src/components/Tag/tests/TagButton.conformance.test.js

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { TagButton } from "../TagButton";
+
+const example = (
+  <>
+    <TagButton iconName="close" ariaLabel="Close" />
+    <TagButton iconName="search" ariaLabel="Search" size="large" />
+    <TagButton iconName="edit" ariaLabel="Edit" isDisabled />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: { "attribute-boolean-style": "off" },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Tag/tests/TagButton.unit.test.js

@@ -0,0 +1,96 @@
+import { render, fireEvent } from "@testing-library/react";
+
+import { TagButton } from "../TagButton";
+
+describe("TagButton", () => {
+  describe("rendering", () => {
+    it("has default class tag__action", () => {
+      const { getByRole } = render(
+        <TagButton iconName="close" ariaLabel="Close" />,
+      );
+      expect(getByRole("button")).toHaveClass("tag__action");
+    });
+
+    it("renders the provided icon", () => {
+      const { container } = render(
+        <TagButton iconName="close" ariaLabel="Close" />,
+      );
+      expect(container.querySelector(".icon")).toBeInTheDocument();
+    });
+
+    it("accepts custom className", () => {
+      const { getByRole } = render(
+        <TagButton
+          iconName="close"
+          ariaLabel="Close"
+          className="custom-class"
+        />,
+      );
+      expect(getByRole("button")).toHaveClass("custom-class");
+    });
+
+    it("forwards ref to button element", () => {
+      const ref = React.createRef();
+      render(<TagButton iconName="close" ariaLabel="Close" ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  describe("size prop", () => {
+    it("adds tag__action--large class when size is large", () => {
+      const { getByRole } = render(
+        <TagButton iconName="close" ariaLabel="Close" size="large" />,
+      );
+      expect(getByRole("button")).toHaveClass("tag__action--large");
+    });
+
+    it("uses medium icon size for large buttons", () => {
+      const { container } = render(
+        <TagButton iconName="close" ariaLabel="Close" size="large" />,
+      );
+      expect(container.querySelector(".icon--medium")).toBeInTheDocument();
+    });
+
+    it("uses small icon size for default size buttons", () => {
+      const { container } = render(
+        <TagButton iconName="close" ariaLabel="Close" />,
+      );
+      expect(container.querySelector(".icon--small")).toBeInTheDocument();
+    });
+  });
+
+  describe("interaction", () => {
+    it("calls onClick when clicked", () => {
+      const handleClick = jest.fn();
+      const { getByRole } = render(
+        <TagButton iconName="close" ariaLabel="Close" onClick={handleClick} />,
+      );
+
+      fireEvent.click(getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onClick when disabled", () => {
+      const handleClick = jest.fn();
+      const { getByRole } = render(
+        <TagButton
+          iconName="close"
+          ariaLabel="Close"
+          onClick={handleClick}
+          isDisabled
+        />,
+      );
+
+      fireEvent.click(getByRole("button"));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it("has aria-disabled attribute when disabled", () => {
+      const { getByRole } = render(
+        <TagButton iconName="close" ariaLabel="Close" isDisabled />,
+      );
+
+      expect(getByRole("button")).toHaveAttribute("aria-disabled", "true");
+    });
+  });
+});

package/src/components/Testimonial/Testimonial.mdx

@@ -0,0 +1,41 @@
+import { md, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview, DefaultConfigTable } from '../../styleguide/';
+import Testimonial from './index';
+import { loremIpsum } from 'lorem-ipsum';
+
+# Testimonial
+
+Wraps text in quotation marks.
+
+<Preview>
+  <Testimonial>
+    Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in.
+    Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo
+    tempor cillum consequat qui occaecat.
+  </Testimonial>
+</Preview>
+
+## Color
+
+<Preview>
+  <Testimonial color="orange">I'm orange....</Testimonial>
+</Preview>
+
+## Tag
+
+In some cases, when you have multiple children, you can use div instead of paragraph as wrapper.
+
+<Preview>
+  <Testimonial isDiv>
+    <p>
+      Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in.
+      Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo
+      tempor cillum consequat qui occaecat.
+    </p>
+    <p className="align-right">Albert Einstein (probably)</p>
+  </Testimonial>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Testimonial />" component={Testimonial} />

package/src/components/Testimonial/Testimonial.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface TestimonialProps {
+  className?: string;
+  children?: React.ReactNode;
+  color?: 'default' | 'orange';
+  isDiv?: boolean;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'testimonial';
+
+export const Testimonial: React.FC<TestimonialProps> = ({ 
+  className, 
+  children, 
+  color = 'default', 
+  isDiv = false, 
+  ...other 
+}) => {
+  const Tag = isDiv ? 'div' : 'p';
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`testimonial--${color}`]: color === 'orange',
+    },
+    className
+  );
+  
+  return (
+    <Tag className={classes} {...other}>
+      {children}
+    </Tag>
+  );
+};
+
+Testimonial.displayName = 'Testimonial';

package/src/components/Testimonial/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Testimonial } from "./Testimonial";

package/src/components/Testimonial/styles/config.scss

@@ -0,0 +1,39 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$black: var(--color-background-contrast);
+$orange: var(--color-surface-secondary);
+
+$quotation-mark-bottom: (
+    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
+    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
+);
+
+$quotation-mark-top: (
+    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
+    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>')
+);
+
+$quotation-mark-top-position: (
+    default: (
+        top: 0,
+        right: 0,
+    ),
+    oneline: (
+        top: 0,
+        right: 0,
+    )
+);
+
+$quotation-mark-bottom-position: (
+    default: (
+        left: 0,
+        bottom: 0,
+    ),
+    oneline: (
+        left: 0,
+        bottom: 0,
+    )
+)
+

package/src/components/Testimonial/styles/mixins.scss

@@ -0,0 +1,40 @@
+@use './config';
+@use '../../../styles/tokens/base';
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/generate';
+@use '../../../styles/tools/convert';
+
+@mixin base {
+    padding: space.get('small') space.get('large') space.get('small') convert.to-rem(40px);
+    width: fit-content;
+}
+
+@mixin quotation-mark {
+    font-size: convert.to-rem(14px);
+    position: relative;
+    &::before,
+    &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        height: convert.to-rem(18px);
+        width: convert.to-rem(20px);
+        background-repeat: no-repeat;
+        background-color: config.$black;
+    }
+    &::before {
+        @include generate.css-map(config.$quotation-mark-bottom);
+        @include generate.css-map(config.$quotation-mark-bottom-position, 'default');
+    }
+    &::after {
+        @include generate.css-map(config.$quotation-mark-top);
+        @include generate.css-map(config.$quotation-mark-top-position, 'default');
+    }
+}
+
+@mixin orange {
+    &::before,
+    &::after {
+        background-color: config.$orange;
+    }
+}

package/src/components/Testimonial/styles/style.scss

@@ -0,0 +1,16 @@
+@use "./config";
+@use "./mixins";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+
+@layer components {
+  .testimonial {
+    @include mixins.base;
+    @include mixins.quotation-mark;
+  }
+
+  .testimonial--orange {
+    @include mixins.orange;
+  }
+}

package/src/components/Testimonial/tests/Testimonial.conformance.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Testimonial } from '../';
+
+const example = <Testimonial />;
+
+it('is valid html', () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it('is accessible', async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Testimonial/tests/Testimonial.unit.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Testimonial } from '../';
+
+describe('rendering Testimonial', () => {
+  describe('initial state', () => {
+    it('has default class testimonial', () => {
+      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
+      expect(getByTestId('test-id')).toHaveClass('testimonial');
+    });
+    it('its rendered as paragraph', () => {
+      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
+      expect(getByTestId('test-id').tagName).toBe('P');
+    });
+  });
+
+  describe('passed props', () => {
+    it('renders children', () => {
+      const { getByText } = render(<Testimonial>test</Testimonial>);
+      expect(getByText('test')).toBeInTheDocument();
+    });
+    it('has additional class when className is set', () => {
+      const { getByTestId } = render(
+        <Testimonial className="test" data-testid="test-id" />
+      );
+      expect(getByTestId('test-id')).toHaveClass('testimonial');
+      expect(getByTestId('test-id')).toHaveClass('test');
+    });
+    it('has additional className testimonial--orange prop color with value orange is passed', () => {
+      const { getByTestId } = render(
+        <Testimonial className="test" data-testid="test-id" color="orange" />
+      );
+      expect(getByTestId('test-id')).toHaveClass('testimonial');
+      expect(getByTestId('test-id')).toHaveClass('testimonial--orange');
+    });
+    it('its rendered as div when isDiv prop is passed', () => {
+      const { getByTestId } = render(
+        <Testimonial data-testid="test-id" isDiv />
+      );
+      expect(getByTestId('test-id').tagName).toBe('DIV');
+    });
+  });
+});

package/src/components/Tile/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog for Tile Component
+
+## [Unreleased]
+
+### Changed
+
+- Update `Tile` component documentation and usage examples:
+  - Expanded usage examples in `Tile.mdx` and `/app/components/tile/page.mdx` to demonstrate:
+    - New color options (including `black`)
+    - Background image and icon support
+    - Alignment options with `hAlign` and `vAlign` props
+    - Block link and action variants
+  - Improved documentation for accessibility and prop usage.
+  - Added more realistic content and layout examples for `Tile` in various color and background scenarios.

package/src/components/Tile/Tile.mdx

@@ -0,0 +1,163 @@
+import {
+  CodeBlock,
+  ComponentDocs,
+  Note,
+} from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+
+import Tile from './index';
+import Grid, { GridCol } from '../Grid/index';
+import BlockAction, {
+  BlockActionControl,
+  BlockActionIndicator,
+  BlockActionOverride,
+} from '../BlockAction';
+import Link from '../Link';
+import Button from '../Button';
+
+export const colors = ['default', 'black'];
+
+# Tile
+
+Tile fills container and allows us to set background image, icon or to align children. Used mostly in Carousel or Grid components.
+
+<Preview bgTheme="gray">
+  <Grid rowGapSize="medium">
+    {['device-tablet', 'device-tv', 'device-smart-phone'].map((icon, index) => (
+      <GridCol size={{ xs: 6, md: 4, lg: 3 }} key={index.toString()}>
+        <Tile
+          key={index.toString()}
+          backgroundIcon={{
+            name: icon,
+          }}
+        >
+          <p>Tile {index + 1}</p>
+        </Tile>
+      </GridCol>
+    ))}
+  </Grid>
+</Preview>
+
+## Color
+
+<Preview bgTheme="gray">
+  <Grid rowGapSize="medium">
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="White (default) color" />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="Black color" color="black" />
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Background
+
+You can set background image or icon aligned to bottom and center of tile.
+
+<Preview>
+  <Grid rowGapSize="medium">
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile
+        backgroundImage={{
+          src: 'https://placehold.co/320x320',
+          alt: 'Gray square with dimensions',
+        }}
+      >
+        <p>Background Image</p>
+      </Tile>
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile
+        color="black"
+        backgroundIcon={{
+          name: 'device-tablet',
+        }}
+      >
+        <p>Background Icon</p>
+      </Tile>
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile
+        backgroundIcon={{
+          name: 'device-tablet',
+        }}
+        backgroundImage={{
+          src: 'https://placehold.co/320x320',
+          alt: 'Gray square with dimensions',
+        }}
+      >
+        <p>Both background Icon and Image</p>
+      </Tile>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Alignment
+
+Children can be aligned using hAlign and vAlign props.
+
+<Preview bgTheme="gray">
+  <Grid rowGapSize="medium">
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="Default (left)" />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="Center vertical" vAlign="center" />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="Center horizontal" hAlign="center" />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile children="End" vAlign="end" />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile vAlign="space-between">
+        <p>Space</p>
+        <p>between</p>
+      </Tile>
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile
+        children="Center center alignment"
+        vAlign="center"
+        hAlign="center"
+      />
+    </GridCol>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <Tile hAlign="center" vAlign="space-between">
+        <p>Center</p>
+        <p>space-between</p>
+      </Tile>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Block Link example
+
+<Preview bgTheme="gray">
+  <Grid>
+    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
+      <BlockAction>
+        <Tile>
+          <h3 hasMdxLink={false}>
+            <BlockActionControl>
+              <Link href="#">Block heading</Link>
+            </BlockActionControl>
+          </h3>
+          <p>Lorem Ipsum</p>
+          <BlockActionOverride>
+            <Button>Override button</Button>
+          </BlockActionOverride>
+        </Tile>
+      </BlockAction>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Tile />" component={Tile} />
+
+## Accessibility