chore(infra): add turbosnap

.github/workflows/chromatic.yml

@@ -75,5 +75,9 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: .storybook-static/wc
+          onlyChanged: true
+          externals: |
+            packages/pharos/assets/**
+            packages/pharos/tokens/**
           exitZeroOnChanges: true
           exitOnceUploaded: true

.storybook/initComponents.js

@@ -54,8 +54,8 @@ import {
   PharosToggleButton,
   PharosToggleButtonGroup,
   PharosTooltip,
-} from '../packages/pharos/lib/index';
-import registerComponents from '../packages/pharos/lib/utils/registerComponents';
+} from '@src/index';
+import registerComponents from '@src/utils/registerComponents';
 
 registerComponents('storybook', [
   PharosAlert,

.storybook/main.ts

@@ -58,6 +58,7 @@ const config = {
       resolve: {
         alias: {
           '@lib': path.resolve(__dirname, '../packages/pharos/lib'),
+          '@src': path.resolve(__dirname, '../packages/pharos/src'),
           '@config': path.resolve(__dirname, './'),
         },
       },

package.json

@@ -26,7 +26,7 @@
     "test-storybook:react": "test-storybook --ci --config-dir .storybook/react --url http://127.0.0.1:9001",
     "prestorybook:wc:dev": "yarn storybook:setup",
     "storybook:wc:dev": "yarn prestorybook:wc:dev && concurrently \"yarn:storybook:wc:start\" \"yarn:watch:styles\" --raw --kill-others",
-    "storybook:wc:build": "storybook build -c .storybook/wc -o .storybook-static/wc",
+    "storybook:wc:build": "storybook build --stats-json -c .storybook/wc -o .storybook-static/wc",
     "prestorybook:react": "yarn storybook:setup",
     "storybook:react": "yarn prestorybook:react && yarn storybook:react:start",
     "storybook:react:start": "storybook dev -c .storybook/react -p 9001",

packages/pharos/src/components/alert/pharos-alert.ts

@@ -111,7 +111,6 @@ export class PharosAlert extends ScopedRegistryMixin(FocusMixin(PharosElement))
     return this.closable
       ? html` <pharos-button
           type="button"
-          variant="subtle"
           icon="close"
           icon-condensed
           a11y-label="Close alert"

packages/pharos/src/components/heading/pharos-heading.scss

@@ -10,6 +10,7 @@
   font-weight: var(--pharos-font-weight-regular);
   margin-top: 0;
   margin-bottom: 0.5em;
+  color: papayawhip;
 }
 
 :host([preset='1']),

packages/pharos/src/components/heading/pharos-heading.ts

@@ -100,6 +100,9 @@ export class PharosHeading extends PharosElement {
   protected override render(): TemplateResult {
     const template = `
       <h${this.level} class="heading">
+        <br />
+        <br />
+        <br />
         <slot></slot>
       </h${this.level}>
     `;