-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into disabled-text
- Loading branch information
Showing
14 changed files
with
6,572 additions
and
3,656 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@primer/css": patch | ||
| --- | ||
|
|
||
| Fixing broken close span tag in the docs. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| module.exports = { | ||
| stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], | ||
| addons: [ | ||
| '@storybook/addon-a11y', | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/preset-scss', | ||
| '@whitespace/storybook-addon-html', | ||
| 'storybook-addon-designs' | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <style> | ||
| .story-wrap { | ||
| font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, | ||
| Helvetica Neue, sans-serif; | ||
| color: var(--color-fg-default); | ||
| background-color: var(--color-canvas-default); | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .theme-wrap { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | ||
| height: 100vh; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import '../../src/docs.scss' | ||
| import '../../src/index.scss' | ||
| import '../../src/base/index.scss' | ||
|
|
||
| export const parameters = { | ||
| actions: {argTypesRegex: '^on[A-Z].*'}, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/ | ||
| }, | ||
| expanded: true | ||
| }, | ||
|
|
||
| layout: 'fullscreen', | ||
| html: { | ||
| root: '#story' // target id for html tab (should be direct parent of <Story /> for easy copy/paste) | ||
| } | ||
| } | ||
|
|
||
| export const globalTypes = { | ||
| theme: { | ||
| name: 'Theme', | ||
| description: 'Switch themes', | ||
| defaultValue: 'light', | ||
| toolbar: { | ||
| icon: 'circlehollow', | ||
| items: ['light', 'light_protanopia', 'dark', 'dark_dimmed', 'dark_high_contrast', 'dark_protanopia', 'all'], | ||
| showName: true | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export const decorators = [ | ||
| (Story, context) => { | ||
| if (context.globals.theme === 'all') { | ||
| return ( | ||
| <div class="theme-wrap"> | ||
| <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
|
|
||
| <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
|
|
||
| <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
|
|
||
| <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
|
|
||
| <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
|
|
||
| <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'light') { | ||
| return ( | ||
| <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'light_protanopia') { | ||
| return ( | ||
| <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'dark') { | ||
| return ( | ||
| <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'dark_dimmed') { | ||
| return ( | ||
| <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'dark_high_contrast') { | ||
| return ( | ||
| <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (context.globals.theme === 'dark_protanopia') { | ||
| return ( | ||
| <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="story-wrap" id="story"> | ||
| <Story {...context} /> | ||
| </div> | ||
| ) | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 14 additions & 12 deletions
26
docs/src/@primer/gatsby-theme-doctocat/components/hero.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
|
|
||
| export default { | ||
| title: 'Components/Button', | ||
| parameters: { | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128' | ||
| } | ||
| }, | ||
| argTypes: { | ||
| variant: { | ||
| options: [0, 1, 2, 3], // iterator | ||
| mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values | ||
| control: { | ||
| type: 'select', | ||
| labels: ['default', 'primary', 'outline', 'danger'] | ||
| }, | ||
| defaultValue: '' | ||
| }, | ||
| label: { | ||
| defaultValue: 'Button', | ||
| type: 'string', | ||
| name: 'label', | ||
| description: 'string' | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const Template = ({label, variant}) => ( | ||
| <> | ||
| <button className={clsx('btn', variant && `${variant}`)}>{label}</button> | ||
| </> | ||
| ) | ||
|
|
||
| export const Button = Template.bind({}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import {Meta} from '@storybook/addon-docs' | ||
|
|
||
| <Meta title="Getting Started" /> | ||
|
|
||
| # Local development | ||
|
|
||
| Run `yarn storybook` from root. A local server will run, and any changes made to CSS and/or stories will auto-reload the page. | ||
|
|
||
| # Storybook config | ||
|
|
||
| Config files live in [.storybook](docs/.storybook) | ||
|
|
||
| [main.js](docs/.storybook/main.js): addons | ||
|
|
||
| [preview.js](docs/.storybook/preview.js): customizations, decorators, global CSS imports | ||
|
|
||
| [preview-head.html](docs/.storybook/preview-head.html): story-level "global" styles (within the story iframe) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.