Export icons

.eslintrc

@@ -1,14 +1,19 @@
 {
-  "plugins": ["jsx-a11y"],
-  "extends": [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "plugin:jsx-a11y/recommended"
-  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "node": true
+  },
+  "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
   "ignorePatterns": ["**/*.js", "**/**/*.js"],
   "rules": {
     "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
-    "eqeqeq": "error",
+    "eqeqeq": ["error", "always", { "null": "ignore" }],
     "no-param-reassign": "error",
     "no-return-assign": "error"
   }

.figmaexportrc.js

@@ -0,0 +1,57 @@
+// @ts-check
+
+module.exports = {
+  commands: [
+    [
+      'components',
+      {
+        fileId: 'iMVpYGoNGpwMEL9gd0oeYF',
+        onlyFromPages: ['Icons'],
+        transformers: [
+          require('@figma-export/transform-svg-with-svgo')({
+            plugins: [
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                  },
+                },
+              },
+              {
+                name: 'removeAttrs',
+                params: {
+                  attrs: 'svg:fill:none',
+                },
+              },
+            ],
+          }),
+        ],
+        outputters: [
+          require('@figma-export/output-components-as-svg')({
+            output: './icons',
+            getDirname: () => '',
+            getBasename: ({ basename, dirname }) => {
+              // Special handing for the directional arrows which have an odd export naming convention
+              if (basename.includes('Direction=')) {
+                basename = `carat-${basename.split('=')[1].toLowerCase()}`
+              }
+
+              // Update distro icon names to match what's in figma
+              if (dirname === 'distro') {
+                return `distro-${basename}.svg`
+              }
+
+              // Add the icon's size category as a postfix, if present
+              if (!isNaN(parseInt(dirname))) {
+                return `${basename}-${dirname}.svg`
+              }
+
+              return `${basename}.svg`
+            },
+          }),
+        ],
+      },
+    ],
+  ],
+}

.github/workflows/update-icons.yaml

@@ -0,0 +1,60 @@
+name: Update icons
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * 1-5'
+
+jobs:
+  update-icons:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: write
+    steps:
+      - uses: peterjgrainger/action-create-branch@v2.0.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          branch: 'update-icons'
+
+      - uses: actions/checkout@v2
+        with:
+          ref: 'update-icons'
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Export icons from Figma
+        run: ./tools/export-icons.sh
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
+
+      - name: Commit icon file updates (if any)
+        uses: EndBug/add-and-commit@v9
+        with:
+          add: ./libs/ui/lib/icons
+          message: 'Pull icon updates from figma'
+          default_author: github_actions
+          new_branch: update-icons
+
+      - name: Check if icon files have changed
+        id: icon-files-changed
+        uses: tj-actions/changed-files@v18.1
+        with:
+          files: |
+            libs/ui/lib/icons
+
+      - name: Create PR if it doesn't exist
+        if: steps.icon-files-changed.outputs.any_changed == 'true'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if [[ $(gh pr list --json "url" -q ".[].url" --head update-icons | wc -c) -eq 0 ]]; then
+            gh pr create --base main --head update-icons --title "Sync icon updates from figma" --body "This PR is generated by 'update-icons.yaml' when icon changes are made to tokens.json"
+          fi

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 #### 🐛 Bug Fix
 
-- Shrink 3xl now that font weight is greater [#18](https://github.com/oxidecomputer/design-system/pull/18) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Shrink 3xl now that font weight is greater
+  [#18](https://github.com/oxidecomputer/design-system/pull/18)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### Authors: 2
 
@@ -15,7 +18,9 @@
 
 #### 🐛 Bug Fix
 
-- Elevation token for elements directly on the surface (e.g. buttons) [#17](https://github.com/oxidecomputer/design-system/pull/17) ([@benjaminleonard](https://github.com/benjaminleonard))
+- Elevation token for elements directly on the surface (e.g. buttons)
+  [#17](https://github.com/oxidecomputer/design-system/pull/17)
+  ([@benjaminleonard](https://github.com/benjaminleonard))
 
 #### Authors: 1
 
@@ -27,7 +32,9 @@
 
 #### 🚀 Enhancement
 
-- Reduce opacity of scrim [#16](https://github.com/oxidecomputer/design-system/pull/16) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Reduce opacity of scrim [#16](https://github.com/oxidecomputer/design-system/pull/16)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### Authors: 2
 
@@ -40,7 +47,10 @@
 
 #### 🚀 Enhancement
 
-- Tweak type weight and adding larger border radius token [#15](https://github.com/oxidecomputer/design-system/pull/15) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Tweak type weight and adding larger border radius token
+  [#15](https://github.com/oxidecomputer/design-system/pull/15)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### Authors: 2
 
@@ -53,7 +63,9 @@
 
 #### 🚀 Enhancement
 
-- Introduce `boxShadow` tokens [#14](https://github.com/oxidecomputer/design-system/pull/14) ([@zephraph](https://github.com/zephraph) [@benjaminleonard](https://github.com/benjaminleonard))
+- Introduce `boxShadow` tokens [#14](https://github.com/oxidecomputer/design-system/pull/14)
+  ([@zephraph](https://github.com/zephraph)
+  [@benjaminleonard](https://github.com/benjaminleonard))
 
 #### Authors: 2
 
@@ -66,7 +78,9 @@
 
 #### 🐛 Bug Fix
 
-- Rename `elevationTokens` to `elevationUtilities` [#13](https://github.com/oxidecomputer/design-system/pull/13) ([@zephraph](https://github.com/zephraph))
+- Rename `elevationTokens` to `elevationUtilities`
+  [#13](https://github.com/oxidecomputer/design-system/pull/13)
+  ([@zephraph](https://github.com/zephraph))
 
 #### Authors: 1
 
@@ -78,7 +92,8 @@
 
 #### 🐛 Bug Fix
 
-- Fix elevation tokens name [#12](https://github.com/oxidecomputer/design-system/pull/12) ([@zephraph](https://github.com/zephraph))
+- Fix elevation tokens name [#12](https://github.com/oxidecomputer/design-system/pull/12)
+  ([@zephraph](https://github.com/zephraph))
 
 #### Authors: 1
 
@@ -90,7 +105,8 @@
 
 #### 🚀 Enhancement
 
-- Add elevation utility tokens [#11](https://github.com/oxidecomputer/design-system/pull/11) ([@zephraph](https://github.com/zephraph))
+- Add elevation utility tokens [#11](https://github.com/oxidecomputer/design-system/pull/11)
+  ([@zephraph](https://github.com/zephraph))
 
 #### Authors: 1
 
@@ -102,11 +118,17 @@
 
 #### 🚀 Enhancement
 
-- Autogenerate themes from new tokens [#9](https://github.com/oxidecomputer/design-system/pull/9) ([@paryhin](https://github.com/paryhin) [@zephraph](https://github.com/zephraph) [@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Autogenerate themes from new tokens
+  [#9](https://github.com/oxidecomputer/design-system/pull/9)
+  ([@paryhin](https://github.com/paryhin) [@zephraph](https://github.com/zephraph)
+  [@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### 🐛 Bug Fix
 
-- Reformat elevation tokens [#10](https://github.com/oxidecomputer/design-system/pull/10) ([@zephraph](https://github.com/zephraph) [@benjaminleonard](https://github.com/benjaminleonard))
+- Reformat elevation tokens [#10](https://github.com/oxidecomputer/design-system/pull/10)
+  ([@zephraph](https://github.com/zephraph)
+  [@benjaminleonard](https://github.com/benjaminleonard))
 
 #### Authors: 4
 
@@ -121,15 +143,23 @@
 
 #### 🚀 Enhancement
 
-- Autogenerate themes from new tokens [#7](https://github.com/oxidecomputer/design-system/pull/7) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Autogenerate themes from new tokens
+  [#7](https://github.com/oxidecomputer/design-system/pull/7)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### 🐛 Bug Fix
 
-- Autogenerate themes from new tokens [#5](https://github.com/oxidecomputer/design-system/pull/5) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]))
+- Autogenerate themes from new tokens
+  [#5](https://github.com/oxidecomputer/design-system/pull/5)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot]))
 
 #### 🏠 Internal
 
-- Update tokens; Fix release process [#8](https://github.com/oxidecomputer/design-system/pull/8) ([@zephraph](https://github.com/zephraph))
+- Update tokens; Fix release process
+  [#8](https://github.com/oxidecomputer/design-system/pull/8)
+  ([@zephraph](https://github.com/zephraph))
 
 #### Authors: 3
 
@@ -143,26 +173,36 @@
 
 #### 🐛 Bug Fix
 
-- Ensure output files are well formatted [#3](https://github.com/oxidecomputer/design-system/pull/3) ([@zephraph](https://github.com/zephraph))
+- Ensure output files are well formatted
+  [#3](https://github.com/oxidecomputer/design-system/pull/3)
+  ([@zephraph](https://github.com/zephraph))
 
 #### ⚠️ Pushed to `master`
 
 - Fix path ([@benjaminleonard](https://github.com/benjaminleonard))
 - Add github workflows ([@benjaminleonard](https://github.com/benjaminleonard))
 - Apparently not needed ([@benjaminleonard](https://github.com/benjaminleonard))
 - 0.0.2 ([@benjaminleonard](https://github.com/benjaminleonard))
-- Update border radius, line heights, tweak rounding ([@benjaminleonard](https://github.com/benjaminleonard))
+- Update border radius, line heights, tweak rounding
+  ([@benjaminleonard](https://github.com/benjaminleonard))
 - Ignore `-regular` ([@benjaminleonard](https://github.com/benjaminleonard))
 - Clearer type names ([@benjaminleonard](https://github.com/benjaminleonard))
 - Update type weights ([@benjaminleonard](https://github.com/benjaminleonard))
-- Only include necessary files in npm package ([@benjaminleonard](https://github.com/benjaminleonard))
+- Only include necessary files in npm package
+  ([@benjaminleonard](https://github.com/benjaminleonard))
 - Use `src` and `dist` ([@benjaminleonard](https://github.com/benjaminleonard))
-- Initial token transform and repo setup ([@benjaminleonard](https://github.com/benjaminleonard))
+- Initial token transform and repo setup
+  ([@benjaminleonard](https://github.com/benjaminleonard))
 
 #### 🏠 Internal
 
-- Autogenerate themes from new tokens [#2](https://github.com/oxidecomputer/design-system/pull/2) ([@benjaminleonard](https://github.com/benjaminleonard) [@github-actions[bot]](https://github.com/github-actions[bot]) [@zephraph](https://github.com/zephraph))
-- Setup automated releases [#1](https://github.com/oxidecomputer/design-system/pull/1) ([@zephraph](https://github.com/zephraph))
+- Autogenerate themes from new tokens
+  [#2](https://github.com/oxidecomputer/design-system/pull/2)
+  ([@benjaminleonard](https://github.com/benjaminleonard)
+  [@github-actions[bot]](https://github.com/github-actions[bot])
+  [@zephraph](https://github.com/zephraph))
+- Setup automated releases [#1](https://github.com/oxidecomputer/design-system/pull/1)
+  ([@zephraph](https://github.com/zephraph))
 
 #### Authors: 3