Merge branch 'next_major' into tobiasahlin/remove-pullquote

primer · Dec 6, 2021 · 894d574 · 894d574
2 parents 96b177d + 4d75a10
commit 894d574
Show file tree

Hide file tree

Showing 30 changed files with 1,901 additions and 1,304 deletions.
diff --git a/.changeset/fresh-schools-pull.md b/.changeset/fresh-schools-pull.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+ActionList followup
diff --git a/.changeset/long-panthers-provide.md b/.changeset/long-panthers-provide.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix local dev (revert webpack 5.5.0 → 6.0.0)
diff --git a/.changeset/nasty-bananas-drive.md b/.changeset/nasty-bananas-drive.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Reformat `rgba()` colors for `.btn-mktg`
diff --git a/.changeset/orange-camels-heal.md b/.changeset/orange-camels-heal.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Marketing: Add disabled states for buttons (and tweak hover)
diff --git a/.changeset/short-pugs-press.md b/.changeset/short-pugs-press.md
@@ -0,0 +1,7 @@
+---
+"@primer/css": minor
+---
+
+Marketing: Add link components
+Marketing: Add animated arrow utility
+Marketing: Document button components with arrows
diff --git a/.changeset/shy-vans-draw.md b/.changeset/shy-vans-draw.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add hover and active states to btn-invisible
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,14 +21,23 @@ jobs:
       - name: Push up any fixes
         if: ${{ github.event_name == 'pull_request' }}
         run: |
-          git remote update
-          git fetch
-          git checkout --track origin/$GITHUB_HEAD_REF
-          git config --local user.email "[email protected]"
-          git config --local user.name "Actions Auto Build"
-          git add src
-          git commit -m "Stylelint auto-fixes" || true
-          git push
+          set +e
+          git status | grep modified
+          if [ $? -eq 0 ]
+          then
+              set -e
+              git remote update
+              git fetch
+              git checkout --track origin/$GITHUB_HEAD_REF
+              git config --local user.email "[email protected]"
+              git config --local user.name "Actions Auto Build"
+              git add src
+              git commit -m "Stylelint auto-fixes"
+              git push
+          else
+              set -e
+              echo "No changes since last run"
+          fi
 
   eslint:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml
@@ -9,7 +9,6 @@ on:
     # It's not necessary because we don't ship them and it creates noise
     paths-ignore:
       - '.changeset/**'
-      - '.github/**'
       - 'docs/**'
       - 'lib/**'
       - '__tests__/**'
@@ -20,53 +19,9 @@ on:
 jobs:
   release-canary:
     name: Canary
-    if: ${{ github.repository == 'primer/css' }}
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Create .npmrc
-        run: |
-          cat << EOF > "$HOME/.npmrc"
-            //registry.npmjs.org/:_authToken=$NPM_TOKEN
-          EOF
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
-
-      - name: Publish canary version
-        run: |
-          echo "$( jq '.version = "0.0.0"' package.json )" > package.json
-          echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
-          rm -f .changeset/pre.json
-          yarn changeset version --snapshot
-          yarn changeset publish --tag canary
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Output canary version number
-        uses: actions/github-script@v5
-        with:
-          script: |
-            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
-            github.rest.repos.createCommitStatus({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              sha: context.sha,
-              state: 'success',
-              context: `Published ${package.name}`,
-              description: package.version,
-              target_url: `https://unpkg.com/${package.name}@${package.version}/`
-            })
+    uses: primer/.github/.github/workflows/release_canary.yml@main
+    with:
+      install: yarn
+    secrets:
+      github_token: ${{ secrets.GITHUB_TOKEN }}
+      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
diff --git a/DEVELOP.md b/DEVELOP.md
@@ -46,7 +46,7 @@ All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and l
 Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic. 
 
 ```sh
-npm storybook
+npm run storybook
 ```
 
 ### The Storybook directory

diff --git a/docs/.storybook/preview.js b/docs/.storybook/preview.js
@@ -97,123 +97,46 @@ export const parameters = {
   viewport: {viewports: customViewports}
 }
 
+const themes = [
+  'light',
+  'light_colorblind',
+  'light_high_contrast',
+  'dark',
+  'dark_dimmed',
+  'dark_high_contrast',
+  'dark_colorblind'
+]
+
 export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Switch themes',
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: [
-        'light',
-        'light_colorblind',
-        'light_high_contrast',
-        'dark',
-        'dark_dimmed',
-        'dark_high_contrast',
-        'dark_colorblind',
-        'all'
-      ],
+      items: [...themes, 'all'],
       showName: true
     }
   }
 }
 
 export const decorators = [
   (Story, context) => {
-    if (context.globals.theme === 'all') {
-      return (
-        <div class="theme-wrap">
-          <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light') {
-      return (
-        <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light_colorblind') {
-      return (
-        <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light_high_contrast') {
-      return (
-        <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_dimmed') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_high_contrast') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_colorblind') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
     return (
-      <div className="story-wrap" id="story">
-        <Story {...context} />
+      <div class="theme-wrap">
+        { themes.map((theme) => {
+            if (context.globals.theme === theme || context.globals.theme === 'all') {
+              return <div
+                id="story"
+                className="story-wrap"
+                data-color-mode={theme.startsWith('dark') ? 'dark' : 'light'}
+                data-light-theme={theme.startsWith('light') ? theme : undefined}
+                data-dark-theme={theme.startsWith('dark') ? theme : undefined}
+              >
+                <Story {...context} />
+              </div>
+            }
+          })}
       </div>
     )
   }

diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md
@@ -43,3 +43,41 @@ Marketing buttons can be set to three different sizes:
 <button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
 <button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
 ```
+
+## Animated arrow symbol
+
+Marketing buttons can include an animated arrow symbol, by adding a class `arrow-target-mktg` and including the SVG symbol:
+
+```html live
+<button class="btn-mktg arrow-target-mktg mr-3" type="button">
+    Get started
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type="button">
+    Learn more
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-subtle-mktg mr-3" type="button">
+    Contact us
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-signup-mktg" type="button">
+    Sign up
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+```