From ac1001cd1e8417079869bd9cde8df8b7de74e429 Mon Sep 17 00:00:00 2001
From: Matthew Holloway <Matthew Holloway>
Date: Wed, 2 Oct 2024 14:48:30 +1300
Subject: [PATCH] feat: visual regression test

---
 .github/workflows/vis-reg-test.yml            | 26 +++++++++++++++
 client/components/Alert.story.vue             | 25 ++++++++++++++
 client/components/Breadcrumbs.story.vue       | 22 +++++++++++++
 client/components/Card.story.vue              | 29 ++++++++--------
 .../components/DateYearMonthRange.story.vue   | 33 +++++++++++++++++++
 client/components/DiamondText.story.vue       | 19 +++++++++++
 client/components/Footer.story.vue            | 15 +++++++++
 client/components/Heading.vue                 |  2 +-
 client/package.json                           |  4 +--
 9 files changed, 159 insertions(+), 16 deletions(-)
 create mode 100644 .github/workflows/vis-reg-test.yml
 create mode 100644 client/components/Alert.story.vue
 create mode 100644 client/components/Breadcrumbs.story.vue
 create mode 100644 client/components/DateYearMonthRange.story.vue
 create mode 100644 client/components/DiamondText.story.vue
 create mode 100644 client/components/Footer.story.vue

diff --git a/.github/workflows/vis-reg-test.yml b/.github/workflows/vis-reg-test.yml
new file mode 100644
index 0000000..825d470
--- /dev/null
+++ b/.github/workflows/vis-reg-test.yml
@@ -0,0 +1,26 @@
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./client
+
+      - name: Build Storybook
+        run: npm run story:build
+        working-directory: ./client
+
+      - name: Lost Pixel
+        uses: lost-pixel/lost-pixel@v3.8.0
diff --git a/client/components/Alert.story.vue b/client/components/Alert.story.vue
new file mode 100644
index 0000000..77876db
--- /dev/null
+++ b/client/components/Alert.story.vue
@@ -0,0 +1,25 @@
+<template>
+  <Story
+    title="Alert"
+    :layout="{
+      type: 'grid',
+      width: 350,
+      defaultColorScheme: 'light'
+    }"
+  >
+    <Variant title="Warning Alert" theme="light">
+      <Alert variant="warning" heading="This alert is a warning">
+        <p class="text-sm">
+          For more information, please refer to the documentation
+        </p>
+      </Alert>
+    </Variant>
+    <Variant title="Info Alert">
+      <Alert variant="info" heading="This RFC is now obsolete">
+        <p class="text-sm">
+          For more information, please refer to the documentation
+        </p>
+      </Alert>
+    </Variant>
+  </Story>
+</template>
diff --git a/client/components/Breadcrumbs.story.vue b/client/components/Breadcrumbs.story.vue
new file mode 100644
index 0000000..d188ab3
--- /dev/null
+++ b/client/components/Breadcrumbs.story.vue
@@ -0,0 +1,22 @@
+<template>
+  <Story
+    title="Breadcrumbs"
+    :layout="{
+      type: 'grid',
+      width: '500px'
+    }"
+  >
+    <Variant title="Short breadcrumbs">
+      <Breadcrumbs :breadcrumb-items="[{ url: '/', label: 'Home' }]" />
+    </Variant>
+    <Variant title="Long breadcrumbs">
+      <Breadcrumbs
+        :breadcrumb-items="[
+          { url: '/', label: 'Home' },
+          { url: '/info', label: 'Documents' },
+          { url: '/info', label: 'Something else' }
+        ]"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/client/components/Card.story.vue b/client/components/Card.story.vue
index 7ab5e85..ca117a2 100644
--- a/client/components/Card.story.vue
+++ b/client/components/Card.story.vue
@@ -6,23 +6,26 @@
       width: 200
     }"
   >
-    <Variant title="Regular card" :init-state="initState">
+    <Variant title="Short card">
       <Card href="/sdf" heading-level="3" has-cover-link>
-        <template #headingTitle>What is an RFC?</template>
+        <template #headingTitle>
+          A normal length title with <span class="font-thin">formatting</span>
+        </template>
         <p class="text-base mt-2 text-blue-900 dark:text-white">
-          Short description of the page here if it seems useful to show
+          A short description
+        </p>
+      </Card>
+    </Variant>
+    <Variant title="Long card">
+      <Card href="/sdf" heading-level="2" has-cover-link>
+        <template #headingTitle>
+          A very long card heading that keeps going and going and eventually
+          stops with <i>some</i> <span class="font-thin">formatting</span>
+        </template>
+        <p>
+          A very long card body that keeps going and going and eventually stops
         </p>
       </Card>
     </Variant>
   </Story>
 </template>
-
-<script lang="ts" setup>
-import Card from './Card.vue'
-
-function initState() {
-  return {
-    disabled: false
-  }
-}
-</script>
diff --git a/client/components/DateYearMonthRange.story.vue b/client/components/DateYearMonthRange.story.vue
new file mode 100644
index 0000000..833cd3c
--- /dev/null
+++ b/client/components/DateYearMonthRange.story.vue
@@ -0,0 +1,33 @@
+<template>
+  <Story
+    title="DateYearMonthRange"
+    :layout="{
+      type: 'grid',
+      width: 500
+    }"
+  >
+    <span class="text-black">
+      <DateYearMonthRange
+        v-model:start="startValue"
+        v-model:end="endValue"
+        :start-range-date="OLDEST_RFC"
+        :end-range-date="NEWEST_POTENTIAL_RFC"
+        label="Publication date"
+        start-label="from"
+        start-placeholder="Date from"
+        end-label="to"
+        end-placeholder="Date to"
+      />
+    </span>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const startValue = ref('2020-1')
+const endValue = ref('2023-3')
+
+const OLDEST_RFC = new Date('1969-01-01')
+const NEWEST_POTENTIAL_RFC = new Date()
+</script>
diff --git a/client/components/DiamondText.story.vue b/client/components/DiamondText.story.vue
new file mode 100644
index 0000000..a5be5ed
--- /dev/null
+++ b/client/components/DiamondText.story.vue
@@ -0,0 +1,19 @@
+<template>
+  <Story
+    title="DiamondText"
+    :layout="{
+      type: 'grid',
+      width: 200
+    }"
+  >
+    <Variant title="1 char DiamondText">
+      <DiamondText text="3" />
+    </Variant>
+    <Variant title="2 chars DiamondText">
+      <DiamondText text="33" />
+    </Variant>
+    <Variant title="3 chars DiamondText">
+      <DiamondText text="333" />
+    </Variant>
+  </Story>
+</template>
diff --git a/client/components/Footer.story.vue b/client/components/Footer.story.vue
new file mode 100644
index 0000000..38315df
--- /dev/null
+++ b/client/components/Footer.story.vue
@@ -0,0 +1,15 @@
+<template>
+  <Story
+    title="Footer"
+    :layout="{
+      type: 'single'
+    }"
+  >
+    <Variant title="Footer">
+      <Footer />
+    </Variant>
+    <Variant title="Footer">
+      <Footer />
+    </Variant>
+  </Story>
+</template>
diff --git a/client/components/Heading.vue b/client/components/Heading.vue
index ac90591..d4e04b4 100644
--- a/client/components/Heading.vue
+++ b/client/components/Heading.vue
@@ -47,7 +47,7 @@ const props = defineProps<Props>()
 
 const headingStyles: Record<`h${Props['level']}`, string> = {
   h1: 'text-3xl lg:text-5xl font-bold',
-  h2: 'text-2xl mt-7 mb-5 font-bold',
+  h2: 'text-2xl font-bold',
   h3: 'text-xl font-bold',
   h4: 'text-lg font-bold',
   h5: 'text-base font-bold',
diff --git a/client/package.json b/client/package.json
index 72bb42e..2010252 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,8 +14,8 @@
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview --port 4567",
-    "story:test": "LOST_PIXEL_DISABLE_TELEMETRY=1 npx lost-pixel",
-    "story:test:update": "LOST_PIXEL_DISABLE_TELEMETRY=1 npx lost-pixel update",
+    "story:test": "LOST_PIXEL_DISABLE_TELEMETRY=1 npx lost-pixel docker ",
+    "story:test:update": "LOST_PIXEL_DISABLE_TELEMETRY=1 npx lost-pixel docker update",
     "types": "npx nuxi typecheck"
   },
   "dependencies": {