├── .nvmrc ├── .npmrc ├── .yarnclean ├── .github ├── CODEOWNERS ├── workflows │ └── pr.yaml └── ISSUE_TEMPLATE.md ├── .husky └── pre-commit ├── .storybook ├── manager-head.html ├── static │ └── images │ │ └── avatars │ │ ├── reed.png │ │ ├── rue.png │ │ ├── sage.png │ │ ├── user.png │ │ ├── chrome.png │ │ ├── clove.png │ │ ├── fennel.png │ │ ├── linden.png │ │ ├── system.png │ │ └── default.png ├── preview-head.html └── manager.js ├── .prettierrc ├── .gitignore ├── utils ├── scripts │ └── build.sh ├── test │ ├── tsconfig.test.json │ ├── svg-mock.tsx │ ├── jest.d.ts │ └── rootDir │ │ └── __mocks__ │ │ └── dom-helpers │ │ └── scrollTo.js └── build │ ├── declarations.d.ts │ ├── Intl.d.ts │ └── react.d.ts ├── .markdownlint.json ├── packages ├── breadcrumbs │ ├── src │ │ ├── index.ts │ │ └── styled │ │ │ ├── index.ts │ │ │ ├── StyledCenteredBreadcrumbItem.tsx │ │ │ └── StyledChevronIcon.tsx │ ├── demo │ │ └── stories │ │ │ └── data.ts │ └── tsconfig.build.json ├── avatars │ ├── demo │ │ └── stories │ │ │ ├── data.ts │ │ │ ├── types.ts │ │ │ └── StatusIndicatorStory.tsx │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ ├── styled │ │ ├── index.ts │ │ └── StyledText.ts │ │ └── elements │ │ └── components │ │ └── Text.tsx ├── draggable │ ├── demo │ │ ├── stories │ │ │ ├── data.ts │ │ │ └── DraggableStory.tsx │ │ └── ~patterns │ │ │ └── stories │ │ │ └── data.ts │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ ├── elements │ │ └── draggable │ │ │ └── components │ │ │ ├── Content.tsx │ │ │ └── Grip.tsx │ │ └── styled │ │ ├── draggable-list │ │ └── StyledDraggableList.spec.tsx │ │ └── draggable │ │ └── StyledContent.ts ├── datepickers │ ├── demo │ │ └── stories │ │ │ ├── data.ts │ │ │ └── types.ts │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ └── styled │ │ ├── StyledMenu.ts │ │ └── StyledHeader.ts ├── tags │ ├── src │ │ ├── index.ts │ │ ├── styled │ │ │ ├── index.ts │ │ │ └── StyledAvatar.ts │ │ └── elements │ │ │ └── Avatar.tsx │ ├── tsconfig.build.json │ └── demo │ │ └── ~patterns │ │ └── stories │ │ └── data.ts ├── tooltips │ ├── demo │ │ └── stories │ │ │ ├── types.ts │ │ │ └── data.ts │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ ├── styled │ │ ├── index.ts │ │ ├── StyledParagraph.ts │ │ └── StyledTitle.ts │ │ └── elements │ │ ├── Title.tsx │ │ ├── Paragraph.tsx │ │ └── utils.ts ├── typography │ ├── demo │ │ ├── stories │ │ │ ├── types.ts │ │ │ └── KbdStory.tsx │ │ ├── kbd.stories.mdx │ │ ├── paragraph.stories.mdx │ │ └── ellipsis.stories.mdx │ ├── tsconfig.build.json │ └── src │ │ ├── elements │ │ ├── span │ │ │ ├── Icon.tsx │ │ │ └── StartIcon.tsx │ │ ├── lists │ │ │ ├── OrderedListItem.spec.tsx │ │ │ └── UnorderedListItem.spec.tsx │ │ └── Kbd.tsx │ │ └── styled │ │ ├── StyledCodeBlockToken.spec.tsx │ │ ├── StyledCodeBlockContainer.spec.tsx │ │ ├── index.ts │ │ └── StyledEllipsis.ts ├── modals │ ├── demo │ │ └── stories │ │ │ └── types.ts │ ├── tsconfig.build.json │ └── src │ │ ├── styled │ │ ├── StyledDangerIcon.ts │ │ ├── StyledDrawerFooterItem.ts │ │ ├── StyledTooltipDialogFooterItem.ts │ │ ├── StyledDrawerBody.ts │ │ └── StyledTooltipDialogFooter.ts │ │ ├── elements │ │ ├── FooterItem.tsx │ │ ├── Drawer │ │ │ ├── Footer.tsx │ │ │ ├── FooterItem.tsx │ │ │ ├── Close.spec.tsx │ │ │ └── Body.spec.tsx │ │ └── TooltipDialog │ │ │ ├── Footer.tsx │ │ │ └── FooterItem.tsx │ │ └── index.ts ├── tabs │ ├── demo │ │ └── stories │ │ │ └── types.ts │ ├── tsconfig.build.json │ └── src │ │ ├── styled │ │ └── index.ts │ │ ├── index.ts │ │ └── utils │ │ └── useTabsContext.ts ├── .template │ ├── src │ │ ├── styled │ │ │ ├── index.ts │ │ │ ├── Styled{{capitalize component}}Text.ts │ │ │ └── Styled{{capitalize component}}Text.spec.tsx │ │ ├── index.ts │ │ └── types │ │ │ └── index.ts │ └── tsconfig.build.json ├── loaders │ ├── demo │ │ └── stories │ │ │ ├── types.ts │ │ │ └── data.ts │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ └── styled │ │ └── index.ts ├── colorpickers │ ├── src │ │ ├── styled │ │ │ ├── types.ts │ │ │ ├── ColorSwatch │ │ │ │ ├── StyledCell.ts │ │ │ │ └── StyledColorSwatch.ts │ │ │ ├── ColorPicker │ │ │ │ ├── StyledInputGroup.ts │ │ │ │ ├── StyledInput.ts │ │ │ │ ├── StyledSliderGroup.ts │ │ │ │ └── StyledLabel.ts │ │ │ └── ColorPickerDialog │ │ │ │ └── StyledTooltipBody.ts │ │ ├── utils │ │ │ └── validation.ts │ │ └── index.ts │ └── tsconfig.build.json ├── forms │ ├── tsconfig.build.json │ ├── src │ │ ├── styled │ │ │ ├── tiles │ │ │ │ └── StyledTileInput.ts │ │ │ ├── common │ │ │ │ ├── StyledLegend.spec.tsx │ │ │ │ ├── StyledFieldset.spec.tsx │ │ │ │ ├── StyledLegend.ts │ │ │ │ ├── StyledMessageIcon.ts │ │ │ │ └── StyledMessageIcon.spec.tsx │ │ │ ├── checkbox │ │ │ │ ├── StyledDashSvg.spec.tsx │ │ │ │ ├── StyledCheckSvg.spec.tsx │ │ │ │ ├── StyledCheckHint.spec.tsx │ │ │ │ ├── StyledCheckLabel.spec.tsx │ │ │ │ ├── StyledCheckMessage.spec.tsx │ │ │ │ ├── StyledCheckHint.ts │ │ │ │ ├── StyledCheckLabel.ts │ │ │ │ ├── StyledCheckMessage.ts │ │ │ │ └── StyledCheckInput.spec.tsx │ │ │ ├── radio │ │ │ │ └── StyledRadioSvg.spec.tsx │ │ │ ├── file-list │ │ │ │ ├── StyledFileList.spec.tsx │ │ │ │ ├── StyledFileList.ts │ │ │ │ ├── StyledFileClose.spec.tsx │ │ │ │ ├── StyledFileListItem.spec.tsx │ │ │ │ ├── StyledFileDelete.spec.tsx │ │ │ │ └── StyledFileDelete.ts │ │ │ ├── toggle │ │ │ │ ├── StyledToggleSvg.spec.tsx │ │ │ │ └── StyledToggleSvg.ts │ │ │ ├── select │ │ │ │ └── StyledSelectWrapper.spec.tsx │ │ │ └── text │ │ │ │ └── StyledTextMediaInput.ts │ │ ├── utils │ │ │ ├── useFileContext.ts │ │ │ ├── useTilesContext.ts │ │ │ ├── useInputGroupContext.ts │ │ │ ├── useInputContext.ts │ │ │ └── useFieldsetContext.ts │ │ └── elements │ │ │ ├── common │ │ │ ├── Fieldset.spec.tsx │ │ │ └── Legend.tsx │ │ │ └── file-list │ │ │ └── components │ │ │ └── Item.tsx │ └── demo │ │ └── stories │ │ └── types.ts ├── grid │ ├── tsconfig.build.json │ ├── src │ │ ├── styled │ │ │ ├── index.ts │ │ │ └── pane │ │ │ │ ├── StyledPane.ts │ │ │ │ └── StyledPaneContent.ts │ │ └── utils │ │ │ ├── usePaneContext.ts │ │ │ └── useGridContext.ts │ └── demo │ │ ├── ~patterns │ │ ├── stories │ │ │ └── types.ts │ │ └── patterns.stories.mdx │ │ └── stories │ │ └── types.ts ├── accordions │ ├── tsconfig.build.json │ ├── demo │ │ └── stories │ │ │ └── types.ts │ └── src │ │ ├── utils │ │ ├── index.ts │ │ ├── useSectionContext.ts │ │ ├── useTimelineContext.ts │ │ ├── useHeaderContext.ts │ │ └── useStepperContext.ts │ │ ├── index.ts │ │ ├── styled │ │ ├── accordion │ │ │ ├── StyledAccordion.ts │ │ │ └── StyledSection.ts │ │ └── timeline │ │ │ ├── StyledContent.ts │ │ │ └── StyledTimeline.ts │ │ └── elements │ │ ├── stepper │ │ └── Stepper.spec.tsx │ │ ├── accordion │ │ └── components │ │ │ └── Section.tsx │ │ └── timeline │ │ └── components │ │ └── OppositeContent.tsx ├── buttons │ ├── tsconfig.build.json │ └── src │ │ ├── styled │ │ └── index.ts │ │ ├── utils │ │ └── useSplitButtonContext.ts │ │ └── elements │ │ └── components │ │ ├── EndIcon.tsx │ │ └── StartIcon.tsx ├── chrome │ ├── tsconfig.build.json │ ├── src │ │ ├── utils │ │ │ ├── useNavContext.ts │ │ │ ├── useNavListContext.ts │ │ │ ├── useChromeContext.ts │ │ │ ├── useBodyContext.ts │ │ │ └── useSheetContext.ts │ │ ├── elements │ │ │ ├── body │ │ │ │ ├── Body.spec.tsx │ │ │ │ ├── Main.spec.tsx │ │ │ │ ├── Main.tsx │ │ │ │ └── Content.spec.tsx │ │ │ ├── footer │ │ │ │ ├── Footer.spec.tsx │ │ │ │ ├── FooterItem.spec.tsx │ │ │ │ └── FooterItem.tsx │ │ │ ├── header │ │ │ │ ├── Header.spec.tsx │ │ │ │ ├── HeaderItemText.spec.tsx │ │ │ │ ├── HeaderItemWrapper.spec.tsx │ │ │ │ ├── HeaderItemIcon.tsx │ │ │ │ └── HeaderItemIcon.spec.tsx │ │ │ ├── sheet │ │ │ │ └── components │ │ │ │ │ ├── Body.spec.tsx │ │ │ │ │ ├── Footer.spec.tsx │ │ │ │ │ ├── Header.spec.tsx │ │ │ │ │ ├── Body.tsx │ │ │ │ │ ├── FooterItem.spec.tsx │ │ │ │ │ ├── FooterItem.tsx │ │ │ │ │ ├── Title.spec.tsx │ │ │ │ │ ├── Footer.tsx │ │ │ │ │ └── Description.spec.tsx │ │ │ └── nav │ │ │ │ ├── NavItemText.spec.tsx │ │ │ │ ├── NavItemIcon.tsx │ │ │ │ └── NavItemIcon.spec.tsx │ │ └── styled │ │ │ ├── nav │ │ │ ├── StyledNavListItem.ts │ │ │ └── StyledNavList.ts │ │ │ ├── footer │ │ │ └── StyledFooterItem.ts │ │ │ ├── sheet │ │ │ ├── StyledSheetFooterItem.ts │ │ │ ├── StyledSheetBody.ts │ │ │ └── StyledSheetTitle.ts │ │ │ ├── body │ │ │ └── StyledBody.ts │ │ │ └── header │ │ │ └── StyledHeaderItemWrapper.ts │ └── demo │ │ └── stories │ │ └── types.ts ├── dropdowns │ ├── tsconfig.build.json │ ├── src │ │ ├── elements │ │ │ └── combobox │ │ │ │ └── TagAvatar.tsx │ │ ├── context │ │ │ ├── useItemGroupContext.ts │ │ │ ├── useItemContext.ts │ │ │ └── useOptionContext.ts │ │ └── views │ │ │ ├── combobox │ │ │ ├── StyledContainer.ts │ │ │ ├── StyledHint.ts │ │ │ ├── StyledMessage.ts │ │ │ ├── StyledLabel.ts │ │ │ └── StyledOptionContent.ts │ │ │ └── menu │ │ │ ├── StyledItem.ts │ │ │ ├── StyledItemGroup.ts │ │ │ ├── StyledItemIcon.ts │ │ │ ├── StyledItemMeta.ts │ │ │ ├── StyledFloatingMenu.ts │ │ │ ├── StyledItemContent.ts │ │ │ └── StyledSeparator.ts │ └── demo │ │ └── ~patterns │ │ └── stories │ │ └── types.ts ├── pagination │ ├── tsconfig.build.json │ └── src │ │ ├── index.ts │ │ ├── styled │ │ ├── OffsetPagination │ │ │ ├── StyledNav.ts │ │ │ ├── StyledGapListItem.spec.tsx │ │ │ └── StyledNavigation.ts │ │ └── CursorPagination │ │ │ └── StyledCursorPagination.ts │ │ └── elements │ │ └── OffsetPagination │ │ └── components │ │ ├── Gap.spec.tsx │ │ ├── Next.spec.tsx │ │ ├── Page.spec.tsx │ │ └── Previous.spec.tsx ├── tables │ ├── tsconfig.build.json │ ├── demo │ │ └── stories │ │ │ └── types.ts │ └── src │ │ ├── styled │ │ ├── StyledBody.ts │ │ ├── StyledHiddenCell.ts │ │ ├── StyledCaption.ts │ │ └── style-utils.ts │ │ ├── elements │ │ ├── Table.spec.tsx │ │ ├── Body.tsx │ │ ├── OverflowButton.spec.tsx │ │ ├── Caption.tsx │ │ └── Head.tsx │ │ └── utils │ │ └── useTableContext.ts ├── theming │ ├── tsconfig.build.json │ ├── src │ │ ├── elements │ │ │ ├── palette │ │ │ │ └── index.spec.ts │ │ │ └── ThemeProvider.tsx │ │ └── utils │ │ │ ├── StyledBaseIcon.ts │ │ │ └── getMenuPosition.ts │ └── demo │ │ ├── stories │ │ └── data.ts │ │ └── colorSchemeProvider.stories.mdx ├── notifications │ ├── tsconfig.build.json │ ├── demo │ │ └── stories │ │ │ └── data.ts │ └── src │ │ ├── utils │ │ ├── useNotificationsContext.ts │ │ └── useGlobalAlertContext.ts │ │ ├── elements │ │ ├── toaster │ │ │ └── ToastContext.ts │ │ ├── well │ │ │ ├── Well.spec.tsx │ │ │ ├── Title.spec.tsx │ │ │ ├── Paragraph.tsx │ │ │ ├── Title.tsx │ │ │ └── Paragraph.spec.tsx │ │ ├── alert │ │ │ ├── Paragraph.tsx │ │ │ ├── Title.tsx │ │ │ └── Paragraph.spec.tsx │ │ ├── Paragraph.spec.tsx │ │ ├── global-alert │ │ │ ├── GlobalAlertClose.spec.tsx │ │ │ ├── GlobalAlertTitle.spec.tsx │ │ │ ├── GlobalAlertButton.spec.tsx │ │ │ ├── GlobalAlertContent.spec.tsx │ │ │ └── GlobalAlertContent.tsx │ │ ├── Title.tsx │ │ └── Paragraph.tsx │ │ └── styled │ │ ├── global-alert │ │ ├── StyledGlobalAlertContent.ts │ │ └── index.ts │ │ ├── index.ts │ │ └── content │ │ └── StyledParagraph.ts └── dropdowns.legacy │ ├── tsconfig.build.json │ └── src │ ├── elements │ ├── Fields │ │ ├── Hint.tsx │ │ └── Message.tsx │ └── Menu │ │ ├── Separator.tsx │ │ └── Items │ │ ├── HeaderIcon.tsx │ │ └── MediaFigure.tsx │ └── styled │ └── select │ └── StyledSelect.ts ├── .editorconfig ├── docs └── adrs │ └── README.md ├── .lintstagedrc ├── .svgo.config.js └── .stylelintrc /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.yarnclean: -------------------------------------------------------------------------------- 1 | @types/react-native 2 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @zendeskgarden/maintainers 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm exec lint-staged && npm run build -- --since HEAD --exclude-dependents 2 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/static/images/avatars/reed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/reed.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/rue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/rue.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/sage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/sage.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/user.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/chrome.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/clove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/clove.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/fennel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/fennel.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/linden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/linden.png -------------------------------------------------------------------------------- /.storybook/static/images/avatars/system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/system.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .changelog 3 | .env 4 | .netlify 5 | .vscode 6 | node_modules 7 | yarn.lock 8 | *.log 9 | demo/**/* 10 | packages/**/dist 11 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.storybook/static/images/avatars/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/react-components/HEAD/.storybook/static/images/avatars/default.png -------------------------------------------------------------------------------- /utils/scripts/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -x 3 | set -e 4 | 5 | NODE_ENV=production rollup -c ../../utils/build/rollup.config.js --bundleConfigAsCjs 6 | -------------------------------------------------------------------------------- /utils/test/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "target": "ES2019", 6 | "jsx": "react", 7 | "noEmit": false 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "first-line-h1": false, 4 | "first-header-h1": false, 5 | "line-length": { 6 | "line_length": 100, 7 | "tables": false 8 | }, 9 | "no-inline-html": false 10 | } 11 | -------------------------------------------------------------------------------- /packages/breadcrumbs/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Breadcrumb } from './elements/Breadcrumb'; 9 | -------------------------------------------------------------------------------- /packages/avatars/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const AVATAR_TYPE = ['icon', 'image', 'text'] as const; 9 | -------------------------------------------------------------------------------- /packages/draggable/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const LIST_ITEMS = ['Turnip', 'Corn', 'Celery', 'Grape']; 9 | -------------------------------------------------------------------------------- /packages/breadcrumbs/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const BREADCRUMB_CHILDREN = ['Garden', 'Vegetable row', 'Lettuce']; 9 | -------------------------------------------------------------------------------- /packages/datepickers/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const DATE_STYLE_OPTIONS = ['full', 'long', 'medium', 'short'] as const; 9 | -------------------------------------------------------------------------------- /packages/tags/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Tag } from './elements/Tag'; 9 | 10 | export type { ITagProps } from './types'; 11 | -------------------------------------------------------------------------------- /packages/tooltips/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface ITooltipContent { 9 | title: string; 10 | paragraph: string; 11 | } 12 | -------------------------------------------------------------------------------- /packages/typography/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface IListItem { 9 | text: string; 10 | items?: IListItem[]; 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | ; top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | 7 | trim_trailing_whitespace = true 8 | 9 | ; Unix style line endings 10 | end_of_line = lf 11 | 12 | ; Always end file on newline 13 | insert_final_newline = true 14 | 15 | ; Indentation 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/modals/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface IFooterItem { 9 | text: string; 10 | type?: 'basic' | 'primary'; 11 | } 12 | -------------------------------------------------------------------------------- /packages/tags/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './StyledTag'; 9 | export * from './StyledAvatar'; 10 | export * from './StyledClose'; 11 | -------------------------------------------------------------------------------- /docs/adrs/README.md: -------------------------------------------------------------------------------- 1 | # Architectural Decision Records 2 | 3 | Garden architectural decison records (ADRs) capture important decisions made, 4 | along with context and consequences. 5 | 6 | - [ADR-001](./001-theming-peer-dependency.md): Theming peer dependency 7 | - [ADR-002](./002-theme-default-prop-removal.md): Removal of `theme` default prop 8 | -------------------------------------------------------------------------------- /packages/avatars/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { AVATAR_TYPE } from './data'; 9 | 10 | export type TYPE = (typeof AVATAR_TYPE)[number]; 11 | -------------------------------------------------------------------------------- /packages/tabs/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface ITab { 9 | value: string; 10 | panel: string; 11 | disabled?: boolean; 12 | } 13 | -------------------------------------------------------------------------------- /utils/build/declarations.d.ts: -------------------------------------------------------------------------------- 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 | /* Globals */ 9 | declare const PACKAGE_VERSION: string; 10 | 11 | /** Files */ 12 | declare module '*.svg'; 13 | -------------------------------------------------------------------------------- /packages/.template/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './Styled{{capitalize component}}'; 9 | export * from './Styled{{capitalize component}}Text'; 10 | -------------------------------------------------------------------------------- /packages/datepickers/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { DATE_STYLE_OPTIONS } from './data'; 9 | 10 | export type DATE_STYLE = (typeof DATE_STYLE_OPTIONS)[number]; 11 | -------------------------------------------------------------------------------- /packages/loaders/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { TYPE_SCALE_OPTIONS } from './data'; 9 | 10 | export type TYPE_SCALE = (typeof TYPE_SCALE_OPTIONS)[number]; 11 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/types.ts: -------------------------------------------------------------------------------- 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 | export interface IRGBColorProps { 9 | $red: number; 10 | $green: number; 11 | $blue: number; 12 | $alpha?: number; 13 | } 14 | -------------------------------------------------------------------------------- /packages/forms/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/grid/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/tabs/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/tags/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/.template/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/accordions/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/avatars/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/buttons/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/chrome/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/draggable/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/dropdowns/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/loaders/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/modals/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/pagination/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/tables/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/theming/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/tooltips/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/typography/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /utils/test/svg-mock.tsx: -------------------------------------------------------------------------------- 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 | 10 | const MockSVG = props => ; 11 | 12 | export default MockSVG; 13 | -------------------------------------------------------------------------------- /packages/breadcrumbs/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/colorpickers/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/datepickers/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/notifications/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /utils/test/jest.d.ts: -------------------------------------------------------------------------------- 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 | /** JestDom matcher support */ 9 | import '@testing-library/jest-dom'; 10 | 11 | /** Jest matchers for styled-components */ 12 | import 'jest-styled-components'; 13 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "declarationDir": "dist/typings", 6 | "declaration": true, 7 | "sourceMap": false, 8 | "noEmit": false, 9 | "paths": {} 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["**/*.spec.tsx", "**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/loaders/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const TYPE_SCALE_OPTIONS = [ 9 | 'small', 10 | 'medium', 11 | 'large', 12 | 'extra-large', 13 | '2x-large', 14 | '3x-large' 15 | ] as const; 16 | -------------------------------------------------------------------------------- /utils/build/Intl.d.ts: -------------------------------------------------------------------------------- 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 | declare namespace Intl { 9 | interface DateTimeFormatOptions extends Intl.DateTimeFormatOptions { 10 | dateStyle?: 'full' | 'long' | 'medium' | 'short'; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/notifications/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const TOAST_PLACEMENT_OPTIONS = [ 9 | 'bottom', 10 | 'bottom-end', 11 | 'bottom-start', 12 | 'top', 13 | 'top-end', 14 | 'top-start' 15 | ] as const; 16 | -------------------------------------------------------------------------------- /packages/tooltips/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 { ITooltipContent } from './types'; 9 | 10 | export const TOOLTIP_CONTENT: ITooltipContent = { 11 | title: 'Title text', 12 | paragraph: 'Veggies es bonus' 13 | }; 14 | -------------------------------------------------------------------------------- /packages/avatars/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Avatar } from './elements/Avatar'; 9 | export { StatusIndicator } from './elements/StatusIndicator'; 10 | 11 | export type { IAvatarProps, IStatusIndicatorProps } from './types'; 12 | -------------------------------------------------------------------------------- /packages/tables/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { ICellProps } from '@zendeskgarden/react-tables'; 9 | 10 | export type CELL_WIDTH = ICellProps['width']; 11 | 12 | export type TABLE_ROW = string | Record; 13 | -------------------------------------------------------------------------------- /packages/theming/src/elements/palette/index.spec.ts: -------------------------------------------------------------------------------- 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 PALETTE from '.'; 9 | 10 | describe('PALETTE', () => { 11 | it('matches snapshot', () => { 12 | expect(PALETTE).toMatchSnapshot(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,ts,tsx}": [ 3 | "stylelint", 4 | "eslint --max-warnings 0", 5 | "jest --config=utils/test/jest.config.js --bail --findRelatedTests --passWithNoTests", 6 | "prettier --write" 7 | ], 8 | "!(*CHANGELOG|docs/changelogs/*).{md,mdx}": [ 9 | "markdownlint", 10 | "prettier --write" 11 | ], 12 | "**/package.json": [ 13 | "prettier-package-json --write" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/tabs/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledTab } from './StyledTab'; 9 | export { StyledTabList } from './StyledTabList'; 10 | export { StyledTabPanel } from './StyledTabPanel'; 11 | export { StyledTabs } from './StyledTabs'; 12 | -------------------------------------------------------------------------------- /packages/tooltips/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Paragraph } from './elements/Paragraph'; 9 | export { Title } from './elements/Title'; 10 | export { Tooltip } from './elements/Tooltip'; 11 | 12 | export type { ITooltipProps } from './types'; 13 | -------------------------------------------------------------------------------- /packages/.template/src/index.ts: -------------------------------------------------------------------------------- 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 { HTMLAttributes } from 'react'; 9 | 10 | export { {{capitalize component}} } from './elements/{{capitalize component}}'; 11 | 12 | export type { I{{capitalize component}}Props } from './types'; 13 | -------------------------------------------------------------------------------- /packages/colorpickers/src/utils/validation.ts: -------------------------------------------------------------------------------- 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 | export const isValidHex = (hexString: string) => { 9 | const regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/iu; 10 | 11 | return regEx.test(hexString); 12 | }; 13 | -------------------------------------------------------------------------------- /utils/build/react.d.ts: -------------------------------------------------------------------------------- 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'; 9 | 10 | declare module 'react' { 11 | interface HTMLAttributes extends AriaAttributes, DOMAttributes { 12 | 'data-garden-id'?: string; 13 | 'data-garden-version'?: string; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/.template/src/types/index.ts: -------------------------------------------------------------------------------- 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 { HTMLAttributes } from 'react'; 9 | 10 | export interface I{{capitalize component}}Props extends HTMLAttributes { 11 | /** Applies compact styling */ 12 | isCompact?: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /.github/workflows/pr.yaml: -------------------------------------------------------------------------------- 1 | name: PR 2 | on: 3 | pull_request: 4 | types: [opened, labeled, unlabeled, synchronize] 5 | jobs: 6 | label: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: mheap/github-action-required-labels@v5 10 | with: 11 | mode: exactly 12 | count: 1 13 | labels: 'PR: Breaking Change :boom:, PR: Bug Fix :bug:, PR: Docs :memo:, PR: Internal :seedling:, PR: New Feature :rocket:' 14 | -------------------------------------------------------------------------------- /utils/test/rootDir/__mocks__/dom-helpers/scrollTo.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 | /* eslint-disable no-unused-vars */ 9 | 10 | /** 11 | * Mock `scrollTo` implementation 12 | * @param {*} domNode 13 | */ 14 | export default function scrollTo(domNode) { 15 | return undefined; 16 | } 17 | -------------------------------------------------------------------------------- /packages/datepickers/src/index.ts: -------------------------------------------------------------------------------- 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 | export { DatePicker } from './elements/DatePicker/DatePicker'; 9 | export { DatePickerRange } from './elements/DatePickerRange/DatePickerRange'; 10 | 11 | export type { IDatePickerProps, IDatePickerRangeProps } from './types'; 12 | -------------------------------------------------------------------------------- /packages/tooltips/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledParagraph } from './StyledParagraph'; 9 | export { StyledTitle } from './StyledTitle'; 10 | export { StyledTooltip } from './StyledTooltip'; 11 | export { StyledTooltipWrapper } from './StyledTooltipWrapper'; 12 | -------------------------------------------------------------------------------- /packages/pagination/src/index.ts: -------------------------------------------------------------------------------- 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 | export { OffsetPagination } from './elements/OffsetPagination/OffsetPagination'; 9 | export { CursorPagination } from './elements/CursorPagination/CursorPagination'; 10 | 11 | export type { IPaginationProps, PageType } from './types'; 12 | -------------------------------------------------------------------------------- /packages/tabs/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Tab } from './elements/Tab'; 9 | export { TabList } from './elements/TabList'; 10 | export { TabPanel } from './elements/TabPanel'; 11 | export { Tabs } from './elements/Tabs'; 12 | 13 | export type { ITabProps, ITabPanelProps, ITabsProps } from './types'; 14 | -------------------------------------------------------------------------------- /packages/buttons/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './StyledAnchor'; 9 | export { StyledButton } from './StyledButton'; 10 | export * from './StyledSplitButton'; 11 | export * from './StyledExternalIcon'; 12 | export * from './StyledIcon'; 13 | export { StyledIconButton } from './StyledIconButton'; 14 | -------------------------------------------------------------------------------- /packages/buttons/src/utils/useSplitButtonContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export const SplitButtonContext = createContext(undefined); 11 | 12 | export const useSplitButtonContext = () => { 13 | return useContext(SplitButtonContext); 14 | }; 15 | -------------------------------------------------------------------------------- /packages/avatars/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './StyledAvatar'; 9 | export * from './StyledStandaloneStatus'; 10 | export * from './StyledStandaloneStatusCaption'; 11 | export * from './StyledStandaloneStatusIndicator'; 12 | export * from './StyledStatusIndicator'; 13 | export * from './StyledText'; 14 | -------------------------------------------------------------------------------- /packages/breadcrumbs/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledBreadcrumb } from './StyledBreadcrumb'; 9 | export { StyledChevronIcon } from './StyledChevronIcon'; 10 | export { StyledBreadcrumbItem } from './StyledBreadcrumbItem'; 11 | export { StyledCenteredBreadcrumbItem } from './StyledCenteredBreadcrumbItem'; 12 | -------------------------------------------------------------------------------- /packages/draggable/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Draggable } from './elements/draggable/Draggable'; 9 | export { DraggableList } from './elements/draggable-list/DraggableList'; 10 | export { Dropzone } from './elements/dropzone/Dropzone'; 11 | 12 | export type { IDraggableProps, IDraggableListProps, IDropzoneProps } from './types'; 13 | -------------------------------------------------------------------------------- /packages/dropdowns/src/elements/combobox/TagAvatar.tsx: -------------------------------------------------------------------------------- 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 { Tag } from '@zendeskgarden/react-tags'; 9 | 10 | const TagAvatarComponent = Tag.Avatar; 11 | 12 | TagAvatarComponent.displayName = 'Tag.Avatar'; 13 | 14 | /** 15 | * @extends HTMLAttributes 16 | */ 17 | export const TagAvatar = TagAvatarComponent; 18 | -------------------------------------------------------------------------------- /packages/accordions/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface IAccordionSection { 9 | headerLabel: string; 10 | panel: string; 11 | } 12 | 13 | export interface IStepperStep { 14 | label: string; 15 | content: string; 16 | } 17 | 18 | export interface ITimelineItem { 19 | title: string; 20 | description: string; 21 | } 22 | -------------------------------------------------------------------------------- /packages/accordions/src/utils/index.ts: -------------------------------------------------------------------------------- 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 | export * from './useStepperContext'; 9 | export * from './useStepContext'; 10 | export * from './useAccordionContext'; 11 | export * from './useSectionContext'; 12 | export * from './useHeaderContext'; 13 | export * from './useTimelineContext'; 14 | export * from './useTimelineItemContext'; 15 | -------------------------------------------------------------------------------- /.svgo.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 | plugins: [ 10 | { 11 | name: 'addAttributesToSVGElement', 12 | params: { 13 | attributes: [ 14 | { 15 | focusable: false 16 | }, 17 | { 18 | 'aria-hidden': true 19 | } 20 | ] 21 | } 22 | } 23 | ] 24 | }; 25 | -------------------------------------------------------------------------------- /packages/chrome/src/utils/useNavContext.ts: -------------------------------------------------------------------------------- 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, { useContext } from 'react'; 9 | 10 | interface INavContext { 11 | isExpanded: boolean; 12 | } 13 | 14 | export const NavContext = React.createContext({ 15 | isExpanded: false 16 | }); 17 | 18 | export const useNavContext = () => { 19 | return useContext(NavContext); 20 | }; 21 | -------------------------------------------------------------------------------- /packages/notifications/src/utils/useNotificationsContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | import { Type } from '../types'; 10 | 11 | export const NotificationsContext = createContext(undefined); 12 | 13 | export const useNotificationsContext = () => { 14 | return useContext(NotificationsContext); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/tags/demo/~patterns/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const FAUX_INPUT_TAGS = [ 9 | 'veggies es bonus', 10 | 'beet greens corn soko endive', 11 | 'shallot courgette tatsoi pea sprouts', 12 | 'cauliflower', 13 | 'turnip yarrow ricebean rutabaga', 14 | 'celery quandong swiss chard chicory earthnut pea potato', 15 | 'grape wattle seed' 16 | ]; 17 | -------------------------------------------------------------------------------- /packages/breadcrumbs/src/styled/StyledCenteredBreadcrumbItem.tsx: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { StyledBreadcrumbItem } from './StyledBreadcrumbItem'; 10 | 11 | export const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({ 12 | 'aria-hidden': true 13 | })` 14 | display: flex; 15 | align-items: center; 16 | `; 17 | -------------------------------------------------------------------------------- /packages/chrome/src/utils/useNavListContext.ts: -------------------------------------------------------------------------------- 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, { useContext } from 'react'; 9 | 10 | interface INavListContext { 11 | hasList: boolean; 12 | } 13 | 14 | export const NavListContext = React.createContext(undefined); 15 | 16 | export const useNavListContext = () => { 17 | return useContext(NavListContext); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/avatars/demo/stories/StatusIndicatorStory.tsx: -------------------------------------------------------------------------------- 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 { Story } from '@storybook/react'; 10 | import { StatusIndicator, IStatusIndicatorProps } from '@zendeskgarden/react-avatars'; 11 | 12 | export const StatusIndicatorStory: Story = ({ ...args }) => { 13 | return ; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/forms/src/styled/tiles/StyledTileInput.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | 10 | export const StyledTileInput = styled.input` 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | opacity: 0; 15 | z-index: 1; 16 | margin: 0; 17 | cursor: ${props => (props.disabled ? 'default' : 'pointer')}; 18 | width: 100%; 19 | height: 100%; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/accordions/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Accordion } from './elements/accordion/Accordion'; 9 | export { Stepper } from './elements/stepper/Stepper'; 10 | export { Timeline } from './elements/timeline/Timeline'; 11 | 12 | export type { 13 | IAccordionProps, 14 | IStepperProps, 15 | IStepperLabelProps, 16 | ITimelineProps, 17 | ITimelineItemProps 18 | } from './types'; 19 | -------------------------------------------------------------------------------- /packages/draggable/demo/~patterns/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const COLUMNS = { 9 | 'column-1': [ 10 | { label: 'Turnip', id: 'item-1', isDisabled: false }, 11 | { label: 'Corn', id: 'item-2', isDisabled: false }, 12 | { label: 'Celery', id: 'item-3', isDisabled: false }, 13 | { label: 'Grape', id: 'item-4', isDisabled: false } 14 | ], 15 | 'column-2': [] 16 | }; 17 | -------------------------------------------------------------------------------- /packages/forms/src/utils/useFileContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | interface IFileContext { 11 | isCompact?: boolean; 12 | } 13 | 14 | export const FileContext = createContext(undefined); 15 | 16 | const useFileContext = () => { 17 | return useContext(FileContext); 18 | }; 19 | 20 | export default useFileContext; 21 | -------------------------------------------------------------------------------- /packages/tables/src/styled/StyledBody.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'tables.body'; 12 | 13 | export const StyledBody = styled.tbody.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | ${componentStyles}; 18 | `; 19 | -------------------------------------------------------------------------------- /packages/theming/demo/stories/data.ts: -------------------------------------------------------------------------------- 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 | export const ARROW_POSITIONS = [ 9 | 'top', 10 | 'top-left', 11 | 'top-right', 12 | 'right', 13 | 'right-top', 14 | 'right-bottom', 15 | 'bottom', 16 | 'bottom-left', 17 | 'bottom-right', 18 | 'left', 19 | 'left-top', 20 | 'left-bottom' 21 | ]; 22 | 23 | export const MENU_POSITIONS = ['top', 'right', 'bottom', 'left']; 24 | -------------------------------------------------------------------------------- /packages/chrome/src/utils/useChromeContext.ts: -------------------------------------------------------------------------------- 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, { useContext } from 'react'; 9 | 10 | interface IChromeContext { 11 | hue: string; 12 | isLight?: boolean; 13 | } 14 | 15 | export const ChromeContext = React.createContext({ 16 | hue: 'chromeHue' 17 | }); 18 | 19 | export const useChromeContext = () => { 20 | return useContext(ChromeContext); 21 | }; 22 | -------------------------------------------------------------------------------- /packages/grid/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './StyledCol'; 9 | export * from './StyledGrid'; 10 | export * from './StyledRow'; 11 | 12 | export * from './pane/StyledPane'; 13 | export * from './pane/StyledPaneContent'; 14 | export * from './pane/StyledPaneSplitter'; 15 | export * from './pane/StyledPaneSplitterButton'; 16 | export * from './pane/StyledPaneSplitterButtonContainer'; 17 | -------------------------------------------------------------------------------- /packages/datepickers/src/styled/StyledMenu.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'datepickers.menu'; 12 | 13 | export const StyledMenu = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | ${componentStyles}; 18 | `; 19 | -------------------------------------------------------------------------------- /packages/forms/src/utils/useTilesContext.ts: -------------------------------------------------------------------------------- 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 { useContext, createContext } from 'react'; 9 | import { ITilesProps } from '../types'; 10 | 11 | export const TilesContext = createContext< 12 | Pick | undefined 13 | >(undefined); 14 | 15 | export const useTilesContext = () => { 16 | return useContext(TilesContext); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/grid/demo/~patterns/stories/types.ts: -------------------------------------------------------------------------------- 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 { ISplitterButtonProps, ISplitterProps } from '@zendeskgarden/react-grid'; 9 | 10 | interface IPanes { 11 | name: string; 12 | content: string; 13 | splitters: (ISplitterProps & { 14 | button?: ISplitterButtonProps; 15 | })[]; 16 | } 17 | 18 | export interface IColumns { 19 | name: string; 20 | panes: IPanes[]; 21 | } 22 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/toaster/ToastContext.ts: -------------------------------------------------------------------------------- 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 { createContext, Dispatch } from 'react'; 9 | import { IToasterState, ToasterReducerAction } from './reducer'; 10 | 11 | interface IToastContext { 12 | state: IToasterState; 13 | dispatch: Dispatch; 14 | } 15 | 16 | export const ToastContext = createContext(undefined); 17 | -------------------------------------------------------------------------------- /packages/dropdowns/demo/~patterns/stories/types.ts: -------------------------------------------------------------------------------- 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 { IItemProps, IOptGroupProps, IOptionProps } from '@zendeskgarden/react-dropdowns'; 9 | 10 | export interface IItem extends IItemProps { 11 | isSeparator?: boolean; 12 | } 13 | 14 | export interface IOptGroup extends IOptGroupProps { 15 | options: IOptionProps[]; 16 | } 17 | 18 | export type Options = (IOptionProps | IOptGroup)[]; 19 | -------------------------------------------------------------------------------- /packages/tags/src/elements/Avatar.tsx: -------------------------------------------------------------------------------- 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, { SVGAttributes } from 'react'; 9 | import { StyledAvatar } from '../styled'; 10 | 11 | const AvatarComponent = (props: SVGAttributes) => ; 12 | 13 | AvatarComponent.displayName = 'Tag.Avatar'; 14 | 15 | /** 16 | * @extends SVGAttributes 17 | */ 18 | export const Avatar = AvatarComponent; 19 | -------------------------------------------------------------------------------- /packages/typography/src/elements/span/Icon.tsx: -------------------------------------------------------------------------------- 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, { SVGAttributes } from 'react'; 9 | import { StyledIcon } from '../../styled'; 10 | 11 | const IconComponent = (props: SVGAttributes) => ; 12 | 13 | IconComponent.displayName = 'Span.Icon'; 14 | 15 | /** 16 | * @extends SVGAttributes 17 | */ 18 | export const Icon = IconComponent; 19 | -------------------------------------------------------------------------------- /packages/chrome/src/utils/useBodyContext.ts: -------------------------------------------------------------------------------- 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, { useContext } from 'react'; 9 | 10 | interface IBodyContext { 11 | hasFooter: boolean; 12 | setHasFooter: (footerPresent: boolean) => void; 13 | } 14 | 15 | export const BodyContext = React.createContext(undefined); 16 | 17 | export const useBodyContext = () => { 18 | return useContext(BodyContext); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/typography/demo/kbd.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs'; 2 | import { Kbd } from '@zendeskgarden/react-typography'; 3 | import { KbdStory } from './stories/KbdStory'; 4 | import README from '../README.md'; 5 | 6 | 7 | 8 | # API 9 | 10 | 11 | 12 | # Demo 13 | 14 | 15 | 16 | {args => } 17 | 18 | 19 | 20 | {README} 21 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@zendeskgarden/stylelint-config"], 3 | "customSyntax": "postcss-styled-syntax", 4 | "rules": { 5 | "block-no-empty": null, 6 | "declaration-empty-line-before": null, 7 | "keyframes-name-pattern": null, 8 | "media-query-no-invalid": null, 9 | "selector-type-case": null, 10 | "selector-type-no-unknown": null, 11 | "time-min-milliseconds": [100, { "ignore": ["delay"] }], 12 | "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }] 13 | }, 14 | "ignoreFiles": ["packages/**/*.spec.{js,ts,tsx}", "packages/**/dist/**"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/accordions/src/styled/accordion/StyledAccordion.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'accordions.accordion'; 12 | 13 | export const StyledAccordion = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | ${componentStyles}; 18 | `; 19 | -------------------------------------------------------------------------------- /packages/dropdowns/src/context/useItemGroupContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | import { ISelectedItem } from '@zendeskgarden/container-menu'; 10 | 11 | export const ItemGroupContext = createContext<{ type?: ISelectedItem['type'] }>({}); 12 | 13 | const useItemGroupContext = () => { 14 | return useContext(ItemGroupContext); 15 | }; 16 | 17 | export default useItemGroupContext; 18 | -------------------------------------------------------------------------------- /packages/pagination/src/styled/OffsetPagination/StyledNav.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'pagination.pagination_view'; 12 | 13 | export const StyledNav = styled.nav.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | ${componentStyles}; 18 | `; 19 | -------------------------------------------------------------------------------- /.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 | 23 | 24 | ### Fine Print 25 | 26 | - Component: 27 | - Version: 28 | - Browsers: all 29 | -------------------------------------------------------------------------------- /packages/grid/demo/~patterns/patterns.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Canvas, Story } from '@storybook/addon-docs'; 2 | import { CardStory } from './stories/CardStory'; 3 | import { COLUMNS } from './stories/data'; 4 | 5 | 6 | 7 | # Patterns 8 | 9 | ## Pane Card Layout 10 | 11 | 12 | 21 | {args => } 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/chrome/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 | export interface IFooterItem { 9 | text: string; 10 | type?: 'basic' | 'primary'; 11 | } 12 | 13 | export interface IHeaderItem { 14 | text: string; 15 | hasIcon: boolean; 16 | isRound?: boolean; 17 | isClipped?: boolean; 18 | maxX?: boolean; 19 | maxY?: boolean; 20 | isWrapper?: boolean; 21 | } 22 | 23 | export interface INavItem { 24 | text: string; 25 | } 26 | -------------------------------------------------------------------------------- /packages/forms/src/styled/common/StyledLegend.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledLegend } from './StyledLegend'; 11 | 12 | describe('StyledLegend', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('LEGEND'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledDashSvg.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledDashSvg } from './StyledDashSvg'; 11 | 12 | describe('StyledDashSvg', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('svg'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/radio/StyledRadioSvg.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledRadioSvg } from './StyledRadioSvg'; 11 | 12 | describe('StyledRadioSvg', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('svg'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/grid/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { 9 | IColProps, 10 | IRowProps, 11 | ISplitterProps, 12 | ISplitterButtonProps 13 | } from '@zendeskgarden/react-grid'; 14 | 15 | export interface IGridRow extends IRowProps { 16 | cols: IColProps[]; 17 | } 18 | 19 | export interface ISplitterPane { 20 | content: string; 21 | splitters: (ISplitterProps & { 22 | button?: ISplitterButtonProps; 23 | })[]; 24 | } 25 | -------------------------------------------------------------------------------- /packages/loaders/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Dots } from './elements/Dots'; 9 | export { Progress } from './elements/Progress'; 10 | export { Skeleton } from './elements/Skeleton'; 11 | export { Spinner } from './elements/Spinner'; 12 | export { Inline } from './elements/Inline'; 13 | 14 | export type { 15 | IDotsProps, 16 | IInlineProps, 17 | IProgressProps, 18 | ISkeletonProps, 19 | ISpinnerProps 20 | } from './types'; 21 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/elements/Fields/Hint.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { Hint as FormHint } from '@zendeskgarden/react-forms'; 10 | 11 | /** 12 | * @extends HTMLAttributes 13 | */ 14 | export const Hint = React.forwardRef>( 15 | (props, ref) => 16 | ); 17 | 18 | Hint.displayName = 'Hint'; 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckSvg.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCheckSvg } from './StyledCheckSvg'; 11 | 12 | describe('StyledCheckSvg', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('svg'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/common/StyledFieldset.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledFieldset } from './StyledFieldset'; 11 | 12 | describe('StyledFieldset', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('FIELDSET'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileList.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledFileList } from './StyledFileList'; 11 | 12 | describe('StyledFileList', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('UL'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/toggle/StyledToggleSvg.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledToggleSvg } from './StyledToggleSvg'; 11 | 12 | describe('StyledToggleSvg', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('svg'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckHint.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCheckHint } from './StyledCheckHint'; 11 | 12 | describe('StyledCheckHint', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('DIV'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/notifications/src/utils/useGlobalAlertContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | import { IGlobalAlertProps } from '../types'; 11 | 12 | export type GlobalAlertContextProps = Pick; 13 | 14 | export const GlobalAlertContext = createContext({ type: 'info' }); 15 | 16 | export const useGlobalAlertContext = () => useContext(GlobalAlertContext); 17 | -------------------------------------------------------------------------------- /packages/typography/src/elements/span/StartIcon.tsx: -------------------------------------------------------------------------------- 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, { SVGAttributes } from 'react'; 9 | import { StyledIcon } from '../../styled'; 10 | 11 | const StartIconComponent = (props: SVGAttributes) => ; 12 | 13 | StartIconComponent.displayName = 'Span.StartIcon'; 14 | 15 | /** 16 | * @extends SVGAttributes 17 | */ 18 | export const StartIcon = StartIconComponent; 19 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/elements/Menu/Separator.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledSeparator } from '../../styled'; 10 | 11 | /** 12 | * @extends LiHTMLAttributes 13 | */ 14 | export const Separator = React.forwardRef>( 15 | (props, ref) => 16 | ); 17 | 18 | Separator.displayName = 'Separator'; 19 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckLabel.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCheckLabel } from './StyledCheckLabel'; 11 | 12 | describe('StyledCheckLabel', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('LABEL'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/combobox/StyledContainer.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'dropdowns.combobox.container'; 12 | 13 | export const StyledContainer = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | 19 | ${componentStyles}; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/forms/src/utils/useInputGroupContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | interface IInputGroupContext { 11 | isCompact?: boolean; 12 | } 13 | 14 | export const InputGroupContext = createContext(undefined); 15 | 16 | /** 17 | * Retrieve InputGroup component context 18 | */ 19 | export const useInputGroupContext = () => { 20 | return useContext(InputGroupContext); 21 | }; 22 | -------------------------------------------------------------------------------- /packages/modals/src/styled/StyledDangerIcon.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import AlertErrorStrokeIcon from '@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg'; 10 | 11 | export const StyledDangerIcon = styled(AlertErrorStrokeIcon)` 12 | position: absolute; 13 | top: ${props => props.theme.space.base * 5.5}px; 14 | ${props => (props.theme.rtl ? 'right' : 'left')}: ${props => `${props.theme.space.base * 4}px`}; 15 | `; 16 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/body/Body.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Body } from './Body'; 11 | 12 | describe('Body', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/body/Main.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Main } from './Main'; 11 | 12 | describe('Main', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(
); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/body/Main.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledMain } from '../../styled'; 10 | 11 | /** 12 | * @deprecated no longer for general use 13 | * 14 | * @extends HTMLAttributes 15 | */ 16 | export const Main = React.forwardRef>((props, ref) => ( 17 | 18 | )); 19 | 20 | Main.displayName = 'Main'; 21 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckMessage.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCheckMessage } from './StyledCheckMessage'; 11 | 12 | describe('StyledCheckMessage', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('DIV'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/grid/src/styled/pane/StyledPane.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'pane'; 12 | 13 | export const StyledPane = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | position: relative; 18 | min-width: 0; 19 | min-height: 0; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/forms/src/utils/useInputContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | type INPUT_CONTEXT_VALUE = 'checkbox' | 'radio' | 'toggle' | undefined; 11 | 12 | export const InputContext = createContext(undefined); 13 | 14 | /** 15 | * Retrieve input component context 16 | */ 17 | const useInputContext = () => { 18 | return useContext(InputContext); 19 | }; 20 | 21 | export default useInputContext; 22 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/well/Well.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Well } from './Well'; 11 | 12 | describe('Well', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/pagination/src/styled/OffsetPagination/StyledGapListItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledGapListItem } from './StyledGapListItem'; 11 | 12 | describe('StyledGapListItem', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('LI'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/tables/src/elements/Table.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | 11 | import { Table } from './Table'; 12 | 13 | describe('Table', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef(); 16 | const { container } = render(); 17 | 18 | expect(container.firstChild).toBe(ref.current); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/tabs/src/utils/useTabsContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | import { IUseTabsReturnValue } from '@zendeskgarden/container-tabs'; 10 | 11 | interface ITabsContext extends IUseTabsReturnValue { 12 | isVertical?: boolean; 13 | } 14 | 15 | export const TabsContext = createContext(undefined); 16 | 17 | export const useTabsContext = () => { 18 | return useContext(TabsContext); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/typography/src/styled/StyledCodeBlockToken.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCodeBlockToken } from './StyledCodeBlockToken'; 11 | 12 | describe('StyledCodeBlockToken', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('SPAN'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/footer/Footer.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Footer } from './Footer'; 11 | 12 | describe('Footer', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(
); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/header/Header.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Header } from './Header'; 11 | 12 | describe('Header', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(
); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/draggable/src/elements/draggable/components/Content.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledContent } from '../../../styled'; 10 | 11 | /** 12 | * @extends HTMLAttributes 13 | */ 14 | export const Content = forwardRef>((props, ref) => ( 15 | 16 | )); 17 | 18 | Content.displayName = 'Draggable.Content'; 19 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/well/Title.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Title } from './Title'; 11 | 12 | describe('Title', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render(); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/draggable/src/styled/draggable-list/StyledDraggableList.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledDraggableList } from './StyledDraggableList'; 11 | 12 | describe('StyledDraggableList', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(<StyledDraggableList />); 15 | 16 | expect(container.firstChild!.nodeName).toBe('UL'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/combobox/StyledHint.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { Field } from '@zendeskgarden/react-forms'; 11 | 12 | const COMPONENT_ID = 'dropdowns.combobox.hint'; 13 | 14 | export const StyledHint = styled(Field.Hint).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledOption } from '../combobox/StyledOption'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.item'; 13 | 14 | export const StyledItem = styled(StyledOption).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/accordions/src/elements/stepper/Stepper.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Stepper } from './Stepper'; 11 | 12 | describe('Stepper', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLOListElement>(); 15 | const { container } = render(<Stepper ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Body.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | 11 | import { Body } from './Body'; 12 | 13 | describe('Sheet.Body', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef<HTMLDivElement>(); 16 | const { container } = render(<Body ref={ref} />); 17 | 18 | expect(container.firstChild).toBe(ref.current); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/alert/Paragraph.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledParagraph } from '../../styled'; 10 | 11 | /** 12 | * @extends HTMLAttributes<HTMLParagraphElement> 13 | */ 14 | export const Paragraph = React.forwardRef< 15 | HTMLParagraphElement, 16 | HTMLAttributes<HTMLParagraphElement> 17 | >((props, ref) => <StyledParagraph ref={ref} {...props} />); 18 | 19 | Paragraph.displayName = 'Alert.Paragraph'; 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/alert/Title.tsx: -------------------------------------------------------------------------------- 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 { ITitleProps } from '../../types'; 10 | import { StyledTitle } from '../../styled'; 11 | 12 | /** 13 | * @extends HTMLAttributes<HTMLDivElement> 14 | */ 15 | export const Title = React.forwardRef<HTMLDivElement, ITitleProps>( 16 | ({ isRegular, ...props }, ref) => <StyledTitle ref={ref} $isRegular={isRegular} {...props} /> 17 | ); 18 | 19 | Title.displayName = 'Alert.Title'; 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/well/Paragraph.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledParagraph } from '../../styled'; 10 | 11 | /** 12 | * @extends HTMLAttributes<HTMLParagraphElement> 13 | */ 14 | export const Paragraph = React.forwardRef< 15 | HTMLParagraphElement, 16 | HTMLAttributes<HTMLParagraphElement> 17 | >((props, ref) => <StyledParagraph ref={ref} {...props} />); 18 | 19 | Paragraph.displayName = 'Well.Paragraph'; 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/well/Title.tsx: -------------------------------------------------------------------------------- 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 { ITitleProps } from '../../types'; 10 | import { StyledTitle } from '../../styled'; 11 | 12 | /** 13 | * @extends HTMLAttributes<HTMLDivElement> 14 | */ 15 | export const Title = React.forwardRef<HTMLDivElement, ITitleProps>( 16 | ({ isRegular, ...props }, ref) => <StyledTitle ref={ref} $isRegular={isRegular} {...props} /> 17 | ); 18 | 19 | Title.displayName = 'Well.Title'; 20 | -------------------------------------------------------------------------------- /packages/tooltips/src/styled/StyledParagraph.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'tooltip.paragraph'; 12 | 13 | /** 14 | * Accepts all `<p>` props 15 | */ 16 | export const StyledParagraph = styled.p.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | margin: 0; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/Paragraph.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Paragraph } from './Paragraph'; 11 | 12 | describe('Paragraph', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<Paragraph ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/notifications/src/styled/global-alert/StyledGlobalAlertContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'notifications.global_alert.content'; 12 | 13 | export const StyledGlobalAlertContent = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex-grow: 1; 18 | 19 | ${componentStyles}; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/notifications/src/styled/global-alert/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledGlobalAlert } from './StyledGlobalAlert'; 9 | export { StyledGlobalAlertButton } from './StyledGlobalAlertButton'; 10 | export { StyledGlobalAlertClose } from './StyledGlobalAlertClose'; 11 | export { StyledGlobalAlertContent } from './StyledGlobalAlertContent'; 12 | export { StyledGlobalAlertIcon } from './StyledGlobalAlertIcon'; 13 | export { StyledGlobalAlertTitle } from './StyledGlobalAlertTitle'; 14 | -------------------------------------------------------------------------------- /packages/pagination/src/elements/OffsetPagination/components/Gap.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Gap } from './Gap'; 11 | 12 | describe('Gap', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLLIElement>(); 15 | const { container } = render(<Gap ref={ref} />); 16 | 17 | expect(container.firstElementChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/tables/src/styled/StyledHiddenCell.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { hideVisually } from 'polished'; 10 | import { componentStyles } from '@zendeskgarden/react-theming'; 11 | 12 | const COMPONENT_ID = 'tables.hidden_cell'; 13 | 14 | export const StyledHiddenCell = styled.div.attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${hideVisually()} 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/tooltips/src/elements/Title.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledTitle } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Tooltip.Title` instead 13 | * 14 | * @extends HTMLAttributes<HTMLDivElement> 15 | */ 16 | export const Title = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => ( 17 | <StyledTitle ref={ref} {...props} /> 18 | )); 19 | 20 | Title.displayName = 'Tooltip.Title'; 21 | -------------------------------------------------------------------------------- /packages/typography/src/styled/StyledCodeBlockContainer.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCodeBlockContainer } from './StyledCodeBlockContainer'; 11 | 12 | describe('StyledCodeBlockContainer', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(<StyledCodeBlockContainer />); 15 | 16 | expect(container.firstChild!.nodeName).toBe('DIV'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/footer/FooterItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { FooterItem } from './FooterItem'; 11 | 12 | describe('FooterItem', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<FooterItem ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/nav/NavItemText.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { NavItemText } from './NavItemText'; 11 | 12 | describe('NavItemText', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<NavItemText ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Footer.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | 11 | import { Footer } from './Footer'; 12 | 13 | describe('Sheet.Footer', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef<HTMLElement>(); 16 | const { container } = render(<Footer ref={ref} />); 17 | 18 | expect(container.firstChild).toBe(ref.current); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Header.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | 11 | import { Header } from './Header'; 12 | 13 | describe('Sheet.Header', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef<HTMLElement>(); 16 | const { container } = render(<Header ref={ref} />); 17 | 18 | expect(container.firstChild).toBe(ref.current); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/combobox/StyledMessage.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { Field } from '@zendeskgarden/react-forms'; 11 | 12 | const COMPONENT_ID = 'dropdowns.combobox.message'; 13 | 14 | export const StyledMessage = styled(Field.Message).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckHint.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledRadioHint } from '../radio/StyledRadioHint'; 11 | 12 | const COMPONENT_ID = 'forms.checkbox_hint'; 13 | 14 | export const StyledCheckHint = styled(StyledRadioHint).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/alert/Paragraph.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Paragraph } from './Paragraph'; 11 | 12 | describe('Paragraph', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<Paragraph ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/well/Paragraph.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Paragraph } from './Paragraph'; 11 | 12 | describe('Paragraph', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<Paragraph ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/avatars/src/elements/components/Text.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledText } from '../../styled'; 10 | 11 | const TextComponent = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>((props, ref) => ( 12 | <StyledText ref={ref} {...props} /> 13 | )); 14 | 15 | TextComponent.displayName = 'Avatar.Text'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLSpanElement> 19 | */ 20 | export const Text = TextComponent; 21 | -------------------------------------------------------------------------------- /packages/colorpickers/src/index.ts: -------------------------------------------------------------------------------- 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 | export { ColorPicker } from './elements/ColorPicker'; 9 | export { ColorPickerDialog } from './elements/ColorPickerDialog'; 10 | export { ColorSwatch } from './elements/ColorSwatch'; 11 | export { ColorSwatchDialog } from './elements/ColorSwatchDialog'; 12 | 13 | export type { 14 | IColor, 15 | IColorPickerProps, 16 | IColorPickerDialogProps, 17 | ILabeledColor, 18 | IColorSwatchProps, 19 | IColorSwatchDialogProps 20 | } from './types'; 21 | -------------------------------------------------------------------------------- /packages/draggable/src/styled/draggable/StyledContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'draggable.content'; 12 | 13 | export const StyledContent = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex: 1; 18 | word-wrap: break-word; 19 | overflow-wrap: anywhere; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledHeaderIcon } from '../../../styled'; 10 | 11 | /** 12 | * @extends HTMLAttributes<HTMLDivElement> 13 | */ 14 | export const HeaderIcon = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( 15 | (props, ref) => { 16 | return <StyledHeaderIcon ref={ref} {...props} />; 17 | } 18 | ); 19 | 20 | HeaderIcon.displayName = 'HeaderIcon'; 21 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledItemGroup.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledOptGroup } from '../combobox/StyledOptGroup'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.item_group'; 13 | 14 | export const StyledItemGroup = styled(StyledOptGroup).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/modals/src/elements/FooterItem.tsx: -------------------------------------------------------------------------------- 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 { StyledFooterItem } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Modal.FooterItem` instead 13 | * 14 | * @extends HTMLAttributes<HTMLSpanElement> 15 | */ 16 | export const FooterItem = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>( 17 | (props, ref) => <StyledFooterItem ref={ref} {...props} /> 18 | ); 19 | 20 | FooterItem.displayName = 'Modal.FooterItem'; 21 | -------------------------------------------------------------------------------- /packages/pagination/src/elements/OffsetPagination/components/Next.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Next } from './Next'; 11 | 12 | describe('Next', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<Next ref={ref} />); 16 | 17 | expect(container.firstElementChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/pagination/src/elements/OffsetPagination/components/Page.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Page } from './Page'; 11 | 12 | describe('Page', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<Page ref={ref} />); 16 | 17 | expect(container.firstElementChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/tables/src/elements/Body.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledBody } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Table.Body` instead 13 | * 14 | * @extends HTMLAttributes<HTMLTableSectionElement> 15 | */ 16 | export const Body = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>( 17 | (props, ref) => <StyledBody ref={ref} {...props} /> 18 | ); 19 | 20 | Body.displayName = 'Table.Body'; 21 | -------------------------------------------------------------------------------- /packages/.template/src/styled/Styled{{capitalize component}}Text.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | 10 | const COMPONENT_ID = '{{pluralize (lowercase component)}}.{{lowercase component}}.text'; 11 | 12 | export const Styled{{capitalize component}}Text = styled.span.attrs({ 13 | 'data-garden-id': COMPONENT_ID, 14 | 'data-garden-version': PACKAGE_VERSION 15 | })` 16 | display: block; 17 | max-width: 100%; 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/footer/FooterItem.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledFooterItem } from '../../styled'; 10 | 11 | /** 12 | * @deprecated use `Footer.Item` instead 13 | * 14 | * @extends HTMLAttributes<HTMLElement> 15 | */ 16 | export const FooterItem = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( 17 | (props, ref) => <StyledFooterItem ref={ref} {...props} /> 18 | ); 19 | 20 | FooterItem.displayName = 'Footer.Item'; 21 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorSwatch/StyledCell.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'colorpickers.swatch_cell'; 12 | 13 | export const StyledCell = styled.td.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | padding: ${props => props.theme.space.base}px; 18 | font-size: 0; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/dropdowns/src/context/useItemContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export const ItemContext = createContext<{ isDisabled?: boolean } | undefined>(undefined); 11 | 12 | const useItemContext = () => { 13 | const context = useContext(ItemContext); 14 | 15 | if (!context) { 16 | throw new Error('Error: this component must be rendered within an <Item>.'); 17 | } 18 | 19 | return context; 20 | }; 21 | 22 | export default useItemContext; 23 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledItemIcon.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledOptionIcon } from '../combobox/StyledOptionIcon'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.item.icon'; 13 | 14 | export const StyledItemIcon = styled(StyledOptionIcon).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledItemMeta.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledOptionMeta } from '../combobox/StyledOptionMeta'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.item.meta'; 13 | 14 | export const StyledItemMeta = styled(StyledOptionMeta).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckLabel.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledRadioLabel } from '../radio/StyledRadioLabel'; 11 | 12 | const COMPONENT_ID = 'forms.checkbox_label'; 13 | 14 | export const StyledCheckLabel = styled(StyledRadioLabel).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/pagination/src/styled/CursorPagination/StyledCursorPagination.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'cursor_pagination'; 12 | 13 | export const StyledCursorPagination = styled.nav.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | justify-content: center; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/breadcrumbs/src/styled/StyledChevronIcon.tsx: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { em } from 'polished'; 10 | import { getColor, StyledBaseIcon } from '@zendeskgarden/react-theming'; 11 | 12 | export const StyledChevronIcon = styled(StyledBaseIcon)` 13 | transform: ${p => p.theme.rtl && `rotate(180deg);`}; 14 | margin: 0 ${p => em(p.theme.space.base, p.theme.fontSizes.md)}; 15 | color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })}; 16 | `; 17 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Body.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledSheetBody } from '../../../styled'; 10 | 11 | const SheetBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => { 12 | return <StyledSheetBody ref={ref} {...props} />; 13 | }); 14 | 15 | SheetBody.displayName = 'Sheet.Body'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLDivElement> 19 | */ 20 | export const Body = SheetBody; 21 | -------------------------------------------------------------------------------- /packages/tables/src/elements/OverflowButton.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { OverflowButton } from './OverflowButton'; 11 | 12 | describe('OverflowButton', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<OverflowButton ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/tables/src/styled/StyledCaption.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'tables.caption'; 12 | 13 | export const StyledCaption = styled.caption.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: table-caption; 18 | text-align: ${props => (props.theme.rtl ? 'right' : 'left')}; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/theming/src/utils/StyledBaseIcon.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { Children, cloneElement, ReactElement } from 'react'; 10 | import { IStyledBaseIconProps } from '../types'; 11 | 12 | export const StyledBaseIcon = styled( 13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 14 | ({ children, theme, ...props }: IStyledBaseIconProps) => 15 | cloneElement(Children.only(children as ReactElement), props) 16 | )` 17 | /* empty-source */ 18 | `; 19 | -------------------------------------------------------------------------------- /packages/theming/src/utils/getMenuPosition.ts: -------------------------------------------------------------------------------- 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 { Placement } from '@floating-ui/react-dom'; 9 | import { MenuPosition } from '../types'; 10 | 11 | /** 12 | * Convert Floating-UI placement to a valid `menuStyles` position. 13 | * 14 | * @param {string} placement A Floating-UI placement. 15 | * 16 | * @returns A `menuStyles` position. 17 | */ 18 | export const getMenuPosition = (placement: Placement): MenuPosition => { 19 | return placement.split('-')[0] as MenuPosition; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/header/HeaderItemText.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { HeaderItemText } from './HeaderItemText'; 11 | 12 | describe('HeaderItemText', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<HeaderItemText ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/FooterItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | 11 | import { FooterItem } from './FooterItem'; 12 | 13 | describe('Sheet.FooterItem', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef<HTMLDivElement>(); 16 | const { container } = render(<FooterItem ref={ref} />); 17 | 18 | expect(container.firstChild).toBe(ref.current); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorPicker/StyledInputGroup.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'colorpickers.colorpicker_input_group'; 12 | 13 | export const StyledInputGroup = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | justify-content: space-between; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/elements/Menu/Items/MediaFigure.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledMediaFigure } from '../../../styled'; 10 | import useMenuContext from '../../../utils/useMenuContext'; 11 | 12 | /** 13 | * @extends HTMLAttributes<Element> 14 | */ 15 | export const MediaFigure = (props: HTMLAttributes<Element>) => { 16 | const { isCompact } = useMenuContext(); 17 | 18 | return <StyledMediaFigure $isCompact={isCompact} {...props} />; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/forms/demo/stories/types.ts: -------------------------------------------------------------------------------- 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 { IFileProps } from '@zendeskgarden/react-forms'; 9 | 10 | export interface IFileListItem { 11 | text: string; 12 | type?: IFileProps['type']; 13 | remove?: 'close' | 'delete'; 14 | value?: number; 15 | } 16 | 17 | export interface IInputGroupItem { 18 | text: string; 19 | isButton: boolean; 20 | } 21 | 22 | export interface ITile { 23 | value: string; 24 | label: string; 25 | description?: string; 26 | disabled?: boolean; 27 | } 28 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckMessage.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledRadioMessage } from '../radio/StyledRadioMessage'; 11 | 12 | const COMPONENT_ID = 'forms.checkbox_message'; 13 | 14 | export const StyledCheckMessage = styled(StyledRadioMessage).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/typography/demo/paragraph.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs'; 2 | import { Paragraph } from '@zendeskgarden/react-typography'; 3 | import { ParagraphStory } from './stories/ParagraphStory'; 4 | import { PARAGRAPH_CHILDREN as CHILDREN } from './stories/data'; 5 | import README from '../README.md'; 6 | 7 | <Meta title="Packages/Typography/Paragraph" component={Paragraph} /> 8 | 9 | # API 10 | 11 | <ArgsTable /> 12 | 13 | # Demo 14 | 15 | <Canvas> 16 | <Story name="Paragraph" args={{ children: CHILDREN }}> 17 | {args => <ParagraphStory {...args} />} 18 | </Story> 19 | </Canvas> 20 | 21 | <Markdown>{README}</Markdown> 22 | -------------------------------------------------------------------------------- /packages/dropdowns/src/context/useOptionContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export const OptionContext = createContext<{ isDisabled?: boolean } | undefined>(undefined); 11 | 12 | const useOptionContext = () => { 13 | const context = useContext(OptionContext); 14 | 15 | if (!context) { 16 | throw new Error('Error: this component must be rendered within an <Option>.'); 17 | } 18 | 19 | return context; 20 | }; 21 | 22 | export default useOptionContext; 23 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/combobox/StyledLabel.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { Field } from '@zendeskgarden/react-forms'; 11 | 12 | const COMPONENT_ID = 'dropdowns.combobox.label'; 13 | 14 | export const StyledLabel = styled(Field.Label).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | vertical-align: revert; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/modals/src/elements/Drawer/Footer.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledDrawerFooter } from '../../styled'; 10 | 11 | const FooterComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => ( 12 | <StyledDrawerFooter ref={ref} {...props} /> 13 | )); 14 | 15 | FooterComponent.displayName = 'Drawer.Footer'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLDivElement> 19 | */ 20 | export const Footer = FooterComponent; 21 | -------------------------------------------------------------------------------- /packages/modals/src/styled/StyledDrawerFooterItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledFooterItem } from './StyledFooterItem'; 11 | 12 | const COMPONENT_ID = 'modals.drawer_modal.footer_item'; 13 | 14 | export const StyledDrawerFooterItem = styled(StyledFooterItem as 'span').attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/pagination/src/elements/OffsetPagination/components/Previous.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Previous } from './Previous'; 11 | 12 | describe('Previous', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<Previous ref={ref} />); 16 | 17 | expect(container.firstElementChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/tables/src/elements/Caption.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledCaption } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Table.Caption` instead 13 | * 14 | * @extends HTMLAttributes<HTMLTableCaptionElement> 15 | */ 16 | export const Caption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>( 17 | (props, ref) => <StyledCaption ref={ref} {...props} /> 18 | ); 19 | 20 | Caption.displayName = 'Table.Caption'; 21 | -------------------------------------------------------------------------------- /packages/theming/src/elements/ThemeProvider.tsx: -------------------------------------------------------------------------------- 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, { PropsWithChildren } from 'react'; 9 | import { ThemeProvider as StyledThemeProvider } from 'styled-components'; 10 | import { IGardenTheme, IThemeProviderProps } from '../types'; 11 | import DEFAULT_THEME from './theme'; 12 | 13 | export const ThemeProvider = ({ 14 | theme = DEFAULT_THEME, 15 | ...other 16 | }: PropsWithChildren<IThemeProviderProps>) => ( 17 | <StyledThemeProvider theme={theme as IGardenTheme} {...other} /> 18 | ); 19 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/combobox/StyledOptionContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'dropdowns.combobox.option.content'; 12 | 13 | export const StyledOptionContent = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | flex-direction: column; 19 | flex-grow: 1; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledFloatingMenu.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.floating'; 13 | 14 | export const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledItemContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledOptionContent } from '../combobox/StyledOptionContent'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.item.content'; 13 | 14 | export const StyledItemContent = styled(StyledOptionContent).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/dropdowns/src/views/menu/StyledSeparator.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator'; 11 | 12 | const COMPONENT_ID = 'dropdowns.menu.separator'; 13 | 14 | export const StyledSeparator = styled(StyledListboxSeparator).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/forms/src/elements/common/Fieldset.spec.tsx: -------------------------------------------------------------------------------- 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 { render, screen } from 'garden-test-utils'; 10 | import { Fieldset } from '../..'; 11 | 12 | describe('Fieldset', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLFieldSetElement>(); 15 | 16 | render(<Fieldset ref={ref} />); 17 | 18 | const fieldset = screen.getByRole('group'); 19 | 20 | expect(fieldset).toBe(ref.current); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/modals/src/styled/StyledTooltipDialogFooterItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledFooterItem } from './StyledFooterItem'; 11 | 12 | const COMPONENT_ID = 'modals.tooltip_dialog.footer_item'; 13 | 14 | export const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | ${componentStyles}; 19 | `; 20 | -------------------------------------------------------------------------------- /packages/tables/src/utils/useTableContext.ts: -------------------------------------------------------------------------------- 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, { useContext } from 'react'; 9 | import { ITableProps } from '../types'; 10 | 11 | interface ITableContext { 12 | size: NonNullable<ITableProps['size']>; 13 | isReadOnly: NonNullable<ITableProps['isReadOnly']>; 14 | } 15 | 16 | export const TableContext = React.createContext<ITableContext>({ 17 | size: 'medium', 18 | isReadOnly: false 19 | }); 20 | 21 | export const useTableContext = () => { 22 | return useContext(TableContext); 23 | }; 24 | -------------------------------------------------------------------------------- /packages/buttons/src/elements/components/EndIcon.tsx: -------------------------------------------------------------------------------- 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 { IButtonIconProps } from '../../types'; 10 | import { StyledIcon } from '../../styled'; 11 | 12 | const EndIconComponent = ({ isRotated, ...props }: IButtonIconProps) => ( 13 | <StyledIcon $position="end" $isRotated={isRotated} {...props} /> 14 | ); 15 | 16 | EndIconComponent.displayName = 'Button.EndIcon'; 17 | 18 | /** 19 | * @extends SVGAttributes<SVGElement> 20 | */ 21 | export const EndIcon = EndIconComponent; 22 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/header/HeaderItemWrapper.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { HeaderItemWrapper } from './HeaderItemWrapper'; 11 | 12 | describe('HeaderItemWrapper', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<HeaderItemWrapper ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/nav/StyledNavListItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.nav_list_item'; 12 | 13 | export const StyledNavListItem = styled.li.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | order: 1; 19 | margin: 0; 20 | padding: 0; 21 | list-style-type: none; 22 | 23 | ${componentStyles}; 24 | `; 25 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/styled/select/StyledSelect.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'dropdowns.select'; 12 | 13 | export const StyledSelect = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex-grow: 1; 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/grid/src/utils/usePaneContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | interface IPaneContext { 11 | id?: string; 12 | isVisible?: boolean; 13 | setId: (id: string) => void; 14 | } 15 | 16 | export const PaneContext = createContext<IPaneContext>({ 17 | setId: () => undefined 18 | }); 19 | 20 | /** 21 | * Retrieve Splitter component context 22 | */ 23 | const usePaneContext = () => { 24 | return useContext(PaneContext); 25 | }; 26 | 27 | export default usePaneContext; 28 | -------------------------------------------------------------------------------- /packages/tables/src/styled/style-utils.ts: -------------------------------------------------------------------------------- 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 { ThemeProps, DefaultTheme } from 'styled-components'; 9 | import { ITableProps } from '../types'; 10 | 11 | export const getRowHeight = (props: { $size?: ITableProps['size'] } & ThemeProps<DefaultTheme>) => { 12 | if (props.$size === 'large') { 13 | return `${props.theme.space.base * 16}px`; 14 | } else if (props.$size === 'small') { 15 | return `${props.theme.space.base * 8}px`; 16 | } 17 | 18 | return `${props.theme.space.base * 10}px`; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/accordions/src/elements/accordion/components/Section.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledSection } from '../../../styled'; 10 | 11 | const SectionComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( 12 | (props, ref) => <StyledSection ref={ref} {...props} /> 13 | ); 14 | 15 | SectionComponent.displayName = 'Accordion.Section'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLElement> 19 | */ 20 | export const Section = SectionComponent; 21 | -------------------------------------------------------------------------------- /packages/accordions/src/styled/timeline/StyledContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'timeline.content'; 12 | 13 | export const StyledTimelineContent = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex: 1; 18 | padding: ${props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`}; 19 | ${componentStyles}; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/footer/StyledFooterItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.footer_item'; 12 | 13 | /** 14 | * Accepts all `<div>` props 15 | */ 16 | export const StyledFooterItem = styled.div.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | margin: ${props => `0 ${props.theme.space.base}px`}; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/forms/src/elements/file-list/components/Item.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, LiHTMLAttributes } from 'react'; 9 | import { StyledFileListItem } from '../../../styled'; 10 | 11 | const ItemComponent = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIElement>>( 12 | ({ ...props }, ref) => <StyledFileListItem {...props} ref={ref} /> 13 | ); 14 | 15 | ItemComponent.displayName = 'FileList.Item'; 16 | 17 | /** 18 | * @extends LiHTMLAttributes<HTMLLIElement> 19 | */ 20 | export const Item = ItemComponent; 21 | -------------------------------------------------------------------------------- /packages/tags/src/styled/StyledAvatar.ts: -------------------------------------------------------------------------------- 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 styled, { DataAttributes } from 'styled-components'; 9 | import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'tags.avatar'; 12 | 13 | export const StyledAvatar = styled(StyledBaseIcon).attrs<DataAttributes>({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex-shrink: 0; 18 | font-size: 0; /* text content reset */ 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/tooltips/src/elements/Paragraph.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledParagraph } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Tooltip.Paragraph` instead 13 | * 14 | * @extends HTMLAttributes<HTMLParagraphElement> 15 | */ 16 | export const Paragraph = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>( 17 | (props, ref) => <StyledParagraph ref={ref} {...props} /> 18 | ); 19 | 20 | Paragraph.displayName = 'Tooltip.Paragraph'; 21 | -------------------------------------------------------------------------------- /packages/avatars/src/styled/StyledText.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'avatars.text'; 12 | 13 | /** 14 | * Accepts all `<span>` attributes 15 | */ 16 | export const StyledText = styled.span.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | overflow: hidden; 21 | text-align: center; 22 | white-space: nowrap; 23 | 24 | ${componentStyles}; 25 | `; 26 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/sheet/StyledSheetFooterItem.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.sheet_footer_item'; 12 | 13 | export const StyledSheetFooterItem = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | ${props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`} 18 | 19 | ${componentStyles}; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/forms/src/utils/useFieldsetContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | interface IFieldsetContext { 11 | isCompact?: boolean; 12 | } 13 | 14 | export const FieldsetContext = createContext<IFieldsetContext | undefined>(undefined); 15 | 16 | /** 17 | * Retrieve Fieldset component context 18 | */ 19 | const useFieldsetContext = () => { 20 | const fieldsetContext = useContext(FieldsetContext); 21 | 22 | return fieldsetContext; 23 | }; 24 | 25 | export default useFieldsetContext; 26 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/global-alert/GlobalAlertClose.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { GlobalAlertClose } from './GlobalAlertClose'; 11 | 12 | describe('GlobalAlertClose', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<GlobalAlertClose ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/global-alert/GlobalAlertTitle.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { GlobalAlertTitle } from './GlobalAlertTitle'; 11 | 12 | describe('GlobalAlertTitle', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<GlobalAlertTitle ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/tables/src/elements/Head.tsx: -------------------------------------------------------------------------------- 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, { forwardRef } from 'react'; 9 | import { StyledHead } from '../styled'; 10 | import { IHeadProps } from '../types'; 11 | 12 | /** 13 | * @deprecated use `Table.Head` instead 14 | * 15 | * @extends HTMLAttributes<HTMLTableSectionElement> 16 | */ 17 | export const Head = forwardRef<HTMLTableSectionElement, IHeadProps>( 18 | ({ isSticky, ...props }, ref) => <StyledHead ref={ref} $isSticky={isSticky} {...props} /> 19 | ); 20 | 21 | Head.displayName = 'Table.Head'; 22 | -------------------------------------------------------------------------------- /packages/typography/src/elements/lists/OrderedListItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { OrderedList } from './OrderedList'; 11 | 12 | describe('OrderedListItem', () => { 13 | it('applies default padding', () => { 14 | const { container } = render( 15 | <OrderedList> 16 | <OrderedList.Item /> 17 | </OrderedList> 18 | ); 19 | 20 | expect(container.querySelector('li')).toHaveStyleRule('padding-top', '4px'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/accordions/src/styled/accordion/StyledSection.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledPanel } from './StyledPanel'; 11 | 12 | const COMPONENT_ID = 'accordions.section'; 13 | 14 | export const StyledSection = styled.div.attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | &:last-child ${StyledPanel} { 19 | border: none; 20 | } 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/accordions/src/styled/timeline/StyledTimeline.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'timeline'; 12 | 13 | /** 14 | * 1. <ol> reset. 15 | */ 16 | export const StyledTimeline = styled.ol.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | margin: 0; /* [1] */ 21 | padding: 0; /* [1] */ 22 | list-style: none; /* [1] */ 23 | ${componentStyles}; 24 | `; 25 | -------------------------------------------------------------------------------- /packages/buttons/src/elements/components/StartIcon.tsx: -------------------------------------------------------------------------------- 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 { IButtonIconProps } from '../../types'; 10 | import { StyledIcon } from '../../styled'; 11 | 12 | const StartIconComponent = ({ isRotated, ...props }: IButtonIconProps) => ( 13 | <StyledIcon $position="start" $isRotated={isRotated} {...props} /> 14 | ); 15 | 16 | StartIconComponent.displayName = 'Button.StartIcon'; 17 | 18 | /** 19 | * @extends SVGAttributes<SVGElement> 20 | */ 21 | export const StartIcon = StartIconComponent; 22 | -------------------------------------------------------------------------------- /packages/forms/src/elements/common/Legend.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledLegend } from '../../styled'; 10 | 11 | const LegendComponent = forwardRef<HTMLLegendElement, HTMLAttributes<HTMLLegendElement>>( 12 | (props, ref) => { 13 | return <StyledLegend {...props} ref={ref} />; 14 | } 15 | ); 16 | 17 | LegendComponent.displayName = 'Fieldset.Legend'; 18 | 19 | /** 20 | * @extends HTMLAttributes<HTMLLegendElement> 21 | */ 22 | export const Legend = LegendComponent; 23 | -------------------------------------------------------------------------------- /packages/forms/src/styled/select/StyledSelectWrapper.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledSelectWrapper } from './StyledSelectWrapper'; 11 | 12 | describe('StyledSelectWrapper', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(<StyledSelectWrapper />); 15 | 16 | expect(container.firstChild!.nodeName).toBe('DIV'); 17 | expect(container.firstChild).toHaveStyleRule('position', 'relative'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/forms/src/styled/text/StyledTextMediaInput.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledTextInput } from './StyledTextInput'; 11 | 12 | const COMPONENT_ID = 'forms.media_input'; 13 | 14 | export const StyledTextMediaInput = styled(StyledTextInput).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION, 17 | $isBare: true 18 | })` 19 | flex-grow: 1; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/loaders/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledDotsCircleOne, StyledDotsCircleTwo, StyledDotsCircleThree } from './StyledDots'; 9 | export { StyledLoadingPlaceholder } from './StyledLoadingPlaceholder'; 10 | export { StyledProgressBackground, StyledProgressIndicator } from './StyledProgress'; 11 | export { StyledSkeleton } from './StyledSkeleton'; 12 | export { StyledSpinnerCircle } from './StyledSpinnerCircle'; 13 | export { StyledSVG } from './StyledSVG'; 14 | export { StyledCircle, StyledInline } from './StyledInline'; 15 | -------------------------------------------------------------------------------- /packages/modals/src/elements/TooltipDialog/Footer.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledTooltipDialogFooter } from '../../styled'; 10 | 11 | const FooterComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => ( 12 | <StyledTooltipDialogFooter ref={ref} {...props} /> 13 | )); 14 | 15 | FooterComponent.displayName = 'TooltipDialog.Footer'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLDivElement> 19 | */ 20 | export const Footer = FooterComponent; 21 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/global-alert/GlobalAlertButton.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { GlobalAlertButton } from './GlobalAlertButton'; 11 | 12 | describe('GlobalAlertButton', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLButtonElement>(); 15 | const { container } = render(<GlobalAlertButton ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/notifications/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export { StyledClose } from './content/StyledClose'; 9 | export { StyledParagraph } from './content/StyledParagraph'; 10 | export { StyledTitle } from './content/StyledTitle'; 11 | 12 | export { StyledAlert } from './StyledAlert'; 13 | export { StyledNotification } from './StyledNotification'; 14 | export { StyledWell } from './StyledWell'; 15 | export { StyledIcon } from './StyledIcon'; 16 | 17 | export { StyledBase } from './StyledBase'; 18 | 19 | export * from './global-alert'; 20 | -------------------------------------------------------------------------------- /packages/forms/src/styled/checkbox/StyledCheckInput.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledCheckInput } from './StyledCheckInput'; 11 | 12 | describe('StyledCheckInput', () => { 13 | it('renders default styling and attributes correctly', () => { 14 | const { container } = render(<StyledCheckInput />); 15 | 16 | expect(container.firstChild!.nodeName).toBe('INPUT'); 17 | expect(container.firstChild).toHaveAttribute('type', 'checkbox'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileList.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'forms.file_list'; 12 | 13 | /** 14 | * 1. <ul> reset. 15 | */ 16 | export const StyledFileList = styled.ul.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | margin: 0; /* [1] */ 21 | padding: 0; /* [1] */ 22 | list-style: none; /* [1] */ 23 | 24 | ${componentStyles}; 25 | `; 26 | -------------------------------------------------------------------------------- /packages/forms/src/styled/toggle/StyledToggleSvg.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import CircleIcon from '@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg'; 10 | import { componentStyles } from '@zendeskgarden/react-theming'; 11 | 12 | const COMPONENT_ID = 'forms.toggle_svg'; 13 | 14 | export const StyledToggleSvg = styled(CircleIcon).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | transition: all 0.15s ease-in-out; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/grid/src/utils/useGridContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | import { GridNumber, Space } from '../types'; 10 | 11 | interface IGridContext { 12 | columns?: GridNumber; 13 | gutters?: Space; 14 | debug?: boolean; 15 | } 16 | 17 | export const GridContext = createContext<IGridContext>({ gutters: 'md' }); 18 | 19 | /** 20 | * Retrieve Grid component context 21 | */ 22 | const useGridContext = () => { 23 | return useContext(GridContext); 24 | }; 25 | 26 | export default useGridContext; 27 | -------------------------------------------------------------------------------- /packages/modals/src/elements/Drawer/FooterItem.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledDrawerFooterItem } from '../../styled'; 10 | 11 | const FooterItemComponent = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>( 12 | (props, ref) => <StyledDrawerFooterItem ref={ref} {...props} /> 13 | ); 14 | 15 | FooterItemComponent.displayName = 'Drawer.FooterItem'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLSpanElement> 19 | */ 20 | export const FooterItem = FooterItemComponent; 21 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/global-alert/GlobalAlertContent.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { GlobalAlertContent } from './GlobalAlertContent'; 11 | 12 | describe('GlobalAlertContent', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef<HTMLDivElement>(); 15 | const { container } = render(<GlobalAlertContent ref={ref} />); 16 | 17 | expect(container.firstChild).toBe(ref.current); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/typography/demo/ellipsis.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs'; 2 | import { Ellipsis } from '@zendeskgarden/react-typography'; 3 | import README from '../README.md'; 4 | 5 | <Meta title="Packages/Typography/Ellipsis" component={Ellipsis} /> 6 | 7 | # API 8 | 9 | <ArgsTable /> 10 | 11 | # Demo 12 | 13 | <Canvas> 14 | <Story 15 | name="Ellipsis" 16 | args={{ 17 | children: 'Veggies es bonus vobis, proinde vos postulo essum magis.', 18 | style: { width: 150 } 19 | }} 20 | argTypes={{ tag: { control: 'text' } }} 21 | > 22 | {args => <Ellipsis {...args} />} 23 | </Story> 24 | </Canvas> 25 | 26 | <Markdown>{README}</Markdown> 27 | -------------------------------------------------------------------------------- /packages/.template/src/styled/Styled{{capitalize component}}Text.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Styled{{capitalize component}}Text } from './Styled{{capitalize component}}Text'; 11 | 12 | describe('Styled{{capitalize component}}Text', () => { 13 | it('renders default styling', () => { 14 | const { container } = render(<Styled{{capitalize component}}Text />); 15 | 16 | expect(container.firstChild).toHaveStyleRule('text-overflow', 'ellipsis'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/FooterItem.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledSheetFooterItem } from '../../../styled'; 10 | 11 | const SheetFooterItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => { 12 | return <StyledSheetFooterItem ref={ref} {...props} />; 13 | }); 14 | 15 | SheetFooterItem.displayName = 'Sheet.FooterItem'; 16 | 17 | /** 18 | * @extends HTMLAttributes<HTMLDivElement> 19 | */ 20 | export const FooterItem = SheetFooterItem; 21 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Title.spec.tsx: -------------------------------------------------------------------------------- 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 { render, screen } from 'garden-test-utils'; 10 | 11 | import { Title } from './Title'; 12 | 13 | describe('Sheet.Title', () => { 14 | const titleText = 'Sheet.Title'; 15 | 16 | it('passes ref to underlying DOM element', () => { 17 | const ref = React.createRef<HTMLDivElement>(); 18 | 19 | render(<Title ref={ref}>{titleText}); 20 | 21 | expect(screen.getByText(titleText)).toBe(ref.current); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/global-alert/GlobalAlertContent.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | 10 | import { StyledGlobalAlertContent } from '../../styled'; 11 | 12 | /** 13 | * @extends HTMLAttributes 14 | */ 15 | export const GlobalAlertContent = forwardRef>( 16 | (props, ref) => { 17 | return ; 18 | } 19 | ); 20 | 21 | GlobalAlertContent.displayName = 'GlobalAlert.Content'; 22 | -------------------------------------------------------------------------------- /packages/typography/src/elements/lists/UnorderedListItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { UnorderedList } from './UnorderedList'; 11 | 12 | describe('UnorderedListItem', () => { 13 | it('applies default padding', () => { 14 | const { container } = render( 15 | 16 | 17 | 18 | ); 19 | 20 | expect(container.querySelector('li')).toHaveStyleRule('padding-top', '4px'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/typography/src/styled/index.ts: -------------------------------------------------------------------------------- 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 | export * from './StyledBlockquote'; 9 | export * from './StyledCode'; 10 | export * from './StyledCodeBlock'; 11 | export * from './StyledCodeBlockContainer'; 12 | export * from './StyledCodeBlockLine'; 13 | export * from './StyledCodeBlockToken'; 14 | export * from './StyledEllipsis'; 15 | export * from './StyledFont'; 16 | export * from './StyledIcon'; 17 | export * from './StyledKbd'; 18 | export * from './StyledList'; 19 | export * from './StyledListItem'; 20 | export * from './StyledParagraph'; 21 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/nav/NavItemIcon.tsx: -------------------------------------------------------------------------------- 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, { SVGAttributes, PropsWithChildren } from 'react'; 9 | import { StyledNavItemIcon } from '../../styled'; 10 | 11 | /** 12 | * @deprecated use `Nav.ItemIcon` instead 13 | * 14 | * @extends SVGAttributes 15 | */ 16 | export const NavItemIcon = ({ 17 | children, 18 | ...props 19 | }: PropsWithChildren>) => ( 20 | {children} 21 | ); 22 | 23 | NavItemIcon.displayName = 'Nav.ItemIcon'; 24 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/nav/StyledNavList.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.nav_list'; 12 | 13 | export const StyledNavList = styled.ul.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | flex: 1; 19 | flex-direction: column; 20 | order: 0; 21 | margin: 0; 22 | padding: 0; 23 | list-style: none; 24 | 25 | ${componentStyles}; 26 | `; 27 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorPicker/StyledInput.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { Input } from '@zendeskgarden/react-forms'; 10 | import { componentStyles } from '@zendeskgarden/react-theming'; 11 | 12 | const COMPONENT_ID = 'colorpickers.colorpicker_input'; 13 | 14 | export const StyledInput = styled(Input as any).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION, 17 | focusInset: false 18 | })` 19 | text-align: center; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/modals/src/elements/Drawer/Close.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Drawer } from './Drawer'; 11 | 12 | describe('Drawer.Close', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { getByRole } = render( 16 | 17 | 18 | 19 | ); 20 | 21 | expect(getByRole('button')).toBe(ref.current); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/theming/demo/colorSchemeProvider.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs'; 2 | import { ColorSchemeProvider } from '@zendeskgarden/react-theming'; 3 | import { ColorSchemeProviderStory } from './stories/ColorSchemeProviderStory'; 4 | import README from '../README.md'; 5 | 6 | 7 | 8 | # API 9 | 10 | 11 | 12 | # Demo 13 | 14 | ## ColorSchemeProvider 15 | 16 | 17 | 18 | {args => } 19 | 20 | 21 | 22 | {README} 23 | -------------------------------------------------------------------------------- /packages/accordions/src/utils/useSectionContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export interface ISectionContext { 11 | sectionIndex: number; 12 | } 13 | 14 | export const SectionContext = createContext(undefined); 15 | 16 | export const useSectionContext = () => { 17 | const context = useContext(SectionContext); 18 | 19 | if (context === undefined) { 20 | throw new Error('This component must be rendered within an Accordion component'); 21 | } 22 | 23 | return context; 24 | }; 25 | -------------------------------------------------------------------------------- /packages/tooltips/src/styled/StyledTitle.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'tooltip.title'; 12 | 13 | /** 14 | * Accepts all `
` props 15 | */ 16 | export const StyledTitle = styled.strong.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | display: none; 21 | margin: 0; 22 | font-weight: ${props => props.theme.fontWeights.semibold}; 23 | 24 | ${componentStyles}; 25 | `; 26 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/nav/NavItemIcon.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { NavItemIcon } from './NavItemIcon'; 11 | 12 | describe('NavItemIcon', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render( 16 | 17 | test 18 | 19 | ); 20 | 21 | expect(container.firstChild).toBe(ref.current); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/body/StyledBody.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles, getColor } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.body'; 12 | 13 | export const StyledBody = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex: 1; 18 | order: 1; 19 | background-color: ${props => getColor({ theme: props.theme, variable: 'background.default' })}; 20 | min-width: 0; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatch.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'colorpickers.color_swatch'; 12 | 13 | /** 14 | * 1. Override Bedrock CSS 15 | */ 16 | export const StyledColorSwatch = styled.table.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | border-collapse: collapse; 21 | line-height: normal; /* [1] */ 22 | 23 | ${componentStyles}; 24 | `; 25 | -------------------------------------------------------------------------------- /packages/draggable/demo/stories/DraggableStory.tsx: -------------------------------------------------------------------------------- 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 { Story } from '@storybook/react'; 10 | import { Draggable, IDraggableProps } from '@zendeskgarden/react-draggable'; 11 | 12 | interface IArgs extends IDraggableProps { 13 | hasGrip?: boolean; 14 | } 15 | 16 | export const DraggableStory: Story = ({ hasGrip, children, ...args }) => ( 17 | 18 | {!!hasGrip && } 19 | {!!children && {children}} 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /packages/draggable/src/elements/draggable/components/Grip.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import GripIcon from '@zendeskgarden/svg-icons/src/12/grip.svg'; 10 | import { StyledGrip } from '../../../styled'; 11 | 12 | /** 13 | * @extends HTMLAttributes 14 | */ 15 | export const Grip = forwardRef>((props, ref) => ( 16 | 17 | 18 | 19 | )); 20 | 21 | Grip.displayName = 'Draggable.Grip'; 22 | -------------------------------------------------------------------------------- /packages/typography/src/styled/StyledEllipsis.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'typography.ellipsis'; 12 | 13 | export const StyledEllipsis = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | overflow: hidden; 18 | text-overflow: ellipsis; 19 | white-space: nowrap; 20 | direction: ${props => (props.theme.rtl ? 'rtl' : 'ltr')}; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/sheet/StyledSheetBody.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.sheet_body'; 12 | 13 | export const StyledSheetBody = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | flex: 1; 18 | overflow-y: auto; 19 | padding: ${props => props.theme.space.base * 5}px; 20 | color-scheme: only ${p => p.theme.colors.base}; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/datepickers/src/styled/StyledHeader.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'datepickers.header'; 12 | 13 | export const StyledHeader = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })<{ $isCompact: boolean }>` 17 | display: flex; 18 | width: ${props => 19 | props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70}px; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/grid/src/styled/pane/StyledPaneContent.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'pane.content'; 12 | 13 | export const StyledPaneContent = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | height: 100%; 18 | overflow: auto; 19 | color-scheme: only ${p => p.theme.colors.base}; 20 | 21 | &[hidden] { 22 | display: none; 23 | } 24 | 25 | ${componentStyles}; 26 | `; 27 | -------------------------------------------------------------------------------- /packages/modals/src/elements/Drawer/Body.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Drawer } from './Drawer'; 11 | 12 | describe('Drawer.Body', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { getByText } = render( 16 | 17 | content 18 | 19 | ); 20 | 21 | expect(getByText('content')).toBe(ref.current); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/Title.tsx: -------------------------------------------------------------------------------- 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 { ITitleProps } from '../types'; 10 | import { StyledTitle } from '../styled'; 11 | 12 | /** 13 | * @deprecated use `Alert.Title`, `Notification.Title`, or `Well.Title` instead 14 | * 15 | * @extends HTMLAttributes 16 | */ 17 | export const Title = React.forwardRef( 18 | ({ isRegular, ...props }, ref) => 19 | ); 20 | 21 | Title.displayName = 'Notification.Title'; 22 | -------------------------------------------------------------------------------- /packages/accordions/src/utils/useTimelineContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export interface ITimelineContext { 11 | isAlternate?: boolean; 12 | } 13 | 14 | export const TimelineContext = createContext(undefined); 15 | 16 | export const useTimelineContext = () => { 17 | const context = useContext(TimelineContext); 18 | 19 | if (context === undefined) { 20 | throw new Error('This component must be rendered within a Timeline component'); 21 | } 22 | 23 | return context; 24 | }; 25 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorPicker/StyledSliderGroup.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'colorpickers.colorpicker_slider_group'; 12 | 13 | export const StyledSliderGroup = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | justify-content: space-between; 19 | margin-bottom: ${props => props.theme.space.base * 2}px; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/modals/src/elements/TooltipDialog/FooterItem.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes, forwardRef } from 'react'; 9 | import { StyledTooltipDialogFooterItem } from '../../styled'; 10 | 11 | const FooterItemComponent = forwardRef>( 12 | (props, ref) => 13 | ); 14 | 15 | FooterItemComponent.displayName = 'TooltipDialog.FooterItem'; 16 | 17 | /** 18 | * @extends HTMLAttributes 19 | */ 20 | export const FooterItem = FooterItemComponent; 21 | -------------------------------------------------------------------------------- /packages/modals/src/index.ts: -------------------------------------------------------------------------------- 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 | export { Modal } from './elements/Modal'; 9 | export { Body } from './elements/Body'; 10 | export { Close } from './elements/Close'; 11 | export { Footer } from './elements/Footer'; 12 | export { FooterItem } from './elements/FooterItem'; 13 | export { Header } from './elements/Header'; 14 | 15 | export { TooltipDialog } from './elements/TooltipDialog/TooltipDialog'; 16 | export { Drawer } from './elements/Drawer/Drawer'; 17 | 18 | export { PLACEMENT, type IModalProps, type IDrawerProps, type ITooltipDialogProps } from './types'; 19 | -------------------------------------------------------------------------------- /packages/pagination/src/styled/OffsetPagination/StyledNavigation.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledPage } from './StyledPage'; 11 | 12 | const COMPONENT_ID = 'pagination.navigation'; 13 | 14 | export const StyledNavigation = styled(StyledPage).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/header/HeaderItemIcon.tsx: -------------------------------------------------------------------------------- 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, { PropsWithChildren, SVGAttributes } from 'react'; 9 | import { StyledHeaderItemIcon } from '../../styled'; 10 | 11 | /** 12 | * @deprecated use `Header.ItemIcon` instead 13 | * 14 | * @extends SVGAttributes 15 | */ 16 | export const HeaderItemIcon = ({ 17 | children, 18 | ...props 19 | }: PropsWithChildren>) => ( 20 | {children} 21 | ); 22 | 23 | HeaderItemIcon.displayName = 'Header.ItemIcon'; 24 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/sheet/StyledSheetTitle.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles, getColor } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'chrome.sheet_title'; 12 | 13 | export const StyledSheetTitle = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })}; 18 | font-weight: ${props => props.theme.fontWeights.semibold}; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/header/HeaderItemIcon.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { HeaderItemIcon } from './HeaderItemIcon'; 11 | 12 | describe('HeaderItemIcon', () => { 13 | it('passes ref to underlying DOM element', () => { 14 | const ref = React.createRef(); 15 | const { container } = render( 16 | 17 | test 18 | 19 | ); 20 | 21 | expect(container.firstChild).toBe(ref.current); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Footer.tsx: -------------------------------------------------------------------------------- 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, { forwardRef } from 'react'; 9 | import { ISheetFooterProps } from '../../../types'; 10 | import { StyledSheetFooter } from '../../../styled'; 11 | 12 | const SheetFooter = forwardRef(({ isCompact, ...other }, ref) => { 13 | return ; 14 | }); 15 | 16 | SheetFooter.displayName = 'Sheet.Footer'; 17 | 18 | /** 19 | * @extends HTMLAttributes 20 | */ 21 | export const Footer = SheetFooter; 22 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorPicker/StyledLabel.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { Label } from '@zendeskgarden/react-forms'; 10 | import { componentStyles } from '@zendeskgarden/react-theming'; 11 | 12 | const COMPONENT_ID = 'colorpickers.colorpicker_label'; 13 | 14 | export const StyledLabel = styled(Label as any).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { TooltipDialog } from '@zendeskgarden/react-modals'; 10 | import { componentStyles } from '@zendeskgarden/react-theming'; 11 | 12 | const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body'; 13 | 14 | export const StyledTooltipBody = styled(TooltipDialog.Body as unknown as 'div').attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | padding: 0; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/dropdowns.legacy/src/elements/Fields/Message.tsx: -------------------------------------------------------------------------------- 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 PropTypes from 'prop-types'; 10 | import { IMessageProps, Message as FormMessage, VALIDATION } from '@zendeskgarden/react-forms'; 11 | 12 | /** 13 | * @extends HTMLAttributes 14 | */ 15 | export const Message = React.forwardRef((props, ref) => ( 16 | 17 | )); 18 | 19 | Message.displayName = 'Message'; 20 | 21 | Message.propTypes = { 22 | validation: PropTypes.oneOf(VALIDATION) 23 | }; 24 | -------------------------------------------------------------------------------- /packages/forms/src/styled/common/StyledLegend.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledLabel } from './StyledLabel'; 11 | 12 | const COMPONENT_ID = 'forms.fieldset_legend'; 13 | 14 | /** 15 | * 1. Reset for . 16 | */ 17 | export const StyledLegend = styled(StyledLabel as 'legend').attrs({ 18 | as: 'legend', 19 | 'data-garden-id': COMPONENT_ID, 20 | 'data-garden-version': PACKAGE_VERSION 21 | })` 22 | padding: 0; /* [1] */ 23 | 24 | ${componentStyles}; 25 | `; 26 | -------------------------------------------------------------------------------- /packages/notifications/src/elements/Paragraph.tsx: -------------------------------------------------------------------------------- 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, { HTMLAttributes } from 'react'; 9 | import { StyledParagraph } from '../styled'; 10 | 11 | /** 12 | * @deprecated use `Alert.Paragraph`, `Notification.Paragraph`, or `Well.Paragraph` instead 13 | * 14 | * @extends HTMLAttributes 15 | */ 16 | export const Paragraph = React.forwardRef< 17 | HTMLParagraphElement, 18 | HTMLAttributes 19 | >((props, ref) => ); 20 | 21 | Paragraph.displayName = 'Notification.Paragraph'; 22 | -------------------------------------------------------------------------------- /packages/notifications/src/styled/content/StyledParagraph.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'notifications.paragraph'; 12 | 13 | /** 14 | * Used for multi-line Notification content. Supports all `

` props 15 | */ 16 | export const StyledParagraph = styled.p.attrs({ 17 | 'data-garden-id': COMPONENT_ID, 18 | 'data-garden-version': PACKAGE_VERSION 19 | })` 20 | margin: ${props => props.theme.space.base * 2}px 0 0; 21 | 22 | ${componentStyles}; 23 | `; 24 | -------------------------------------------------------------------------------- /packages/typography/src/elements/Kbd.tsx: -------------------------------------------------------------------------------- 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, { forwardRef } from 'react'; 9 | import PropTypes from 'prop-types'; 10 | import { StyledKbd } from '../styled'; 11 | import { IKbdProps, INHERIT_SIZE } from '../types'; 12 | 13 | /** 14 | * @extends HTMLAttributes 15 | */ 16 | export const Kbd = forwardRef(({ size = 'inherit', ...other }, ref) => ( 17 | 18 | )); 19 | 20 | Kbd.displayName = 'Kbd'; 21 | 22 | Kbd.propTypes = { 23 | size: PropTypes.oneOf(INHERIT_SIZE) 24 | }; 25 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileClose.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { PALETTE } from '@zendeskgarden/react-theming'; 11 | import { StyledFileClose } from './StyledFileClose'; 12 | 13 | describe('StyledFileClose', () => { 14 | it('renders the expected element', () => { 15 | const { container } = render(); 16 | 17 | expect(container.firstChild!.nodeName).toBe('BUTTON'); 18 | expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[700]); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileListItem.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledFileListItem } from './StyledFileListItem'; 11 | 12 | describe('StyledFileListItem', () => { 13 | it('renders the expected element', () => { 14 | const { container } = render(); 15 | 16 | expect(container.firstChild!.nodeName).toBe('LI'); 17 | expect(container.firstChild).toHaveStyleRule('margin-top', '8px', { 18 | modifier: '&:not(:first-child)' 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/modals/src/styled/StyledDrawerBody.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { StyledBody } from './StyledBody'; 11 | 12 | const COMPONENT_ID = 'modals.drawer_modal.body'; 13 | 14 | export const StyledDrawerBody = styled(StyledBody).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | padding: ${props => props.theme.space.base * 5}px; 19 | color-scheme: only ${p => p.theme.colors.base}; 20 | 21 | ${componentStyles}; 22 | `; 23 | -------------------------------------------------------------------------------- /packages/tooltips/src/elements/utils.ts: -------------------------------------------------------------------------------- 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 { ITooltipProps } from '../types'; 9 | 10 | /** 11 | * Convert to the intended tooltip size for the given type. 12 | * 13 | * @param {string} size Tooltip size prop value 14 | * @param {string} type Tooltip type prop value 15 | * 16 | * @returns A tooltip size. 17 | */ 18 | export const toSize = (size: ITooltipProps['size'], type: ITooltipProps['type']) => { 19 | let retVal = size; 20 | 21 | if (retVal === undefined) { 22 | retVal = type === 'dark' ? 'small' : 'large'; 23 | } 24 | 25 | return retVal; 26 | }; 27 | -------------------------------------------------------------------------------- /packages/accordions/src/elements/timeline/components/OppositeContent.tsx: -------------------------------------------------------------------------------- 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, { forwardRef, HTMLAttributes } from 'react'; 9 | import { StyledOppositeContent } from '../../../styled'; 10 | 11 | const OppositeContentComponent = forwardRef>( 12 | (props, ref) => 13 | ); 14 | 15 | OppositeContentComponent.displayName = 'Timeline.OppositeContent'; 16 | 17 | /** 18 | * @extends HTMLAttributes 19 | */ 20 | export const OppositeContent = OppositeContentComponent; 21 | -------------------------------------------------------------------------------- /packages/accordions/src/utils/useHeaderContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export interface IHeaderContext { 11 | isHovered: boolean; 12 | otherTriggerProps: any; 13 | } 14 | 15 | export const HeaderContext = createContext(undefined); 16 | 17 | export const useHeaderContext = () => { 18 | const context = useContext(HeaderContext); 19 | 20 | if (context === undefined) { 21 | throw new Error('This component must be rendered within a Accordion.Header component'); 22 | } 23 | 24 | return context; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/accordions/src/utils/useStepperContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export interface IStepperContext { 11 | activeIndex: number; 12 | isHorizontal: boolean; 13 | } 14 | 15 | export const StepperContext = createContext(undefined); 16 | 17 | export const useStepperContext = () => { 18 | const context = useContext(StepperContext); 19 | 20 | if (context === undefined) { 21 | throw new Error('This component must be rendered within a Stepper component'); 22 | } 23 | 24 | return context; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/chrome/src/utils/useSheetContext.ts: -------------------------------------------------------------------------------- 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 { createContext, useContext } from 'react'; 9 | 10 | export interface ISheetContext { 11 | titleId?: string; 12 | descriptionId?: string; 13 | isCloseButtonPresent?: boolean; 14 | setIsCloseButtonPresent: (isPresent: boolean) => void; 15 | } 16 | 17 | export const SheetContext = createContext({ 18 | // eslint-disable-next-line @typescript-eslint/no-empty-function 19 | setIsCloseButtonPresent() {} 20 | }); 21 | 22 | export const useSheetContext = () => { 23 | return useContext(SheetContext); 24 | }; 25 | -------------------------------------------------------------------------------- /packages/forms/src/styled/common/StyledMessageIcon.ts: -------------------------------------------------------------------------------- 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 styled, { DataAttributes } from 'styled-components'; 9 | import { componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'forms.input_message_icon'; 12 | 13 | export const StyledMessageIcon = styled(StyledBaseIcon).attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | width: ${props => props.theme.iconSizes.md}; 18 | height: ${props => props.theme.iconSizes.md}; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileDelete.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { PALETTE } from '@zendeskgarden/react-theming'; 11 | import { StyledFileDelete } from './StyledFileDelete'; 12 | 13 | describe('StyledFileDelete', () => { 14 | it('renders the expected element', () => { 15 | const { container } = render(); 16 | 17 | expect(container.firstChild!.nodeName).toBe('BUTTON'); 18 | expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/forms/src/styled/file-list/StyledFileDelete.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles, getColor } from '@zendeskgarden/react-theming'; 10 | import { StyledFileClose } from './StyledFileClose'; 11 | 12 | const COMPONENT_ID = 'forms.file.delete'; 13 | 14 | export const StyledFileDelete = styled(StyledFileClose).attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION 17 | })` 18 | color: ${props => getColor({ theme: props.theme, variable: 'foreground.danger' })}; 19 | 20 | ${componentStyles}; 21 | `; 22 | -------------------------------------------------------------------------------- /.storybook/manager.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 { create } from '@storybook/theming/create'; 9 | import { addons } from '@storybook/addons'; 10 | import { DEFAULT_THEME } from '../packages/theming/src'; 11 | 12 | addons.setConfig({ 13 | panelPosition: 'right', 14 | theme: create({ 15 | brandTitle: 'Zendesk Garden React Components', 16 | brandUrl: 'https://github.com/zendeskgarden/react-components', 17 | brandImage: null, 18 | colorSecondary: DEFAULT_THEME.palette.blue[600], 19 | fontBase: DEFAULT_THEME.fonts.system, 20 | fontCode: DEFAULT_THEME.fonts.mono 21 | }) 22 | }); 23 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/body/Content.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { Content } from './Content'; 11 | import { Body } from './Body'; 12 | 13 | describe('Content', () => { 14 | it('passes ref to underlying DOM element', () => { 15 | const ref = React.createRef(); 16 | const { queryByTestId } = render( 17 | 18 | 19 | 20 | ); 21 | 22 | expect(queryByTestId('content')).toBe(ref.current); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/modals/src/styled/StyledTooltipDialogFooter.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | 11 | const COMPONENT_ID = 'modals.tooltip_dialog.footer'; 12 | 13 | export const StyledTooltipDialogFooter = styled.div.attrs({ 14 | 'data-garden-id': COMPONENT_ID, 15 | 'data-garden-version': PACKAGE_VERSION 16 | })` 17 | display: flex; 18 | flex-shrink: 0; 19 | align-items: center; 20 | justify-content: flex-end; 21 | padding-top: ${p => p.theme.space.base * 5}px; 22 | 23 | ${componentStyles}; 24 | `; 25 | -------------------------------------------------------------------------------- /packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts: -------------------------------------------------------------------------------- 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 styled from 'styled-components'; 9 | import { componentStyles } from '@zendeskgarden/react-theming'; 10 | import { IStyledBaseHeaderItemProps, StyledBaseHeaderItem } from './StyledBaseHeaderItem'; 11 | 12 | const COMPONENT_ID = 'chrome.header_item_wrapper'; 13 | 14 | export const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem as 'div').attrs({ 15 | 'data-garden-id': COMPONENT_ID, 16 | 'data-garden-version': PACKAGE_VERSION, 17 | as: 'div' 18 | })` 19 | ${componentStyles}; 20 | `; 21 | -------------------------------------------------------------------------------- /packages/forms/src/styled/common/StyledMessageIcon.spec.tsx: -------------------------------------------------------------------------------- 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 { render } from 'garden-test-utils'; 10 | import { StyledMessageIcon } from './StyledMessageIcon'; 11 | import TestIcon from '@zendeskgarden/svg-icons/src/16/gear-stroke.svg'; 12 | 13 | describe('StyledMessageIcon', () => { 14 | it('renders the expected element', () => { 15 | const { container } = render( 16 | 17 | 18 | 19 | ); 20 | 21 | expect(container.firstChild!.nodeName).toBe('svg'); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/typography/demo/stories/KbdStory.tsx: -------------------------------------------------------------------------------- 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 { StoryFn } from '@storybook/react'; 10 | import { IKbdProps, Kbd } from '@zendeskgarden/react-typography'; 11 | 12 | interface IArgs extends IKbdProps { 13 | children: string; 14 | } 15 | 16 | export const KbdStory: StoryFn = ({ children, ...args }) => ( 17 | <> 18 | {children.split(' ').map((child, index) => ( 19 | <> 20 | {index > 0 ? ' ' : ''} 21 | 22 | {child} 23 | 24 | 25 | ))} 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /packages/chrome/src/elements/sheet/components/Description.spec.tsx: -------------------------------------------------------------------------------- 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 { render, screen } from 'garden-test-utils'; 10 | 11 | import { Description } from './Description'; 12 | 13 | describe('Sheet.Description', () => { 14 | const descriptionText = 'Sheet.Description'; 15 | 16 | it('passes ref to underlying DOM element', () => { 17 | const ref = React.createRef(); 18 | 19 | render({descriptionText}); 20 | 21 | expect(screen.getByText(descriptionText)).toBe(ref.current); 22 | }); 23 | }); 24 | --------------------------------------------------------------------------------