Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Adding pre.json * Delete pre.json * Marketing: Remove unused pullquote selector (#1767) * Remove unused pullquote style * Create good-fireants-collect.md * next_major protection * On push * Exit 1 * Update instructions * Underline nav focus state (#1821) * add pseudo selectors * adjustments * add stories, cleanup * update mixin * fix mixin * lint * add back overflow styles * adjust focus for better overflow state, scrollsnap * post test adjustments, move hacks to primer css * Stylelint auto-fixes * hover state desktop only * document data-content hack * Create nice-days-jog.md * Use counter-border for LHC (#1792) * Use counter-border for LHC * Create orange-ties-sin.md * Remove fallback * Update nice-days-jog.md Co-authored-by: langermank <langermank@github.com> Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com> * Global focus styles (#1744) * setup base focus styles * add feature stories * add stories for focusable things, delete outline:0 * switch back to box-shadow * support class * stylelint * fix theme viewer * switch back to outline, address feedback * lint * temp stashing stories here * Create giant-bees-talk.md * I think we got it! * address input directly * checkbox/radio outline offset * lint * change actionlist to just use focus * merge * Update giant-bees-talk.md * address marketing styles * tabnav focus fix * reach all buttons * attempt windows hc selector * Stylelint auto-fixes * fixes * add focus style testing page * Stylelint auto-fixes * add href for testing * remove position relative to fix chrome bug * fix details scenario * add offset to WHC * maintain offset specificity in whc * inset tabnav focus * switch offset to inset * fix actionlist focus * lint * better scoping, handle forms for safari * moving specific styles from dotcom * address autocomplete * cleanup * cleanup * selected focus states * adjust marketing focus * use offset instead for marketing * Stylelint auto-fixes * fix merge Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Actions Auto Build <actions@github.com> * Upgrading to stylelint-config-12.4.0 (#2041) * Upgrading to stylelint-config-12.4.0 * Create tame-clouds-shop.md * Global focus style CSS from feature flag (#2046) * extra CSS found from cleaning up feat flag * lint * Create young-trainers-yell.md * fix mixin Co-authored-by: Jon Rohan <yes@jonrohan.codes> * UnderlineNav bug fix (#2047) * fix selector (bad merge?) * Create ninety-bobcats-do.md * lint * Comment box upload focus border-radius (#2049) * missing border-radius * Create beige-horses-fetch.md * lint * you would think I would know these by now * Fix headings with an anchor in a summary (#2048) * Fix headings with an anchor in a summary * Create hip-readers-press.md * Lint * Version Packages Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Tobias Ahlin <hello@tobiasahlin.com> Co-authored-by: langermank <langermank@github.com> Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
7 people
committed
Apr 29, 2022
1 parent
90e8bd5
commit cc81c59
Showing
46 changed files
with
1,142 additions
and
275 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| name: Next Major Pull Request | ||
| on: | ||
| push: | ||
| branches: | ||
| - 'changeset-release/next_major' | ||
|
|
||
| jobs: | ||
| next_major_pr: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Don't Merge | ||
| run: | | ||
| echo "Don't merge the next_major, changeset pr into next_major. Instead when you're ready to release a new major version, change the base of this pr to main, and merge." | ||
| exit 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
docs/src/stories/components/Navigation/UnderlineNav.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
| import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories' | ||
|
|
||
| export default { | ||
| title: 'Components/Navigation/UnderlineNav', | ||
| excludeStories: ['UnderlineNavTemplate'], | ||
| layout: 'padded', | ||
| argTypes: { | ||
| variant: { | ||
| options: [0, 1, 2], // iterator | ||
| mapping: ['', 'UnderlineNav--right', 'UnderlineNav--full'], // values | ||
| control: { | ||
| type: 'inline-radio', | ||
| labels: ['default', 'align-right', 'fullwidth'] | ||
| }, | ||
| description: 'nav positioning options', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| children: { | ||
| description: 'creates a slot for children', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| actionStart: { | ||
| description: 'action to left of nav', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| actionEnd: { | ||
| description: 'action to right of nav', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export const UnderlineNavTemplate = ({variant, children, actionStart, actionEnd}) => ( | ||
| <> | ||
| <nav className={clsx('UnderlineNav', variant && `${variant}`)}> | ||
| {actionStart} | ||
| {variant === 'UnderlineNav--full' ? ( | ||
| <div class="container-lg UnderlineNav-container"> | ||
| <ul class="UnderlineNav-body" role="tablist"> | ||
| {children} | ||
| </ul> | ||
| </div> | ||
| ) : ( | ||
| <ul class="UnderlineNav-body" role="tablist"> | ||
| {children} | ||
| </ul> | ||
| )} | ||
| {actionEnd} | ||
| </nav> | ||
| </> | ||
| ) | ||
|
|
||
| export const Playground = UnderlineNavTemplate.bind({}) | ||
| Playground.args = { | ||
| variant: 0, | ||
| children: ( | ||
| <> | ||
| <UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent /> | ||
| <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent /> | ||
| <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent /> | ||
| </> | ||
| ) | ||
| } |
56 changes: 56 additions & 0 deletions
56
docs/src/stories/components/Navigation/UnderlineNavAction.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
| import {ButtonTemplate} from '../Button/Button.stories' | ||
| import {LinkTemplate} from '../Link/Link.stories' | ||
|
|
||
| export default { | ||
| title: 'Components/Navigation/UnderlineNav/Action', | ||
| excludeStories: ['UnderlineNavActionTemplate'], | ||
| layout: 'padded', | ||
| argTypes: { | ||
| semanticItemType: { | ||
| options: ['button', 'link'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'item can be a button or a link', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| label: { | ||
| name: 'label', | ||
| type: 'string', | ||
| description: 'Item label text', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| focusElement: { | ||
| control: {type: 'boolean'}, | ||
| description: 'set manual focus on item', | ||
| table: { | ||
| category: 'Interactive' | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export const UnderlineNavActionTemplate = ({semanticItemType, label, focusElement}) => { | ||
| return ( | ||
| <div class="UnderlineNav-actions"> | ||
| {semanticItemType === 'button' ? ( | ||
| <ButtonTemplate label={label} focusAllElements={focusElement} /> | ||
| ) : ( | ||
| <LinkTemplate label={label} focusAllElements={focusElement} /> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const Playground = UnderlineNavActionTemplate.bind({}) | ||
| Playground.args = { | ||
| semanticItemType: 'button', | ||
| label: 'Action', | ||
| focusElement: false | ||
| } |
140 changes: 140 additions & 0 deletions
140
docs/src/stories/components/Navigation/UnderlineNavItem.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
| import useToggle from '../../helpers/useToggle.jsx' | ||
|
|
||
| export default { | ||
| title: 'Components/Navigation/UnderlineNav/Item', | ||
| excludeStories: ['UnderlineNavItemTemplate'], | ||
| layout: 'padded', | ||
| argTypes: { | ||
| selected: { | ||
| control: {type: 'boolean'}, | ||
| description: 'active nav item', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| usesDataContent: { | ||
| control: {type: 'boolean'}, | ||
| description: 'creates a hidden label to allow for bold text without layout shift', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| semanticItemType: { | ||
| options: ['button', 'link'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'item can be a button or a link', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| label: { | ||
| name: 'label', | ||
| type: 'string', | ||
| description: 'Item label text', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| focusElement: { | ||
| control: {type: 'boolean'}, | ||
| description: 'set manual focus on tab item', | ||
| table: { | ||
| category: 'Interactive' | ||
| } | ||
| }, | ||
| icon: { | ||
| control: {type: 'boolean'}, | ||
| description: 'show icon', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| counter: { | ||
| control: {type: 'boolean'}, | ||
| description: 'show counter', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export const UnderlineNavItemTemplate = ({ | ||
| semanticItemType, | ||
| label, | ||
| selected, | ||
| focusElement, | ||
| icon, | ||
| counter, | ||
| usesDataContent | ||
| }) => { | ||
| const [isSelected, itemisSelected] = useToggle() | ||
| return ( | ||
| <li className="d-inline-flex"> | ||
| {semanticItemType === 'button' ? ( | ||
| <button | ||
| className={clsx('UnderlineNav-item', focusElement && 'focus')} | ||
| role="tab" | ||
| aria-selected={selected || isSelected ? 'true' : undefined} | ||
| onClick={itemisSelected} | ||
| > | ||
| {icon && ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 16 16" | ||
| width="16" | ||
| height="16" | ||
| className="UnderlineNav-octicon" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z" | ||
| ></path> | ||
| </svg> | ||
| )} | ||
| <span data-content={usesDataContent ? label : undefined}>{label}</span> | ||
| {counter && <span class="Counter">10</span>} | ||
| </button> | ||
| ) : ( | ||
| <a | ||
| className={clsx('UnderlineNav-item', focusElement && 'focus')} | ||
| aria-current={selected || isSelected ? 'true' : undefined} | ||
| onClick={itemisSelected} | ||
| // aria-current={selected ? 'page' : undefined} | ||
| > | ||
| {icon && ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 16 16" | ||
| width="16" | ||
| height="16" | ||
| className="UnderlineNav-octicon" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z" | ||
| ></path> | ||
| </svg> | ||
| )} | ||
| <span data-content={usesDataContent ? label : undefined}>{label}</span> | ||
| {counter && <span class="Counter">10</span>} | ||
| </a> | ||
| )} | ||
| </li> | ||
| ) | ||
| } | ||
|
|
||
| export const Playground = UnderlineNavItemTemplate.bind({}) | ||
| Playground.args = { | ||
| semanticItemType: 'button', | ||
| label: 'Item', | ||
| selected: false, | ||
| focusElement: false, | ||
| icon: false, | ||
| counter: false, | ||
| usesDataContent: true | ||
| } |
Oops, something went wrong.