Skip to content

Commit 759a925

Browse files
langermanklangermank
authored
Merge branch 'main' into underline-nav-focus-state
2 parents 8ca5bff + b1c43f1 commit 759a925

26 files changed

+609
-219
lines changed

‎.changeset/fresh-schools-pull.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
ActionList followup

‎.changeset/orange-camels-heal.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Marketing: Add disabled states for buttons (and tweak hover)

‎.changeset/orange-ties-sin.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Use `counter-border` for LHC

‎.changeset/short-pugs-press.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@primer/css": minor
3+
---
4+
5+
Marketing: Add link components
6+
Marketing: Add animated arrow utility
7+
Marketing: Document button components with arrows

‎.changeset/shy-vans-draw.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Add hover and active states to btn-invisible

‎.github/workflows/ci.yml

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,23 @@ jobs:
2121
- name: Push up any fixes
2222
if: ${{ github.event_name == 'pull_request' }}
2323
run: |
24-
git remote update
25-
git fetch
26-
git checkout --track origin/$GITHUB_HEAD_REF
27-
git config --local user.email "[email protected]"
28-
git config --local user.name "Actions Auto Build"
29-
git add src
30-
git commit -m "Stylelint auto-fixes" || true
31-
git push
24+
set +e
25+
git status | grep modified
26+
if [ $? -eq 0 ]
27+
then
28+
set -e
29+
git remote update
30+
git fetch
31+
git checkout --track origin/$GITHUB_HEAD_REF
32+
git config --local user.email "[email protected]"
33+
git config --local user.name "Actions Auto Build"
34+
git add src
35+
git commit -m "Stylelint auto-fixes"
36+
git push
37+
else
38+
set -e
39+
echo "No changes since last run"
40+
fi
3241
3342
eslint:
3443
runs-on: ubuntu-latest

‎.github/workflows/release_canary.yml

Lines changed: 6 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ on:
99
# It's not necessary because we don't ship them and it creates noise
1010
paths-ignore:
1111
- '.changeset/**'
12-
- '.github/**'
1312
- 'docs/**'
1413
- 'lib/**'
1514
- '__tests__/**'
@@ -20,53 +19,9 @@ on:
2019
jobs:
2120
release-canary:
2221
name: Canary
23-
if: ${{ github.repository == 'primer/css' }}
24-
25-
runs-on: ubuntu-latest
26-
steps:
27-
- name: Checkout repository
28-
uses: actions/checkout@v2
29-
with:
30-
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
31-
fetch-depth: 0
32-
33-
- name: Set up Node.js
34-
uses: actions/setup-node@v2
35-
with:
36-
node-version: 14.x
37-
38-
- name: Install dependencies
39-
run: yarn
40-
41-
- name: Create .npmrc
42-
run: |
43-
cat << EOF > "$HOME/.npmrc"
44-
//registry.npmjs.org/:_authToken=$NPM_TOKEN
45-
EOF
46-
env:
47-
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
48-
49-
- name: Publish canary version
50-
run: |
51-
echo "$( jq '.version = "0.0.0"' package.json )" > package.json
52-
echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
53-
rm -f .changeset/pre.json
54-
yarn changeset version --snapshot
55-
yarn changeset publish --tag canary
56-
env:
57-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
58-
59-
- name: Output canary version number
60-
uses: actions/github-script@v5
61-
with:
62-
script: |
63-
const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
64-
github.rest.repos.createCommitStatus({
65-
owner: context.repo.owner,
66-
repo: context.repo.repo,
67-
sha: context.sha,
68-
state: 'success',
69-
context: `Published ${package.name}`,
70-
description: package.version,
71-
target_url: `https://unpkg.com/${package.name}@${package.version}/`
72-
})
22+
uses: primer/.github/.github/workflows/release_canary.yml@main
23+
with:
24+
install: yarn
25+
secrets:
26+
github_token: ${{ secrets.GITHUB_TOKEN }}
27+
npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

‎docs/content/components/marketing-buttons.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,41 @@ Marketing buttons can be set to three different sizes:
4343
<button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
4444
<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
4545
```
46+
47+
## Animated arrow symbol
48+
49+
Marketing buttons can include an animated arrow symbol, by adding a class `arrow-target-mktg` and including the SVG symbol:
50+
51+
```html live
52+
<button class="btn-mktg arrow-target-mktg mr-3" type="button">
53+
Get started
54+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
55+
<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>
56+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
57+
</svg>
58+
</button>
59+
60+
<button class="btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type="button">
61+
Learn more
62+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
63+
<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>
64+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
65+
</svg>
66+
</button>
67+
68+
<button class="btn-mktg arrow-target-mktg btn-subtle-mktg mr-3" type="button">
69+
Contact us
70+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
71+
<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>
72+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
73+
</svg>
74+
</button>
75+
76+
<button class="btn-mktg arrow-target-mktg btn-signup-mktg" type="button">
77+
Sign up
78+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
79+
<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>
80+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
81+
</svg>
82+
</button>
83+
```

‎docs/content/components/marketing-links.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Marketing links
3+
path: components/marketing-links
4+
status: Beta
5+
source: 'https://github.com/primer/css/tree/main/src/marketing/links'
6+
bundle: marketing-links
7+
---
8+
9+
Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color.
10+
11+
12+
## Link sizes
13+
14+
The marketing link size is defined with utility classes and come in large (`.f3-mktg`) and small (`.f4-mktg`):
15+
16+
```html live
17+
<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg">
18+
Call to action
19+
20+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
21+
<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>
22+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
23+
</svg>
24+
</a>
25+
```
26+
27+
```html live
28+
<a href="#" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
29+
Call to action
30+
31+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
32+
<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>
33+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
34+
</svg>
35+
</a>
36+
```
37+
38+
## Link with emphasis
39+
40+
Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover.
41+
42+
```html live
43+
<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f3-mktg">
44+
Call to action
45+
46+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
47+
<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>
48+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
49+
</svg>
50+
</a>
51+
```
52+
53+
54+
## Link colors
55+
56+
The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow:
57+
58+
```html live
59+
<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg color-fg-default mr-4">
60+
Call to action
61+
62+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
63+
<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>
64+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
65+
</svg>
66+
</a>
67+
68+
<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f4-mktg color-fg-default">
69+
Call to action
70+
71+
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
72+
<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>
73+
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
74+
</svg>
75+
</a>
76+
```

‎docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@primer/primitives": "7.1.1",
2121
"@svgr/webpack": "5.5.0",
2222
"autoprefixer": "10.4.0",
23-
"babel-preset-gatsby": "^2.0.0",
23+
"babel-preset-gatsby": "^2.2.0",
2424
"chroma-js": "^2.1.2",
2525
"clsx": "^1.1.1",
2626
"core-js": "^3.19.2",
@@ -29,7 +29,7 @@
2929
"gatsby-plugin-sass": "3.2.0",
3030
"gatsby-plugin-svgr": "2.1.0",
3131
"path": "0.12.7",
32-
"postcss": "8.3.11",
32+
"postcss": "8.4.4",
3333
"postcss-import": "14.0.2",
3434
"postcss-load-config": "3.1.0",
3535
"postcss-loader": "4.3.0",

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@
9393
url: /components/markdown
9494
- title: Marketing buttons
9595
url: /components/marketing-buttons
96+
- title: Marketing links
97+
url: /components/marketing-links
9698
- title: Navigation
9799
url: /components/navigation
98100
- title: Pagination

‎docs/src/stories/components/ActionList/ActionList.stories.jsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,18 @@ export default {
7272
table: {
7373
category: 'HTML'
7474
}
75+
},
76+
listPadding: {
77+
options: [0, 1], // iterator
78+
mapping: ['', 'ActionList--full'], // values
79+
control: {
80+
type: 'inline-radio',
81+
labels: ['inset', 'full-bleed']
82+
},
83+
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
84+
table: {
85+
category: 'CSS'
86+
}
7587
}
7688
}
7789
}
@@ -83,10 +95,16 @@ export const ListTemplate = ({
8395
ariaLabel,
8496
ariaLabelledBy,
8597
subGroup,
86-
listboxMultiSelect
98+
listboxMultiSelect,
99+
listPadding
87100
}) => (
88101
<ul
89-
className={clsx('ActionList', showDividers && 'ActionList--divided', subGroup && 'ActionList--subGroup')}
102+
className={clsx(
103+
'ActionList',
104+
showDividers && 'ActionList--divided',
105+
subGroup && 'ActionList--subGroup',
106+
listPadding && `${listPadding}`
107+
)}
90108
role={role}
91109
aria-label={ariaLabel && ariaLabel}
92110
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
@@ -102,6 +120,7 @@ Playground.args = {
102120
subGroup: false,
103121
showDividers: false,
104122
listboxMultiSelect: false,
123+
listPadding: '',
105124
ariaLabelledBy: '',
106125
groupId: '',
107126
children: (

0 commit comments

Comments
 (0)