From 7fff28b32f6dbe8ade2a7903447f6271db548bf5 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 23 Jun 2023 08:57:18 -0400
Subject: [PATCH] Base Heading (#12)

* Boilerplate base-heading

* Add base-heading component

* Load correct font weights

* Add align
---
 .../src/base-heading/base-heading.story.md    | 14 ++++
 .../src/base-heading/base-heading.story.vue   | 44 +++++++++++
 components/src/base-heading/base-heading.vue  | 75 +++++++++++++++++++
 components/src/theme/main.css                 |  2 +-
 4 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 components/src/base-heading/base-heading.story.md
 create mode 100644 components/src/base-heading/base-heading.story.vue
 create mode 100644 components/src/base-heading/base-heading.vue

diff --git a/components/src/base-heading/base-heading.story.md b/components/src/base-heading/base-heading.story.md
new file mode 100644
index 00000000..5de38427
--- /dev/null
+++ b/components/src/base-heading/base-heading.story.md
@@ -0,0 +1,14 @@
+Does not render an icon for `title` size headings.
+
+### Props
+
+| Prop   | Description                                                                         | Default   |
+| ------ | ----------------------------------------------------------------------------------- | --------- |
+| `size` | Size of the heading. One of `title`, `large`, `medium`, `small`                     | `'large'` |
+| `tag`  | What HTML tag to use for the heading. One of `h1`, `h2`, `h3`, `h4`, `h5`, `strong` | `h2`      |
+| `icon` | What icon to render in front of the title.                                          | --        |
+
+### Style Overrides
+
+| Variable | Default |
+| -------- | ------- |
diff --git a/components/src/base-heading/base-heading.story.vue b/components/src/base-heading/base-heading.story.vue
new file mode 100644
index 00000000..e0594c9c
--- /dev/null
+++ b/components/src/base-heading/base-heading.story.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import BaseHeading from './base-heading.vue';
+
+const state = reactive({
+	size: 'large',
+	tag: 'h2',
+	icon: undefined,
+	align: 'start',
+});
+</script>
+
+<template>
+	<Story title="Base / Heading / Dynamic" auto-props-disabled>
+		<template #controls>
+			<HstSelect
+				v-model="state.size"
+				title="Size"
+				:options="{
+					small: 'Small',
+					medium: 'Medium',
+					large: 'Large',
+					title: 'Title',
+				}"
+			/>
+
+			<HstSelect
+				v-model="state.align"
+				title="Align"
+				:options="{
+					start: 'Start',
+					center: 'Center',
+					end: 'Right',
+				}"
+			/>
+
+			<HstText v-model="state.icon" title="Icon" />
+		</template>
+
+		<BaseHeading :size="state.size" :icon="state.icon" :align="state.align">
+			The quick brown fox jumps over the lazy dog
+		</BaseHeading>
+	</Story>
+</template>
diff --git a/components/src/base-heading/base-heading.vue b/components/src/base-heading/base-heading.vue
new file mode 100644
index 00000000..a5ed09c3
--- /dev/null
+++ b/components/src/base-heading/base-heading.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, toRefs, unref } from 'vue';
+import BaseIcon from '../base-icon/base-icon.vue';
+
+export interface BaseHeadingProps {
+	size?: 'title' | 'large' | 'medium' | 'small';
+	tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'strong';
+	icon?: string;
+	align?: 'start' | 'center' | 'end';
+}
+
+const props = withDefaults(defineProps<BaseHeadingProps>(), {
+	size: 'large',
+	tag: 'h2',
+	align: 'start',
+});
+
+const { tag, size } = toRefs(props);
+
+const iconSize = computed(() => {
+	return unref(size);
+});
+</script>
+
+<template>
+	<component :is="tag" class="base-heading" :class="size">
+		<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
+		<slot />
+	</component>
+</template>
+
+<style scoped>
+.base-heading {
+	font-family: var(--family-display);
+	color: currentColor;
+	font-weight: 600;
+	margin: 0;
+	text-align: v-bind(align);
+}
+
+.base-icon {
+	vertical-align: middle;
+}
+
+.title {
+	font-size: 96px;
+	line-height: 96px;
+}
+
+.large {
+	font-size: 40px;
+	line-height: 48px;
+}
+
+.medium {
+	font-size: 24px;
+	line-height: 32px;
+}
+
+.medium .base-icon {
+	vertical-align: -4px;
+	margin-right: 4px;
+}
+
+.small {
+	font-size: 14px;
+	line-height: 26px;
+	text-transform: uppercase;
+}
+
+.small .base-icon {
+	vertical-align: -2px;
+	margin-right: 2px;
+}
+</style>
diff --git a/components/src/theme/main.css b/components/src/theme/main.css
index dbc89afe..52215f8e 100644
--- a/components/src/theme/main.css
+++ b/components/src/theme/main.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@600&family=Material+Symbols+Outlined:opsz,wght@20..48,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@400;600&family=Material+Symbols+Outlined:opsz,wght@20..48,100..700&display=swap');
 
 :root {
 	--family-display: 'Poppins', sans-serif;