sized heading with normal font weight
17 | .Subhead-heading {
18 | font-size: $h2-size;
19 | font-weight: $font-weight-normal;
20 | flex: 1 1 auto;
21 | order: 0;
22 | }
23 |
24 | // Make the text bold and red for dangerous content
25 | .Subhead-heading--danger {
26 | font-weight: $font-weight-bold;
27 | color: var(--color-danger-fg);
28 | }
29 |
30 | // One-liner of supporting text
31 | .Subhead-description {
32 | font-size: $body-font-size;
33 | color: var(--color-fg-muted);
34 | flex: 1 100%;
35 | order: 2;
36 | }
37 |
38 | // Add 1 or 2 buttons to the right of the heading
39 | .Subhead-actions {
40 | margin: $spacer-1 0 $spacer-1 $spacer-1;
41 | align-self: center;
42 | justify-content: flex-end;
43 | order: 1;
44 |
45 | + .Subhead-description {
46 | margin-top: $spacer-1;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/links/link.scss:
--------------------------------------------------------------------------------
1 | // Links
2 |
3 | .Link {
4 | color: var(--color-accent-fg);
5 |
6 | &:hover {
7 | text-decoration: underline;
8 | cursor: pointer;
9 | }
10 |
11 | &:focus,
12 | &:focus-visible {
13 | outline-offset: 0;
14 | }
15 | }
16 |
17 | .Link--primary {
18 | color: var(--color-fg-default) !important;
19 |
20 | &:hover {
21 | color: var(--color-accent-fg) !important;
22 | }
23 | }
24 |
25 | .Link--secondary {
26 | color: var(--color-fg-muted) !important;
27 |
28 | &:hover {
29 | color: var(--color-accent-fg) !important;
30 | }
31 | }
32 |
33 | .Link--muted {
34 | color: var(--color-fg-muted) !important;
35 |
36 | &:hover {
37 | color: var(--color-accent-fg) !important;
38 | text-decoration: none;
39 | }
40 | }
41 |
42 | // Set the link color only on hover
43 | // Useful when you want only part of a link to turn blue on hover
44 | .Link--onHover {
45 | &:hover {
46 | color: var(--color-accent-fg) !important;
47 | text-decoration: underline;
48 | cursor: pointer;
49 | }
50 | }
51 |
52 | // When using a color utility class inside of a link class,
53 | // color should change with link on hover.
54 | .Link--secondary,
55 | .Link--primary,
56 | .Link--muted {
57 | &:hover [class*='color-fg'] {
58 | color: inherit !important;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/__tests__/utils/docs.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import frontMatter from 'front-matter'
3 | import yaml from 'js-yaml'
4 | import {globby} from 'globby'
5 | import { fileURLToPath } from 'url'
6 | import {join, dirname} from 'path'
7 |
8 | const __dirname = dirname(fileURLToPath(import.meta.url))
9 |
10 | const docsPath = join(__dirname, '../../docs')
11 |
12 | function collectNavLinks(links) {
13 | let foundLinks = []
14 | for (const link of links) {
15 | foundLinks.push({
16 | title: link['title'],
17 | url: link['url']
18 | })
19 | if (link['children']) {
20 | foundLinks = foundLinks.concat(collectNavLinks(link['children']))
21 | }
22 | }
23 | return foundLinks
24 | }
25 |
26 | export function getNavigationLinks() {
27 | const nav = yaml.load(fs.readFileSync(join(docsPath, './src/@primer/gatsby-theme-doctocat/nav.yml'), 'utf8'))
28 | return collectNavLinks(nav)
29 | }
30 |
31 | export async function getContentFrontmatter() {
32 | const fm = {}
33 |
34 | const paths = await globby(join(docsPath, './content/**/*.md*'))
35 | for (const path of paths) {
36 | const contents = fs.readFileSync(path, 'utf8')
37 | const fmContents = frontMatter(contents)
38 | fm[path.replace(join(docsPath, './content'), '').replace(/(\/index)?\.mdx?/, '')] = fmContents['attributes']
39 | }
40 | return fm
41 | }
42 |
--------------------------------------------------------------------------------
/docs/src/stories/components/TreeView/TreeView.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {ActionListTreeViewTemplate} from '../../ui-patterns/ActionList/ActionListTree.stories.jsx'
3 |
4 | export default {
5 | title: 'Components/TreeView/TreeView',
6 | excludeStories: ['TreeViewTemplate'],
7 | layout: 'padded',
8 | argTypes: {
9 | showGroupIcon: {
10 | control: {type: 'boolean'},
11 | description: 'show subgroup leading icon',
12 | table: {
13 | category: 'Interactive'
14 | }
15 | },
16 | showSubItemIcon: {
17 | control: {type: 'boolean'},
18 | description: 'show subgroup item leading icon',
19 | table: {
20 | category: 'Interactive'
21 | }
22 | },
23 | text: {
24 | defaultValue: '',
25 | type: 'string',
26 | name: 'title',
27 | description: 'string',
28 | table: {
29 | category: 'HTML'
30 | }
31 | },
32 | truncateItem: {
33 | defaultValue: false,
34 | control: {type: 'boolean'},
35 | table: {
36 | category: 'CSS'
37 | }
38 | }
39 | }
40 | }
41 |
42 | export const TreeViewTemplate = ActionListTreeViewTemplate.bind({})
43 |
44 | export const Playground = TreeViewTemplate.bind({})
45 | Playground.args = {
46 | showSubItemIcon: true,
47 | showGroupIcon: true,
48 | text: 'item'
49 | }
50 |
--------------------------------------------------------------------------------
/src/actionlist/action-list-item-divider.scss:
--------------------------------------------------------------------------------
1 | // empty divider
2 |
3 | .ActionList-sectionDivider {
4 | // has children
5 | &:not(:empty) {
6 | display: flex;
7 | padding: ($spacer-1 * 1.5) $spacer-2;
8 | font-size: $font-size-small;
9 | font-weight: $font-weight-bold;
10 | color: var(--color-fg-muted);
11 | flex-direction: column;
12 | }
13 |
14 | // no children
15 | &:empty {
16 | display: block;
17 | height: 1px;
18 | padding: 0;
19 | // stylelint-disable-next-line primer/spacing
20 | margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
21 | list-style: none;
22 | background: var(--color-action-list-item-inline-divider);
23 | border: 0;
24 | }
25 |
26 | .ActionList-sectionDivider-title {
27 | font-size: $font-size-small;
28 | font-weight: $font-weight-bold;
29 | color: var(--color-fg-muted);
30 | }
31 | }
32 |
33 | .ActionList-sectionDivider--filled {
34 | margin: $spacer-2 ($spacer-2 * -1);
35 | background: var(--color-canvas-subtle);
36 | border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
37 | border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
38 |
39 | // if no children, treat as divider
40 | &:empty {
41 | height: $spacer-2;
42 | box-sizing: border-box;
43 | }
44 |
45 | &:first-child {
46 | margin-top: 0;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/docs/src/color-image.svg:
--------------------------------------------------------------------------------
1 |
2 | Group
3 | Created using Figma
4 |
5 |
6 |
7 |
9 |
10 |
12 |
13 |
15 |
16 |
18 |
19 |
21 |
22 |
24 |
25 |
26 |
27 |
29 |
30 |
--------------------------------------------------------------------------------
/docs/content/tools/testing.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Testing resources
3 | path: tools/testing
4 | ---
5 |
6 | At GitHub we use a staging environment called review-lab for testing with production data. Deploying a branch to [review-lab](https://github.com/github/github/blob/master/docs/deployment.md#test-in-lab-environments) for testing is one of the best ways to test your work with real production data prior to an actual production deployment.
7 |
8 | To make testing on review-lab for extended periods of time easier, you can use the [Redirector](https://chrome.google.com/webstore/detail/redirector/pajiegeliagebegjdhebejdlknciafen) extension for Chrome to redirect all GitHub.com traffic to your review-lab deploy URL.
9 |
10 | ## How to use it
11 |
12 | 1. Install the [extension](https://chrome.google.com/webstore/detail/redirector/pajiegeliagebegjdhebejdlknciafen)
13 | 2. Open the extension options panel from the icon in Chrome
14 | 3. In the "From" field, enter: `https:\/\/github\.com\/?(.+)?`
15 | 4. In the "To" field, enter: `https://branchname.review-lab.github.com/$1` where `branchname` is the name of your branch.
16 |
17 | ## Tips
18 |
19 | - You'll need to remove your rule or simply disable the extension when you want to stop redirecting to your branch.
20 | - If you're trying to reach GitHub.com or your review-lab URL but are getting a "This page isn't working" message in your browser, that means your review-lab deploy has gone stale and needs to be redeployed.
21 |
--------------------------------------------------------------------------------
/docs/src/stories/components/Navigation/TabNav.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import {TabNavItemTemplate} from './TabNavItem.stories' // import stories for component compositions
4 |
5 | export default {
6 | title: 'Components/Navigation/TabNav',
7 | excludeStories: ['TabNavTemplate'],
8 | layout: 'padded',
9 | argTypes: {
10 | children: {
11 | description: 'slot for tab items',
12 | table: {
13 | category: 'HTML'
14 | }
15 | },
16 | focusElement: {
17 | control: {type: 'boolean'},
18 | description: 'set focus on element',
19 | table: {
20 | category: 'Interactive'
21 | }
22 | }
23 | }
24 | }
25 |
26 | const focusMethod = function getFocus() {
27 | // find the focusable element
28 | var link = document.getElementsByTagName('a')[0]
29 | // set focus on element
30 | link.focus()
31 | }
32 |
33 | export const TabNavTemplate = ({children, focusElement}) => (
34 |
35 |
36 | {children}
37 |
38 | {focusElement && focusMethod()}
39 |
40 | )
41 |
42 | export const Playground = TabNavTemplate.bind({})
43 | Playground.args = {
44 | focusElement: false,
45 | children: (
46 | <>
47 | styles
42 | <>
43 | {icon && icon}
44 | {text}
45 |
46 |
47 | )
48 |
49 | // create a "playground" demo page that may set some defaults and allow story to access component controls
50 | export const Playground = LabelCounterTemplate.bind({})
51 | Playground.args = {
52 | text: '23',
53 | variant: 'Counter--primary'
54 | }
55 |
--------------------------------------------------------------------------------
/src/truncate/truncate.scss:
--------------------------------------------------------------------------------
1 | // Truncate
2 | //
3 | // css-truncate will shorten text with an ellipsis.
4 |
5 | .css-truncate {
6 |
7 | // css-truncate-auto will shorten text with an ellipsis when overflowing
8 | &.css-truncate-overflow,
9 | .css-truncate-overflow,
10 | &.css-truncate-target,
11 | .css-truncate-target {
12 | overflow: hidden;
13 | text-overflow: ellipsis;
14 | white-space: nowrap;
15 | }
16 |
17 | // css-truncate-target will shorten text with an ellipsis and a max width
18 | &.css-truncate-target,
19 | .css-truncate-target {
20 | display: inline-block;
21 | max-width: 125px;
22 | vertical-align: top;
23 | }
24 |
25 | &.expandable.zeroclipboard-is-hover .css-truncate-target,
26 | &.expandable.zeroclipboard-is-hover.css-truncate-target,
27 | &.expandable:hover .css-truncate-target,
28 | &.expandable:hover.css-truncate-target {
29 | max-width: 10000px !important;
30 | }
31 | }
32 |
33 | .Truncate {
34 | display: inline-flex;
35 | min-width: 0;
36 | max-width: 100%;
37 |
38 | > .Truncate-text {
39 | min-width: 1ch;
40 | max-width: fit-content;
41 | overflow: hidden;
42 | text-overflow: ellipsis;
43 | white-space: nowrap;
44 |
45 | + .Truncate-text {
46 | margin-left: $spacer-1;
47 | }
48 |
49 | &.Truncate-text--primary {
50 | flex-basis: 200%;
51 | }
52 |
53 | &.Truncate-text--expandable:hover,
54 | &.Truncate-text--expandable:focus,
55 | &.Truncate-text--expandable:active {
56 | max-width: 100% !important;
57 | flex-shrink: 0;
58 | cursor: pointer;
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js:
--------------------------------------------------------------------------------
1 | import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
2 | import {Flex} from '@primer/components'
3 | import {Frame} from '@primer/gatsby-theme-doctocat'
4 | import {MoonIcon, SunIcon} from '@primer/octicons-react'
5 | import React from 'react'
6 |
7 | function LivePreviewWrapper({children}) {
8 | const [colorMode, setColorModeState] = React.useState('light')
9 |
10 | const setColorMode = mode => {
11 | window.dispatchEvent(new CustomEvent('color-mode-change', {detail: {mode}}))
12 | }
13 |
14 | React.useEffect(() => {
15 | const callback = e => setColorModeState(e.detail.mode)
16 | window.addEventListener('color-mode-change', callback)
17 |
18 | return () => {
19 | window.removeEventListener('color-mode-change', callback)
20 | }
21 | }, [setColorModeState])
22 |
23 | return (
24 |
27 |
28 | setColorMode(colorMode === 'light' ? 'dark' : 'light')}
32 | >
33 | {colorMode === 'light' ?
35 |
36 |
{children}
37 |
42 | {semanticItemType === 'button' ? (
43 |
48 | )
49 | }
50 |
51 | export const Playground = UnderlineNavActionTemplate.bind({})
52 | Playground.args = {
53 | semanticItemType: 'button',
54 | label: 'Action',
55 | focusElement: false
56 | }
57 |
--------------------------------------------------------------------------------
/src/forms/radio-group.scss:
--------------------------------------------------------------------------------
1 | // Tab like radio group
2 |
3 | .radio-group {
4 | @include clearfix;
5 | }
6 |
7 | .radio-label {
8 | float: left;
9 | // stylelint-disable-next-line primer/spacing
10 | padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
11 | // stylelint-disable-next-line primer/spacing
12 | margin-left: -1px;
13 | font-size: $body-font-size;
14 | // stylelint-disable-next-line primer/typography
15 | line-height: 20px; // Specifically not inherit our `` default
16 | color: var(--color-fg-default);
17 | cursor: pointer;
18 | border: $border-width $border-style var(--color-border-default);
19 |
20 | :checked + & {
21 | position: relative;
22 | z-index: 1;
23 | border-color: var(--color-accent-emphasis);
24 | }
25 |
26 | &:first-of-type {
27 | margin-left: 0;
28 | border-top-left-radius: $border-radius;
29 | border-bottom-left-radius: $border-radius;
30 | }
31 |
32 | &:last-of-type {
33 | border-top-right-radius: $border-radius;
34 | border-bottom-right-radius: $border-radius;
35 | }
36 |
37 | .octicon {
38 | margin-left: $spacer-1;
39 | color: var(--color-fg-subtle);
40 | }
41 | }
42 |
43 | .radio-input {
44 | z-index: 3;
45 | float: left;
46 | // stylelint-disable-next-line primer/spacing
47 | margin: 10px (-$spacer-5) 0 $spacer-3;
48 |
49 | &:disabled {
50 | position: relative; // enables z-index
51 |
52 | + .radio-label {
53 | color: var(--color-primer-fg-disabled);
54 | cursor: default;
55 | background-color: var(--color-neutral-subtle);
56 |
57 | .octicon {
58 | color: inherit;
59 | }
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/forms/input-group.scss:
--------------------------------------------------------------------------------
1 | .input-group {
2 | display: table;
3 |
4 | .form-control {
5 | position: relative;
6 | width: 100%;
7 |
8 | &:focus {
9 | z-index: 2;
10 | }
11 |
12 | + .btn {
13 | margin-left: 0;
14 | }
15 | }
16 |
17 | // For when you want the input group to behave like inline-block.
18 | &.inline {
19 | display: inline-table;
20 | }
21 |
22 | // within input group, if button exists change focus styles to match input (no offset)
23 | &:focus-within {
24 | // stylelint-disable-next-line selector-max-type
25 | button {
26 | outline-offset: 0;
27 | }
28 | }
29 |
30 | // Autocomplete with embedded icon
31 | .form-control.autocomplete-embedded-icon-wrap {
32 | display: inline-flex;
33 | padding: $spacer-1 * 1.25 $spacer-2;
34 | }
35 | }
36 |
37 | .input-group .form-control,
38 | .input-group-button {
39 | display: table-cell;
40 | }
41 |
42 | .input-group-button {
43 | width: 1%;
44 | vertical-align: middle; // Match the inputs
45 | }
46 |
47 | .input-group-button--autocomplete-embedded-icon {
48 | vertical-align: bottom;
49 | }
50 |
51 | .input-group .form-control:first-child,
52 | .input-group-button:first-child .btn {
53 | border-top-right-radius: 0;
54 | border-bottom-right-radius: 0;
55 | }
56 |
57 | .input-group-button:first-child .btn {
58 | // stylelint-disable-next-line primer/spacing
59 | margin-right: -1px;
60 | }
61 |
62 | .input-group .form-control:last-child,
63 | .input-group-button:last-child .btn {
64 | border-top-left-radius: 0;
65 | border-bottom-left-radius: 0;
66 | }
67 |
68 | .input-group-button:last-child .btn {
69 | // stylelint-disable-next-line primer/spacing
70 | margin-left: -1px;
71 | }
72 |
--------------------------------------------------------------------------------
/src/base/typography-base.scss:
--------------------------------------------------------------------------------
1 | // Headings
2 | // --------------------------------------------------
3 | // stylelint-disable selector-max-type
4 | h1,
5 | h2,
6 | h3,
7 | h4,
8 | h5,
9 | h6 {
10 | margin-top: 0;
11 | margin-bottom: 0;
12 | }
13 |
14 | h1 { @include h1; }
15 | h2 { @include h2; }
16 | h3 { @include h3; }
17 | h4 { @include h4; }
18 | h5 { @include h5; }
19 | h6 { @include h6; }
20 |
21 | // Body text
22 | // --------------------------------------------------
23 |
24 | p {
25 | margin-top: 0;
26 | // stylelint-disable-next-line primer/spacing
27 | margin-bottom: 10px;
28 | }
29 |
30 | small {
31 | // stylelint-disable-next-line primer/typography
32 | font-size: 90%;
33 | }
34 |
35 | blockquote {
36 | margin: 0;
37 | }
38 |
39 | // Lists
40 | // --------------------------------------------------
41 |
42 | ul,
43 | ol {
44 | padding-left: 0;
45 | margin-top: 0;
46 | margin-bottom: 0;
47 | }
48 |
49 | ol ol,
50 | ul ol {
51 | list-style-type: lower-roman;
52 | }
53 |
54 | ul ul ol,
55 | ul ol ol,
56 | ol ul ol,
57 | ol ol ol {
58 | list-style-type: lower-alpha;
59 | }
60 |
61 | dd {
62 | margin-left: 0;
63 | }
64 |
65 | // Monospaced
66 | // --------------------------------------------------
67 |
68 | tt,
69 | code,
70 | samp {
71 | font-family: $mono-font;
72 | font-size: $font-size-small;
73 | }
74 |
75 | pre {
76 | margin-top: 0;
77 | margin-bottom: 0;
78 | font-family: $mono-font;
79 | font-size: $font-size-small;
80 | }
81 |
82 | // Octicons
83 | // --------------------------------------------------
84 |
85 | // Move this over here as a temporary override to the octicons source repo
86 | // instead of updating that upstream.
87 | .octicon {
88 | vertical-align: text-bottom;
89 | }
90 |
--------------------------------------------------------------------------------
/docs/src/stories/components/Label/LabelDiffstat.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default {
4 | title: 'Components/Label/Diffstat',
5 | excludeStories: ['LabelDiffstatTemplate'],
6 | argTypes: {
7 | diffValueIntent: {
8 | options: [0, 1, 2], // iterator
9 | mapping: ['', 'color-fg-success', 'color-fg-danger'], // values
10 | control: {
11 | type: 'select',
12 | labels: ['default', 'success', 'danger'] // public labels
13 | },
14 | table: {
15 | category: 'CSS'
16 | }
17 | },
18 | diffValue: {
19 | name: 'diffValue',
20 | type: 'string',
21 | description: '7',
22 | table: {
23 | category: 'HTML'
24 | }
25 | }
26 | }
27 | }
28 |
29 | // build every component case here in the template (private api)
30 | export const LabelDiffstatTemplate = ({diffValue, diffValueIntent}) => (
31 |
32 | {diffValueIntent === 'color-fg-success' && +{diffValue} }
33 | {diffValueIntent === 'color-fg-danger' && -{diffValue} }
34 | {diffValueIntent === '' && diffValue}
40 | )
41 |
42 | // create a "playground" demo page that may set some defaults and allow story to access component controls
43 | export const Playground = LabelDiffstatTemplate.bind({})
44 | Playground.args = {
45 | diffValue: '7',
46 | diffValueIntent: ''
47 | }
48 |
--------------------------------------------------------------------------------
/docs/src/stories/components/NavigationList/NavigationListDivider.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {NavigationListTemplate} from './NavigationList.stories'
3 | import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories.jsx'
4 |
5 | export default {
6 | title: 'Components/NavigationList/NavigationListDivider',
7 | excludeStories: ['NavigationListDividerTemplate'],
8 | argTypes: {
9 | variant: {
10 | options: [0, 1], // iterator
11 | mapping: ['', 'ActionList-sectionDivider--filled'], // values
12 | control: {
13 | type: 'inline-radio',
14 | labels: ['subtle', 'filled']
15 | },
16 | table: {
17 | category: 'CSS'
18 | }
19 | },
20 | title: {
21 | defaultValue: '',
22 | type: 'string',
23 | name: 'title',
24 | description: 'string',
25 | table: {
26 | category: 'HTML'
27 | }
28 | },
29 | description: {
30 | defaultValue: '',
31 | type: 'string',
32 | name: 'description',
33 | description: 'string',
34 | table: {
35 | category: 'HTML'
36 | }
37 | },
38 | id: {
39 | defaultValue: '',
40 | type: 'string',
41 | name: 'id',
42 | description: 'Provide label for NavigationList aria-labelledby',
43 | table: {
44 | category: 'HTML'
45 | }
46 | }
47 | }
48 | }
49 |
50 | export const NavigationListDividerTemplate = DividerTemplate.bind({})
51 |
52 | export const Playground = NavigationListDividerTemplate.bind({})
53 | Playground.args = {
54 | title: 'Section title',
55 | description: 'Section description'
56 | }
57 | Playground.decorators = [
58 | Story => (
59 |
60 |
62 | )
63 | ]
64 |
--------------------------------------------------------------------------------
/docs/src/stories/components/ActionList/ActionListDivider.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
4 | import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories.jsx'
5 |
6 | export default {
7 | title: 'Components/ActionList/ActionListDivider',
8 | excludeStories: ['ActionDividerTemplate'],
9 | argTypes: {
10 | variant: {
11 | options: [0, 1], // iterator
12 | mapping: ['', 'ActionList-sectionDivider--filled'], // values
13 | control: {
14 | type: 'inline-radio',
15 | labels: ['subtle', 'filled']
16 | },
17 | table: {
18 | category: 'CSS'
19 | }
20 | },
21 | title: {
22 | defaultValue: '',
23 | type: 'string',
24 | name: 'title',
25 | description: 'string',
26 | table: {
27 | category: 'HTML'
28 | }
29 | },
30 | description: {
31 | defaultValue: '',
32 | type: 'string',
33 | name: 'description',
34 | description: 'string',
35 | table: {
36 | category: 'HTML'
37 | }
38 | },
39 | id: {
40 | defaultValue: '',
41 | type: 'string',
42 | name: 'id',
43 | description: 'Provide label for NavigationList aria-labelledby',
44 | table: {
45 | category: 'HTML'
46 | }
47 | }
48 | }
49 | }
50 |
51 | export const ActionDividerTemplate = DividerTemplate.bind({})
52 |
53 | export const Playground = ActionDividerTemplate.bind({})
54 | Playground.args = {
55 | title: 'Section title',
56 | description: 'Section description',
57 | variant: 0
58 | }
59 | Playground.decorators = [
60 | Story => (
61 |
62 |
64 | )
65 | ]
66 |
--------------------------------------------------------------------------------
/docs/src/stories/components/Label/IssueLabel.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 |
4 | export default {
5 | title: 'Components/Label/IssueLabel',
6 | excludeStories: ['IssueLabelTemplate'],
7 | argTypes: {
8 | variant: {
9 | options: [0, 1, 2, 3], // iterator
10 | mapping: [
11 | 'color-bg-accent-emphasis',
12 | 'color-bg-danger-emphasis',
13 | 'color-bg-success-emphasis',
14 | 'color-bg-attention-emphasis'
15 | ], // values
16 | control: {
17 | type: 'select',
18 | labels: ['accent', 'danger', 'success', 'attention'] // public labels
19 | },
20 | description: 'Colors',
21 | table: {
22 | category: 'CSS'
23 | }
24 | },
25 | size: {
26 | options: [0, 1], // iterator
27 | mapping: ['', 'IssueLabel--big'], // values
28 | control: {
29 | type: 'select',
30 | labels: ['default', 'big'] // public labels
31 | },
32 | description: 'Size',
33 | table: {
34 | category: 'CSS'
35 | }
36 | },
37 | text: {
38 | name: 'stringExample',
39 | type: 'string',
40 | description: 'Label text',
41 | table: {
42 | category: 'HTML'
43 | }
44 | }
45 | }
46 | }
47 |
48 | // build every component case here in the template (private api)
49 | export const IssueLabelTemplate = ({variant, size, text}) => (
50 | {text}
51 | )
52 |
53 | // create a "playground" demo page that may set some defaults and allow story to access component controls
54 | export const Playground = IssueLabelTemplate.bind({})
55 | Playground.args = {
56 | text: 'bug 🐛',
57 | variant: 'color-bg-accent-emphasis'
58 | }
59 |
--------------------------------------------------------------------------------
/src/markdown/code.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-max-type
2 | .markdown-body {
3 | // Inline code snippets
4 | code,
5 | tt {
6 | // stylelint-disable-next-line primer/spacing
7 | padding: 0.2em 0.4em;
8 | margin: 0;
9 | // stylelint-disable-next-line primer/typography
10 | font-size: 85%;
11 | background-color: var(--color-neutral-muted);
12 | border-radius: $border-radius;
13 |
14 | br { display: none; }
15 | }
16 |
17 | del code { text-decoration: inherit; }
18 |
19 | samp {
20 | // stylelint-disable-next-line primer/typography
21 | font-size: 85%;
22 | }
23 |
24 | pre {
25 | word-wrap: normal;
26 |
27 | code {
28 | // stylelint-disable-next-line primer/typography
29 | font-size: 100%;
30 | }
31 |
32 | // Code tags within code blocks ( s)
33 | > code {
34 | padding: 0;
35 | margin: 0;
36 | word-break: normal;
37 | white-space: pre;
38 | background: transparent;
39 | border: 0;
40 | }
41 | }
42 |
43 | .highlight {
44 | margin-bottom: $spacer-3;
45 |
46 | pre {
47 | margin-bottom: 0;
48 | word-break: normal;
49 | }
50 | }
51 |
52 | .highlight pre,
53 | pre {
54 | padding: $spacer-3;
55 | overflow: auto;
56 | // stylelint-disable-next-line primer/typography
57 | font-size: 85%;
58 | // stylelint-disable-next-line primer/typography
59 | line-height: 1.45;
60 | background-color: var(--color-canvas-subtle);
61 | border-radius: $border-radius;
62 | }
63 |
64 | pre code,
65 | pre tt {
66 | display: inline;
67 | max-width: auto;
68 | padding: 0;
69 | margin: 0;
70 | overflow: visible;
71 | line-height: inherit;
72 | word-wrap: normal;
73 | background-color: transparent;
74 | border: 0;
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/docs/content/utilities/marketing-layout.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Marketing layout
3 | sort_title: Layout Marketing
4 | path: utilities/marketing-layout
5 | status: Stable
6 | source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/layout.scss'
7 | bundle: marketing-utilities
8 | ---
9 |
10 | Marketing layout utilities build on top of [primer-core utilities](/utilities/layout#position), adding the option of responsive positioning.
11 |
12 |
13 |
14 | ## Position elements with spacing utilities
15 |
16 | Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.
17 |
18 | Use these with `.position-absolute` to position decorative assets and shapes on marketing sites.
19 |
20 | In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
21 |
22 | ```html live
23 |
24 |
.top-2
25 |
.right-md-4
26 |
.left-lg-1
27 |
36 |
.offset-n1
37 |
.offset-n2
38 |
55 | <>
56 | {icon &&
59 | )
60 |
61 | // create a "playground" demo page that may set some defaults and allow story to access component controls
62 | export const Playground = LabelStatesTemplate.bind({})
63 | Playground.args = {
64 | text: 'Draft',
65 | state: 'State--draft'
66 | }
67 |
--------------------------------------------------------------------------------
/docs/src/stories/ui-patterns/ActionList/ActionListFeatures.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import {ListTemplate} from './ActionList.stories'
4 | import {ListItemTemplate} from './ActionListItem.stories'
5 |
6 | export default {
7 | title: 'UI Patterns/ActionList/ActionList/Features'
8 | }
9 |
10 | export const PatternShowDividers = ListTemplate.bind({})
11 | PatternShowDividers.storyName = 'Show dividers'
12 | PatternShowDividers.args = {
13 | showDividers: true,
14 | children: (
15 | <>
16 | ` element for custom styles.
4 | .form-select {
5 | display: inline-block;
6 | max-width: 100%;
7 | height: $size-5;
8 | padding-right: $spacer-4;
9 | background-color: var(--color-canvas-default);
10 | // SVG with fill: #586069 (--color-icon-secondary)
11 | background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
12 | background-repeat: no-repeat;
13 | background-position: right 4px center;
14 | background-size: 16px;
15 | appearance: none;
16 |
17 | // Hides the default caret in IE11
18 | &::-ms-expand {
19 | opacity: 0;
20 | }
21 |
22 | &[multiple] {
23 | height: auto;
24 | }
25 | }
26 |
27 | @include color-mode(dark) {
28 | .form-select {
29 | // SVG with fill: #6e7681 (--color-icon-secondary)
30 | background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
31 | }
32 | }
33 |
34 | .select-sm {
35 | height: $size-4;
36 | // stylelint-disable-next-line primer/spacing
37 | padding-top: 3px;
38 | // stylelint-disable-next-line primer/spacing
39 | padding-bottom: 3px;
40 | font-size: $font-size-small;
41 |
42 | &[multiple] {
43 | height: auto;
44 | min-height: 0;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/navigation/filter-list.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-max-specificity
2 |
3 | // Filters list
4 | //
5 | // A vertical list of filters.
6 | .filter-list {
7 | list-style-type: none;
8 |
9 | &.small .filter-item {
10 | // stylelint-disable-next-line primer/spacing
11 | padding: 6px 12px;
12 | font-size: $font-size-small;
13 | }
14 |
15 | &.pjax-active .filter-item {
16 | color: var(--color-fg-muted);
17 | background-color: transparent;
18 |
19 | &.pjax-active {
20 | color: var(--color-fg-on-emphasis);
21 | background-color: var(--color-accent-emphasis);
22 | }
23 | }
24 | }
25 |
26 | .filter-item {
27 | position: relative;
28 | display: block;
29 | padding: $spacer-2 $spacer-3;
30 | margin-bottom: $spacer-1;
31 | overflow: hidden;
32 | font-size: $h5-size;
33 | color: var(--color-fg-muted);
34 | text-decoration: none;
35 | text-overflow: ellipsis;
36 | white-space: nowrap;
37 | cursor: pointer;
38 | border-radius: $border-radius;
39 |
40 | &:hover {
41 | text-decoration: none;
42 | background-color: var(--color-canvas-subtle);
43 | }
44 |
45 | &.selected,
46 | &[aria-selected='true'],
47 | &[aria-current]:not([aria-current='false']) {
48 | color: var(--color-fg-on-emphasis);
49 | background-color: var(--color-accent-emphasis);
50 |
51 | // fallback :focus state
52 | &:focus {
53 | @include focusOutlineOnEmphasis;
54 |
55 | // remove fallback :focus if :focus-visible is supported
56 | &:not(:focus-visible) {
57 | outline: solid 1px transparent;
58 | box-shadow: none;
59 | }
60 | }
61 |
62 | // default focus state
63 | &:focus-visible {
64 | @include focusOutlineOnEmphasis;
65 | }
66 | }
67 |
68 | .count {
69 | float: right;
70 | font-weight: $font-weight-bold;
71 | }
72 |
73 | .bar {
74 | position: absolute;
75 | top: 2px;
76 | right: 0;
77 | bottom: 2px;
78 | z-index: -1;
79 | display: inline-block;
80 | background-color: var(--color-neutral-subtle);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/actionlist/action-list.scss:
--------------------------------------------------------------------------------
1 | //
2 | .ActionList {
3 | padding: $spacer-2;
4 | }
5 |
6 | // full bleed
7 | .ActionList--full {
8 | padding: 0;
9 | }
10 |
11 | // nested list within main ActionList
12 | .ActionList--subGroup {
13 | padding: 0;
14 | }
15 |
16 | // dividers
17 |
18 | .ActionList--divided {
19 | .ActionList-item-label::before {
20 | position: absolute;
21 | top: -$actionList-item-padding-vertical;
22 | display: block;
23 | width: 100%;
24 | height: 1px;
25 | content: '';
26 | background: var(--color-action-list-item-inline-divider);
27 | }
28 |
29 | // if descriptionWrap--inline exists, move pseudo divider to wrapper
30 | .ActionList-item-descriptionWrap--inline {
31 | &::before {
32 | position: absolute;
33 | top: -$actionList-item-padding-vertical;
34 | display: block;
35 | width: 100%;
36 | height: $border-width;
37 | content: '';
38 | background: var(--color-action-list-item-inline-divider);
39 | }
40 |
41 | // unset the default label pseudo
42 | .ActionList-item-label::before {
43 | content: unset;
44 | }
45 | }
46 |
47 | // hide divider if item is active
48 | .ActionList-item--navActive {
49 | // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
50 | .ActionList-item-label::before,
51 | + .ActionList-item .ActionList-item-label::before {
52 | visibility: hidden;
53 | }
54 | }
55 | }
56 |
57 | // hide if item is first of type with label::before, or is the first item after a sectionDivider
58 | .ActionList-item:first-of-type .ActionList-item-label::before,
59 | .ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
60 | visibility: hidden;
61 | }
62 |
63 | // hide if item is first of type with label::before, or is the first item after a sectionDivider
64 | .ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,
65 | .ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
66 | visibility: hidden;
67 | }
68 |
--------------------------------------------------------------------------------
/docs/src/stories/components/Label/Label.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 |
4 | export default {
5 | title: 'Components/Label/Label',
6 | excludeStories: ['LabelTemplate'],
7 | argTypes: {
8 | inline: {
9 | control: {type: 'boolean'},
10 | description: 'Display label inline',
11 | table: {
12 | category: 'CSS'
13 | }
14 | },
15 | variant: {
16 | options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // iterator
17 | mapping: [
18 | '',
19 | 'Label--primary',
20 | 'Label--secondary',
21 | 'Label--accent',
22 | 'Label--success',
23 | 'Label--attention',
24 | 'Label--severe',
25 | 'Label--danger',
26 | 'Label--open',
27 | 'Label--closed',
28 | 'Label--done',
29 | 'Label--sponsors'
30 | ], // values
31 | control: {
32 | type: 'select',
33 | labels: ['default', 'primary', 'secondary', 'accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors']
34 | },
35 | description: 'Colors',
36 | table: {
37 | category: 'HTML'
38 | }
39 | },
40 | size: {
41 | options: [0, 1], // iterator
42 | mapping: ['', 'Label--large'], // values
43 | control: {
44 | type: 'select',
45 | labels: ['default', 'large'] // public labels
46 | },
47 | description: 'Colors',
48 | table: {
49 | category: 'CSS'
50 | }
51 | },
52 | text: {
53 | name: 'text',
54 | type: 'string',
55 | description: 'Label text',
56 | table: {
57 | category: 'HTML'
58 | }
59 | }
60 | }
61 | }
62 |
63 | export const LabelTemplate = ({inline, variant, size, text}) => (
64 | {text}
65 | )
66 |
67 | export const Playground = LabelTemplate.bind({})
68 | Playground.args = {
69 | text: 'Label text',
70 | inline: false,
71 | variant: 'Label--primary'
72 | }
73 |
--------------------------------------------------------------------------------
/src/utilities/padding.scss:
--------------------------------------------------------------------------------
1 | // Padding spacer utilities
2 | // stylelint-disable block-opening-brace-space-before
3 | // stylelint-disable comment-empty-line-before
4 | // stylelint-disable primer/spacing
5 |
6 | // Responsive padding spacer utilities
7 | @each $breakpoint, $variant in $responsive-variants {
8 | @include breakpoint($breakpoint) {
9 | // Loop through the spacer values
10 | @each $scale, $size in $spacer-map-extended {
11 | @if ($scale < length($spacer-map)) {
12 | /* Set a $size padding to all sides at $breakpoint */
13 | .p#{$variant}-#{$scale} { padding: $size !important; }
14 | }
15 |
16 | /* Set a $size padding to the top at $breakpoint */
17 | .pt#{$variant}-#{$scale} { padding-top: $size !important; }
18 | /* Set a $size padding to the right at $breakpoint */
19 | .pr#{$variant}-#{$scale} { padding-right: $size !important; }
20 | /* Set a $size padding to the bottom at $breakpoint */
21 | .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
22 | /* Set a $size padding to the left at $breakpoint */
23 | .pl#{$variant}-#{$scale} { padding-left: $size !important; }
24 |
25 | @if ($scale < length($spacer-map)) {
26 | /* Set a $size padding to the left & right at $breakpoint */
27 | .px#{$variant}-#{$scale} {
28 | padding-right: $size !important;
29 | padding-left: $size !important;
30 | }
31 | }
32 |
33 | /* Set a $size padding to the top & bottom at $breakpoint */
34 | .py#{$variant}-#{$scale} {
35 | padding-top: $size !important;
36 | padding-bottom: $size !important;
37 | }
38 | }
39 | }
40 | }
41 |
42 | // responsive padding for containers
43 | .p-responsive {
44 | padding-right: $spacer-3 !important;
45 | padding-left: $spacer-3 !important;
46 |
47 | @include breakpoint(sm) {
48 | padding-right: $spacer-6 !important;
49 | padding-left: $spacer-6 !important;
50 | }
51 |
52 | @include breakpoint(lg) {
53 | padding-right: $spacer-3 !important;
54 | padding-left: $spacer-3 !important;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/support/mixins/typography.scss:
--------------------------------------------------------------------------------
1 | // Text hiding for image based text replacement.
2 | // Higher performance than -9999px because it only renders
3 | // the size of the actual text, not a full 9999px box.
4 | @mixin hide-text() {
5 | overflow: hidden;
6 | text-indent: 100%;
7 | white-space: nowrap;
8 | }
9 |
10 | // Heading mixins for use within components
11 | // These match heading utilities in utilities/typography
12 | @mixin h1 {
13 | font-size: $h1-size;
14 | font-weight: $font-weight-bold;
15 | }
16 |
17 | @mixin h2 {
18 | font-size: $h2-size;
19 | font-weight: $font-weight-bold;
20 | }
21 |
22 | @mixin h3 {
23 | font-size: $h3-size;
24 | font-weight: $font-weight-bold;
25 | }
26 |
27 | @mixin h4 {
28 | font-size: $h4-size;
29 | font-weight: $font-weight-bold;
30 | }
31 |
32 | @mixin h5 {
33 | font-size: $h5-size;
34 | font-weight: $font-weight-bold;
35 | }
36 |
37 | @mixin h6 {
38 | font-size: $h6-size;
39 | font-weight: $font-weight-bold;
40 | }
41 |
42 | // Responsive heading mixins
43 | // There are no responsive mixins for h4-h6 because they are small
44 | // and don't need to be smaller on mobile.
45 | @mixin f1-responsive {
46 | font-size: $h1-size-mobile;
47 |
48 | // 32px on desktop
49 | @include breakpoint(md) { font-size: $h1-size; }
50 | }
51 |
52 | @mixin f2-responsive {
53 | font-size: $h2-size-mobile;
54 |
55 | // 24px on desktop
56 | @include breakpoint(md) { font-size: $h2-size; }
57 | }
58 |
59 | @mixin f3-responsive {
60 | font-size: $h3-size-mobile;
61 |
62 | // 20px on desktop
63 | @include breakpoint(md) { font-size: $h3-size; }
64 | }
65 |
66 | // These use the mixins from above for responsive heading sizes.
67 | // The following mixins can be used where it's convenient or necessary to
68 | // couple the responsive font-size with the font-weight.
69 | @mixin h1-responsive {
70 | @include f1-responsive;
71 |
72 | font-weight: $font-weight-bold;
73 | }
74 |
75 | @mixin h2-responsive {
76 | @include f2-responsive;
77 |
78 | font-weight: $font-weight-bold;
79 | }
80 |
81 | @mixin h3-responsive {
82 | @include f3-responsive;
83 |
84 | font-weight: $font-weight-bold;
85 | }
86 |
--------------------------------------------------------------------------------
/src/markdown/lists.scss:
--------------------------------------------------------------------------------
1 | // Base styles
2 | // stylelint-disable selector-no-qualifying-type
3 | // stylelint-disable selector-max-type
4 | .markdown-body {
5 | // Lists, Blockquotes & Such
6 | ul,
7 | ol {
8 | // stylelint-disable-next-line primer/spacing
9 | padding-left: 2em;
10 |
11 | &.no-list {
12 | padding: 0;
13 | list-style-type: none;
14 | }
15 | }
16 |
17 | ol[type='1'] {
18 | list-style-type: decimal;
19 | }
20 |
21 | ol[type='a'] {
22 | list-style-type: lower-alpha;
23 | }
24 |
25 | ol[type='i'] {
26 | list-style-type: lower-roman;
27 | }
28 |
29 | // Reset style to decimal (HTML default) specifically for AsciiDoc
30 | // construction (doesn't affect MarkDown)
31 | div > ol:not([type]) {
32 | list-style-type: decimal;
33 | }
34 |
35 | // Did someone complain about list spacing? Encourage them
36 | // to create the spacing with their markdown formatting.
37 | // List behavior should be controled by the markup, not the css.
38 | //
39 | // For lists with padding between items, use blank
40 | // lines between items. This will generate paragraphs with
41 | // padding to space things out.
42 | //
43 | // - item
44 | //
45 | // - item
46 | //
47 | // - item
48 | //
49 | // For list without padding, don't use blank lines.
50 | //
51 | // - item
52 | // - item
53 | // - item
54 | //
55 | // Modifying the css to emulate these behaviors merely brakes
56 | // one case in the process of solving another. Don't change
57 | // this unless it's really really a bug.
58 | ul ul,
59 | ul ol,
60 | ol ol,
61 | ol ul {
62 | margin-top: 0;
63 | margin-bottom: 0;
64 | }
65 |
66 | li > p {
67 | margin-top: $spacer-3;
68 | }
69 |
70 | li + li {
71 | margin-top: $em-spacer-3;
72 | }
73 |
74 | dl {
75 | padding: 0;
76 |
77 | dt {
78 | padding: 0;
79 | margin-top: $spacer-3;
80 | font-size: 1em;
81 | font-style: italic;
82 | font-weight: $font-weight-bold;
83 | }
84 |
85 | dd {
86 | padding: 0 $spacer-3;
87 | margin-bottom: $spacer-3;
88 | }
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/RELEASING.md:
--------------------------------------------------------------------------------
1 | # Releasing a new version of Primer CSS 🎉
2 |
3 | ## Prepare the release (in `primer/css`)
4 |
5 | The release process is automated by [changesets]. After you familiarize yourself with how they work. We use an [action workflow integrated in ci](https://github.com/atlassian/changesets#integrating-with-ci).
6 |
7 | 1. Visit the pull requests page and find the [latest Release tracking pr from primer-css](https://github.com/primer/css/pulls/primer-css). If there isn't one, we'll need to build the next release by merging in PRs with changeset files.
8 |
9 | ## Test the release candidate (in `github/github`):
10 |
11 | 1. Create a new branch in the `github/github` repo, name it `primer-`.
12 |
13 | 1. Update the Primer CSS version to the published release candidate with:
14 |
15 | ```sh
16 | bin/npm install @primer/css@-rc.
17 | ```
18 |
19 | Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
20 |
21 | 1. If you need to make changes to github/github due to the Primer CSS release, do them in a branch and merge _that_ into your release branch after testing.
22 |
23 | 1. Add or re-request reviewers and fix any breaking tests.
24 |
25 | 1. Test on review-lab.
26 |
27 |
28 | ## Publish the release (in `primer/css`)
29 |
30 | 1. If the release PR got approved and you've done necessary testing, merge it.
31 |
32 | After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if actions has finished.
33 |
34 | 2. done 🎉
35 |
36 |
37 | ## Update github.com (in `github/github`):
38 |
39 | 1. Install the latest published version in the same `primer-` branch created earlier with:
40 |
41 | ```
42 | bin/npm install @primer/css@
43 | ```
44 |
45 | Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
46 |
47 | 1. Fix any breaking tests.
48 |
49 | 1. Deploy! :rocket:
50 |
51 | [changelog]: ../CHANGELOG.md
52 | [changesets]: https://github.com/atlassian/changesets
53 |
--------------------------------------------------------------------------------
/src/buttons/button-group.scss:
--------------------------------------------------------------------------------
1 | // Button group
2 | //
3 | // A button group is a series of buttons laid out next to each other, all part
4 | // of one visual button, but separated by rules to be separate.
5 |
6 | .BtnGroup {
7 | display: inline-block;
8 | vertical-align: middle;
9 |
10 | @include clearfix();
11 |
12 | // Proper spacing for multiple button groups (a la, gollum editor)
13 | + .BtnGroup,
14 | + .btn {
15 | margin-left: $spacer-1;
16 | }
17 | }
18 |
19 | .BtnGroup-item {
20 | position: relative;
21 | float: left;
22 | border-right-width: 0;
23 | border-radius: 0;
24 |
25 | &:first-child {
26 | border-top-left-radius: $border-radius;
27 | border-bottom-left-radius: $border-radius;
28 | }
29 |
30 | &:last-child {
31 | border-right-width: $border-width;
32 | border-top-right-radius: $border-radius;
33 | border-bottom-right-radius: $border-radius;
34 | }
35 |
36 | &.selected,
37 | &[aria-selected='true'],
38 | &:focus,
39 | &:active,
40 | &:hover {
41 | border-right-width: $border-width;
42 |
43 | + .BtnGroup-item,
44 | + .BtnGroup-parent .BtnGroup-item {
45 | border-left-width: 0;
46 | }
47 | }
48 | }
49 |
50 | .BtnGroup-parent {
51 | float: left;
52 |
53 | &:first-child .BtnGroup-item {
54 | border-top-left-radius: $border-radius;
55 | border-bottom-left-radius: $border-radius;
56 | }
57 |
58 | &:last-child .BtnGroup-item {
59 | border-right-width: $border-width;
60 | border-top-right-radius: $border-radius;
61 | border-bottom-right-radius: $border-radius;
62 | }
63 |
64 | .BtnGroup-item {
65 | border-right-width: 0;
66 | border-radius: 0;
67 | }
68 |
69 | &.selected,
70 | &[aria-selected='true'],
71 | &:focus,
72 | &:active,
73 | &:hover {
74 | .BtnGroup-item {
75 | border-right-width: $border-width;
76 | }
77 |
78 | + .BtnGroup-item,
79 | + .BtnGroup-parent .BtnGroup-item {
80 | border-left-width: 0;
81 | }
82 | }
83 | }
84 |
85 | // ensure that the focus ring sits above the adjacent buttons
86 | .BtnGroup-item,
87 | .BtnGroup-parent {
88 | &:focus,
89 | &:active {
90 | z-index: 1;
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/docs/src/stories/components/ActionList/ActionList.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories'
3 | import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
4 |
5 | export default {
6 | title: 'Components/ActionList/ActionList',
7 | excludeStories: ['ActionListTemplate'],
8 | argTypes: {
9 | showDividers: {
10 | control: {type: 'boolean'},
11 | description: 'Show dividers between items',
12 | table: {
13 | category: 'CSS'
14 | }
15 | },
16 | role: {
17 | options: ['list'],
18 | control: {
19 | type: 'inline-radio'
20 | },
21 | description: 'Semantic list role',
22 | table: {
23 | category: 'HTML'
24 | }
25 | },
26 | ariaLabel: {
27 | name: 'ariaLabel',
28 | type: 'string',
29 | description: 'If no list ActionListDivider is provided, include an aria-label',
30 | table: {
31 | category: 'HTML'
32 | }
33 | },
34 | ariaLabelledBy: {
35 | name: 'ariaLabelledBy',
36 | type: 'string',
37 | description: 'Reference ID of ActionListDivider',
38 | table: {
39 | category: 'HTML'
40 | }
41 | },
42 | listPadding: {
43 | options: [0, 1], // iterator
44 | mapping: [null, 'ActionList--full'], // values
45 | control: {
46 | type: 'inline-radio',
47 | labels: ['inset', 'full-bleed']
48 | },
49 | description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
50 | table: {
51 | category: 'CSS'
52 | }
53 | },
54 | children: {
55 | table: {
56 | disable: true
57 | }
58 | }
59 | }
60 | }
61 |
62 | export const ActionListTemplate = ListTemplate.bind({})
63 |
64 | export const Playground = ActionListTemplate.bind({})
65 | Playground.args = {
66 | showDividers: false,
67 | listPadding: 0,
68 | role: 'list',
69 | ariaLabel: '',
70 | ariaLabelledBy: '',
71 | children: (
72 | <>
73 | `.
10 |
11 | ## Fullscreen click area
12 |
13 | Use `.details-overlay` to expand the click area of `` to cover the full screen, so user can click anywhere on a page to close ``.
14 |
15 | ```html live
16 |
17 | More
18 | Hidden text
19 |
20 | ```
21 |
22 | ## Darkened fullscreen click area
23 |
24 | Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
25 |
26 | ```html live
27 |
28 | More
29 |
30 | Hidden text
31 |
32 |
33 | ```
34 |
35 | ## Custom caret
36 |
37 | Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text.
38 |
39 | ```html live
40 |
41 | More
42 | Hidden text
43 |
44 | ```
45 |
46 | ## Using button styles with the details summary element
47 |
48 | You can add `.btn` and `.btn-*` classes to any
49 | [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
50 | element so that it gains the appearance of a button, and
51 | selected/active styles when the parent
52 | [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
53 | element is open.
54 |
55 | ```html live
56 |
57 | More
58 | Hidden text
59 |
60 |
61 |
62 | More
63 | Hidden text
64 |
65 | ```
66 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "docs",
4 | "repository": "primer/css",
5 | "scripts": {
6 | "clean": "gatsby clean",
7 | "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
8 | "storybook": "NODE_ENV=test start-storybook -p 6006",
9 | "build:storybook": "script/build-storybook"
10 | },
11 | "dependencies": {
12 | "@babel/preset-react": "^7.16.7",
13 | "@koddsson/postcss-sass": "5.0.1",
14 | "@primer/components": "32.1.0",
15 | "@primer/gatsby-theme-doctocat": "3.1.1",
16 | "@primer/octicons": "17.0.0",
17 | "@primer/octicons-react": "17.0.0",
18 | "@primer/primitives": "7.8.3",
19 | "@svgr/webpack": "5.5.0",
20 | "autoprefixer": "10.4.2",
21 | "babel-preset-gatsby": "^2.14.0",
22 | "chroma-js": "^2.4.2",
23 | "clsx": "^1.1.1",
24 | "core-js": "^3.20.3",
25 | "gatsby": "2.32.13",
26 | "gatsby-plugin-alias-imports": "^1.0.5",
27 | "gatsby-plugin-sass": "3.2.0",
28 | "gatsby-plugin-svgr": "2.1.0",
29 | "path": "0.12.7",
30 | "postcss": "8.4.5",
31 | "postcss-import": "14.1.0",
32 | "postcss-load-config": "3.1.0",
33 | "postcss-loader": "4.3.0",
34 | "postcss-scss": "4.0.3",
35 | "postcss-simple-vars": "6.0.3",
36 | "prop-types": "^15.8.1",
37 | "raw-loader": "^4.0.2",
38 | "react": "^16.13.1",
39 | "react-dom": "^16.13.1",
40 | "react-frame-component": "^5.2.1",
41 | "sass-loader": "13.0.0",
42 | "styled-components": "^4.3.2",
43 | "title-case": "^3.0.3"
44 | },
45 | "engines": {
46 | "node": ">= 10.x"
47 | },
48 | "devDependencies": {
49 | "@babel/core": "^7.16.7",
50 | "@storybook/addon-a11y": "6.5.0",
51 | "@storybook/addon-actions": "^6.5.0",
52 | "@storybook/addon-essentials": "^6.5.0",
53 | "@storybook/addon-links": "^6.5.0",
54 | "@storybook/addon-postcss": "2.0.0",
55 | "@storybook/builder-webpack5": "^6.5.0",
56 | "@storybook/manager-webpack5": "^6.5.0",
57 | "@storybook/preset-scss": "^1.0.3",
58 | "@storybook/react": "6.5.0",
59 | "@whitespace/storybook-addon-html": "^5.0.0",
60 | "babel-loader": "^8.2.5",
61 | "storybook-addon-designs": "6.2.1",
62 | "storybook-color-picker": "2.3.1"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/docs/content/components/pagination.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pagination
3 | path: components/pagination
4 | status: Beta
5 | source: 'https://github.com/primer/css/tree/main/src/pagination'
6 | bundle: pagination
7 | ---
8 |
9 | Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
10 |
11 | ## Previous/next pagination
12 |
13 | You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
14 |
15 | ```html live
16 |
17 |
21 |
22 | ```
23 |
24 | ## Numbered pagination
25 |
26 | For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
27 |
28 | To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the `aria-disabled="true"` attribute to the Previous button if you're on the first page. Apply the `aria-current="page"` attribute to the current numbered page.
29 |
30 | As always, make sure to include the appropriate `aria` attributes to make the element accessible.
31 |
32 | - Add `aria-label="Pagination"` to the `paginate-container` element.
33 | - Add `aria-label="Page X"` to each anchor link.
34 |
35 | ```html live
36 |
37 |
48 |
49 | ```
50 |
--------------------------------------------------------------------------------
/docs/content/tools/deprecations.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Deprecation data
3 | ---
4 |
5 | As of version 12.7.0, we publish CSS selector and SCSS variable deprecation data (as of 14.0.0) with `@primer/css`. You can access the data via the [Node API](#node) or as [JSON](#json).
6 |
7 | To deprecate a class, variable, or mixin, add the element to the [deprecations.js](https://github.com/primer/css/blob/main/deprecations.js) file with it's replacement value.
8 |
9 | The replacement can be:
10 |
11 | * A `String` for a direct replacement.
12 | * An `Array` for multiple replacement options.
13 | * `null` to indicate there is no replacement.
14 |
15 | This could look something like this:
16 |
17 | ```js
18 | const deprecations = {
19 | "deprecated-1": "replacement",
20 | "deprecated-2": ["replacement-1", "replacement-2"],
21 | "deprecated-3": null
22 | }
23 | ```
24 |
25 | ## JSON
26 |
27 | The JSON data is available in the unpacked node module's `dist/deprecations.json`, and is an object with the following structure:
28 |
29 | ```json
30 | {
31 | "selectors" {...},
32 | "variables": {...},
33 | "mixins": {...}
34 | }
35 | ```
36 |
37 | * `selectors` is an object mapping CSS selectors to their replacements. If the replacement is an Array, then there's multiple options. If the replacement is null then there are no replacements.
38 |
39 | ```json
40 | {
41 | "selectors": {
42 | "deprecated-class": "replacement-class"
43 | }
44 | }
45 | ```
46 |
47 | * `variables` is an object mapping SCSS variables to their replacement SCSS variable.
48 |
49 | ```json
50 | {
51 | "variables": {
52 | "$deprecated-variable": "$replacement-variable"
53 | }
54 | }
55 | ```
56 |
57 | * `mixins` is an object mapping SCSS mixins to their replacement SCSS mixins.
58 |
59 | ```json
60 | {
61 | "mixins": {
62 | "deprecated-mixin": "replacement-mixin"
63 | }
64 | }
65 | ```
66 |
67 |
68 | ## Node
69 |
70 | The Node API for selector deprecations is available at
71 | `@primer/css/deprecations`.
72 |
73 | ### Example:
74 |
75 | ```js
76 | const {
77 | deprecatedSelectors,
78 | deprecatedSassVariables,
79 | deprecatedSassMixins
80 | } = require('@primer/css/deprecations')
81 |
82 | ```
83 |
--------------------------------------------------------------------------------
22 | ```
23 |
--------------------------------------------------------------------------------
/docs/src/stories/ui-patterns/ActionList/uipatterns.stories.mdx:
--------------------------------------------------------------------------------
1 | import {Meta} from '@storybook/addon-docs'
2 |
3 |
4 |
5 | ## UI Patterns
6 |
7 | This directory contains pattern level stories that are used to compose component level stories. In general these stories consist of all markup/css that make up an overall "pattern" while component stories are more refined and focused on their own features and intent.
8 |
9 | As an example, Overlay is a pattern used by Dialog, Anchored overlay, and "dropdown" type scenarios. Overlay is a set of styles reused for those core components, and provides its own set of stories to be inherited from the UI Patterns directory.
10 |
11 | Consider these stories "private API" and use the stories within the `Components` directory as an official API reference.
12 |
--------------------------------------------------------------------------------
/src/primitives/index.scss:
--------------------------------------------------------------------------------
1 | @import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css';
2 | @import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css';
3 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css';
4 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css';
5 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css';
6 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css';
7 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
8 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
9 | @import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
10 |
--------------------------------------------------------------------------------
/src/breadcrumb/breadcrumb.scss:
--------------------------------------------------------------------------------
1 | .breadcrumb-item {
2 | display: inline-block;
3 | // stylelint-disable-next-line primer/spacing
4 | margin-left: -0.35em;
5 | white-space: nowrap;
6 | list-style: none;
7 |
8 | &::after {
9 | display: inline-block;
10 | height: 0.8em;
11 | margin: 0 $em-spacer-5;
12 | content: '';
13 | // stylelint-disable-next-line primer/borders
14 | border-right: 0.1em $border-style var(--color-fg-muted);
15 | transform: rotate(15deg);
16 | }
17 |
18 | &:first-child {
19 | margin-left: 0;
20 | }
21 | }
22 |
23 | .breadcrumb-item-selected,
24 | .breadcrumb-item[aria-current]:not([aria-current='false']) {
25 | &::after {
26 | content: none;
27 | }
28 | }
29 |
30 | // stylelint-disable selector-max-type
31 | .breadcrumb-item-selected a {
32 | color: var(--color-fg-default);
33 | }
34 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | # To get started with Dependabot version updates, you'll need to specify which
2 | # package ecosystems to update and where the package manifests are located.
3 | # Please see the documentation for all configuration options:
4 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
5 |
6 | version: 2
7 | updates:
8 | - package-ecosystem: "npm" # See documentation for possible values
9 | directory: "/docs" # Location of package manifests
10 | schedule:
11 | interval: "monthly"
12 |
13 | # Maintain dependencies for GitHub Actions
14 | - package-ecosystem: "github-actions"
15 | directory: "/"
16 | schedule:
17 | interval: "monthly"
18 |
19 | # Maintain dependencies for npm
20 | - package-ecosystem: "npm"
21 | directory: "/"
22 | schedule:
23 | interval: "monthly"
24 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | ### What are you trying to accomplish?
2 |
3 |
4 |
5 | ### What approach did you choose and why?
6 |
7 |
8 |
9 | ### What should reviewers focus on?
10 |
11 |
12 |
13 | ### Can these changes ship as is?
14 |
15 |
16 |
17 | - [ ] Yes, this PR does not depend on additional changes. 🚢
18 |
--------------------------------------------------------------------------------
/docs/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/src/branch-name/branch-name.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-max-type, selector-no-qualifying-type
2 |
3 | // A nice way to display branch names inside the UI. Can be a link or not.
4 |
5 | .branch-name {
6 | display: inline-block;
7 | // stylelint-disable-next-line primer/spacing
8 | padding: 2px 6px;
9 | font: 12px $mono-font;
10 | color: var(--color-fg-muted);
11 | word-break: break-all;
12 | background-color: var(--color-accent-subtle);
13 | border-radius: $border-radius;
14 |
15 | .octicon {
16 | // stylelint-disable-next-line primer/spacing
17 | margin: 1px -2px 0 0;
18 | color: var(--color-fg-muted);
19 | }
20 | }
21 |
22 | // When a branch name is a link
23 |
24 | a.branch-name {
25 | color: var(--color-accent-fg);
26 | background-color: var(--color-accent-subtle);
27 |
28 | .octicon {
29 | color: var(--color-accent-fg);
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/docs/content/components/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Components
3 | path: components/index
4 | ---
5 |
6 | Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
7 |
8 | * **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
9 | * **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.
10 |
--------------------------------------------------------------------------------
/src/core/index.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * @primer/css/core
3 | * http://primer.style/css
4 | *
5 | * Released under MIT license. Copyright (c) 2019 GitHub Inc.
6 | */
7 |
8 | // Global requirements
9 | @import '../support/index.scss';
10 |
11 | // Color modes
12 |
13 | // Core modules
14 | @import '../actionlist/index.scss';
15 | @import '../base/index.scss';
16 | @import '../box/index.scss';
17 | @import '../breadcrumb/index.scss';
18 | @import '../buttons/index.scss';
19 | @import '../table-object/index.scss';
20 | @import '../forms/index.scss';
21 | @import '../layout/index.scss';
22 | @import '../links/index.scss';
23 | @import '../navigation/index.scss';
24 | @import '../pagination/index.scss';
25 | @import '../tooltips/index.scss';
26 | @import '../truncate/index.scss';
27 | @import '../overlay/index.scss';
28 |
29 | // Utilities always go last so that they can override components
30 | @import '../utilities/index.scss';
31 |
--------------------------------------------------------------------------------
/src/markdown/tables.scss:
--------------------------------------------------------------------------------
1 | // Needs refactoring
2 | // stylelint-disable selector-max-type
3 | .markdown-body {
4 | // Tables
5 | table {
6 | display: block;
7 | width: 100%; // keep for backwards compatibility
8 | width: max-content;
9 | max-width: 100%;
10 | overflow: auto;
11 |
12 | th {
13 | font-weight: $font-weight-bold;
14 | }
15 |
16 | th,
17 | td {
18 | // stylelint-disable-next-line primer/spacing
19 | padding: 6px 13px;
20 | border: $border-width $border-style var(--color-border-default);
21 | }
22 |
23 | tr {
24 | background-color: var(--color-canvas-default);
25 | border-top: $border-width $border-style var(--color-border-muted);
26 |
27 | &:nth-child(2n) {
28 | background-color: var(--color-canvas-subtle);
29 | }
30 | }
31 |
32 | img {
33 | background-color: transparent;
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/product/index.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * @primer/css/product
3 | * http://primer.style/css
4 | *
5 | * Released under MIT license. Copyright (c) 2019 GitHub Inc.
6 | */
7 |
8 | // Global requirements
9 | @import '../support/index.scss';
10 |
11 | // Product specific css modules
12 | @import '../alerts/index.scss';
13 | @import '../autocomplete/index.scss';
14 | @import '../avatars/index.scss';
15 | @import '../blankslate/index.scss';
16 | @import '../branch-name/index.scss';
17 | @import '../dropdown/index.scss';
18 | @import '../header/index.scss';
19 | @import '../labels/index.scss';
20 | @import '../loaders/index.scss';
21 | @import '../markdown/index.scss';
22 | @import '../popover/index.scss';
23 | @import '../progress/index.scss';
24 | @import '../select-menu/index.scss';
25 | @import '../subhead/index.scss';
26 | @import '../timeline/index.scss';
27 | @import '../toasts/index.scss';
28 | @import '../toggle-switch/index.scss';
29 |
--------------------------------------------------------------------------------
/docs/src/@primer/gatsby-theme-doctocat/components/hero.js:
--------------------------------------------------------------------------------
1 | import {Box, Heading, Text, ThemeProvider} from '@primer/components'
2 | import {Container} from '@primer/gatsby-theme-doctocat'
3 | import React from 'react'
4 | import {version} from '../../../../../package.json'
5 | import {ReactComponent as HeroIllustration} from '../../../hero-illustration.svg'
6 |
7 | function Hero() {
8 | return (
9 |