From 5718531bb55df9696ca06cd8c71c4cb35a549b73 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Wed, 30 Aug 2023 16:02:11 +0100
Subject: [PATCH] Add examples of headings with icons (#420)

Co-authored-by: Scott Cranfill <scott@scottcranfill.com>
---
 .../_docs/foundation_typography.stories.mdx   | 32 +++++++++++++++++++
 .../components/BaseHeading/BaseHeading.js     | 13 ++++++--
 .../BaseHeading/BaseHeading.stories.js        | 27 ++++++++++++++++
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/storybook/stories/_docs/foundation_typography.stories.mdx b/storybook/stories/_docs/foundation_typography.stories.mdx
index 3f76ab95..5d8d27ce 100644
--- a/storybook/stories/_docs/foundation_typography.stories.mdx
+++ b/storybook/stories/_docs/foundation_typography.stories.mdx
@@ -1,5 +1,11 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs'
 
+import { IconLocationTemplate } from '../components/Icons/IconLocation'
+
+export const testHeadingIcon = IconLocationTemplate({
+  customClass: 'inline',
+})
+
 <Meta title="Foundation/Typography" parameters={{ viewMode: 'docs' }} />
 
 # Typography
@@ -195,6 +201,32 @@ Note:
   </Story>
 </Canvas>
 
+### Heading Icons
+
+We can also add icons next to the headings.
+
+<Canvas>
+  <Story name="Heading Icons">
+    {`
+      <div>
+        <p class="text-h1-alt mt-8">${testHeadingIcon}Header H1 Alt</p>
+        <code>.text-h1-alt</code>
+        <p class="text-h1 mt-8">${testHeadingIcon}Header H1</p>
+        <code>h1, .text-h1</code>
+        <p class="text-h2 mt-8">${testHeadingIcon}Header H2</p>
+        <code>h2, .text-h2</code>
+        <p class="text-h3 mt-8">${testHeadingIcon}Header H3</p>
+        <code>h3, .text-h3</code>
+        <p class="text-h4 mt-8">${testHeadingIcon}Header H4</p>
+        <code>h4, .text-h4</code>
+        <p class="text-h5 mt-8">${testHeadingIcon}Header H5</p>
+        <code>h5, .text-h5</code>
+        <p class="text-h6 mt-8">${testHeadingIcon}Header H6</p>
+        <code>h6, .text-h6</code>
+    `}
+  </Story>
+</Canvas>
+
 ## Text Contrast
 
 In areas where text overlays an image, use this `.text-contrast` class in conjunction with a semi-transparent overlay (ex. `bg-black bg-opacity-*`) to improve readability. `.text-contrast` also works with tailwind breakpoints.
diff --git a/storybook/stories/components/BaseHeading/BaseHeading.js b/storybook/stories/components/BaseHeading/BaseHeading.js
index 48d6aa3d..726b4983 100644
--- a/storybook/stories/components/BaseHeading/BaseHeading.js
+++ b/storybook/stories/components/BaseHeading/BaseHeading.js
@@ -1,4 +1,10 @@
-export const BaseHeadingTemplate = ({ text, size, tag, headingClass }) => {
+export const BaseHeadingTemplate = ({
+  text,
+  size,
+  tag,
+  icon = '',
+  headingClass,
+}) => {
   let computedClass = headingClass ? headingClass + ' ' : ''
   if (!size) size = 'h3' // default
   if (!tag) tag = size
@@ -12,5 +18,8 @@ export const BaseHeadingTemplate = ({ text, size, tag, headingClass }) => {
   }
   computedClass += sizes[size]
 
-  return `<${tag} class="${computedClass}">${text}</${tag}>`
+  // Use a space between the icon and text so its size is proportional to the font size.
+  const iconWrapper = icon ? `${icon} ` : ''
+
+  return `<${tag} class="${computedClass}">${iconWrapper}${text}</${tag}>`
 }
diff --git a/storybook/stories/components/BaseHeading/BaseHeading.stories.js b/storybook/stories/components/BaseHeading/BaseHeading.stories.js
index 530697b1..1add85a1 100644
--- a/storybook/stories/components/BaseHeading/BaseHeading.stories.js
+++ b/storybook/stories/components/BaseHeading/BaseHeading.stories.js
@@ -10,6 +10,10 @@ import {
 } from '@storybook/addon-docs'
 import { BaseHeadingTemplate } from './BaseHeading'
 
+import { IconLocationTemplate } from '../Icons/IconLocation'
+import { IconArrowsTemplate } from '../Icons/IconArrows'
+import { IconUserTemplate } from '../Icons/IconUser'
+
 export default {
   title: 'Components/Base/BaseHeading',
   argTypes: {
@@ -59,19 +63,42 @@ export default {
 }
 
 export const H1 = BaseHeadingTemplate.bind({})
+H1.storyName = 'H1'
 H1.args = { text: 'Heading 1', size: 'h1', tag: 'h1' }
 
 export const H2 = BaseHeadingTemplate.bind({})
+H2.storyName = 'H2'
 H2.args = { text: 'Heading 2', size: 'h2', tag: 'h2' }
 
 export const H3 = BaseHeadingTemplate.bind({})
+H3.storyName = 'H3'
 H3.args = { text: 'Heading 3', size: 'h3', tag: 'h3' }
 
 export const H4 = BaseHeadingTemplate.bind({})
+H4.storyName = 'H4'
 H4.args = { text: 'Heading 4', size: 'h4', tag: 'h4' }
 
 export const H5 = BaseHeadingTemplate.bind({})
+H5.storyName = 'H5'
 H5.args = { text: 'Heading 5', size: 'h5', tag: 'h5' }
 
 export const H6 = BaseHeadingTemplate.bind({})
+H6.storyName = 'H6'
 H6.args = { text: 'Heading 6', size: 'h6', tag: 'h6' }
+
+export const HeadingsWithIcons = ((args) => {
+  const iconProps = { customClass: 'inline' }
+
+  // Test with icons of different shapes.
+  return `
+    ${BaseHeadingTemplate({ ...args, icon: IconLocationTemplate(iconProps) })}
+    ${BaseHeadingTemplate({ ...args, icon: IconUserTemplate(iconProps) })}
+    ${BaseHeadingTemplate({ ...args, icon: IconArrowsTemplate(iconProps) })}
+  `
+}).bind({})
+HeadingsWithIcons.args = {
+  text: 'Heading 3',
+  size: 'h3',
+  tag: 'h3',
+  headingClass: 'mt-8',
+}