✅ add viewports, chromatic and modes (#2)

* ✅ add viewports, chromatic and modes

* 🎨 add container queries to repository.js

* 🎨 add container queries!

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: npm i
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/ui-tests.yml

@@ -20,6 +20,6 @@ jobs:
         run: npm run build-storybook
       - name: Serve Storybook and run tests
         run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-          "npx http-server ./storybook-static --port 2001 --silent" \
+          npx --yes concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+          "npx --yes http-server ./storybook-static --port 2001 --silent" \
           "npx wait-on http://127.0.0.1:2001 && npx test-storybook  --url http://127.0.0.1:2001 --coverage"

.storybook/modes.js

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Storybook modes used for testing in Chromatic
+ * @see https://www.chromatic.com/docs/modes
+ */
+
+import { customViewports } from './viewports';
+import { primerThemes } from './primer-preview';
+
+const defaultThemes = ['light', 'dark'];
+
+export const defaultModes = {};
+export const githubModes = {};
+
+for (const key of Object.keys(customViewports)) {
+  defaultModes[key] = {
+    viewport: key,
+  };
+  githubModes[key] = {
+    viewport: key,
+  };
+  for (const theme of defaultThemes) {
+    defaultModes[`${theme} ${key}`] = {
+      viewport: key,
+      theme: theme,
+    };
+  };
+  for (const theme of primerThemes) {
+    githubModes[`primer ${theme.value} ${key}`] = {
+      viewport: key,
+      theme: theme.value,
+    };
+  };
+};
+
+export const allModes = {
+  mobile: {
+    viewport: 'small',
+  },
+  desktop: {
+    viewport: 'large',
+  },
+  dark: {
+    backgrounds: 'dark',
+    theme: 'dark',
+  },
+  light: {
+    backgrounds: 'light',
+    theme: 'light',
+  },
+  'dark desktop': {
+    backgrounds: 'dark',
+    theme: 'dark',
+    viewport: 'large',
+  },
+  'light mobile': {
+    backgrounds: 'light',
+    theme: 'light',
+    viewport: 'small',
+  },
+};

.storybook/preview.js

@@ -1,6 +1,9 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import { globalTypesPrimer, decoratorsPrimer } from './primer-preview';
+import { viewports } from './viewports';
+import { defaultModes } from './modes';
+import "./storybook.css";
 
 setCustomElementsManifest(customElements);
 
@@ -11,13 +14,22 @@ export const decorators = decoratorsPrimer;
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
+    chromatic: {
+      modes: {
+        ...defaultModes,
+      },
+    },
     controls: {
       expanded: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    layout: 'none',
+    viewport: {
+      viewports,
+    },
   },
 };
 

.storybook/storybook.css

@@ -0,0 +1,3 @@
+.sb-show-main {
+  margin: 0;
+}

.storybook/viewports.js

@@ -0,0 +1,32 @@
+// .storybook/preview.js
+
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export const customViewports = {
+  containerMin1: {
+    name: 'ContainerMin1: 200px',
+    styles: {
+      width: '200px',
+      height: '100%',
+    },
+  },
+  containerMin2: {
+    name: 'ContainerMin2: 300px',
+    styles: {
+      width: '300px',
+      height: '100%',
+    },
+  },
+  containerMin3: {
+    name: 'ContainerMin3: 400px',
+    styles: {
+      width: '400px',
+      height: '100%',
+    },
+  },
+};
+
+export const viewports ={
+  ...MINIMAL_VIEWPORTS,
+  ...customViewports,
+};

.vscode/README.md

@@ -0,0 +1,4 @@
+Settings add missing support for css container query syntax
+
+@see https://github.com/wileycoyote78/custom-css/
+@see https://stackoverflow.com/questions/76125833/container-type-property-and-container-rule-are-not-recognized-by-vs-code/76125894#76125894

.vscode/custom-css.json

@@ -0,0 +1,88 @@
+{
+  "version": 1.1,
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/master/docs/customData.schema.json",
+  "atDirectives": [
+    {
+      "name": "@container",
+      "description": {
+        "kind": "markdown",
+        "value": "The **@container** CSS at-rule is a conditional group rule that applies styles to a containment context."
+      },
+      "references": [
+        {
+          "name": "MDN reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@container"
+        }
+      ],
+      "browsers": [
+        "E105",
+        "FF110",
+        "C105",
+        "S16.0",
+        "O91"
+      ]
+    }
+  ],
+  "properties": [
+    {
+      "name": "container-type",
+      "description": {
+        "kind": "markdown",
+        "value": "The **container-type** CSS property is used to define the type of containment used in a container query."
+      },
+      "references": [
+        {
+          "name": "MDN reference",
+          "url": "https://developer.mozilla.org/docs/Web/CSS/container-type"
+        }
+      ],
+      "browsers": [
+        "E105",
+        "FF110",
+        "C105",
+        "S16.0",
+        "O91"
+      ]
+    },
+    {
+      "name": "container-name",
+      "description": {
+        "kind": "markdown",
+        "value": "The **container-name** CSS property specifies a list of query container names used by the **@container** at rule in a container query."
+      },
+      "references": [
+        {
+          "name": "MDN reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/container-name"
+        }
+      ],
+      "browsers": [
+        "E105",
+        "FF110",
+        "C105",
+        "S16.0",
+        "O91"
+      ]
+    },
+    {
+      "name": "container",
+      "description": {
+        "kind": "markdown",
+        "value": "The **container** shorthand CSS property establishes the element as a query container and specifies the name or name for the containment used in a container query."
+      },
+      "references": [
+        {
+          "name": "MDN reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/container"
+        }
+      ],
+      "browsers": [
+        "E105",
+        "FF110",
+        "C105",
+        "S16.0",
+        "O91"
+      ]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "css.customData": [
+      "./.vscode/custom-css.json"
+  ],
+  "prettier.enable": true,
+}

src/github/repository.stories.js

@@ -25,6 +25,7 @@ export default {
 export const FullNameOnly = {
   args: {
     full_name: repoProfileComponents.full_name,
+    stargazers_count: '0'
   },
   play: async ({ args, canvasElement, step }) => {
     const elements = await getElements(canvasElement);

src/github/styles/repository.css

@@ -1,7 +1,17 @@
 /** styles for the GitHub repository web component */
 
+:host {
+  container-name: repository;
+}
+
 section[itemscope] {
-  padding: 1em;
+  padding: var(--row-spacing);
+}
+
+@container repository (min-width: 300px) {
+  section[itemscope] {
+    padding: calc(var(--row-spacing) * 2);
+  }
 }
 
 [itemprop="codeRepository"] {
@@ -18,18 +28,20 @@ section[itemscope] {
 }
 
 [itemprop="about"] {
-  margin-top: .5em;
+  margin-top: var(--row-spacing);
   color: var(--color-light);
 }
 
 dl {
   display: flex;
-  flex: 1 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--svg-gap);
   color: var(--color-light);
-  margin-top: .5em;
+  margin-top: var(--row-spacing);
 
   > dt {
-    margin-right: .2em;
+    flex: 0 0 var(--svg-size);
     > span {
       display: none;
     }
@@ -38,10 +50,23 @@ dl {
     }
   }
   > dd {
-    margin-right: 1em;
+    /* margin-right: 1em; */
+    flex: 0 0 calc(100% - calc(var(--svg-size) + var(--svg-gap)));
 
     &:last-of-type {
       margin-right: 0;
     }
   }
+
+  @container repository (min-width: 300px) {
+    > dd:not([itemprop="programmingLanguage"]) {
+      flex: 1 0 auto;
+    }
+  }
+
+  @container repository (min-width: 400px) {
+    > dd {
+      flex: 1 0 auto;
+    }
+  }
 }