Add callout component

.storybook/preview.ts

@@ -4,6 +4,11 @@ import "../src/scss/iati.scss";
 
 const preview: Preview = {
   parameters: {
+    options: {
+      storySort: {
+        order: ["Typography", "Components"],
+      },
+    },
     docs: {
       source: {
         format: "dedent",

src/scss/components/_index.scss

@@ -0,0 +1 @@
+@forward "callout/callout";

src/scss/components/callout/_callout.scss

@@ -0,0 +1,44 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+
+.iati-callout {
+  padding: $text-padding;
+  border-left: $border-width solid $color-blue-50;
+  background-color: $color-teal-10;
+  color: $color-teal-90;
+  box-shadow: 0 $spacing-s $spacing-s $color-grey-20;
+
+  &--orange {
+    border-color: $color-orange-50;
+    background-color: $color-orange-10;
+    color: $color-orange-90;
+  }
+
+  &--red {
+    border-color: $color-red-50;
+    background-color: $color-red-10;
+    color: $color-red-90;
+  }
+
+  &--green {
+    border-color: $color-green-50;
+    background-color: $color-green-10;
+    color: $color-green-90;
+  }
+
+  &--purple {
+    border-color: $color-purple-50;
+    background-color: $color-purple-10;
+    color: $color-purple-90;
+  }
+
+  & > * {
+    margin: $spacing-s 0;
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 2;
+  }
+}

src/scss/components/callout/callout.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import Template from "../../../../.storybook/StoriesOnlyTemplate.mdx";
+
+const meta: Meta = {
+  title: "Components/Callout",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Template,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <div class="iati-callout">
+      <p class="iati-callout__title">Title</p>
+      <p>Content.</p>
+    </div>
+  `,
+};
+
+export const Green: Story = {
+  render: () => html`
+    <div class="iati-callout iati-callout--green">
+      <p class="iati-callout__title">Title</p>
+      <p>Content.</p>
+    </div>
+  `,
+};
+
+export const Orange: Story = {
+  render: () => html`
+    <div class="iati-callout iati-callout--orange">
+      <p class="iati-callout__title">Title</p>
+      <p>Content.</p>
+    </div>
+  `,
+};
+
+export const Red: Story = {
+  render: () => html`
+    <div class="iati-callout iati-callout--red">
+      <p class="iati-callout__title">Title</p>
+      <p>Content.</p>
+    </div>
+  `,
+};
+
+export const Purple: Story = {
+  render: () => html`
+    <div class="iati-callout iati-callout--purple">
+      <p class="iati-callout__title">Title</p>
+      <p>Content.</p>
+    </div>
+  `,
+};

src/scss/iati.scss

@@ -1,6 +1,7 @@
 @use "base";
 @use "tokens";
 @use "typography";
+@use "components";
 
 // Expose tokens for use in downstream applications
 @forward "tokens";

src/scss/tokens/_spacing.scss

@@ -1,2 +1,6 @@
 $spacing-xs: 0.1rem;
+$spacing-s: 0.25rem;
 $spacing-m: 1rem;
+
+$border-width: $spacing-s;
+$text-padding: $spacing-m;