├── .circleci └── config.yml ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md ├── renovate.json └── workflows │ └── deploy.yml ├── .gitignore ├── .gitmodules ├── .husky ├── .gitignore └── pre-commit ├── .lintstagedrc ├── .markdownlintrc ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .stylelintrc ├── LICENSE.md ├── README.md ├── babel.config.js ├── content ├── figma │ └── assets.yml ├── nav │ ├── components.yml │ ├── content.yml │ ├── design.yml │ └── patterns.yml └── news │ └── news.yml ├── eslint.config.mjs ├── gatsby-browser.js ├── gatsby-config.ts ├── gatsby-node.ts ├── gatsby-ssr.js ├── graphql.config.js ├── package-lock.json ├── package.json ├── plugins ├── gatsby-algolia-docsearch │ ├── gatsby-ssr.js │ └── package.json ├── gatsby-remark-figma-assets │ ├── index.mjs │ └── package.json ├── gatsby-source-garden-content │ ├── gatsby-node.ts │ ├── package.json │ └── utils.ts ├── gatsby-source-garden-docgen │ ├── README.md │ ├── gatsby-node.mjs │ ├── package.json │ └── utils.mjs └── gatsby-transformer-garden-svg │ ├── gatsby-node.js │ └── package.json ├── src ├── components │ ├── GlobalStyles.ts │ ├── Layout.tsx │ ├── MarkdownProvider │ │ ├── components │ │ │ ├── Alert.tsx │ │ │ ├── Anchor.ts │ │ │ ├── BestPractice.tsx │ │ │ ├── CodeBlock.tsx │ │ │ ├── CodeExample │ │ │ │ ├── assets │ │ │ │ │ └── codesandbox-icon.svg │ │ │ │ ├── index.tsx │ │ │ │ └── utils │ │ │ │ │ └── retrieveCodesandboxParameters.ts │ │ │ ├── ColorPalette.tsx │ │ │ ├── ColorShades.tsx │ │ │ ├── Component.tsx │ │ │ ├── Configuration.tsx │ │ │ ├── ImageFigure.tsx │ │ │ ├── Lists.tsx │ │ │ ├── Markdown.tsx │ │ │ ├── ObjectBlock.tsx │ │ │ ├── OverviewLinks.tsx │ │ │ ├── PropSheet.tsx │ │ │ ├── Table.tsx │ │ │ ├── Typography.tsx │ │ │ └── Usage.tsx │ │ └── index.tsx │ ├── Provider.tsx │ ├── SEO.tsx │ ├── index.ts │ └── types.ts ├── examples │ ├── accordions │ │ ├── accordion │ │ │ ├── AccordionBare.tsx │ │ │ ├── AccordionDefault.tsx │ │ │ ├── AccordionExpandable.tsx │ │ │ └── AccordionSize.tsx │ │ ├── stepper │ │ │ ├── StepperDefault.tsx │ │ │ ├── StepperIcons.tsx │ │ │ └── StepperLayout.tsx │ │ └── timeline │ │ │ ├── TimelineAlternating.tsx │ │ │ ├── TimelineCustomMedia.tsx │ │ │ ├── TimelineDefault.tsx │ │ │ └── TimelineOppositeContent.tsx │ ├── anchor │ │ ├── AnchorDanger.tsx │ │ ├── AnchorDefault.tsx │ │ ├── AnchorExternal.tsx │ │ └── AnchorWithoutUnderline.tsx │ ├── avatar │ │ ├── AvatarShape.tsx │ │ ├── AvatarSize.tsx │ │ ├── AvatarStatus.tsx │ │ ├── AvatarType.tsx │ │ ├── StatusIndicatorCaption.tsx │ │ ├── StatusIndicatorDefault.tsx │ │ ├── StatusIndicatorSize.tsx │ │ └── StatusIndicatorType.tsx │ ├── breadcrumbs │ │ └── BreadcrumbsDefault.tsx │ ├── button │ │ ├── ButtonDanger.tsx │ │ ├── ButtonDefault.tsx │ │ ├── ButtonDisabled.tsx │ │ ├── ButtonMedia.tsx │ │ ├── ButtonPatternInteraction.tsx │ │ ├── ButtonSizes.tsx │ │ ├── ButtonStretched.tsx │ │ ├── ButtonTypes.tsx │ │ ├── IconButtonDanger.tsx │ │ ├── IconButtonDefault.tsx │ │ ├── IconButtonDisabled.tsx │ │ ├── IconButtonShapes.tsx │ │ ├── IconButtonSizes.tsx │ │ ├── IconButtonTypes.tsx │ │ ├── SplitButtonDanger.tsx │ │ ├── SplitButtonDefault.tsx │ │ ├── SplitButtonDisabled.tsx │ │ ├── SplitButtonSizes.tsx │ │ ├── SplitButtonTypes.tsx │ │ ├── ToggleButtonDefault.tsx │ │ ├── ToggleButtonDisabled.tsx │ │ ├── ToggleButtonSizes.tsx │ │ ├── ToggleButtonTypes.tsx │ │ ├── ToggleIconButtonDefault.tsx │ │ ├── ToggleIconButtonDisabled.tsx │ │ ├── ToggleIconButtonShapes.tsx │ │ ├── ToggleIconButtonSizes.tsx │ │ └── ToggleIconButtonTypes.tsx │ ├── chrome │ │ ├── ChromeDefault.tsx │ │ ├── ChromeNavigation.tsx │ │ ├── ChromeStandaloneHeader.tsx │ │ ├── GlobalAlert.tsx │ │ ├── SheetDefault.tsx │ │ ├── SheetFooters.tsx │ │ ├── SheetHeaders.tsx │ │ ├── SheetPlacement.tsx │ │ └── SheetSize.tsx │ ├── color-picker │ │ ├── ColorPickerDefault.tsx │ │ ├── ColorPickerDialogCustomTrigger.tsx │ │ ├── ColorPickerDialogDefault.tsx │ │ ├── ColorPickerDialogFormInput.tsx │ │ └── ColorPickerOpaque.tsx │ ├── color-scheme-provider │ │ └── ColorSchemeProviderDefault.tsx │ ├── color-swatch │ │ ├── ColorSwatchCustomTrigger.tsx │ │ ├── ColorSwatchDefault.tsx │ │ └── ColorSwatchDialog.tsx │ ├── combobox │ │ ├── Autocomplete.tsx │ │ ├── Default.tsx │ │ ├── Disabled.tsx │ │ ├── Grouped.tsx │ │ ├── Hidden.tsx │ │ ├── Hint.tsx │ │ ├── Media.tsx │ │ ├── Multiselect.tsx │ │ ├── MultiselectTags.tsx │ │ ├── Nested.tsx │ │ ├── NestedMultiselect.tsx │ │ ├── Search.tsx │ │ ├── SelectOnly.tsx │ │ ├── Size.tsx │ │ └── Validation.tsx │ ├── date-picker │ │ ├── DatePickerCustom.tsx │ │ ├── DatePickerDefault.tsx │ │ ├── DatePickerLocalization.tsx │ │ ├── DatePickerRange.tsx │ │ ├── DatePickerSize.tsx │ │ └── DatePickerTimeWindow.tsx │ ├── design │ │ ├── color │ │ │ ├── BackgroundVariables.tsx │ │ │ ├── BorderVariables.tsx │ │ │ ├── ForegroundVariables.tsx │ │ │ ├── Purpose.tsx │ │ │ └── ShadowVariables.tsx │ │ └── icons │ │ │ ├── IconShowcase.tsx │ │ │ ├── IconStyles.tsx │ │ │ └── SvgSearch.tsx │ ├── draggable │ │ ├── DraggableBare.tsx │ │ ├── DraggableContent.tsx │ │ ├── DraggableDefault.tsx │ │ ├── DraggableDisabled.tsx │ │ ├── DraggableListDefault.tsx │ │ ├── DraggableListHorizontal.tsx │ │ ├── DraggableListIndicator.tsx │ │ ├── DraggablePlaceholder.tsx │ │ ├── DraggableSize.tsx │ │ ├── DropzoneDanger.tsx │ │ └── DropzoneDefault.tsx │ ├── drawer │ │ └── DrawerDefault.tsx │ ├── forms │ │ ├── checkbox │ │ │ ├── Default.tsx │ │ │ ├── Disabled.tsx │ │ │ ├── Hidden.tsx │ │ │ ├── Hint.tsx │ │ │ ├── Indeterminate.tsx │ │ │ ├── RegularWeightLabel.tsx │ │ │ └── Validation.tsx │ │ ├── file-upload │ │ │ ├── Disabled.tsx │ │ │ ├── FileList.tsx │ │ │ ├── FileUpload.tsx │ │ │ ├── Size.tsx │ │ │ └── Validation.tsx │ │ ├── input-group │ │ │ ├── ButtonPlacement.tsx │ │ │ ├── Disabled.tsx │ │ │ ├── InputGroup.tsx │ │ │ ├── Readonly.tsx │ │ │ └── Size.tsx │ │ ├── inputs │ │ │ ├── Disabled.tsx │ │ │ ├── FauxInput.tsx │ │ │ ├── FocusInset.tsx │ │ │ ├── Hidden.tsx │ │ │ ├── Hint.tsx │ │ │ ├── Inline.tsx │ │ │ ├── Input.tsx │ │ │ ├── MediaInput.tsx │ │ │ ├── Placeholder.tsx │ │ │ ├── ReadOnly.tsx │ │ │ ├── RegularWeightLabel.tsx │ │ │ ├── Size.tsx │ │ │ └── Validation.tsx │ │ ├── radio │ │ │ ├── Default.tsx │ │ │ ├── Disabled.tsx │ │ │ ├── Hidden.tsx │ │ │ ├── Hint.tsx │ │ │ ├── RegularWeightLabel.tsx │ │ │ └── Validation.tsx │ │ ├── range │ │ │ ├── RangeDefault.tsx │ │ │ ├── RangeDisabled.tsx │ │ │ ├── RangeHidden.tsx │ │ │ ├── RangeHint.tsx │ │ │ └── RangeValidation.tsx │ │ ├── select │ │ │ ├── Default.tsx │ │ │ ├── Disabled.tsx │ │ │ ├── Hidden.tsx │ │ │ ├── Hint.tsx │ │ │ ├── Size.tsx │ │ │ └── Validation.tsx │ │ ├── textarea │ │ │ ├── AutoExpand.tsx │ │ │ ├── Default.tsx │ │ │ ├── DragHandles.tsx │ │ │ └── Hidden.tsx │ │ ├── tiles │ │ │ ├── TilesDefault.tsx │ │ │ ├── TilesDescription.tsx │ │ │ ├── TilesDisabled.tsx │ │ │ └── TilesLayout.tsx │ │ └── toggle │ │ │ ├── Default.tsx │ │ │ ├── Disabled.tsx │ │ │ ├── Hidden.tsx │ │ │ ├── Hint.tsx │ │ │ ├── RegularWeightLabel.tsx │ │ │ └── Validation.tsx │ ├── grid │ │ ├── GridAllBreak.tsx │ │ ├── GridColumnBreaks.tsx │ │ ├── GridColumnWrapping.tsx │ │ ├── GridEqual.tsx │ │ ├── GridEqualMulti.tsx │ │ ├── GridHorizontal.tsx │ │ ├── GridNesting.tsx │ │ ├── GridNoGutters.tsx │ │ ├── GridOffset.tsx │ │ ├── GridOneCol.tsx │ │ ├── GridReordering.tsx │ │ ├── GridStacked.tsx │ │ ├── GridVariable.tsx │ │ └── GridVertical.tsx │ ├── loaders │ │ ├── dots │ │ │ ├── DotsColor.tsx │ │ │ ├── DotsDefault.tsx │ │ │ └── DotsSize.tsx │ │ ├── inline │ │ │ ├── InlineColor.tsx │ │ │ ├── InlineDefault.tsx │ │ │ └── InlineSize.tsx │ │ ├── progress │ │ │ ├── ProgressColor.tsx │ │ │ ├── ProgressDefault.tsx │ │ │ └── ProgressSize.tsx │ │ ├── skeleton │ │ │ ├── SkeletonDefault.tsx │ │ │ ├── SkeletonLight.tsx │ │ │ └── SkeletonSize.tsx │ │ └── spinner │ │ │ ├── SpinnerColor.tsx │ │ │ ├── SpinnerDefault.tsx │ │ │ └── SpinnerSize.tsx │ ├── menu │ │ ├── Arrow.tsx │ │ ├── Button.tsx │ │ ├── Danger.tsx │ │ ├── Default.tsx │ │ ├── Disabled.tsx │ │ ├── GroupedItems.tsx │ │ ├── Media.tsx │ │ ├── Meta.tsx │ │ ├── Nested.tsx │ │ ├── Placement.tsx │ │ └── Size.tsx │ ├── modal │ │ ├── ModalDanger.tsx │ │ ├── ModalDefault.tsx │ │ └── ModalSize.tsx │ ├── notifications │ │ ├── alerts │ │ │ ├── AlertDefault.tsx │ │ │ └── AlertType.tsx │ │ ├── global-alert │ │ │ ├── GlobalAlertDefault.tsx │ │ │ └── GlobalAlertTypes.tsx │ │ ├── notifications │ │ │ ├── NotificationDefault.tsx │ │ │ ├── NotificationPlacement.tsx │ │ │ └── NotificationType.tsx │ │ └── well │ │ │ ├── WellDefault.tsx │ │ │ ├── WellFloating.tsx │ │ │ ├── WellMultiline.tsx │ │ │ └── WellRecessed.tsx │ ├── pagination │ │ ├── CursorDefault.tsx │ │ ├── OffsetDefault.tsx │ │ ├── OffsetGap.tsx │ │ └── OffsetPadding.tsx │ ├── pane │ │ ├── PaneGrid.tsx │ │ ├── PaneHorizontal.tsx │ │ ├── PaneHorizontalCollapse.tsx │ │ ├── PaneVertical.tsx │ │ ├── PaneVerticalCollapse.tsx │ │ └── SplitterButtonPosition.tsx │ ├── table │ │ ├── TableCaption.tsx │ │ ├── TableCursorPagination.tsx │ │ ├── TableDefault.tsx │ │ ├── TableDraggable.tsx │ │ ├── TableGroupedRows.tsx │ │ ├── TableLoading.tsx │ │ ├── TableOverflow.tsx │ │ ├── TablePagination.tsx │ │ ├── TableScroll.tsx │ │ ├── TableSelectRows.tsx │ │ ├── TableSize.tsx │ │ ├── TableSort.tsx │ │ ├── TableStripedRows.tsx │ │ ├── TableTruncate.tsx │ │ ├── TableVerticalScrolling.tsx │ │ └── TableVirtualized.tsx │ ├── tabs │ │ ├── TabsDefault.tsx │ │ ├── TabsDisabled.tsx │ │ └── TabsVertical.tsx │ ├── tags │ │ ├── TagsAvatar.tsx │ │ ├── TagsClose.tsx │ │ ├── TagsColor.tsx │ │ ├── TagsDefault.tsx │ │ ├── TagsShape.tsx │ │ ├── TagsSize.tsx │ │ └── TagsWeight.tsx │ ├── theme-provider │ │ ├── ThemeProviderBranding.tsx │ │ ├── ThemeProviderDefault.tsx │ │ ├── ThemeProviderExtension.tsx │ │ ├── ThemeProviderNesting.tsx │ │ └── ThemeProviderTargeting.tsx │ ├── tooltip-dialog │ │ ├── TooltipDialogDefault.tsx │ │ └── TooltipDialogPlacement.tsx │ ├── tooltip │ │ ├── TooltipDefault.tsx │ │ ├── TooltipPlacement.tsx │ │ ├── TooltipSize.tsx │ │ └── TooltipType.tsx │ ├── typography │ │ ├── Blockquote.tsx │ │ ├── Ellipsis.tsx │ │ ├── Modifiers.tsx │ │ ├── TypeScale.tsx │ │ ├── code-block │ │ │ ├── Default.tsx │ │ │ ├── Diff.tsx │ │ │ ├── Highlighted.tsx │ │ │ ├── Language.tsx │ │ │ ├── Light.tsx │ │ │ ├── Numbered.tsx │ │ │ └── Size.tsx │ │ ├── code │ │ │ ├── Color.tsx │ │ │ ├── Default.tsx │ │ │ └── Size.tsx │ │ ├── lists │ │ │ ├── Default.tsx │ │ │ ├── Nesting.tsx │ │ │ └── Size.tsx │ │ ├── paragraph │ │ │ ├── Default.tsx │ │ │ └── Size.tsx │ │ └── span │ │ │ ├── Bold.tsx │ │ │ ├── Hue.tsx │ │ │ ├── Icon.tsx │ │ │ ├── Monospace.tsx │ │ │ └── StartIcon.tsx │ └── utilities │ │ ├── MenuArrowStyles.tsx │ │ └── components.ts ├── icons │ ├── components.svg │ ├── content.svg │ └── design.svg ├── layouts │ ├── Home │ │ ├── components │ │ │ ├── Foundation.tsx │ │ │ ├── HomeLink.tsx │ │ │ ├── News.tsx │ │ │ ├── Patterns.tsx │ │ │ ├── Search.tsx │ │ │ └── SectionCallout.tsx │ │ └── index.tsx │ ├── MaxWidth.tsx │ ├── Root │ │ ├── components │ │ │ ├── Footer.tsx │ │ │ ├── Header.tsx │ │ │ ├── SearchInput.tsx │ │ │ └── StyledNavigationLink.tsx │ │ └── index.tsx │ ├── Sidebar │ │ ├── components │ │ │ ├── DesktopSidebar.tsx │ │ │ ├── MobileSidebar.tsx │ │ │ └── NavItemTitle.tsx │ │ └── index.tsx │ └── Titled │ │ ├── components │ │ ├── Subtitle.tsx │ │ └── TOC.tsx │ │ └── index.tsx └── pages │ ├── 404.tsx │ ├── components │ ├── accordion.mdx │ ├── alerts.mdx │ ├── anchor.mdx │ ├── avatar.mdx │ ├── breadcrumbs.mdx │ ├── button.mdx │ ├── checkbox.mdx │ ├── chrome.mdx │ ├── code-block.mdx │ ├── code.mdx │ ├── color-picker.mdx │ ├── color-scheme-provider.mdx │ ├── color-swatch.mdx │ ├── combobox.mdx │ ├── date-picker.mdx │ ├── dots.mdx │ ├── draggable.mdx │ ├── drawer.mdx │ ├── file-upload.mdx │ ├── global-alert.mdx │ ├── grid.mdx │ ├── icon-button.mdx │ ├── index.mdx │ ├── inline.mdx │ ├── input-group.mdx │ ├── input.mdx │ ├── lists.mdx │ ├── menu.mdx │ ├── modal.mdx │ ├── notifications.mdx │ ├── pagination.mdx │ ├── palette.mdx │ ├── pane.mdx │ ├── paragraph.mdx │ ├── progress.mdx │ ├── radio.mdx │ ├── range.mdx │ ├── select.mdx │ ├── sheet.mdx │ ├── skeleton.mdx │ ├── span.mdx │ ├── spinner.mdx │ ├── split-button.mdx │ ├── status-indicator.mdx │ ├── stepper.mdx │ ├── table.mdx │ ├── tabs.mdx │ ├── tags.mdx │ ├── textarea.mdx │ ├── theme-object.mdx │ ├── theme-provider.mdx │ ├── tiles.mdx │ ├── timeline.mdx │ ├── toggle-button.mdx │ ├── toggle-icon-button.mdx │ ├── toggle.mdx │ ├── tooltip-dialog.mdx │ ├── tooltip.mdx │ ├── typography.mdx │ ├── utilities.mdx │ ├── versions.mdx │ └── well.mdx │ ├── content │ └── index.mdx │ ├── design │ ├── color.mdx │ ├── icons │ │ ├── chrome-icons.mdx │ │ ├── index.mdx │ │ └── library.mdx │ ├── index.mdx │ └── palette.mdx │ ├── index.tsx │ └── patterns │ ├── buttons.mdx │ ├── copy.mdx │ ├── drag-and-drop.mdx │ ├── errors.mdx │ ├── filters.mdx │ ├── index.mdx │ ├── loaders.mdx │ ├── rich-text-editor.mdx │ ├── save.mdx │ └── tables │ └── basic-formatting.mdx ├── static ├── _redirects ├── apple-touch-icon.png ├── browserconfig.xml ├── components │ └── avatar │ │ └── user.png ├── favicon.ico ├── google24fd052fab97d4cf.html ├── mask-icon.svg ├── og-image.png ├── tile-wide.png └── tile.png ├── tsconfig.json └── utils ├── color-scheme.js ├── deploy.mjs ├── typings ├── react.d.ts ├── remark-react.d.ts ├── smartquotes.d.ts ├── styled.d.ts ├── svg.d.ts └── yml.d.ts └── upgrade.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | /** 9 | * Disables Gatsby's built-in eslint-loader called by `gatsby develop`. 10 | * @see https://www.gatsbyjs.com/docs/how-to/custom-configuration/eslint/#disabling-eslint 11 | * Rules required by Gatsby for fast-refresh are automatcally applied. 12 | * @see https://github.com/gatsbyjs/gatsby/blob/gatsby%405.13.6/packages/gatsby/src/utils/webpack.config.js#L269 13 | * @see https://github.com/gatsbyjs/gatsby/blob/gatsby%405.13.6/packages/gatsby/src/utils/webpack-utils.ts#L820-L846 14 | * This does not interfere with this project ESLint V9's flat config. 15 | */ 16 | module.exports = {}; 17 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | 2 | * @zendeskgarden/maintainers 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Expectations 2 | 3 | 6 | 7 | ## Reality 8 | 9 | 12 | 13 | ## Steps to Reproduce 14 | 15 | 1. 16 | 1. 17 | 1. 18 | 19 | ### Fine Print 20 | 21 | - URL: 22 | - Version: 23 | - Browsers: all 24 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 4 | 5 | ## Description 6 | 7 | 9 | 10 | ## Detail 11 | 12 | 13 | 14 | 15 | 16 | ## Checklist 17 | 18 | - [ ] :ok_hand: website updates are Garden Designer approved (add the designer as a reviewer) 19 | - [ ] :black_nib: copy updates are approved (add the content strategist as a reviewer) 20 | - [ ] :link: considered opportunities for adding cross-reference URLs (grep for keywords) 21 | - [ ] :wheelchair: analyzed via [axe](https://www.deque.com/axe/) and evaluated using VoiceOver 22 | - [ ] :memo: tested in Chrome, Firefox, Safari, Edge 23 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:recommended", "group:allNonMajor"], 3 | "rebaseWhen": "behind-base-branch", 4 | "schedule": ["on Monday every 9 weeks of the year starting on the 8th week"], 5 | "postUpdateOptions": ["npmDedupe"] 6 | } 7 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deployment 2 | 3 | on: 4 | # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_dispatch 5 | workflow_dispatch: 6 | inputs: 7 | branch: 8 | description: 'The branch to deploy' 9 | default: 'main' 10 | required: false 11 | type: string 12 | 13 | env: 14 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 15 | NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }} 16 | NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} 17 | FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }} 18 | 19 | jobs: 20 | deploy: 21 | runs-on: ubuntu-latest 22 | environment: production 23 | steps: 24 | - uses: actions/checkout@v4 25 | with: 26 | ref: ${{ github.event.inputs.branch }} 27 | submodules: true 28 | 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version-file: '.nvmrc' 32 | cache: 'npm' 33 | 34 | - name: build 35 | run: npm ci 36 | 37 | - name: test 38 | run: npm test 39 | 40 | - name: deploy 41 | run: utils/deploy.js 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | node_modules 3 | public 4 | src/gatsby-types.d.ts 5 | yarn.lock 6 | *.log 7 | .cache/ 8 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "react-components"] 2 | path = react-components 3 | url = git@github.com:zendeskgarden/react-components.git 4 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm exec lint-staged 2 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,ts,tsx}": ["stylelint", "eslint", "prettier --write"], 3 | "*.{md,mdx}": ["markdownlint", "prettier --write"], 4 | "**/package.json": ["prettier-package-json --write"] 5 | } 6 | -------------------------------------------------------------------------------- /.markdownlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "blanks-around-fences": false, 4 | "code-block-style": false, 5 | "first-line-h1": false, 6 | "first-header-h1": false, 7 | "no-duplicate-heading": { 8 | "siblings_only": true 9 | }, 10 | "no-emphasis-as-heading": false, 11 | "no-inline-html": false, 12 | "no-space-in-code": false, 13 | "no-space-in-emphasis": false, 14 | "no-trailing-punctuation": false, 15 | "MD013": { 16 | "line_length": 120, 17 | "tables": false 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | react-components 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@zendeskgarden/stylelint-config"], 3 | "customSyntax": "postcss-styled-syntax", 4 | "rules": { 5 | "declaration-empty-line-before": null, 6 | "keyframes-name-pattern": null, 7 | "at-rule-empty-line-before": null, 8 | "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }], 9 | "block-no-empty": null, 10 | "selector-type-no-unknown": null, 11 | "property-no-unknown": null 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | module.exports = { 9 | presets: ['@babel/preset-react'] 10 | }; 11 | -------------------------------------------------------------------------------- /content/nav/content.yml: -------------------------------------------------------------------------------- 1 | - title: Introduction 2 | items: 3 | - id: /content 4 | title: Overview 5 | -------------------------------------------------------------------------------- /content/nav/design.yml: -------------------------------------------------------------------------------- 1 | - title: Introduction 2 | items: 3 | - id: /design 4 | title: Overview 5 | - title: Foundations 6 | items: 7 | - id: /design/color 8 | title: Color 9 | - id: /design/palette 10 | title: Palette 11 | - title: Icons 12 | items: 13 | - id: /design/icons 14 | title: Overview 15 | - id: /design/icons/library 16 | title: Library 17 | - id: /design/icons/chrome-icons 18 | title: Chrome icons 19 | -------------------------------------------------------------------------------- /content/nav/patterns.yml: -------------------------------------------------------------------------------- 1 | - title: Introduction 2 | items: 3 | - id: /patterns 4 | title: Overview 5 | - title: Patterns 6 | items: 7 | - title: Buttons 8 | id: /patterns/buttons 9 | - title: Copy 10 | id: /patterns/copy 11 | - title: Drag and drop 12 | id: /patterns/drag-and-drop 13 | - title: Error handling 14 | id: /patterns/errors 15 | - title: Filters 16 | id: /patterns/filters 17 | - title: Loaders 18 | id: /patterns/loaders 19 | - title: Rich-text editor 20 | id: /patterns/rich-text-editor 21 | - title: Save 22 | id: /patterns/save 23 | - title: Tables 24 | items: 25 | - id: /patterns/tables/basic-formatting 26 | title: Basic formatting 27 | -------------------------------------------------------------------------------- /content/news/news.yml: -------------------------------------------------------------------------------- 1 | - title: Design System Resources 2 | author: Vedran Arnautovic 3 | author_url: https://medium.com/@vedranio 4 | url: https://medium.com/zendesk-creative-blog/design-system-resources-b9119ddf9790 5 | 6 | - title: React containers, some assembly required 7 | author: Ryan Seddon 8 | author_url: https://medium.com/@ryanseddon 9 | url: https://medium.com/zendesk-engineering/react-containers-some-assembly-required-43dd54d879a8 10 | 11 | - title: There's a new shape in town 12 | author: Ginny Wood 13 | author_url: https://medium.com/@ginny_wood 14 | url: https://medium.com/zendesk-creative-blog/theres-a-new-shape-in-town-f45a3a5906ae 15 | 16 | - title: 6 tips for writing effective design system documentation 17 | author: Ross Moody 18 | author_url: https://medium.com/@moodyrooster 19 | url: https://medium.com/zendesk-creative-blog/6-tips-for-writing-effective-design-system-documentation-11c35b44169 20 | 21 | - title: Designing for inclusivity 22 | author: Allison Shaw 23 | author_url: https://www.invisionapp.com/inside-design/author/allison-shaw/ 24 | url: https://www.invisionapp.com/inside-design/designing-for-inclusivity/ 25 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | import React from 'react'; 9 | import { Provider, Layout } from './src/components'; 10 | 11 | export const wrapRootElement = ({ props, element }) => {element}; 12 | 13 | export const wrapPageElement = ({ props, element }) => {element}; 14 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | import React from 'react'; 9 | import { Provider, Layout } from './src/components'; 10 | import __html from '!!raw-loader!./utils/color-scheme.js'; 11 | 12 | export const wrapRootElement = ({ props, element }) => {element}; 13 | 14 | export const wrapPageElement = ({ props, element }) => {element}; 15 | 16 | export const onRenderBody = ({ 17 | setHtmlAttributes, 18 | setHeadComponents, 19 | setPreBodyComponents, 20 | setPostBodyComponents 21 | }) => { 22 | setHtmlAttributes({ lang: 'en' }); 23 | 24 | const version = 2; 25 | 26 | setHeadComponents([ 27 | 32 | ]); 33 | 34 | /* eslint-disable-next-line react/no-danger */ 35 | setPreBodyComponents([