Base Heading

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 |
+| -------- | ------- |

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>

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>

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,[email protected],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,[email protected],100..700&display=swap');
 
 :root {
 	--family-display: 'Poppins', sans-serif;