feat: visual regression test

.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

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>

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>

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>

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>

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>

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>

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',

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": {