From 4a298ab6aea1849dc023866b8d37d9ad3f982675 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 10 Jul 2023 08:40:04 -0700 Subject: [PATCH] remove from root --- .babelrc.json | 15 - .storybook/main.js | 27 - .storybook/manager.js | 6 - .storybook/preview-head.html | 1 - .storybook/preview.css | 9 - .storybook/preview.js | 84 - .storybook/storybook.css | 60 - .storybook/theme.js | 13 - package.json | 15 +- stories/Contributing.mdx | 43 - stories/GettingStarted.mdx | 127 - stories/Introduction.mdx | 70 - .../components/Layout/AppFrame.stories.jsx | 142 - .../components/Layout/LayoutAlpha.stories.jsx | 204 - .../components/Layout/LayoutBeta.stories.jsx | 538 -- .../components/Layout/PageLayout.stories.jsx | 352 -- .../Layout/SplitPageLayout.stories.jsx | 182 - stories/components/Layout/Stack.stories.jsx | 607 -- .../Layout/StackExamples.stories.jsx | 79 - .../Layout/StackFeatures.stories.jsx | 151 - .../BoxOverlay/BoxOverlay.mdx | 15 - .../BoxOverlay/BoxOverlay.stories.tsx | 88 - .../BranchName/BranchName.mdx | 11 - .../BranchName/BranchName.stories.tsx | 31 - .../deprecated-components/Button/Button.mdx | 129 - .../Button/Button.stories.tsx | 426 -- .../FilterList/FilterList.mdx | 11 - .../FilterList/FilterList.stories.tsx | 29 - stories/deprecated-components/Forms/Forms.mdx | 130 - .../Forms/Forms.stories.tsx | 457 -- .../deprecated-components/Header/Header.mdx | 35 - .../Header/Header.stories.tsx | 95 - .../IssueLabel/IssueLabel.mdx | 15 - .../IssueLabel/IssueLabel.stories.tsx | 31 - .../deprecated-components/Loaders/Loaders.mdx | 13 - .../Loaders/Loaders.stories.tsx | 28 - .../Markdown/Markdown.stories.tsx | 387 -- .../Marketing/Marketing.mdx | 27 - .../Marketing/Marketing.stories.tsx | 137 - .../Pagination/Pagination.mdx | 28 - .../Pagination/Pagination.stories.tsx | 54 - .../SelectMenu/SelectMenu.mdx | 141 - .../SelectMenu/SelectMenu.stories.tsx | 843 --- .../deprecated-components/SideNav/SideNav.mdx | 26 - .../SideNav/SideNav.stories.tsx | 180 - .../deprecated-components/SubNav/SubNav.mdx | 19 - .../SubNav/SubNav.stories.tsx | 115 - stories/deprecated-components/Toast/Toast.mdx | 61 - .../Toast/Toast.stories.tsx | 195 - .../deprecated-components/Tooltip/Tooltip.mdx | 47 - .../Tooltip/Tooltip.stories.tsx | 177 - stories/helpers/ColorBlock.jsx | 23 - stories/helpers/ConditionalWrapper.jsx | 7 - stories/helpers/code-snippet-html-helper.js | 13 - stories/helpers/pageLayoutBehavior.jsx | 45 - stories/helpers/storybook-styles.scss | 21 - stories/helpers/useToggle.jsx | 8 - stories/principles/Accessibility.mdx | 186 - stories/principles/HTML.mdx | 78 - stories/principles/Principles.mdx | 225 - stories/principles/SCSS.mdx | 70 - stories/static/color-image.svg | 29 - stories/static/components-image copy.svg | 1 - stories/static/components-image.svg | 1 - stories/static/hero-illustration.svg | 97 - stories/static/objects-image.svg | 1 - stories/static/spacing-image.svg | 27 - stories/static/typography-image.png | Bin 4472 -> 0 bytes stories/static/utilities-image.svg | 1 - stories/support/Breakpoints.mdx | 179 - stories/support/Deprecations.mdx | 74 - stories/support/Linting.mdx | 92 - stories/support/Prototyping.mdx | 25 - stories/support/Spacing.mdx | 160 - stories/support/Theming.mdx | 120 - stories/support/Typography.mdx | 142 - stories/utilities/Animation.stories.jsx | 61 - stories/utilities/Border.stories.jsx | 68 - stories/utilities/Color.stories.jsx | 101 - stories/utilities/Details.stories.jsx | 40 - stories/utilities/Flexbox.stories.jsx | 414 -- stories/utilities/Grid.stories.jsx | 319 -- stories/utilities/Layout.stories.jsx | 320 -- stories/utilities/Margin.stories.jsx | 91 - stories/utilities/Padding.stories.jsx | 49 - stories/utilities/Shadow.stories.jsx | 78 - stories/utilities/Typography.stories.jsx | 101 - yarn.lock | 4952 +---------------- 88 files changed, 187 insertions(+), 14738 deletions(-) delete mode 100644 .babelrc.json delete mode 100644 .storybook/main.js delete mode 100644 .storybook/manager.js delete mode 100644 .storybook/preview-head.html delete mode 100644 .storybook/preview.css delete mode 100644 .storybook/preview.js delete mode 100644 .storybook/storybook.css delete mode 100644 .storybook/theme.js delete mode 100644 stories/Contributing.mdx delete mode 100644 stories/GettingStarted.mdx delete mode 100644 stories/Introduction.mdx delete mode 100644 stories/components/Layout/AppFrame.stories.jsx delete mode 100644 stories/components/Layout/LayoutAlpha.stories.jsx delete mode 100644 stories/components/Layout/LayoutBeta.stories.jsx delete mode 100644 stories/components/Layout/PageLayout.stories.jsx delete mode 100644 stories/components/Layout/SplitPageLayout.stories.jsx delete mode 100644 stories/components/Layout/Stack.stories.jsx delete mode 100644 stories/components/Layout/StackExamples.stories.jsx delete mode 100644 stories/components/Layout/StackFeatures.stories.jsx delete mode 100644 stories/deprecated-components/BoxOverlay/BoxOverlay.mdx delete mode 100644 stories/deprecated-components/BoxOverlay/BoxOverlay.stories.tsx delete mode 100644 stories/deprecated-components/BranchName/BranchName.mdx delete mode 100644 stories/deprecated-components/BranchName/BranchName.stories.tsx delete mode 100644 stories/deprecated-components/Button/Button.mdx delete mode 100644 stories/deprecated-components/Button/Button.stories.tsx delete mode 100644 stories/deprecated-components/FilterList/FilterList.mdx delete mode 100644 stories/deprecated-components/FilterList/FilterList.stories.tsx delete mode 100644 stories/deprecated-components/Forms/Forms.mdx delete mode 100644 stories/deprecated-components/Forms/Forms.stories.tsx delete mode 100644 stories/deprecated-components/Header/Header.mdx delete mode 100644 stories/deprecated-components/Header/Header.stories.tsx delete mode 100644 stories/deprecated-components/IssueLabel/IssueLabel.mdx delete mode 100644 stories/deprecated-components/IssueLabel/IssueLabel.stories.tsx delete mode 100644 stories/deprecated-components/Loaders/Loaders.mdx delete mode 100644 stories/deprecated-components/Loaders/Loaders.stories.tsx delete mode 100644 stories/deprecated-components/Markdown/Markdown.stories.tsx delete mode 100644 stories/deprecated-components/Marketing/Marketing.mdx delete mode 100644 stories/deprecated-components/Marketing/Marketing.stories.tsx delete mode 100644 stories/deprecated-components/Pagination/Pagination.mdx delete mode 100644 stories/deprecated-components/Pagination/Pagination.stories.tsx delete mode 100644 stories/deprecated-components/SelectMenu/SelectMenu.mdx delete mode 100644 stories/deprecated-components/SelectMenu/SelectMenu.stories.tsx delete mode 100644 stories/deprecated-components/SideNav/SideNav.mdx delete mode 100644 stories/deprecated-components/SideNav/SideNav.stories.tsx delete mode 100644 stories/deprecated-components/SubNav/SubNav.mdx delete mode 100644 stories/deprecated-components/SubNav/SubNav.stories.tsx delete mode 100644 stories/deprecated-components/Toast/Toast.mdx delete mode 100644 stories/deprecated-components/Toast/Toast.stories.tsx delete mode 100644 stories/deprecated-components/Tooltip/Tooltip.mdx delete mode 100644 stories/deprecated-components/Tooltip/Tooltip.stories.tsx delete mode 100644 stories/helpers/ColorBlock.jsx delete mode 100644 stories/helpers/ConditionalWrapper.jsx delete mode 100644 stories/helpers/code-snippet-html-helper.js delete mode 100644 stories/helpers/pageLayoutBehavior.jsx delete mode 100644 stories/helpers/storybook-styles.scss delete mode 100644 stories/helpers/useToggle.jsx delete mode 100644 stories/principles/Accessibility.mdx delete mode 100644 stories/principles/HTML.mdx delete mode 100644 stories/principles/Principles.mdx delete mode 100644 stories/principles/SCSS.mdx delete mode 100644 stories/static/color-image.svg delete mode 100644 stories/static/components-image copy.svg delete mode 100644 stories/static/components-image.svg delete mode 100644 stories/static/hero-illustration.svg delete mode 100644 stories/static/objects-image.svg delete mode 100644 stories/static/spacing-image.svg delete mode 100644 stories/static/typography-image.png delete mode 100644 stories/static/utilities-image.svg delete mode 100644 stories/support/Breakpoints.mdx delete mode 100644 stories/support/Deprecations.mdx delete mode 100644 stories/support/Linting.mdx delete mode 100644 stories/support/Prototyping.mdx delete mode 100644 stories/support/Spacing.mdx delete mode 100644 stories/support/Theming.mdx delete mode 100644 stories/support/Typography.mdx delete mode 100644 stories/utilities/Animation.stories.jsx delete mode 100644 stories/utilities/Border.stories.jsx delete mode 100644 stories/utilities/Color.stories.jsx delete mode 100644 stories/utilities/Details.stories.jsx delete mode 100644 stories/utilities/Flexbox.stories.jsx delete mode 100644 stories/utilities/Grid.stories.jsx delete mode 100644 stories/utilities/Layout.stories.jsx delete mode 100644 stories/utilities/Margin.stories.jsx delete mode 100644 stories/utilities/Padding.stories.jsx delete mode 100644 stories/utilities/Shadow.stories.jsx delete mode 100644 stories/utilities/Typography.stories.jsx diff --git a/.babelrc.json b/.babelrc.json deleted file mode 100644 index f756c6fe2f..0000000000 --- a/.babelrc.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "sourceType": "unambiguous", - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "chrome": 100 - } - } - ], - "@babel/preset-react" - ], - "plugins": [] -} \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index c82281bc76..0000000000 --- a/.storybook/main.js +++ /dev/null @@ -1,27 +0,0 @@ -/** @type { import('@storybook/react-webpack5').StorybookConfig } */ -const config = { - stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - 'storybook-addon-pseudo-states', - { - name: '@storybook/addon-styling', - options: { - sass: { - implementation: require('sass'), - }, - }, - }, - ], - framework: { - name: '@storybook/react-webpack5', - options: {}, - }, - docs: { - autodocs: 'tag', - }, - staticDirs: ['../stories/static'], -} -export default config diff --git a/.storybook/manager.js b/.storybook/manager.js deleted file mode 100644 index 65340e9bc3..0000000000 --- a/.storybook/manager.js +++ /dev/null @@ -1,6 +0,0 @@ -import {addons} from '@storybook/manager-api' -import theme from './theme' - -addons.setConfig({ - theme: theme, -}) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html deleted file mode 100644 index 3ed18e9949..0000000000 --- a/.storybook/preview-head.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/.storybook/preview.css b/.storybook/preview.css deleted file mode 100644 index de33cb81f0..0000000000 --- a/.storybook/preview.css +++ /dev/null @@ -1,9 +0,0 @@ -@import '@primer/primitives/tokens-next-private/css/base/size/size.css'; -@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/border.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/size.css'; -@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css'; -@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css'; diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 5c419d133e..0000000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,84 +0,0 @@ -import '../src/docs.scss' -import '../src/index.scss' -import '../src/base/index.scss' -import './preview.css' -import './storybook.css' -import clsx from 'clsx' - -/** @type { import('@storybook/react').Preview } */ -const preview = { - parameters: { - actions: {argTypesRegex: '^on[A-Z].*'}, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - }, -} - -const primerThemes = [ - {value: 'light', left: '☀️', title: 'Light'}, - {value: 'light_colorblind', left: '☀️', title: 'Light Protanopia & Deuteranopia'}, - {value: 'light_tritanopia', left: '☀️', title: 'Light Tritanopia'}, - {value: 'light_high_contrast', left: '☀️', title: 'Light High Contrast'}, - {value: 'dark', left: '🌗', title: 'Dark'}, - {value: 'dark_dimmed', left: '🌗', title: 'Dark Dimmed'}, - {value: 'dark_colorblind', left: '🌗', title: 'Dark Protanopia & Deuteranopia'}, - {value: 'dark_tritanopia', left: '🌗', title: 'Dark Tritanopia'}, - {value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'}, -] - -export const globalTypes = { - theme: { - name: 'Theme', - description: 'Switch themes', - defaultValue: 'light', - toolbar: { - icon: 'contrast', - items: [...primerThemes, {value: 'all', left: '', title: 'All'}], - showName: true, - dynamicTitle: true, - }, - }, -} - -export const decorators = [ - (Story, context) => { - document.body.setAttribute('data-color-mode', context.globals.theme.startsWith('light') ? 'light' : 'dark') - document.body.setAttribute( - 'data-light-theme', - context.globals.theme.startsWith('light') ? context.globals.theme : undefined, - ) - document.body.setAttribute( - 'data-dark-theme', - context.globals.theme.startsWith('dark') ? context.globals.theme : undefined, - ) - return ( - <> - {context.globals.theme === 'all' ? ( - primerThemes.map(({value: theme}) => ( -
- - {context.globals.theme === 'all' &&

{theme}

} -
- )) - ) : ( -
- -
- )} - - ) - }, -] - -export default preview diff --git a/.storybook/storybook.css b/.storybook/storybook.css deleted file mode 100644 index 508e16a502..0000000000 --- a/.storybook/storybook.css +++ /dev/null @@ -1,60 +0,0 @@ -.story-wrap { - font-family: var(--fontStack-system); - color: var(--fgColor-default); -} - -#storybook-preview-wrapper { - background-color: var(--bgColor-default) !important; - width: 100% !important; - height: 100% !important; -} - -.theme-wrap-grid { - display: grid; - grid-template-columns: repeat(4, minmax(var(--breakpoint-xsmall, 20rem), auto)); - grid-gap: 1px; - height: 100vh; -} - -.story-wrap-grid { - outline: 1px solid #d4d4d8; - padding-bottom: 40px; - position: relative; -} - -@media (max-width: calc(20rem * 4)) { - .theme-wrap-grid { - grid-template-columns: repeat(3, minmax(var(--breakpoint-xsmall, 20rem), auto)); - } -} - -@media (max-width: calc(20rem * 3)) { - .theme-wrap-grid { - grid-template-columns: repeat(2, minmax(var(--breakpoint-xsmall, 20rem), auto)); - } -} - -@media (max-width: calc(20rem * 2)) { - .theme-wrap-grid { - display: block; - } -} - -.theme-name { - position: absolute; - bottom: 0; - right: 0; - background-color: var(--bgColor-muted); - padding: var(--base-size-4) var(--base-size-8); - font: var(--text-caption-shorthand); - margin: 0; -} - -code { - padding: 0.2em 0.4em; - font-family: var(--fontStack-monospace); - font-size: var(--text-codeInline-size); - background-color: var(--bgColor-muted); - border-radius: var(--borderRadius-small); - font-weight: var(--base-text-weight-normal); -} diff --git a/.storybook/theme.js b/.storybook/theme.js deleted file mode 100644 index 359f6f65dd..0000000000 --- a/.storybook/theme.js +++ /dev/null @@ -1,13 +0,0 @@ -import {create} from '@storybook/theming' -import packageJson from '../package.json' - -export default create({ - brandTitle: ` -
- - ${packageJson.name}@${packageJson.version} -
- `, -}) diff --git a/package.json b/package.json index ec6c431e1c..7fe5c507ba 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,8 @@ "pretest": "yarn dist && script/pretest", "test": "NODE_OPTIONS=--experimental-vm-modules yarn jest", "release": "changeset publish", - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "storybook": "cd docs && yarn storybook", + "build-storybook": "cd docs && yarn build-storybook" }, "dependencies": { "@primer/primitives": "^7.11.12", @@ -54,14 +54,6 @@ "@csstools/postcss-sass": "5.0.1", "@github/prettier-config": "0.0.6", "@primer/stylelint-config": "^12.7.1", - "@storybook/addon-essentials": "^7.0.26", - "@storybook/addon-interactions": "^7.0.26", - "@storybook/addon-links": "^7.0.26", - "@storybook/addon-styling": "^1.3.2", - "@storybook/blocks": "^7.0.26", - "@storybook/react": "^7.0.26", - "@storybook/react-webpack5": "^7.0.26", - "@storybook/testing-library": "^0.0.14-next.2", "autoprefixer": "10.4.13", "chokidar-cli": "3.0.0", "clsx": "^1.2.1", @@ -70,7 +62,6 @@ "eslint-plugin-github": "4.6.0", "eslint-plugin-jest": "27.2.2", "eslint-plugin-prettier": "4.2.1", - "eslint-plugin-storybook": "^0.6.12", "filesize": "10.0.5", "front-matter": "4.0.2", "fs-extra": "11.1.0", @@ -89,8 +80,6 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "semver": "7.3.8", - "storybook": "^7.0.26", - "storybook-addon-pseudo-states": "^2.1.0", "stylelint": "15.7.0", "table": "6.8.1" }, diff --git a/stories/Contributing.mdx b/stories/Contributing.mdx deleted file mode 100644 index 43c4880b33..0000000000 --- a/stories/Contributing.mdx +++ /dev/null @@ -1,43 +0,0 @@ -While this contributing guide is for GitHub employees, all contributions from the community are welcome. - -## Adding new utilities - -Utilities do one thing well and one thing only. These styles are immutable and therefore often use the `!important` tag. For this reason we aim not to change the properties of utilities very often. They often form the building blocks of our pages and when we introduce new ones we need to do so with care as we'll likely need to live with these styles for a long time. When assessing whether there is a need to add a new utility, consider these additional questions: - -- How does this new utility fit within our existing set of utilities? If it is an addition to an existing set then it should follow the same naming convention. -- Is it for a property that would likely need to be changed at different breakpoints? If so it may need responsive options. -- If this style is part of a family of properties, do we need to consider adding the full set? Reasons for adding a full set could be that the other property values are often used, or that there would be a need to switch the property on and off (such as display or visibility). -- Does introducing this new utility cause any clashes or potential confusion with the use of existing utilities? If so, what steps can we take to avoid those issues. -- Does the utility have a connection with a set of variables? If so do the corresponding variables need to be updated? - -## Step-by-step instructions for adding new styles - -### Step 1: Open an issue - -It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue: - -1. What the pattern is, and how it's being used on GitHub.com. Post screenshots and/or URLs whenever possible. If you need help identifying where the pattern is used, call that out in the issue. -2. Why you think a new pattern is needed (this should answer the relevant questions above). -3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is. - -### Step 2: Design and build the new styles - -- When you're ready, spike out a branch and build out your new utility according to the style guide principles, ensuring you follow our naming convention for each of the styles. -- Refactor parts of the product where you think those new styles could be used to test they work for each use case. This does not mean for every instance, but enough of the key use cases to be sure the styles are flexible enough. To avoid blowing out your initial pull request we recommend you do larger amounts of refactoring in an additional branch. -- When you're ready for review, change your pull request from "Draft" to "Ready for review" - -## Storybook - -We use [Storybook](https://storybook.js.org/) to document and test our CSS. You can run Storybook locally by running `yarn storybook` and visiting the localhost server that is automatically started. - -Stories are written with React for better compatibility with Storybook. Each utility should have a story that demonstrates its use. Stories are located in the `stories` directory. - -### Versioning - -Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change. - -To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue). - -[semantic versioning]: https://semver.org -[script/test-deprecations.js]: https://github.com/primer/css/tree/main/script/test-deprecations.js -[deprecations.js]: https://github.com/primer/css/tree/main/deprecations.js diff --git a/stories/GettingStarted.mdx b/stories/GettingStarted.mdx deleted file mode 100644 index 7090c9abe3..0000000000 --- a/stories/GettingStarted.mdx +++ /dev/null @@ -1,127 +0,0 @@ -Primer CSS is [open-sourced on GitHub](https://github.com/primer/css) and [available on npm](https://www.npmjs.com/package/@primer/css). - -## Installing via npm - -We recommend installing Primer CSS with npm: `npm install --save @primer/css`. - -### Before you start - -Primer CSS requires npm version 3 or above. You can check which version you have by running `npm -v`. If you have a version that's older than 3.0, you can update it with `npm install npm@latest -g`. For more info, read the [npm install docs](https://docs.npmjs.com/getting-started/installing-node). - -### Initialize npm project - -Begin by initializing your project with a `package.json` file. You can read more on how to do this [in the npm documentation](https://docs.npmjs.com/getting-started/using-a-package.json#creating-a-packagejson). - -### Install Primer CSS - -Install the Primer CSS npm package modules by running `npm install @primer/css`. This will install all of the SCSS source files into the `node_modules/@primer/css` directory. - -```shell -npm install @primer/css --save -``` - -### Paths - -Here's what you need to know about how the files are structured in both git and in the published npm module: - -- In git, all of the SCSS source files live in the `src/` directory. -- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with: - - ```scss - @import '@primer/css/utilities/index.scss'; - ``` - -- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`). - -### For a Jekyll site - -Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with: - -```shell -jekyll -v -``` - -If you have an older version, follow the instructions in the [upgrading docs](https://jekyllrb.com/docs/upgrading/). - -Once you have Jekyll up and running, you will need to add this configuration to your `_config.yml` file. This let's the sass compiler know where your code lives. - -```yml -sass: - # Where you keep your scss files - sass_dir: assets/css/ - # Where sass should look for other scss - load_paths: - - node_modules/ -``` - -It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import one or more Primer CSS bundles and any other custom code you write. - -```scss -@import '@primer/css/core/index.scss'; -// These files live in the same directory as the index file. -@import './custom-1.scss'; -@import './custom-2.scss'; -``` - -Here's an example of how it might look if you installed only a few Primer CSS components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`. - -```scss -@import '@primer/css/utilities/index.scss'; -@import 'primer-buttons/index.scss'; - -// Import color variables for custom code -@import 'primer-support/index.scss'; - -// Override default blue -$blue: #0000ff; - -@import './custom-that-uses-primer-variables.scss'; - -.foo { - background: $blue; - font-size: $h2-size; - color: $text-gray; -} -``` - -Don't forget to add the compiled CSS to the `` section of your page. - -```html - -``` - -### Troubleshooting Jekyll errors - -Currently [jekyll-sass-converter](https://github.com/jekyll/jekyll-sass-converter) uses the [deprecated `LibSass` library](https://github.com/jekyll/jekyll-sass-converter#sass-implementations). Due to this you might run into issues. One way to deal with this is to use an experimental version of `jekyll-sass-converter` which uses [dart sass](https://sass-lang.com/dart-sass). - -1. Add `jekyll-sass-converter` and `sass-embedded` to `Gemfile`: - -```ruby -group :jekyll_plugins do - gem 'jekyll-sass-converter', github: 'jekyll/jekyll-sass-converter' - gem 'sass-embedded' -end -``` - -2. Run `bundle install` - -```bash -$ bundle install -``` - -3. Update your `_config.yml`: - -```yml -sass: - implementation: sass-embedded -``` - -Since GitHub pages is currently [locked to version `1.5.2` of `jekyll-sass-converter`](https://pages.github.com/versions/). If you run into errors you should look into [using the built CSS](#using-primer-css-on-a-static-site). - -## Using Primer CSS on a static site - -You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML: - -```html - -``` diff --git a/stories/Introduction.mdx b/stories/Introduction.mdx deleted file mode 100644 index fc79f44168..0000000000 --- a/stories/Introduction.mdx +++ /dev/null @@ -1,70 +0,0 @@ - - -# Introduction - -Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture. - -## Highly reusable, flexible styles - -Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into two categories: - -
-
- -

Utilities

-

Single purpose, immutable styles, that do one thing well.

-
-
- -

Components

-

Abstracted patterns for frequently used visual styles.

-
-
- -## Systematically designed for GitHub - -Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other. - -
-
- -
-

Highly composable spacing scale

-

- The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding - spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts - to work for every context. -

-
-
-
- -
-

Customizable typography

-

- Font size and line-height options work together to result in more sensible numbers. Font styles come in a range - of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to - change the visual styles while keeping markup semantic. -

-
-
-
- -
-

Meaningful color

-

- The color system allows us to add meaningful signals to content and interactions. Color variables and utilities - offer thematic styling options without being tied to structure. Text and background colors come in a range of - accessible combinations to ensure we build inclusive interfaces. -

-
-
-
- -## Structure - -Primer CSS is published to npm as `@primer/css`. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes: - -- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc. -- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators. -- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales. diff --git a/stories/components/Layout/AppFrame.stories.jsx b/stories/components/Layout/AppFrame.stories.jsx deleted file mode 100644 index 7542c26dfa..0000000000 --- a/stories/components/Layout/AppFrame.stories.jsx +++ /dev/null @@ -1,142 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -//import { AppHeaderTemplate as AppHeader } from '../App/AppHeader.stories' - -export default { - title: 'Components/Layout/AppFrame', - parameters: { - layout: 'fullscreen' - }, - - excludeStories: ['AppFrameTemplate'], - argTypes: { - - // Debug - - _debug: { - control: { - type: 'boolean', - } - }, - - a11yNavItems: { - type: 'array', - }, - - // Children - - headerChildren: { - description: 'creates a slot for header children', - table: { - category: 'HTML' - } - }, - subheaderChildren: { - description: 'creates a slot for subheader children', - table: { - category: 'HTML' - } - }, - bodyChildren: { - description: 'creates a slot for body children', - table: { - category: 'HTML' - } - }, - footerChildren: { - description: 'creates a slot for footer children', - table: { - category: 'HTML' - } - }, - }, -} - -export const AppFrameTemplate = ({ - _debug, - a11yNavItems, - headerChildren, - subheaderChildren, - bodyChildren, - footerChildren, -}) => { - - // Default values - a11yNavItems = a11yNavItems ?? [ - {url: '#start-of-content', label: 'Skip to content'}, - {url: '/', label: 'GitHub homepage'}, - ]; - - return ( - <> -
- -
- {a11yNavItems.map(link => ( - {link.label} - ))} -
- -
- -
- -
- {headerChildren} -
- -
- - {subheaderChildren && ( -
- {subheaderChildren} -
- )} - -
-
- {bodyChildren} -
-
-
- {footerChildren} -
-
- - {_debug && ( - <> - - - )} - - ); -}; - -export const Playground = AppFrameTemplate.bind({}) - -Playground.args = { - _debug: true, - headerChildren: "Header slot", - subheaderChildren: "Subheader slot", - bodyChildren: "Body slot", - footerChildren: "Footer slot", -}; \ No newline at end of file diff --git a/stories/components/Layout/LayoutAlpha.stories.jsx b/stories/components/Layout/LayoutAlpha.stories.jsx deleted file mode 100644 index 628b5dff66..0000000000 --- a/stories/components/Layout/LayoutAlpha.stories.jsx +++ /dev/null @@ -1,204 +0,0 @@ -import React from 'react' -import clsx from 'clsx' - -export default { - title: 'Components/Layout/Alpha', - excludeStories: ['LayoutAlphaTemplate'], - argTypes: { - container: { - control: { type: 'select' }, - options: ['full', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio' - }, - description: 'Wrapper around the entire component to define an optional maximum width.', - table: { - category: 'CSS' - } - }, - hasDivider: { - control: { type: 'boolean' }, - description: 'Whether to show a pane line divider.', - table: { - category: 'CSS' - } - }, - gutter: { - options: ['default', 'none', 'condensed', 'spacious'], - control: { - type: 'inline-radio' - }, - description: 'Sets the gap between columns.', - table: { - category: 'CSS' - } - }, - sidebarPosition: { - options: ['start', 'end'], - control: { - type: 'inline-radio' - }, - description: 'Sets the position of the sidebar.', - table: { - category: 'CSS' - } - }, - sidebarWidth: { - options: ['default', 'narrow', 'wide'], - control: { - type: 'inline-radio' - }, - description: 'Sets the width of the sidebar.', - table: { - category: 'CSS' - } - }, - mainWidth: { - options: ['full', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio' - }, - description: 'Sets the width of the main content area.', - table: { - category: 'CSS' - } - }, - flowRowUntil: { - options: ['sm', 'md', 'lg'], - control: { - type: 'inline-radio', - }, - description: 'Sets the maximum breakpoint at which the layout will flow as row.', - table: { - category: 'CSS' - } - }, - mainChildren: { - description: 'creates a slot for main children', - table: { - category: 'HTML' - } - }, - sidebarChildren: { - description: 'creates a slot for sidebar children', - table: { - category: 'HTML' - } - }, - } -} - -// build every component case here in the template (private api) -export const LayoutAlphaTemplate = ({ - container, - hasDivider, - gutter, - sidebarPosition, - sidebarWidth, - mainWidth, - flowRowUntil, - mainChildren, - sidebarChildren -}) => { - - // Default values - container = container ?? 'xl'; - hasDivider = hasDivider ?? false; - gutter = gutter ?? 'default'; - sidebarPosition = sidebarPosition ?? 'end'; - sidebarWidth = sidebarWidth ?? 'default'; - mainWidth = mainWidth ?? 'full'; - flowRowUntil = flowRowUntil ?? 'md'; - - // Leave `null` values for states that don't require a modifier class - container = (container === 'full') ? null : container; - hasDivider = (hasDivider === false) ? null : hasDivider; - gutter = (gutter === 'default') ? null : gutter; - sidebarWidth = (sidebarWidth === 'default') ? null : sidebarWidth; - mainWidth = (mainWidth === 'full') ? null : mainWidth; - flowRowUntil = (flowRowUntil === 'sm') ? null : flowRowUntil; - - return ( -
- {/* use {children} for wrapper component templates */} - <> -
- {mainWidth ? ( - <> -
-
- {mainChildren} -
-
- - ) : ( - <> - {mainChildren} - - )} -
-
-
{sidebarChildren}
- -
- ); -}; - -const sidebarPlaceholder = - <> -
- sidebar -
- ; - -const mainPlaceholder = - <> -
- main -
- ; - -// create a "playground" demo page that may set some defaults and allow story to access component controls -export const Playground = LayoutAlphaTemplate.bind({}) -Playground.args = { - container: 'full', - hasDivider: false, - gutter: 'default', - sidebarPosition: 'end', - sidebarWidth: 'default', - mainWidth: 'full', - flowRowUntil: 'md', - mainChildren: mainPlaceholder, - sidebarChildren: sidebarPlaceholder -} diff --git a/stories/components/Layout/LayoutBeta.stories.jsx b/stories/components/Layout/LayoutBeta.stories.jsx deleted file mode 100644 index c182bc25dd..0000000000 --- a/stories/components/Layout/LayoutBeta.stories.jsx +++ /dev/null @@ -1,538 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import PageLayoutBehavior from '../../helpers/pageLayoutBehavior.jsx' - -export default { - title: 'Components/Layout/Beta', - excludeStories: ['LayoutTemplate'], - argTypes: { - // Debug - - _debug: { - control: 'boolean', - description: 'Show background colors in regions for debugging' - }, - - // Structure - - containerWidth: { - options: ['full', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio', - labels: ['full', 'md', 'lg', 'xl'] - }, - description: - 'The maximum width of the page component. `full` sets it to full-width. Other values center `Layout` horizontally. Refer to [container utilities](https://primer.style/css/utilities/grid#containers) for reference.', - table: { - category: 'Structure' - } - }, - outerSpacing: { - options: ['none', 'normal', 'condensed'], - control: { - type: 'inline-radio' - }, - description: - 'Sets wrapper margins surrounding the component to distance itself from the viewport edges. `normal` sets the margin to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the margin at 16px. `none` sets the margin to 0.', - table: { - category: 'Structure' - } - }, - innerSpacing: { - options: ['none', 'normal', 'condensed'], - control: { - type: 'inline-radio' - }, - description: - 'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`. `none` sets the padding to 0.', - table: { - category: 'Structure' - } - }, - columnGap: { - options: ['none', 'normal', 'condensed'], - control: { - type: 'inline-radio' - }, - description: - 'Sets the gap between columns to distance them from each other. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.', - table: { - category: 'Structure' - } - }, - rowGap: { - options: ['none', 'normal', 'condensed'], - control: { - type: 'inline-radio' - }, - description: - 'Sets the gap below the header and above the footer. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.', - table: { - category: 'Structure' - } - }, - - // Responsive - - responsiveVariant: { - options: ['stackRegions', 'separateRegions'], - control: { - type: 'inline-radio' - }, - description: - '`responsiveVariant` defines how the layout component adapts to smaller viewports. `stackRegions` presents the content in a vertical flow, with `pane` and `content` vertically arranged. `separateRegions` presents `pane` and `content` as different pages on smaller viewports. Change the preview size from the toolbar to test it.', - table: { - category: 'Responsive' - } - }, - primaryRegion: { - options: ['content', 'pane'], - control: { - type: 'inline-radio' - }, - description: - 'When `responsiveVariant` is set to `separateRegions`, defines which region appears first on small viewports. `content` is default.', - table: { - category: 'Responsive' - } - }, - - // Pane - - hasPane: { - control: {type: 'boolean'}, - table: { - category: 'Pane' - } - }, - - paneWidth: { - options: ['default', 'narrow', 'wide'], - control: { - type: 'inline-radio' - }, - description: 'Defines the width of the pane', - table: { - category: 'Pane' - } - }, - panePosition: { - options: ['start', 'end'], - control: { - type: 'inline-radio' - }, - description: - 'Defines the position of the pane. `start` renders the pane on the left, and `end` renders it on the right.', - table: { - category: 'Pane' - } - }, - panePositionWhenNarrow: { - options: ['inherit', 'start', 'end'], - control: { - type: 'inline-radio' - }, - description: - 'If `responsiveVariant` is set to `stackRegions`, defines the position of the pane in narrow viewports. `start` puts the pane above `content`, and `end` puts it below `content`. `inherit` uses the same value from `panePosition`.', - table: { - category: 'Pane' - } - }, - hasPaneDivider: { - control: {type: 'boolean'}, - description: 'Whether to show a pane line divider.', - table: { - category: 'Pane' - } - }, - paneDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: - 'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Pane' - } - }, - paneIsSticky: { - control: {type: 'boolean'}, - description: 'Whether to make the pane sticky.', - table: { - category: 'Pane' - } - }, - - // Content - - contentWidth: { - options: ['full', 'sm', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio' - }, - description: - 'Defines the maximum width of the content region. `full` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.', - table: { - category: 'Content' - } - }, - - // Header - - hasHeader: { - control: {type: 'boolean'}, - table: { - category: 'Header' - } - }, - - hasHeaderDivider: { - control: {type: 'boolean'}, - description: 'Whether to show a header divider.', - table: { - category: 'Header' - } - }, - - headerDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: - 'Defines how the `header` divider should look on narrow viewports. `inherit` renders a `line` if `hasHeaderDivider` is true. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Header' - } - }, - - // Footer - - hasFooter: { - control: {type: 'boolean'}, - table: { - category: 'Footer' - } - }, - - hasFooterDivider: { - control: {type: 'boolean'}, - description: 'Whether to show a footer divider.', - table: { - category: 'Footer' - } - }, - - footerDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: - 'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Footer' - } - }, - - // HTML - - headerChildren: { - description: 'creates a slot for header children', - table: { - category: 'HTML' - } - }, - contentChildren: { - description: 'creates a slot for content children', - table: { - category: 'HTML' - } - }, - paneChildren: { - description: 'creates a slot for pane children', - table: { - category: 'HTML' - } - }, - footerChildren: { - description: 'creates a slot for footer children', - table: { - category: 'HTML' - } - } - } -} - -const layoutClassName = 'PageLayout' - -// build every component case here in the template (private api) -export const LayoutTemplate = ({ - // Debug - _debug, - - // Wrapper - containerWidth, - - // Spacing and borders - outerSpacing, - innerSpacing, - columnGap, - rowGap, - - // Pane - hasPane, - paneWidth, - panePosition, - panePositionWhenNarrow, - hasPaneDivider, - paneDividerWhenNarrow, - paneIsSticky, - - // Header - hasHeader, - hasHeaderDivider, - headerDividerWhenNarrow, - - // Footer - hasFooter, - hasFooterDivider, - footerDividerWhenNarrow, - - // Content - contentWidth, - - // Responsive - responsiveVariant, - primaryRegion, - - // Children - headerChildren, - contentChildren, - paneChildren, - footerChildren -}) => { - const containerClass = { - full: '', - md: 'container-md', - lg: 'container-lg', - xl: 'container-xl' - } - - // Default values - containerWidth = containerWidth ?? 'xl' - outerSpacing = outerSpacing ?? 'normal' - innerSpacing = innerSpacing ?? 'none' - columnGap = columnGap ?? 'normal' - rowGap = rowGap ?? 'normal' - hasPane = hasPane ?? true - panePosition = panePosition ?? 'end' - panePositionWhenNarrow = panePositionWhenNarrow ?? 'inherit' - responsiveVariant = responsiveVariant ?? 'stackRegions' - primaryRegion = primaryRegion ?? 'content' - - // Leave `null` values for states that don't require a modifier class - outerSpacing = outerSpacing === 'none' ? null : outerSpacing - innerSpacing = innerSpacing === 'none' ? null : innerSpacing - paneWidth = paneWidth === 'default' ? null : paneWidth - contentWidth = contentWidth === 'full' ? null : contentWidth - headerDividerWhenNarrow = headerDividerWhenNarrow === 'none' ? null : headerDividerWhenNarrow - footerDividerWhenNarrow = footerDividerWhenNarrow === 'none' ? null : footerDividerWhenNarrow - - // Inherit value for responsive props - panePositionWhenNarrow = panePositionWhenNarrow === 'inherit' ? panePosition : panePositionWhenNarrow - - if (hasPaneDivider) { - paneDividerWhenNarrow = paneDividerWhenNarrow === 'inherit' ? 'line' : paneDividerWhenNarrow - } - - if (hasHeaderDivider) { - headerDividerWhenNarrow = headerDividerWhenNarrow === 'inherit' ? 'line' : headerDividerWhenNarrow - } - - if (hasFooterDivider) { - footerDividerWhenNarrow = footerDividerWhenNarrow === 'inherit' ? 'line' : footerDividerWhenNarrow - } - - PageLayoutBehavior() - - return ( - <> -
-
- {/* Header */} - {hasHeader && ( -
- {headerChildren} -
- )} - - {hasPane && ( -
- {/* pane if rendered first */} - {panePosition === 'start' && ( -
- {paneChildren} -
- )} - - {/* content */} -
- {contentWidth ? ( - <> -
-
{contentChildren}
-
- - ) : ( - <>{contentChildren} - )} -
- - {/* pane if rendered last */} - {panePosition === 'end' && ( -
- {paneChildren} -
- )} -
- ) || ( - <> - {/* single-column layout */} -
- {contentWidth ? ( - <> -
{contentChildren}
- - ) : ( - <>{contentChildren} - )} -
- - )} - - {/* footer */} - {hasFooter && ( -
- {footerChildren} -
- )} -
- - {/* debug */} - {_debug && ( - - )} -
- - ) -} - -export const Playground = LayoutTemplate.bind({}) -Playground.storyName = 'Playground' -Playground.parameters = { - layout: 'fullscreen' -} -Playground.args = { - _debug: true, - containerWidth: 'xl', - outerSpacing: 'normal', - innerSpacing: 'none', - columnGap: 'normal', - rowGap: 'normal', - - responsiveVariant: 'stackRegions', - primaryRegion: 'content', - - hasPane: true, - paneWidth: 'default', - panePosition: 'end', - panePositionWhenNarrow: 'inherit', - hasPaneDivider: false, - paneDividerWhenNarrow: 'inherit', - paneIsSticky: false, - - contentWidth: 'full', - - hasHeader: true, - hasHeaderDivider: false, - headerDividerWhenNarrow: 'inherit', - - hasFooter: true, - hasFooterDivider: false, - footerDividerWhenNarrow: 'inherit', - - contentChildren: 'content', - paneChildren: 'pane', - headerChildren: 'header', - footerChildren: 'footer' -} diff --git a/stories/components/Layout/PageLayout.stories.jsx b/stories/components/Layout/PageLayout.stories.jsx deleted file mode 100644 index f463d999fc..0000000000 --- a/stories/components/Layout/PageLayout.stories.jsx +++ /dev/null @@ -1,352 +0,0 @@ -// create a "playground" demo page that may set some defaults and allow story to access component controls -import React from 'react' -import clsx from 'clsx' -import {LayoutTemplate} from './LayoutBeta.stories' - -export default { - title: 'Components/Layout/Beta/PageLayout', - excludeStories: ['PageLayoutTemplate'], - argTypes: { - - // Debug - - _debug: { - control: 'boolean', - description: 'Show background colors in regions for debugging', - }, - - // Structure - - containerWidth: { - options: ['full', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio', - labels: ['full', 'md', 'lg', 'xl'] - }, - description: 'Define the maximum width of the component. `full` sets it to full-width. Other values center `Layout` horizontally. Refer to [container utilities](https://primer.style/css/utilities/grid#containers) for reference.', - table: { - category: 'Structure' - } - }, - - padding: { - options: ['normal', 'condensed', 'none'], - control: { - type: 'inline-radio' - }, - description: 'Sets container spacing surrounding the component to distance itself from the viewport edges. `normal` sets the spacing to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the spacing at 16px.', - table: { - category: 'Structure' - } - }, - - columnGap: { - options: ['normal', 'condensed', 'none'], - control: { - type: 'inline-radio' - }, - description: 'Sets the gap between columns to distance them from each other. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px.', - table: { - category: 'Structure' - } - }, - rowGap: { - options: ['normal', 'condensed', 'none'], - control: { - type: 'inline-radio' - }, - description: 'Sets the gap below the header and above the footer. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px.', - table: { - category: 'Structure' - } - }, - - // Responsive - - responsiveVariant: { - options: ['stackRegions', 'separateRegions'], - control: { - type: 'inline-radio' - }, - description: '`responsiveVariant` defines how the layout component adapts to smaller viewports. `stackRegions` presents the content in a vertical flow, with `pane` and `content` vertically arranged. `separateRegions` presents `pane` and `content` as different pages on smaller viewports. Change the preview size from the toolbar to test it.', - table: { - category: 'Responsive' - } - }, - - primaryRegion: { - options: ['content', 'pane'], - control: { - type: 'inline-radio' - }, - description: 'When `responsiveVariant` is set to `separateRegions`, defines which region appears first on small viewports. `content` is default.', - table: { - category: 'Responsive' - } - }, - - // Pane - - hasPane: { - control: {type: 'boolean'}, - table: { - category: 'Pane' - } - }, - - panePosition: { - options: ['start', 'end'], - control: { - type: 'inline-radio' - }, - description: 'Defines the position of the pane. `start` renders the pane on the left, and `end` renders it on the right.', - table: { - category: 'Pane', - } - }, - panePositionWhenNarrow: { - options: ['inherit', 'start', 'end'], - control: { - type: 'inline-radio', - }, - description: 'If `responsiveVariant` is set to `stackRegions`, defines the position of the pane in narrow viewports. `start` puts the pane above `content`, and `end` puts it below `content`. `inherit` uses the same value from `panePosition`.', - table: { - category: 'Pane' - } - }, - paneWidth: { - options: ['default', 'narrow', 'wide'], - control: { - type: 'inline-radio' - }, - description: 'Defines the width of the pane', - table: { - category: 'Pane' - } - }, - hasPaneDivider: { - control: { type: 'boolean' }, - description: 'Whether to show a pane line divider.', - table: { - category: 'Pane' - } - }, - paneDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: 'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Pane' - } - }, - - // Content - - contentWidth: { - options: ['full', 'sm', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio' - }, - description: 'Defines the maximum width of the content region. `full` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.', - table: { - category: 'Content' - } - }, - - // Header - - hasHeader: { - control: { type: 'boolean' }, - table: { - category: 'Header' - } - }, - - hasHeaderDivider: { - control: { type: 'boolean' }, - description: 'Whether to show a header divider.', - table: { - category: 'Header' - } - }, - - headerDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: 'Defines how the `header` divider should look on narrow viewports. `inherit` renders a `line` if `hasHeaderDivider` is true. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Header' - } - }, - - // Footer - - hasFooter: { - control: { type: 'boolean' }, - table: { - category: 'Footer' - } - }, - - hasFooterDivider: { - control: { type: 'boolean' }, - description: 'Whether to show a footer divider.', - table: { - category: 'Footer' - } - }, - - footerDividerWhenNarrow: { - options: ['inherit', 'none', 'line', 'filled'], - control: { - type: 'inline-radio' - }, - description: 'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-friendly divider.', - table: { - category: 'Footer' - } - }, - - // HTML - - headerChildren: { - description: 'creates a slot for header children', - table: { - category: 'HTML' - } - }, - contentChildren: { - description: 'creates a slot for content children', - table: { - category: 'HTML' - } - }, - paneChildren: { - description: 'creates a slot for pane children', - table: { - category: 'HTML' - } - }, - footerChildren: { - description: 'creates a slot for footer children', - table: { - category: 'HTML' - } - } - }, -}; - -export const PageLayoutTemplate = ({ - _debug, - containerWidth, - padding, - columnGap, - rowGap, - responsiveVariant, - primaryRegion, - hasPane, - paneWidth, - panePosition, - panePositionWhenNarrow, - hasPaneDivider, - paneDividerWhenNarrow, - contentWidth, - hasHeader, - hasHeaderDivider, - headerDividerWhenNarrow, - hasFooter, - hasFooterDivider, - footerDividerWhenNarrow, - contentChildren, - paneChildren, - headerChildren, - footerChildren -}) => { - return ( - <> - - - ); -}; - -export const Playground = PageLayoutTemplate.bind({}); -Playground.storyName = 'Playground'; -Playground.parameters = { - layout: 'fullscreen', -}; -Playground.args = { - _debug: true, - - // Structure - containerWidth: 'xl', - padding: 'normal', - columnGap: 'normal', - rowGap: 'normal', - - // Responsive - responsiveVariant: 'stackRegions', - primaryRegion: 'content', - - // Pane - hasPane: true, - panePosition: 'end', - panePositionWhenNarrow: 'inherit', - paneWidth: 'default', - hasPaneDivider: false, - paneDividerWhenNarrow: 'inherit', - - // Content - contentWidth: 'full', - - // Header - hasHeader: false, - hasHeaderDivider: false, - headerDividerWhenNarrow: 'inherit', - - // Footer - hasFooter: false, - hasFooterDivider: false, - footerDividerWhenNarrow: 'inherit', - - contentChildren: 'content', - paneChildren: 'pane', - headerChildren: 'header', - footerChildren: 'footer' - -} diff --git a/stories/components/Layout/SplitPageLayout.stories.jsx b/stories/components/Layout/SplitPageLayout.stories.jsx deleted file mode 100644 index 30f5792680..0000000000 --- a/stories/components/Layout/SplitPageLayout.stories.jsx +++ /dev/null @@ -1,182 +0,0 @@ -// create a "playground" demo page that may set some defaults and allow story to access component controls -import React from 'react' -import clsx from 'clsx' -import {LayoutTemplate} from './LayoutBeta.stories' - -export default { - title: 'Components/Layout/Beta/SplitPageLayout', - excludeStories: ['SplitPageLayoutTemplate'], - argTypes: { - // Structure - - padding: { - options: ['normal', 'condensed', 'none'], - control: { - type: 'inline-radio' - }, - description: - 'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`.', - table: { - category: 'Structure' - } - }, - - primaryRegion: { - options: ['content', 'pane'], - control: { - type: 'inline-radio' - }, - description: 'Defines which region appears first on small viewports. `content` is default.', - table: { - category: 'Responsive' - } - }, - - // Pane - - hasPane: { - control: {type: 'boolean'}, - table: { - category: 'Pane' - } - }, - - paneWidth: { - options: ['default', 'narrow', 'wide'], - control: { - type: 'inline-radio' - }, - description: 'Defines the width of the pane.', - table: { - category: 'Pane' - } - }, - - // Content - - contentWidth: { - options: ['full', 'sm', 'md', 'lg', 'xl'], - control: { - type: 'inline-radio' - }, - description: - 'Defines the maximum width of the content region. `full` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.', - table: { - category: 'Content' - } - }, - - // Header - - hasHeader: { - control: { type: 'boolean' }, - table: { - category: 'Header' - } - }, - - // Footer - - hasFooter: { - control: { type: 'boolean' }, - table: { - category: 'Footer' - } - }, - - // HTML - - contentChildren: { - description: 'creates a slot for content children', - table: { - category: 'HTML' - } - }, - paneChildren: { - description: 'creates a slot for pane children', - table: { - category: 'HTML' - } - } - } -} - -export const SplitPageLayoutTemplate = ({ - _debug, - padding, - primaryRegion, - hasPane, - paneWidth, - paneIsSticky, - contentWidth, - hasHeader, - hasFooter, - contentChildren, - paneChildren, - headerChildren, - footerChildren -}) => { - return ( - <> - - - ) -} - -export const Playground = SplitPageLayoutTemplate.bind({}) -Playground.storyName = 'Playground' -Playground.parameters = { - layout: 'fullscreen' -} -Playground.args = { - _debug: true, - - // Structure - padding: 'normal', - - // Responsive - primaryRegion: 'content', - - // Pane - hasPane: true, - paneWidth: 'wide', - paneIsSticky: true, - - // Content - contentWidth: 'full', - - // Header - hasHeader: false, - - // Footer - hasFooter: false, - - // Children - contentChildren: 'content', - paneChildren: 'pane', - headerChildren: 'header', - footerChildren: 'footer', -} diff --git a/stories/components/Layout/Stack.stories.jsx b/stories/components/Layout/Stack.stories.jsx deleted file mode 100644 index 396932488d..0000000000 --- a/stories/components/Layout/Stack.stories.jsx +++ /dev/null @@ -1,607 +0,0 @@ -import React from 'react' -import clsx from 'clsx' - -export default { - title: 'Components/Layout/Stack', - excludeStories: ['StackTemplate'], - argTypes: { - - // Debug - - _debug: { - control: { - type: 'boolean', - }, - table: { - category: 'Debug' - }, - }, - - _height: { - control: { - type: 'number', - }, - table: { - category: 'Debug' - }, - }, - - _width: { - control: { - type: 'number', - }, - table: { - category: 'Debug' - }, - }, - - // Direction - direction: { - options: ['inline', 'block'], - control: { - type: 'inline-radio', - }, - description: 'Sets how elements inside `Stack` are placed, either horizontally (`inline`) or vertically (`block`). This property follows the writing mode.', - table: { - category: 'Properties', - defaultValue: { - summary: 'block', - } - } - }, - - // Gap - gap: { - options: ['none', 'condensed', 'normal', 'spacious'], - control: { - type: 'inline-radio', - }, - description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units. -- \`none\`: 0 -- \`condensed\`: \`var(--stack-gap-condensed, 8px)\`, -- \`normal\`: \`var(--stack-gap-normal, 16px)\` (default) -- \`spacious\`: \`var(--stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports) - - `, - table: { - category: 'Properties', - defaultValue: { - summary: 'normal', - } - } - }, - // gap_custom: { - // control: { - // type: 'text' - // }, - // description: 'A custom value to `gap`. Refer to [Primer Primitives](https://primer.style/primitives/spacing) for other spacing tokens. Example: `var(--base-size-12, 12px)`.', - // table: { - // category: 'Properties', - // }, - // }, - - // Align - align: { - options: ['stretch', 'start', 'center', 'end', 'baseline'], - control: { - type: 'inline-radio' - }, - description: `Sets the alignment between items in the cross-axis of the specified direction. For example: -- If \`direction\` is set to \`block\` (stacks vertically), it controls the horizontal alignment (left, center, right). -- If \`direction\` is set to \`inline\` (stacks horizontally), it controls the vertical alignment (top, center, bottom). - -This property behavior is equivalent to the \`align-items\` Flexbox property.`, - table: { - category: 'Properties', - defaultValue: { - summary: 'stretch', - } - } - }, - - // Align wrap - alignWrap: { - options: ['start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio' - }, - description: 'Sets how stack lines are distributed, if they `wrap` into multiple lines. This has equivalent behavior to the `align-content` Flexbox property.', - table: { - category: 'Properties', - defaultValue: { - summary: 'start', - } - } - }, - - // Spread - spread: { - options: ['start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio', - }, - description: 'Sets how items will be distributed in the stacking direction.', - table: { - category: 'Properties', - defaultValue: { - summary: 'start', - }, - }, - }, - - // Wrap - wrap: { - options: ['wrap', 'nowrap'], - control: { - type: 'inline-radio' - }, - description: 'Sets whether items are forced onto one line or can wrap onto multiple lines.', - table: { - category: 'Properties', - defaultValue: { - summary: 'nowrap', - } - } - }, - - // Divider - showDividers: { - control: { - type: 'boolean' - }, - description: `Whether a divider between items is shown or not. - -_Note: the presence of a divider duplicates the \`gap\` between items._`, - table: { - category: 'Properties', - defaultValue: { - summary: 'false', - } - } - }, - dividerAriaRole: { - options: ['presentation', 'separator'], - control: { - type: 'inline-radio' - }, - description: 'Sets which ARIA role will be used for the divider.', - table: { - category: 'Properties', - defaultValue: { - summary: 'presentation', - } - } - }, - - // Responsive properties / narrow - - narrow_direction: { - options: ['inherit', 'inline', 'block'], - control: { - type: 'inline-radio', - }, - description: 'Override `direction` on narrow viewports', - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - narrow_gap: { - options: ['inherit', 'none', 'condensed', 'normal'], - control: { - type: 'inline-radio', - }, - description: 'Override `gap` on narrow viewports', - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - // narrow_gap_custom: { - // control: { - // type: 'text' - // }, - // description: 'Override a custom value for `gap` for narrow viewports', - // table: { - // category: 'Narrow viewport properties' - // }, - // }, - - narrow_align: { - options: ['inherit', 'stretch', 'start', 'center', 'end', 'baseline'], - control: { - type: 'inline-radio' - }, - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit', - } - }, - }, - - narrow_alignWrap: { - options: ['inherit', 'start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio' - }, - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit', - } - }, - }, - - narrow_spread: { - options: ['inherit', 'start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio', - }, - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - narrow_wrap: { - options: ['inherit', 'wrap', 'nowrap'], - control: { - type: 'inline-radio' - }, - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - narrow_showDividers: { - control: { - type: 'boolean' - }, - table: { - category: 'Narrow viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - // Responsive properties / wide - - wide_direction: { - options: ['inherit', 'inline', 'block'], - control: { - type: 'inline-radio', - }, - description: 'Override `direction` on wide viewports', - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - wide_gap: { - options: ['inherit', 'none', 'condensed', 'normal', 'spacious'], - control: { - type: 'inline-radio', - }, - description: 'Override `gap` on wide viewports', - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - // wide_gap_custom: { - // control: { - // type: 'text' - // }, - // description: 'Override a custom value for `gap` for wide viewports', - // table: { - // category: 'wide viewport properties' - // }, - // }, - - wide_align: { - options: ['inherit', 'stretch', 'start', 'center', 'end', 'baseline'], - control: { - type: 'inline-radio' - }, - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit', - } - }, - }, - - wide_alignWrap: { - options: ['inherit', 'start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio' - }, - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit', - } - }, - }, - - wide_spread: { - options: ['inherit', 'start', 'center', 'end', 'distribute', 'distributeEvenly'], - control: { - type: 'inline-radio', - }, - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - wide_wrap: { - options: ['inherit', 'wrap', 'nowrap'], - control: { - type: 'inline-radio' - }, - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - wide_showDividers: { - control: { - type: 'boolean' - }, - table: { - category: 'wide viewport properties', - defaultValue: { - summary: 'inherit' - } - }, - }, - - // Children - children: { - description: 'A slot for children elements.', - table: { - category: 'HTML' - } - } - }, -}; - -export const StackTemplate = ({ - _debug, - _height, - _width, - direction, - gap, - //gap_custom, - align, - alignWrap, - spread, - wrap, - showDividers, - dividerAriaRole, - - narrow_direction, - narrow_gap, - //narrow_gap_custom, - narrow_align, - narrow_alignWrap, - narrow_spread, - narrow_wrap, - narrow_showDividers, - - wide_direction, - wide_gap, - //wide_gap_custom, - wide_align, - wide_alignWrap, - wide_spread, - wide_wrap, - wide_showDividers, - - children -}) => { - - let custom_styles = {}; - - // Default values - direction = direction ?? 'block'; - gap = gap ?? 'normal'; - alignWrap = alignWrap ?? 'start'; - dividerAriaRole = dividerAriaRole ?? 'presentation'; - - // Default narrow values - narrow_direction = narrow_direction ?? 'inherit'; - narrow_gap = narrow_gap ?? 'inherit'; - narrow_align = narrow_align ?? 'inherit'; - narrow_alignWrap = narrow_alignWrap ?? 'inherit'; - narrow_spread = narrow_spread ?? 'inherit'; - narrow_wrap = narrow_wrap ?? 'inherit'; - narrow_showDividers = narrow_showDividers ?? 'inherit'; - - // Default wide values - wide_direction = wide_direction ?? 'inherit'; - wide_gap = wide_gap ?? 'inherit'; - wide_align = wide_align ?? 'inherit'; - wide_alignWrap = wide_alignWrap ?? 'inherit'; - wide_spread = wide_spread ?? 'inherit'; - wide_wrap = wide_wrap ?? 'inherit'; - wide_showDividers = wide_showDividers ?? 'inherit'; - - // Custom gap - not available - // if (gap === 'custom') { - // custom_styles['--Stack-gap-whenRegular'] = gap_custom; - // } - // if (narrow_gap === 'custom') { - // custom_styles['--Stack-gap-whenNarrow'] = narrow_gap_custom; - // } - // if (wide_gap === 'custom') { - // custom_styles['--Stack-gap-whenWide'] = wide_gap_custom; - // } - - // Null value for states that don't require a modifier class - align = align === 'stretch' ? null : align; - alignWrap = alignWrap === 'start' ? null : alignWrap; - spread = spread === 'start' ? null : spread; - wrap = wrap === 'nowrap' ? null : wrap; - gap = gap === 'normal' ? null : gap; - - // Null value for inherit responsive values - narrow_direction = narrow_direction === 'inherit' ? direction : narrow_direction; - narrow_gap = narrow_gap === 'inherit' ? gap : narrow_gap; - narrow_align = narrow_align === 'inherit' ? align : narrow_align; - narrow_alignWrap = narrow_alignWrap === 'inherit' ? alignWrap : narrow_alignWrap; - narrow_spread = narrow_spread === 'inherit' ? spread : narrow_spread; - narrow_wrap = narrow_wrap === 'inherit' ? wrap : narrow_wrap; - narrow_showDividers = narrow_showDividers === 'inherit' ? showDividers : narrow_showDividers; - - wide_direction = wide_direction === 'inherit' ? null : wide_direction; - wide_gap = wide_gap === 'inherit' ? null : wide_gap; - wide_align = wide_align === 'inherit' ? null : wide_align; - wide_alignWrap = wide_alignWrap === 'inherit' ? null : wide_alignWrap; - wide_spread = wide_spread === 'inherit' ? null : wide_spread; - wide_wrap = wide_wrap === 'inherit' ? null : wide_wrap; - wide_showDividers = wide_showDividers === 'inherit' ? null : wide_showDividers; - - // Dividers logic - showDividers = wrap === 'wrap' ? false : showDividers; - narrow_showDividers = narrow_wrap === 'wrap' ? false : narrow_showDividers; - wide_showDividers = wide_wrap === 'wrap' ? false : wide_showDividers; - - const hasDividers = showDividers || narrow_showDividers || wide_showDividers; - - return ( - <> -
- {children} - - {!children && ( - <> -
1
- {hasDividers && (
)} -
2
- {hasDividers && (
)} -
3
- {hasDividers && (
)} -
4
- {hasDividers && (
)} -
5
- {hasDividers && (
)} -
6
- - )} -
- - {_debug && ( - <> - - - )} - - ); -}; - -export const Playground = StackTemplate.bind({}) -Playground.args = { - _debug: true, - direction: "block", - gap: "normal", - align: "stretch", -}; diff --git a/stories/components/Layout/StackExamples.stories.jsx b/stories/components/Layout/StackExamples.stories.jsx deleted file mode 100644 index 9d7322ef01..0000000000 --- a/stories/components/Layout/StackExamples.stories.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react' -import { - StackTemplate -} from './Stack.stories' - -export default { - title: 'Components/Layout/Stack/Examples' -} - -export const ButtonInlineStack = StackTemplate.bind({}) -ButtonInlineStack.args = { - direction: "inline", - gap: "condensed", - children: ( - <> - - - - - ) -}; - -export const PageSections = StackTemplate.bind({}) -PageSections.args = { - direction: "block", - gap: "normal", - children: ( - <> -
Section 1
-
Section 2
-
Section 3
- - ) -}; - -export const Composition = StackTemplate.bind({}) -Composition.args = { - direction: "block", - gap: "normal", - children: ( - <> - - -

Heading

-
Lorem ipsum dolor sit amet avec consequer domulus sit lorem ipsum dolor sit amet.
- - Inline labels set to wrap - Label 2 - Label 3 - Label 4 - Label 5 - - )} /> - - )} /> -
- -

Heading

-
Lorem ipsum dolor sit amet avec consequer domulus sit lorem ipsum dolor sit amet.
- - Inline labels set to wrap - Label 2 - Label 3 - Label 4 - Label 5 - - )} /> - - )} /> - - )} /> - - ) -}; \ No newline at end of file diff --git a/stories/components/Layout/StackFeatures.stories.jsx b/stories/components/Layout/StackFeatures.stories.jsx deleted file mode 100644 index 96158e7e17..0000000000 --- a/stories/components/Layout/StackFeatures.stories.jsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from 'react' -import { - StackTemplate -} from './Stack.stories' - -export default { - title: 'Components/Layout/Stack/Features' -} - -export const DirectChildren = StackTemplate.bind({}) -DirectChildren.args = { - direction: "block", - gap: "normal", - narrow_gap: "condensed", - children: ( - <> -
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
- - ) -}; - -export const StackItems = StackTemplate.bind({}) -StackItems.args = { - direction: "inline", - gap: "normal", - wrap: "wrap", - narrow_gap: "condensed", - children: ( - <> -
-
Item 1
-
-
-
Item 2
-
-
-
Item 3
-
-
-
Item 4
-
-
-
Item 5
-
- - ) -}; - -export const ExpandStackItem = StackTemplate.bind({}) -ExpandStackItem.args = { - direction: "inline", - wrap: "wrap", - gap: "normal", - narrow_gap: "condensed", - children: ( - <> -
-
Item 1 (expand)
-
-
-
Item 2
-
-
-
Item 3
-
-
-
Item 4
-
-
-
Item 5
-
- - ) -}; - -export const ExpandStackItems = StackTemplate.bind({}) -ExpandStackItems.args = { - direction: "inline", - wrap: "wrap", - gap: "normal", - narrow_gap: "condensed", - children: ( - <> -
-
Item 1 (expand)
-
-
-
Item 2
-
-
-
Item 3
-
-
-
Item 4
-
-
-
Item 5 (expand)
-
- - ) -}; - -export const ContentOverflow = StackTemplate.bind({}) -ContentOverflow.args = { - direction: "block", - gap: "normal", - narrow_gap: "condensed", - children: ( - <> -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id faucibus sapien. Nullam gravida tortor eget lacinia volutpat. Vestibulum efficitur lorem non ex ultricies accumsan. Vestibulum porttitor nunc non tellus auctor rutrum. Morbi nec augue turpis. Vestibulum pulvinar semper risus id fermentum. Nulla egestas metus id nulla ullamcorper ullamcorper nec in urna. Duis tincidunt finibus quam, quis pretium odio pulvinar nec. Nullam malesuada sodales ligula. Nunc varius arcu et tellus condimentum interdum. -
-
-
-
- Ut eu ligula tellus. Integer efficitur sit amet lorem nec hendrerit. In hac habitasse platea dictumst. Donec aliquam posuere leo iaculis efficitur. Curabitur malesuada placerat est, sit amet fermentum quam dignissim congue. Etiam interdum, leo sit amet molestie ornare, nisi ipsum cursus odio, a auctor turpis dolor in justo. Nulla molestie dolor sit amet lectus faucibus gravida. Maecenas ac ornare magna, in ultricies lectus. Nam venenatis porta pellentesque. Nullam odio nisl, accumsan id rutrum in, ultricies ac purus. Donec nec blandit risus. -
-
-
-
- Ut cursus elit leo. Curabitur in lorem eget sem ullamcorper tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis vulputate turpis, fringilla congue felis laoreet tempus. Fusce tincidunt sodales lacus eu volutpat. Duis a semper neque. Aenean fermentum bibendum lectus, et aliquam ligula elementum vitae. Cras tempor lacus ipsum, vel sagittis sem laoreet et. Nulla vel tortor metus. Nullam euismod, dui non vulputate pulvinar, nisl sem malesuada dolor, vel malesuada nibh dui nec arcu. Nunc accumsan justo purus, non sodales massa blandit mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel mollis orci, at consequat ante. Curabitur pharetra euismod condimentum. Pellentesque mauris lacus, ultricies sit amet lacus a, congue scelerisque dui. -
-
-
-
- Vestibulum faucibus luctus bibendum. Nunc sodales interdum dapibus. Nulla aliquet nibh ac est pellentesque eleifend. Praesent ultricies eu nunc vel dignissim. Cras tempus porttitor arcu porttitor condimentum. Nulla imperdiet turpis nec tincidunt luctus. Curabitur in congue urna. Nulla vehicula nunc hendrerit, tristique est porta, tristique erat. Duis vel neque sed eros eleifend feugiat non eget metus. Curabitur elit nunc, condimentum et mollis vitae, vestibulum et lorem. Duis luctus tortor eu vulputate volutpat. Fusce egestas volutpat ante et lobortis. Integer scelerisque neque vitae lorem pellentesque elementum. Sed fringilla lacus at hendrerit tincidunt. Vestibulum pretium, odio nec commodo imperdiet, nibh eros viverra mauris, eget pellentesque est nulla sit amet nunc. Cras mi metus, tristique et tincidunt at, tristique sed dolor. -
-
-
-
- In tempus, urna eu egestas convallis, nunc nisi faucibus lectus, et tempor felis nisi nec nunc. Morbi porttitor libero ac ipsum efficitur ullamcorper. Praesent eget velit volutpat, gravida odio vel, aliquet lectus. Sed a lorem imperdiet, tempor ligula eget, rutrum lorem. Nulla magna purus, iaculis sit amet volutpat et, varius sed orci. Curabitur eu purus quis mi dictum faucibus sit amet in lectus. Nam egestas quis felis sit amet finibus. In congue elementum lorem, id molestie neque commodo nec. Maecenas vitae accumsan orci. Aenean imperdiet et tellus et tincidunt. Donec non porta justo, sit amet laoreet risus. Mauris in bibendum tellus, at lobortis tortor. -
-
-
-
- Item 6 -
-
-
-
- Item 7 -
-
- - ) -}; diff --git a/stories/deprecated-components/BoxOverlay/BoxOverlay.mdx b/stories/deprecated-components/BoxOverlay/BoxOverlay.mdx deleted file mode 100644 index 2d097fd83a..0000000000 --- a/stories/deprecated-components/BoxOverlay/BoxOverlay.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as BoxOverlayStories from './BoxOverlay.stories' - - - -# BoxOverlay - -Use the `Box--overlay` with the `
` and [``](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background. - -Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide. - -See [aria attributes](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties) - - diff --git a/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.tsx b/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.tsx deleted file mode 100644 index cecc4307f8..0000000000 --- a/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/BoxOverlay', - parameters: { - controls: {hideNoControlsWarning: true}, - }, -} - -export const Default = () => { - return ( -
- - Open dialog - - -
- -

Box title

-
-
-
-

- The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven of typography - together with Hermann Zapf, the most famous artist of the... -

-
-
    -
  • - broccolini - @broccolini -
  • -
  • - jonrohan - @jonrohan -
  • -
  • - shawnbot - @shawnbot -
  • -
-
-
- -
-
-
- ) -} diff --git a/stories/deprecated-components/BranchName/BranchName.mdx b/stories/deprecated-components/BranchName/BranchName.mdx deleted file mode 100644 index 7f372f23f4..0000000000 --- a/stories/deprecated-components/BranchName/BranchName.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as BranchNameStories from './BranchName.stories' - - - -# BranchName - -Branch names can be a link, span, and include an octicon before the branch name. - - diff --git a/stories/deprecated-components/BranchName/BranchName.stories.tsx b/stories/deprecated-components/BranchName/BranchName.stories.tsx deleted file mode 100644 index a3d5bcd96d..0000000000 --- a/stories/deprecated-components/BranchName/BranchName.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/BranchName', -} - -export const Default = () => { - return ( -
- a_new_feature_branch - - a_new_feature_branch - - - - - - a_new_feature_branch - -
- ) -} diff --git a/stories/deprecated-components/Button/Button.mdx b/stories/deprecated-components/Button/Button.mdx deleted file mode 100644 index 9f53906f1f..0000000000 --- a/stories/deprecated-components/Button/Button.mdx +++ /dev/null @@ -1,129 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as ButtonStories from './Button.stories' - - - -# Button - -Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. - -Note: When using a ` - - ) -} - -export const Primary = () => { - return ( - <> - - - ) -} - -export const Outline = () => { - return ( - <> - - - ) -} - -export const Danger = () => { - return ( - <> - - - ) -} - -export const Link = () => { - return ( - <> - - - ) -} - -export const Invisible = () => { - return ( - <> - - - - ) -} - -export const Hover = () => { - return ( -
- - - - - - -
- ) -} -Hover.parameters = {pseudo: {hover: true}} - -export const Focus = () => { - return ( -
- - - - - - -
- ) -} -Focus.parameters = {pseudo: {focusVisible: true}} - -export const Selected = () => { - return ( - <> -
- - - -
- -
- - - -
- - ) -} - -export const Disabled = () => { - return ( - <> - - - - - - ) -} - -export const Sizes = () => { - return ( - <> - - - - - ) -} - -export const Block = () => { - return ( - <> - - - - ) -} - -export const HiddenText = () => { - return ( - <> - - - - - ) -} - -export const WithIcons = () => { - return ( - <> - - - - - - - - - - - ) -} - -export const IconOnly = () => { - return ( - <> - - - - - - - - - ) -} - -export const CloseButton = () => { - return ( - <> - - - ) -} - -export const ButtonWithCounts = () => { - return ( - <> -
- - - - - - - - - ) -} - -export const ButtonGroup = () => { - return ( - <> -
- - - -
- -
- - - -
- - ) -} - -export const ButtonGroupSmall = () => { - return ( - <> -
- - - -
- - ) -} - -export const ButtonGroupParent = () => { - return ( - <> -
- - - - - - -
- - ) -} diff --git a/stories/deprecated-components/FilterList/FilterList.mdx b/stories/deprecated-components/FilterList/FilterList.mdx deleted file mode 100644 index c56db73e22..0000000000 --- a/stories/deprecated-components/FilterList/FilterList.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as FilterListStories from './FilterList.stories' - - - -# FilterList - -A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white. - - diff --git a/stories/deprecated-components/FilterList/FilterList.stories.tsx b/stories/deprecated-components/FilterList/FilterList.stories.tsx deleted file mode 100644 index 3ea05a32e3..0000000000 --- a/stories/deprecated-components/FilterList/FilterList.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/FilterList', -} - -export const Default = () => { - return ( - - ) -} diff --git a/stories/deprecated-components/Forms/Forms.mdx b/stories/deprecated-components/Forms/Forms.mdx deleted file mode 100644 index 842acefe16..0000000000 --- a/stories/deprecated-components/Forms/Forms.mdx +++ /dev/null @@ -1,130 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as FormsStories from './Forms.stories' - - - -# Forms - -Style individual form controls and utilize common layouts. - -Overview: - -- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `
`s, WebKit validation bubbles, and most textual ``s. -- Specific types of textual ``s are styled automatically, but `.form-control` is available should you need it. -- Always declare a `type` on your ` - - - - - -
- - - - -
- - ) -} - -export const BasicForm = () => { - return ( - <> -
- - - - - - - - - - - - -
- - ) -} - -export const Sizes = () => { - return ( - <> -
- -
-
- -
-
- -
- - ) -} - -export const InputGroup = () => { - return ( - <> -
-
- - - - -
-
- - ) -} - -export const Contrast = () => { - return ( - <> -
- - -
- - ) -} - -export const Disabled = () => { - return ( - <> -
- -
- - ) -} - -export const HideWebkitAutofill = () => { - return ( - <> -
- -
- - ) -} - -export const Select = () => { - return ( - <> -
- -
- - ) -} - -export const SelectSmall = () => { - return ( - <> - - - - - ) -} - -export const FormGroup = () => { - return ( - <> -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- - ) -} - -export const ValidationSuccess = () => { - return ( - <> -
-
-
- -
-
- -
-

- monalisa is available -

-
-
- - ) -} - -export const ValidationError = () => { - return ( - <> -
-
-
- -
-
- -
-

- monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available. -

-
-
- - ) -} - -export const ValidationWarning = () => { - return ( - <> -
-
-
- -
-
- -
-

- 36 of maximum 39 characters entered. -

-
-
- - ) -} - -export const FormActions = () => { - return ( - <> -
- - -
- - ) -} - -export const CheckboxAndRadios = () => { - return ( - <> -
-
- -

- This will do insanely awesome and amazing things! -

-
-
-
-
- -
-
- - ) -} - -export const ToggleVisibility = () => { - return ( - <> -
-
- -
-
- -
-
- - ) -} - -export const RadioGroup = () => { - return ( - <> -
-
- - - - - - -
-
- - ) -} - -export const WithOcticons = () => { - return ( - <> -
-
- - - - - - -
-
- - ) -} diff --git a/stories/deprecated-components/Header/Header.mdx b/stories/deprecated-components/Header/Header.mdx deleted file mode 100644 index e1967c5b57..0000000000 --- a/stories/deprecated-components/Header/Header.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as HeaderStories from './Header.stories' - - - -# Header - -Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing. - -## Header - -The `.Header` class is the wrapping class that aligns all the items properly and gives the header its dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin. - - - -## Header-item - -All items directly under the `.Header` component should be a `.Header-item` component. Inside these components can be anything (text, forms, images...), and the `.Header-item` component will make sure these elements vertically align with each other. - -`.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints. - - - -### Header-item--full - -The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right. - - - -## Header-link - -Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover. - - diff --git a/stories/deprecated-components/Header/Header.stories.tsx b/stories/deprecated-components/Header/Header.stories.tsx deleted file mode 100644 index 709ad423b4..0000000000 --- a/stories/deprecated-components/Header/Header.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Header', -} - -export const Default = () => { - return ( - <> -
- -
- -
-
Menu
-
- @octocat -
-
- - ) -} - -export const HeaderItem = () => { - return ( - <> -
-
Text item
- -
- -
- -
- @octocat -
-
- - ) -} - -export const HeaderItemFull = () => { - return ( - <> -
-
Item 1
- -
Item 2
- -
Item 3
-
- - ) -} - -export const HeaderLink = () => { - return ( - <> - - - ) -} diff --git a/stories/deprecated-components/IssueLabel/IssueLabel.mdx b/stories/deprecated-components/IssueLabel/IssueLabel.mdx deleted file mode 100644 index 7ccf0df3a4..0000000000 --- a/stories/deprecated-components/IssueLabel/IssueLabel.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as IssueLabelStories from './IssueLabel.stories' - - - -# IssueLabel - -Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. - - - -If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. - - diff --git a/stories/deprecated-components/IssueLabel/IssueLabel.stories.tsx b/stories/deprecated-components/IssueLabel/IssueLabel.stories.tsx deleted file mode 100644 index 060d6e54e7..0000000000 --- a/stories/deprecated-components/IssueLabel/IssueLabel.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/IssueLabel', -} - -export const Default = () => { - return ( - <> - Primer - bug 🐛 - help wanted - 🚂 deploy: train - - ) -} - -export const Big = () => { - return ( - <> - Primer - bug 🐛 - - help wanted - - - 🚂 deploy: train - - - ) -} diff --git a/stories/deprecated-components/Loaders/Loaders.mdx b/stories/deprecated-components/Loaders/Loaders.mdx deleted file mode 100644 index 393928c6bd..0000000000 --- a/stories/deprecated-components/Loaders/Loaders.mdx +++ /dev/null @@ -1,13 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as LoaderStories from './Loaders.stories' - - - -# Loaders - -Loaders inform users that an action is still in progress and might take a while to complete. - -Add an animated ellipsis at the end of text with ``. - - diff --git a/stories/deprecated-components/Loaders/Loaders.stories.tsx b/stories/deprecated-components/Loaders/Loaders.stories.tsx deleted file mode 100644 index ec928c7c9f..0000000000 --- a/stories/deprecated-components/Loaders/Loaders.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Loaders', -} - -export const Default = () => { - return ( - <> -

- Loading - -

- - Loading - - - - Loading - - - - - ) -} diff --git a/stories/deprecated-components/Markdown/Markdown.stories.tsx b/stories/deprecated-components/Markdown/Markdown.stories.tsx deleted file mode 100644 index 820331ce4e..0000000000 --- a/stories/deprecated-components/Markdown/Markdown.stories.tsx +++ /dev/null @@ -1,387 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Markdown', -} - -export const Default = () => { - return ( - <> -
-

- Text can be bold, italic, or strikethrough. Links {' '} - should be blue with no underlines (unless hovered over). -

-

- There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be - whitespace between paragraphs. There should be whitespace between paragraphs. -

-

- There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be - whitespace between paragraphs. There should be whitespace between paragraphs. -

-
-

There should be no margin above this first sentence.

-

Blockquotes should be a lighter gray with a gray border along the left side.

-

There should be no margin below this final sentence.

-
-

Header 1

-

- This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork - belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet - mignon cow shoulder short ribs biltong. -

-

Header 2

-
- This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly - porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet - mignon cow shoulder short ribs biltong. -
-

Header 3

-
-          This is a code block following a header.
-        
-

Header 4

-
    -
  • This is an unordered list following a header.
  • -
  • This is an unordered list following a header.
  • -
  • This is an unordered list following a header.
  • -
-
Header 5
-
    -
  1. This is an ordered list following a header.
  2. -
  3. This is an ordered list following a header.
  4. -
  5. This is an ordered list following a header.
  6. -
-
Header 6
- - - - - - - - - - - - - - - - - - - - - -
WhatFollows
A tableA header
A tableA header
A tableA header
-
-

There's a horizontal rule above and below this.

-
-

Here is an unordered list:

-
    -
  • Salt-n-Pepa
  • -
  • Bel Biv DeVoe
  • -
  • Kid 'N Play
  • -
-

And an ordered list:

-
    -
  1. Michael Jackson
  2. -
  3. Michael Bolton
  4. -
  5. Michael Bublé
  6. -
-

And an unordered task list:

-
    -
  • - Create a sample markdown document -
  • -
  • - Add task lists to it -
  • -
  • - Take a vacation -
  • -
-

And a "mixed" task list:

-
    -
  • - Steal underpants -
  • -
  • ?
  • -
  • - Profit! -
  • -
- And a nested list: -
    -
  • - Jackson 5 -
      -
    • Michael
    • -
    • Tito
    • -
    • Jackie
    • -
    • Marlon
    • -
    • Jermaine
    • -
    -
  • -
  • - TMNT -
      -
    • Leonardo
    • -
    • Michelangelo
    • -
    • Donatello
    • -
    • Raphael
    • -
    -
  • -
-

Definition lists can be used with HTML syntax. Definition terms are bold and italic.

-
-
Name
-
Godzilla
-
Born
-
1952
-
Birthplace
-
Japan
-
Color
-
Green
-
-
-

Tables should have bold headings and alternating shaded rows.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ArtistAlbumYear
David BowieScary Monsters1980
PrincePurple Rain1982
Beastie BoysLicense to Ill1986
Janet JacksonRhythm Nation 18141989
-

If a table is too wide, it should condense down and/or scroll horizontally.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ArtistAlbumYearLabelSongs
David BowieScary Monsters1980RCA Records - It's No Game (No. 1), Up the Hill Backwards, Scary Monsters (And Super Creeps), Ashes to Ashes, Fashion, - Teenage Wildlife, Scream Like a Baby, Kingdom Come, Because You're Young, It's No Game (No. 2) -
PrincePurple Rain1982Warner Brothers Records - Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I - Would Die 4 U, Baby I'm a Star, Purple Rain -
Beastie BoysLicense to Ill1986Def Jam - Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, Fight for Your - Right, No Sleep till Brooklyn, Paul Revere, "Hold It Now, Hit It", Brass Monkey, Slow and Low, Time to - Get Ill -
Janet JacksonRhythm Nation 18141989A&M - Interlude: Pledge, Rhythm Nation, Interlude: T.V., State of the World, Interlude: Race, The Knowledge, - Interlude: Let's Dance, Miss You Much, Interlude: Come Back, Love Will Never Do (Without You), Livin' in - a World (They Didn't Make), Alright, Interlude: Hey Baby, Escapade, Interlude: No Acid, Black Cat, - Lonely, Come Back to Me, Someday Is Tonight, Interlude: Livin'...In Complete Darkness -
-
-

- Code snippets like var foo = "bar"; can be shown inline. -

-

- Also, this should vertically align{' '} - - with this - {' '} - and this. -

-

Code can also be shown in a block element.

-
-          var foo = "bar";
-        
-

Code can also use syntax highlighting.

-
-          var foo = "bar";
-        
-
-          
-            Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This
-            line should be long enough to demonstrate this.
-          
-        
-
-          
-            var foo = "The same thing is true for code with syntax highlighting. A single line of code should
-            horizontally scroll if it is really long.";
-          
-        
-

Inline code inside table cells should still be distinguishable.

- - - - - - - - - - - - - - - - - -
LanguageCode
JavasScript - var foo = "bar"; -
Ruby - foo = "bar" -
-
-

- The samp HTML element is used to enclose inline text which represents sample (or quoted) output - from a computer program. Here an example of an error message: File not found -

-
-

Small images should be shown at their actual size.

-

- -

-

Large images should always scale down and fit in the content container.

-

- -

-

- Here's a simple footnote, - - - 1 - - {' '} - and here's a longer one. - - - 2 - - -

-
-

- Footnotes -

-
    -
  1. -

    - This is the first footnote.{' '} - - - ↩ - - -

    -
  2. -
  3. -

    Here's one with multiple paragraphs and code.

    -

    Indent paragraphs to include them in the footnote.

    -

    - my code -

    -

    - Add as many paragraphs as you like.{' '} - - - ↩ - - -

    -
  4. -
-
-
-          This is the final element on the page and there should be no margin below this.
-        
-
- - ) -} diff --git a/stories/deprecated-components/Marketing/Marketing.mdx b/stories/deprecated-components/Marketing/Marketing.mdx deleted file mode 100644 index cfb336f0ef..0000000000 --- a/stories/deprecated-components/Marketing/Marketing.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as MarketingStories from './Marketing.stories' - - - -# Marketing links - -Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color. - - - -## Link sizes - -The marketing link size is defined with utility classes and come in large (`.f3-mktg`) and small (`.f4-mktg`): - -## Link with emphasis - -Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover. - - - -## Link colors - -The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow: - - diff --git a/stories/deprecated-components/Marketing/Marketing.stories.tsx b/stories/deprecated-components/Marketing/Marketing.stories.tsx deleted file mode 100644 index 24aa4f8abf..0000000000 --- a/stories/deprecated-components/Marketing/Marketing.stories.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Marketing', -} - -export const Link = () => { - return ( - <> - - Call to action - - - - - - - Call to action - - - - - - - ) -} - -export const Hover = () => { - return ( - <> - - Call to action - - - - - - - ) -} -Hover.parameters = {pseudo: {hover: true}} - -export const LinkEmphasis = () => { - return ( - <> - - Call to action - - - - - - - ) -} - -export const LinkColors = () => { - return ( - <> - - Call to action - - - - - - - - Call to action - - - - - - - ) -} diff --git a/stories/deprecated-components/Pagination/Pagination.mdx b/stories/deprecated-components/Pagination/Pagination.mdx deleted file mode 100644 index 14ac9da617..0000000000 --- a/stories/deprecated-components/Pagination/Pagination.mdx +++ /dev/null @@ -1,28 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as PaginationStories from './Pagination.stories' - - - -# Pagination - -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). - -## Previous/next pagination - -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. - - - -## Numbered pagination - -For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages. - -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. - -As always, make sure to include the appropriate `aria` attributes to make the element accessible. - -- Add `aria-label="Pagination"` to the `paginate-container` element. -- Add `aria-label="Page X"` to each anchor link. - - diff --git a/stories/deprecated-components/Pagination/Pagination.stories.tsx b/stories/deprecated-components/Pagination/Pagination.stories.tsx deleted file mode 100644 index 18bb74c62c..0000000000 --- a/stories/deprecated-components/Pagination/Pagination.stories.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Pagination', -} - -export const Default = () => { - return ( - <> - - - ) -} - -export const Numbered = () => { - return ( - - ) -} diff --git a/stories/deprecated-components/SelectMenu/SelectMenu.mdx b/stories/deprecated-components/SelectMenu/SelectMenu.mdx deleted file mode 100644 index 2051648aba..0000000000 --- a/stories/deprecated-components/SelectMenu/SelectMenu.mdx +++ /dev/null @@ -1,141 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as SelectMenuStories from './SelectMenu.stories' - - - -# SelectMenu - -Please note that this is a newer version and uses the `.SelectMenu` class instead of the deprecated select menu class. Check the migration guide to make sure your app is up to date. - -The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup. - -## Basic example - -Use a `
` element to toggle the select menu. The `` element can be styled in many ways. In the example below it's a `.btn`. - - - -Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile). - -## Right aligned - -In case the select menu should be aligned to the right, use `SelectMenu right-0`. - - - -## Selected state - -If the `SelectMenu` should show a check icon for selected items, use the `SelectMenu-icon SelectMenu-icon--check` classes. It will make the check icon show when `aria-checked="true"` is set. - - - -## Borderless - -Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end. - - - -## Header - -Add a `.SelectMenu-header` at the top to house a clear title and a close button. - - - -## List items - -The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes in case more custom styling is needed. - - - -## Divider - -The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`. It can be a `
` with text/content. Or just an `
` to add a visual separator. - -Dividers are also supported when using the `.SelectMenu-list--borderless` modifier. - - - -## Footer - -Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. - - - -## Filter - -If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the select menu to the top of the screen. This makes sure the filter input stays at the same position while typing. - - - -## Tabs - -Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu. - - - -## Message - -A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message. - - - -## Loading - -When fetching large lists, consider showing a `.SelectMenu-loading` animation. - - - -## Disabled - -To disable a list item, use the `disabled` attribute for ` - - -
- -
-``` - -If loading content should be deferred, use the [``](https://github.com/github/details-menu-element) element: - -```erb - -
- - <%= octicon("octoface", class: "anim-pulse", :height => 32) %> - -
-
-``` - -It will add a pulsing "octoface" icon while the content is loading. diff --git a/stories/deprecated-components/SelectMenu/SelectMenu.stories.tsx b/stories/deprecated-components/SelectMenu/SelectMenu.stories.tsx deleted file mode 100644 index 927e251049..0000000000 --- a/stories/deprecated-components/SelectMenu/SelectMenu.stories.tsx +++ /dev/null @@ -1,843 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/SelectMenu', -} - -export const Default = () => { - return ( - <> -
- - Choose an item - -
-
-
- - - -
-
-
-
- -
-
- - ) -} - -export const RightAligned = () => { - return ( - <> -
-
- - Choose an item - -
-
-
- - - -
-
-
-
-
- -
-
- - ) -} - -export const SelectedState = () => { - return ( - <> -
- - Choose an item - -
-
-
- - - - - -
-
-
-
- -
-
- - ) -} - -export const Borderless = () => { - return ( - <> -
- - Choose an item - -
-
-
- - - -
-
-
-
- -
-
- - ) -} - -export const Header = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- - - -
-
-
-
- -
-
- - ) -} - -export const ListItems = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- - - - - - -
-
-
-
- -
-
- - ) -} - -export const Divider = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- - -
More options
- - -
- - -
-
-
-
- -
-
- - ) -} - -export const Footer = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- - - - - -
-
Footer
-
-
-
- -
-
- - ) -} - -export const Filter = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
-
Showing 25 of 25
-
-
-
- -
-
- - ) -} - -export const Tabs = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
- -
- -
- - - - - -
- -
Showing 5 of 5
-
-
-
-
-
- - ) -} - -export const Message = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
-
Message goes here
- - - -
-
-
-
-
-
- - ) -} - -export const Loading = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
-
- -
-
-
Loading...
-
-
-
-
-
- - ) -} - -export const Disabled = () => { - return ( - <> -
- - Choose an item - -
-
-
- - - - Item 3 - - - Item 4 (disabled) - -
-
-
-
-
-
- - ) -} - -export const BlankSlate = () => { - return ( - <> -
- - Choose an item - -
-
-
-

Title

- -
-
-
- -

No repositories

-

We didn’t find any matching repositories that you can commit to.

- -
-
-
-
-
-
-
- - ) -} diff --git a/stories/deprecated-components/SideNav/SideNav.mdx b/stories/deprecated-components/SideNav/SideNav.mdx deleted file mode 100644 index 5a0a5673a8..0000000000 --- a/stories/deprecated-components/SideNav/SideNav.mdx +++ /dev/null @@ -1,26 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as SideNavStories from './SideNav.stories' - - - -# SideNav - -The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../utilities/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) for positioning alongside content. - -- You can use a **border** if the parent element doesn't have it already. -- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`. - - - -Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed. - - - -The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone. - - - -Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation. - - diff --git a/stories/deprecated-components/SideNav/SideNav.stories.tsx b/stories/deprecated-components/SideNav/SideNav.stories.tsx deleted file mode 100644 index ffff0f5f00..0000000000 --- a/stories/deprecated-components/SideNav/SideNav.stories.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/SideNav', -} - -export const Default = () => { - return ( - <> - - - ) -} - -export const Options = () => { - return ( - <> - - - ) -} - -export const SubItem = () => { - return ( - <> - - - ) -} - -export const Nested = () => { - return ( - <> - - - ) -} diff --git a/stories/deprecated-components/SubNav/SubNav.mdx b/stories/deprecated-components/SubNav/SubNav.mdx deleted file mode 100644 index b0ce2e55b8..0000000000 --- a/stories/deprecated-components/SubNav/SubNav.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as SubNavStories from './SubNav.stories' - - - -# SubNav - -`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy. - - - -You can have `subnav-search` in the subnav bar. - - - -You can also use a `subnav-search-context` to display search help in a select menu. - - diff --git a/stories/deprecated-components/SubNav/SubNav.stories.tsx b/stories/deprecated-components/SubNav/SubNav.stories.tsx deleted file mode 100644 index 8aa0590015..0000000000 --- a/stories/deprecated-components/SubNav/SubNav.stories.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/SubNav', -} - -export const Default = () => { - return ( - <> - - - ) -} - -export const Search = () => { - return ( - <> -
- -
- - -
-
- - ) -} - -export const SearchContext = () => { - return ( - <> - -
-
- -
-
- - -
-
- - ) -} diff --git a/stories/deprecated-components/Toast/Toast.mdx b/stories/deprecated-components/Toast/Toast.mdx deleted file mode 100644 index 59458e9075..0000000000 --- a/stories/deprecated-components/Toast/Toast.mdx +++ /dev/null @@ -1,61 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as ToastStories from './Toast.stories' - - - -# Toast - -Toasts are used to show live, time-sensitive feedback to users. - -## Default - -To create a default toast, use `.Toast`. Always use the `info` icon for default messages. - - - -The Toast content is formattable. We recommend keeping your message under 140 characters. - -## Variations - -Use the success, warning, and error modifiers to communicate different states. - -Always use the `check` octicon for success states. - - - -Always use the `alert` octicon for warning states. - - - -Always use the `stop` octicon for error states. - - - -## Toast with dismiss - -Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. - - - -## Toast with link - -Include a link to allow users to take actions within a Toast. - - - -## Toast animation in - -The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom. - - - -## Toast with loading animation - -Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state. - - - -## Toast position - -Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport. diff --git a/stories/deprecated-components/Toast/Toast.stories.tsx b/stories/deprecated-components/Toast/Toast.stories.tsx deleted file mode 100644 index 1e56322ee8..0000000000 --- a/stories/deprecated-components/Toast/Toast.stories.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Toast', -} - -export const Default = () => { - return ( - <> -
-
- - - - Toast message goes here -
-
- - ) -} - -export const Success = () => { - return ( - <> -
-
- - - - Success message goes here. -
-
- - ) -} - -export const Alert = () => { - return ( - <> -
-
- - - - Warning message goes here. -
-
- - ) -} - -export const Error = () => { - return ( - <> -
-
- - - - Error message goes here -
-
- - ) -} - -export const Dismiss = () => { - return ( - <> -
-
- - - - This toast is dismissable. - -
-
- - ) -} - -export const WithLink = () => { - return ( - <> -
-
- - - - - Toast message goes hereAction. - -
-
- - ) -} - -export const AnimationIn = () => { - return ( - <> -
-
- - - - Toast message goes here. -
-
- - ) -} - -export const Loading = () => { - return ( - <> -
-
- - - - - - - Toast message goes here. -
-
- - ) -} - -export const Position = () => { - return ( - <> -
-
-
- - - - Toast message goes here. -
-
-
- - ) -} diff --git a/stories/deprecated-components/Tooltip/Tooltip.mdx b/stories/deprecated-components/Tooltip/Tooltip.mdx deleted file mode 100644 index e52a573818..0000000000 --- a/stories/deprecated-components/Tooltip/Tooltip.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import {Canvas, Meta, Story} from '@storybook/blocks' - -import * as TooltipStories from './Tooltip.stories' - - - -# Tooltip - -Please note that the `.tooltipped` component is **deprecated**. We recommend using the [Tooltip component](https://primer.style/view-components/components/alpha/tooltip) instead. - -Add tooltips built entirely in CSS to appropriate elements. - -## Implementation and accessibility - -Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence. - -Before adding a tooltip, please consider: Is this information essential and necessary\* Can the UI be made clearer? Can the information be shown on the page by default? And check out [alternatives to Tooltips](https://primer.style/design/accessibility/tooltip-alternatives) to explore your options. - -### Attention - -- **Never** use tooltips on static elements. They should only be used on interactive elements, because users cannot tab-focus into static elements, which may make the content inaccessible for keyboard-only users and screen readers. -- we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content such as an icon-only button. -- Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon. - -## Tooltip direction - -Specify the direction of a tooltip with north, south, east, and west directions: - - - -## Tooltip alignment - -Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented. - - - -## Tooltips with multiple lines - -Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`. - - - -## Tooltips with no delay - -By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this. - - diff --git a/stories/deprecated-components/Tooltip/Tooltip.stories.tsx b/stories/deprecated-components/Tooltip/Tooltip.stories.tsx deleted file mode 100644 index 485a9265f8..0000000000 --- a/stories/deprecated-components/Tooltip/Tooltip.stories.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import React from 'react' - -export default { - title: 'Deprecated/Tooltip', -} - -export const Default = () => { - return ( - <> -
- - - -
-
- - -
-
- - - -
- - ) -} - -export const Alignment = () => { - return ( - <> -
- - -
-
- - -
-
- - -
-
- - -
- - ) -} - -export const MultiLine = () => { - return ( - <> -
- -
- - ) -} - -export const NoDelay = () => { - return ( - <> -
- -
- - ) -} diff --git a/stories/helpers/ColorBlock.jsx b/stories/helpers/ColorBlock.jsx deleted file mode 100644 index ab45cc53da..0000000000 --- a/stories/helpers/ColorBlock.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const ColorBlock = ({backgroundColor, showValueLabel}) => { - return ( -
-
- {showValueLabel &&
{backgroundColor}
} -
- ) -} - -ColorBlock.propTypes = { - backgroundColor: PropTypes.string, - showValueLabel: PropTypes.bool -} - -ColorBlock.defaultProps = { - backgroundColor: null, - showValueLabel: false -} - -export default ColorBlock diff --git a/stories/helpers/ConditionalWrapper.jsx b/stories/helpers/ConditionalWrapper.jsx deleted file mode 100644 index 98ed8d4bb9..0000000000 --- a/stories/helpers/ConditionalWrapper.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -// reference https://gist.github.com/kitze/23d82bb9eb0baabfd03a6a720b1d637f - -const ConditionalWrapper = ({condition, wrap, children}) => (condition ? wrap(children) : children) - -export default ConditionalWrapper diff --git a/stories/helpers/code-snippet-html-helper.js b/stories/helpers/code-snippet-html-helper.js deleted file mode 100644 index ae755a358b..0000000000 --- a/stories/helpers/code-snippet-html-helper.js +++ /dev/null @@ -1,13 +0,0 @@ -import {renderToStaticMarkup} from 'react-dom/server' -import {AllHtmlEntities} from 'html-entities' -import prettier from 'prettier' -import HTMLParser from 'prettier/parser-html' -const entities = new AllHtmlEntities() - -export default story => - prettier.format(entities.decode(renderToStaticMarkup(story())), { - parser: 'html', - plugins: [HTMLParser], - htmlWhitespaceSensitivity: 'ignore', - bracketSameLine: 'false' - }) diff --git a/stories/helpers/pageLayoutBehavior.jsx b/stories/helpers/pageLayoutBehavior.jsx deleted file mode 100644 index c267ff18ef..0000000000 --- a/stories/helpers/pageLayoutBehavior.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' -export default function PageLayoutBehavior() { - - const pageLayoutSelector = '.PageLayout.PageLayout--responsive-separateRegions'; - const primaryRegionSelector = 'PageLayout--responsive-primary'; - - const detectPageLayoutHash = () => { - - const pageLayout = document.querySelector(pageLayoutSelector); - - let dest; - if (location.hash === '') { - dest = pageLayout.getAttribute('data-primary-region'); - } else if (location.hash === '#pane') { - dest = 'pane'; - } else if (location.hash === '#content') { - dest = 'content'; - } else { - return; - } - - pageLayout.setAttribute('data-current-region', dest); - - if (dest === 'pane') { - pageLayout.classList.replace(primaryRegionSelector + '-content', primaryRegionSelector + '-pane'); - } else { - pageLayout.classList.replace(primaryRegionSelector + '-pane', primaryRegionSelector + '-content'); - } - }; - - window.addEventListener("hashchange", () => { - detectPageLayoutHash(); - }); - - document.addEventListener('DOMContentLoaded', (event) => { - const pageLayout = document.querySelector(pageLayoutSelector); - const primaryRegion = pageLayout.classList.contains(primaryRegionSelector + '-pane') ? 'pane' : 'content'; - - if (pageLayout.getAttribute('data-primary-region') === null) { - pageLayout.setAttribute('data-primary-region', primaryRegion); - } - - detectPageLayoutHash(); - }); -} diff --git a/stories/helpers/storybook-styles.scss b/stories/helpers/storybook-styles.scss deleted file mode 100644 index 70f9f926e0..0000000000 --- a/stories/helpers/storybook-styles.scss +++ /dev/null @@ -1,21 +0,0 @@ -// color blocks - -.colorBlockWrap { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; -} - -.colorBlockItem { - aspect-ratio: 1/1; - width: 100px; -} - -.toc { - list-style: none !important; - padding: 0 !important; - li { - margin-left: 0 !important; - } -} diff --git a/stories/helpers/useToggle.jsx b/stories/helpers/useToggle.jsx deleted file mode 100644 index a38dfcb2c4..0000000000 --- a/stories/helpers/useToggle.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -export default function useToggle(initialValue = false) { - const [value, setValue] = React.useState(initialValue) - const toggle = React.useCallback(() => { - setValue(v => !v) - }, []) - return [value, toggle] -} diff --git a/stories/principles/Accessibility.mdx b/stories/principles/Accessibility.mdx deleted file mode 100644 index 6c3811abcf..0000000000 --- a/stories/principles/Accessibility.mdx +++ /dev/null @@ -1,186 +0,0 @@ -# Accessibility - -Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers. - -## Overview - -Our products should be accessible to all. At minimum, features should comply to the requirements listed in [508 Reference Guide - 1194.22](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22) from the US Access Board, and conform to [Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20/#conformance) at Level AA. - -Making our products accessible benefits everyone, not just people with disabilities. Below are some examples of use cases in which accessibility is important: - -- **Visual**: blindness, low vision, color blindness, using a screen reader or related assistive tech for lifestyle reasons (e.g. long car commute), machine readability and screen scraping technologies - -- **Hearing**: deafness, hearing impairment, speech impairment, using closed captioning or other assistive features for lifestyle reasons (e.g. coworking in a loud coffee shop) - -- **Cognitive**: including short-term memory issues, dyslexia, learning disabilities, trying to work or consume content while distracted or multitasking, etc. - -- **Mobility**: mobility impairments, repetitive stress injuries, power users who love keyboard shortcuts, busy parents holding a sleeping child while trying to operate a computer with one hand, etc. - -## General guidelines - -### Semantic markup - -Always use semantic HTML elements, like `button`, `ul`, `nav`. Most modern browsers implement the accessibility features outlined in the specs for these elements; without them, elements will need additional [ARIA attributes and roles](https://www.w3.org/WAI/PF/aria) to be recognized by assistive technologies. - -Elements like `h1`-`h6`, `nav`, `footer`, `header` have [meaningful roles](https://www.w3.org/WAI/PF/aria/roles) assigned, so use them carefully. This can help assistive technologies read the page better and help users find information quicker. - -Only use a `div` or a `span` to markup up content when there isn't another HTML element that would semantically be more appropriate, or when an element is needed exclusively for applying CSS styles or JS behaviors. - -```html - - -``` - -```html - -Send -``` - -> More on semantic markup: -> -> - [Semantic Structure – WebAIM](http://webaim.org/techniques/semanticstructure/) - -### Keyboard accessibility - -Make sure elements can be reached via tabbing, and actions can be triggered with a keyboard. Using semantic markup is especially important in this case as it ensures that actionable elements are tabbable and triggerable without a mouse. Note that elements positioned off-screen are still tabbable, but those hidden with `display: none` or `visibility: hidden` are effectively removed from content since they are neither read by screen readers nor reachable by keyboard. - -Tab order is determined by the order of elements in the DOM, and not by their visual positioning on the page after CSS is applied. CSS properties `float` and `order` for flex items are two common sources for disconnection between visual and DOM order. - -The `tabindex` attribute should only be used when absolutely necessary. - -- `tabindex=0/-1` makes an element focusable, while `tabindex=0` also includes the element in the normal tab order. In both cases, keyboard triggers of the element still require scripting, so where possible, use [interactive content](http://w3c.github.io/html/dom.html#kinds-of-content-interactive-content) instead. - -- `tabindex=1+` takes an element to the very front of the default tab order. When it's applied, the element's visual positioning is no longer indicative of its tab order, and the only way to find out where an element is would be by tabbing through the page. Therefore, unless a page is carefully designed around elements with positive tabindex, it is very error-prone, and thus currently prohibited in github.com. - -Finally, bear in mind that some assistive technologies have keyboard combinations of their own that will override the combination on the web page, so don't rely on keyboard shortcuts as the only alternative to mouse actions. - -```html - - - - -``` - -```html - - - - -``` - -> More on keyboard accessibility: -> -> - [Focus Order – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html) -> - [Time to revisit accesskey? by Léonie Watson](http://tink.uk/time-to-revisit-accesskey/) -> - [Flexbox & the keyboard navigation disconnect by Léonie Watson](http://tink.uk/flexbox-the-keyboard-navigation-disconnect/) - -### Visual accessibility - -Be mindful when using small font size, thin font weight, low contrast colors in designs as it can severely affect usability. - -Instead of relying solely on color to communicate information, always combine color with another factor, like shape or position change. This is important because some colors can be hard to tell apart due to color blindness or weak eyesight. - -> More on visual accessibility: -> -> - [Use of Color – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) -> - [Contrast – Understanding WCAG 2.0](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) - -### Text and labels - -Make sure text-based alternative is always available when using icons, images, and graphs, and that the text by itself presents meaningful information. - -```html - -

Find out more about GitHub Enterprise pricing.

-``` - -```html - -

To find out more about GitHub Enterprise pricing, click here.

-``` - -Use `aria-label` when there is no text. - -```html -<%= octicon("question", :"aria-label" => "Help") %> -``` - -### Link responsibly - -Navigating from a list of all the links on a given web page is very common for assistive technology users. We should make sure that the link text itself is meaningful and unique, and there should be as few duplicated references as possible. - -> More on link responsibly: -> -> - [Link Purpose – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html) - -### Dynamic content - -When using JavaScript to change the content on the page, always make sure that screen reader users are informed about the change. This can be done with `aria-live`, or focus management. - -> More on dynamic content: -> -> - [ARIA Live Regions – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) - -### Focus management - -Focus management is useful for informing users about updated content, and for making sure users land on the next useful section after performing an action. This means using scripts to change user’s currently focused element, and when focus changes, screen readers will read out change. - -### Accessible forms - -It is common for assistive technology users to jump straight to a form when using a website, so make sure most relevant information is in the form and is labelled properly. Labels and inputs should be associated with the `label[for]` and `input[id]`, and help texts should either be part of the label or be associated with `aria-describedby`. - -```html - -
- -
Please enter an email ending with @github.com.
-``` - -```html - -
- -
Please enter an email ending with @github.com.
-``` - -## Development tools - -### Linting - -We currently run basic linting [against positive `tabindex`](https://github.com/github/github/blob/8546895623677abc70f61951642f32c16de231a1/test/fast/linting/accessible_tabindex_test.rb) and [anchor links with `href="#"`](https://github.com/github/github/blob/8546895623677abc70f61951642f32c16de231a1/test/rubocop/cop/rails/link_href.rb). - -We do client side scanning of inaccessible elements in development environment. The inaccessible elements will be styled with red borders with an onclick alert and console warnings. - -### External tools - -- Google Chrome provides an [Accessibility Developer Tools extension](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb). Once installed, go to Audits tab in developer tools, tick Accessibility. It scans the page for violations and suggests solutions. - -- If you're working on a design that uses color to communicate something, grab the [Chromatic Vision Simulator app](https://itunes.apple.com/tw/app/chromatic-vision-simulator/id389310222?mt=8), this will let you use your iPhone camera to see what a colorblind person would see. - -- Check out [the Web Accessibility showcase on GitHub](https://github.com/showcases/web-accessibility). GitHubbers are free to add more projects to the showcase. - -## Manual testing - -### Screen reader - -To use VoiceOver, the built-in screen reader for Mac, just hit + F5. This will start voice narration and display most of the spoken information in a text box. - -Use alt + control + left/right to navigate a web page. alt + control + space to click on an element. For more help with VoiceOver, check out the built-in tutorial in `System Preferences > Accessibility > VoiceOver > Open VoiceOver Training`. - -Keep in mind that behaviors in different screen readers can differ when navigating the same web page; just like designing for different browsers, when it comes to accessibility, it is not just the implementation of the browsers that can be different, but also the ones of assistive softwares. - -## Internal resources - -1. You can mention these teams when looking for help: - -- [@github/accessibility](https://github.com/orgs/github/teams/accessibility): GitHubbers interested in accessibility related topics and work on website accessibility issues. -- [@github/colorblind](https://github.com/orgs/github/teams/colorblind): GitHubbers who are interested in accessibility for colorblindness. - -2. Go to #accessibility Slack channel to ask questions or discuss accessibility issues. -3. Check [github/accessibility repository](https://github.com/github/accessibility) for information on events or learning resources. - -## User support - -Accessibility is a priority for us, if you ever encounter accessibility related issues when using github.com, please don’t hesitate to reach out to us via [the contact page](https://github.com/contact) or email us at [support@github.com](mailto:support@github.com), we will try our best to assist. - -For information about the accessibility compliance of GitHub products, please refer to our [VPAT report, outlining §508 accessibility information for GitHub.com, GitHub Enterprise, and GitHub Desktop](https://government.github.com/accessibility/). diff --git a/stories/principles/HTML.mdx b/stories/principles/HTML.mdx deleted file mode 100644 index 84bafccd52..0000000000 --- a/stories/principles/HTML.mdx +++ /dev/null @@ -1,78 +0,0 @@ -# HTML - -## General formatting - -- Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment. -- Paragraphs of text should always be placed in a `

` tag. Never use multiple `
` tags. -- Items in list form should always be in `

    `, `
      `, or `
      `. Never use a set of `
      ` or `

      `. -- Every form input that has text attached should utilize a `


      `, ``, and ``. -- Don't set `tabindex` manually—rely on the browser to set the order. - -```html inert=true -

      This is my paragraph of special text.

      -``` - -## Boolean attributes - -Many attributes don't require a value to be set, like `checked`, so don't set them. - -```html inert=true - - - -``` - -For more information, [read the WhatWG section](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes). - -## Lean markup - -Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example: - -```html inert=true - - - - - - - -``` - -## Forms - -- Lean towards radio or checkbox lists instead of select menus. -- Wrap radio and checkbox inputs and their text in `