├── .nvmrc ├── .npmrc ├── CODEOWNERS ├── packages ├── select-input │ ├── README.md │ ├── .npmignore │ └── package.json ├── alert │ ├── .npmignore │ ├── fragment.graphql │ └── README.md ├── button │ ├── .npmignore │ ├── fragment.graphql │ └── icons │ │ ├── arrow-right.svg │ │ ├── corner-right-down.svg │ │ ├── download.svg │ │ └── external-link.svg ├── callouts │ ├── .npmignore │ ├── partials │ │ └── callout-item │ │ │ └── fixtures │ │ │ └── default.json │ └── readme.md ├── combobox │ ├── .npmignore │ └── utils │ │ └── filter-options.ts ├── content │ ├── .npmignore │ ├── styles │ │ ├── p.module.css │ │ ├── strong.module.css │ │ ├── img.module.css │ │ ├── iframe.module.css │ │ ├── hr.module.css │ │ ├── blockquote.module.css │ │ ├── a.module.css │ │ └── pre.module.css │ ├── README.md │ ├── index.js │ ├── index.test.js │ ├── props.js │ └── package.json ├── head │ ├── .npmignore │ ├── docs.mdx │ └── package.json ├── hero │ ├── .npmignore │ ├── carousel.test.js │ └── fragment.graphql ├── image │ ├── .npmignore │ ├── fragment.graphql │ └── package.json ├── search │ ├── .npmignore │ ├── img │ │ ├── return.svg.js │ │ ├── search-x.svg.js │ │ ├── search.svg.js │ │ └── search-legend-page.svg.js │ └── types.ts ├── subnav │ ├── .npmignore │ ├── partials │ │ ├── DropdownTrigger │ │ │ └── icons │ │ │ │ └── chevron-down.svg │ │ ├── CtaLinks │ │ │ ├── icons │ │ │ │ └── star.js │ │ │ └── github-stars-link │ │ │ │ └── formatStarCount │ │ │ │ └── index.js │ │ └── nav-item-text │ │ │ └── style.module.css │ └── helpers │ │ ├── areBasePathsMatching.ts │ │ └── useNavRef.js ├── tabs │ ├── .npmignore │ ├── icons │ │ ├── chevron-right.svg │ │ └── tooltip.svg │ ├── style.module.css │ ├── package.json │ └── provider.js ├── terminal │ ├── .npmignore │ ├── README.md │ ├── CHANGELOG.md │ └── package.json ├── toggle │ ├── .npmignore │ ├── readme.md │ ├── props.js │ ├── package.json │ └── docs.mdx ├── accordion │ ├── .npmignore │ ├── readme.md │ ├── style.css │ ├── partials │ │ ├── AccordionItems │ │ │ ├── icons │ │ │ │ └── arrow-down.svg │ │ │ └── fixtures │ │ │ │ └── default.json │ │ └── Collapsible │ │ │ └── style.module.css │ ├── style.module.css │ ├── package.json │ └── index.js ├── alert-banner │ ├── .npmignore │ ├── fragment.graphql │ ├── README.md │ └── img │ │ └── close-icon.svg ├── code-block │ ├── .npmignore │ ├── mdx │ │ └── style.module.css │ ├── fragment.graphql │ ├── README.md │ ├── style.module.css │ ├── package.json │ └── utils │ │ └── clamp.js ├── docs-sidenav │ ├── .npmignore │ ├── icons │ │ ├── bullet.svg │ │ ├── search.svg │ │ └── external-link.svg │ ├── README.md │ ├── fixtures │ │ ├── content │ │ │ ├── index.mdx │ │ │ ├── ambiguous.mdx │ │ │ └── ambiguous │ │ │ │ └── index.mdx │ │ └── content-with-unlinked │ │ │ ├── hello.mdx │ │ │ └── nested │ │ │ ├── index.mdx │ │ │ └── another-file.mdx │ ├── docs.mdx │ └── package.json ├── learn-callout │ ├── .npmignore │ ├── README.md │ └── package.json ├── link-wrap │ ├── .npmignore │ ├── CHANGELOG.md │ └── package.json ├── logo-grid │ ├── .npmignore │ ├── fragment.graphql │ ├── icons │ │ └── x.svg │ ├── docs.mdx │ └── hooks │ │ └── use-on-focus-outside.js ├── marketo-form │ ├── README.md │ ├── server │ │ └── index.ts │ ├── partials │ │ ├── fields │ │ │ ├── name-field │ │ │ │ ├── style.module.css │ │ │ │ └── index.tsx │ │ │ ├── htmltext-field │ │ │ │ ├── style.module.css │ │ │ │ └── index.tsx │ │ │ └── form-page-url-field │ │ │ │ └── index.tsx │ │ ├── label │ │ │ ├── style.module.css │ │ │ └── index.tsx │ │ ├── error-message │ │ │ ├── style.module.css │ │ │ └── index.tsx │ │ └── field-wrapper │ │ │ └── index.tsx │ ├── contexts │ │ └── FormMetadata.ts │ └── index.ts ├── text-input │ ├── .npmignore │ ├── docs.mdx │ └── package.json ├── text-split │ ├── .npmignore │ ├── README.md │ └── partials │ │ ├── checkbox-list │ │ └── icons │ │ │ └── check-square.svg │ │ └── button-group │ │ └── style.module.css ├── text-splits │ ├── .npmignore │ ├── README.md │ ├── CHANGELOG.md │ └── package.json ├── use-cases │ ├── .npmignore │ └── img │ │ ├── check.svg │ │ └── arrow.svg ├── call-to-action │ ├── .npmignore │ ├── README.md │ └── docs.mdx ├── checkbox-input │ ├── .npmignore │ └── package.json ├── consent-manager │ ├── .npmignore │ ├── style.module.css │ ├── loader │ │ └── presets │ │ │ ├── oss.ts │ │ │ └── enterprise.ts │ └── img │ │ └── icn_close.js ├── enterprise-alert │ ├── .npmignore │ ├── README.md │ ├── docs.mdx │ └── props.js ├── hashi-stack-menu │ ├── .npmignore │ ├── README.md │ ├── assets │ │ ├── icon-dropdown-gray-1.svg │ │ ├── icon-dropdown-gray-3.svg │ │ └── icon-arrow.svg │ ├── docs.mdx │ ├── props.js │ ├── browse-panel │ │ └── index.jsx │ ├── stack-menu-section │ │ └── stack-menu-section.module.css │ └── package.json ├── section-header │ ├── .npmignore │ ├── fragment.graphql │ ├── CHANGELOG.md │ ├── README.md │ ├── props.js │ ├── package.json │ └── style.module.css ├── sentinel-embedded │ ├── .npmignore │ ├── README.md │ ├── docs.mdx │ ├── CHANGELOG.md │ └── package.json ├── tabbed-accordion │ ├── .npmignore │ ├── README.md │ ├── style.module.css │ └── package.json ├── textarea-input │ ├── .npmignore │ ├── docs.mdx │ └── package.json ├── product-download-page │ ├── .npmignore │ ├── utils │ │ └── __tests__ │ │ │ └── downloader.test.ts │ └── partials │ │ └── dropdown │ │ └── style.module.css ├── product-features-list │ ├── .npmignore │ ├── README.md │ └── package.json ├── stepped-feature-list │ ├── .npmignore │ ├── README.md │ ├── CHANGELOG.md │ └── package.json ├── text-split-with-code │ ├── .npmignore │ ├── index.js │ ├── README.md │ ├── package.json │ └── props.js ├── text-split-with-image │ ├── .npmignore │ ├── styles │ │ └── text-split-with-image.module.css │ ├── README.md │ ├── index.js │ ├── package.json │ ├── props.js │ └── CHANGELOG.md ├── text-split-with-logo-grid │ ├── .npmignore │ ├── README.md │ └── CHANGELOG.md ├── vertical-text-block-list │ └── .npmignore ├── markdown-page │ ├── .npmignore │ ├── fixtures │ │ ├── test-page.mdx │ │ ├── test-page-with-component.mdx │ │ └── test-component.jsx │ ├── style.module.css │ ├── props.js │ └── index.js ├── docs-page │ ├── .npmignore │ ├── content-api │ │ └── __fixtures__ │ │ │ ├── document_404.json │ │ │ ├── navData_404.json │ │ │ └── versionMetadata_empty.json │ ├── server │ │ ├── resolve-nav-data.test.ts │ │ ├── consts.ts │ │ ├── resolve-nav-data.ts │ │ └── get-paths-from-nav-data.test.ts │ ├── components.ts │ └── components │ │ └── version-select │ │ └── props.js ├── featured-slider │ ├── README.md │ ├── partials │ │ ├── status-bar.js │ │ └── status-bar.module.css │ └── package.json ├── form-fields │ ├── index.ts │ ├── package.json │ ├── radio │ │ ├── index.tsx │ │ └── docs.mdx │ ├── radio-group │ │ └── index.tsx │ ├── checkbox-group │ │ ├── index.tsx │ │ └── style.module.css │ ├── checkbox │ │ ├── docs.mdx │ │ └── index.tsx │ ├── text │ │ └── style.module.css │ ├── textarea │ │ └── style.module.css │ └── partials │ │ └── choice-group │ │ └── style.module.css ├── inline-video │ ├── README.md │ ├── types.ts │ ├── package.json │ └── index.test.js ├── inline-svg │ ├── README.md │ ├── index.js │ ├── CHANGELOG.md │ ├── props.js │ └── docs.mdx ├── video-feature │ ├── README.md │ ├── package.json │ └── types.ts ├── close-button │ ├── docs.mdx │ ├── package.json │ ├── CHANGELOG.md │ └── index.test.js ├── notification │ ├── README.md │ ├── components │ │ ├── notification-with-language │ │ │ └── flags │ │ │ │ ├── es.svg │ │ │ │ ├── de.svg │ │ │ │ ├── fr.svg │ │ │ │ └── jp.svg │ │ └── notifications │ │ │ └── style.module.css │ ├── core │ │ └── utils.ts │ └── package.json ├── glossary-page │ └── style.module.css ├── min-100-layout │ ├── style.module.css │ ├── README.md │ ├── CHANGELOG.md │ ├── package.json │ └── docs.mdx ├── case-study-slider │ ├── readme.md │ ├── fragment.graphql │ └── package.json ├── placeholder │ ├── README.md │ ├── props.js │ ├── package.json │ └── CHANGELOG.md ├── pricing-tiers │ ├── README.md │ └── package.json ├── feedback-form │ ├── icons │ │ └── thumbs-up.svg │ ├── README.md │ └── package.json ├── open-api-page │ ├── partials │ │ ├── collapsible │ │ │ └── style.module.css │ │ └── two-column-layout │ │ │ ├── style.module.css │ │ │ └── index.tsx │ └── README.md ├── aside │ ├── README.md │ ├── CHANGELOG.md │ ├── package.json │ ├── style.module.css │ ├── props.js │ └── index.tsx ├── card │ ├── career-card │ │ └── style.module.css │ ├── README.md │ ├── event-card │ │ └── style.module.css │ ├── package.json │ ├── person-card │ │ └── style.module.css │ └── index.tsx ├── error-view │ ├── props.js │ ├── style.module.css │ └── package.json ├── product-badge │ ├── package.json │ ├── types.ts │ └── CHANGELOG.md ├── quote │ ├── types.ts │ ├── package.json │ └── style.module.css ├── products-used │ ├── package.json │ └── types.ts ├── motion-config │ ├── package.json │ ├── index.tsx │ ├── features.ts │ └── README.md ├── expandable-arrow │ ├── package.json │ ├── docs.mdx │ ├── CHANGELOG.md │ └── index.test.js ├── pricing-features │ ├── package.json │ ├── global-font.css │ ├── fixtures │ │ └── table.json │ └── components │ │ └── download-block │ │ └── style.module.css ├── actions │ ├── style.module.css │ └── package.json ├── author-byline │ ├── types.ts │ ├── package.json │ └── props.js ├── intro │ └── package.json ├── badge │ ├── package.json │ └── types.ts ├── radio-group │ └── package.json ├── standalone-link │ ├── package.json │ ├── types.ts │ ├── docs.mdx │ └── props.js ├── related-content │ ├── package.json │ └── types.ts ├── split-rich-cta-list │ ├── img │ │ └── arrow-right.svg │ └── CHANGELOG.md ├── content-cta │ ├── docs.mdx │ └── package.json └── next-steps │ └── package.json ├── .gitignore ├── global.d.ts ├── postcss.config.js ├── .env ├── next-env.d.ts ├── .stylelintrc.js ├── prettier.config.js ├── .copywrite.hcl ├── graphql.d.ts ├── swingset-extensions ├── next-router-debugger │ └── style.module.css ├── usage-details │ ├── usage-details.module.css │ ├── svg │ │ ├── x-icon.svg │ │ ├── external-link.svg │ │ └── loading-spinner.svg │ ├── utils │ │ └── query-string.js │ └── partials │ │ ├── package-version │ │ └── style.module.css │ │ ├── project-list-item │ │ └── project-list-item.module.css │ │ └── top-bar │ │ └── top-bar.module.css ├── playground │ ├── hooks │ │ └── use-safe-layout-effect.ts │ ├── components │ │ ├── button-with-icon.module.css │ │ ├── button-with-icon.tsx │ │ ├── icon-refresh.tsx │ │ ├── icon-copy.tsx │ │ ├── icon-maximize.tsx │ │ └── icon-minimize.tsx │ └── lib │ │ └── get-code-from-child-pre.ts └── formik-state-viewer │ └── style.module.css ├── pages ├── global.css └── _app.jsx ├── .eslintrc.js ├── jest.config.js ├── __test-helpers └── expect-throw.js ├── .github └── workflows │ ├── release.yml │ └── canary-release.yml ├── .changeset ├── README.md └── config.json ├── props.js ├── scripts └── release-check-branch.sh └── tsconfig.json /.nvmrc: -------------------------------------------------------------------------------- 1 | v16 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @hashicorp/web-presence 2 | -------------------------------------------------------------------------------- /packages/select-input/README.md: -------------------------------------------------------------------------------- 1 | # Select Input 2 | -------------------------------------------------------------------------------- /packages/alert/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/button/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/callouts/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/combobox/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/content/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/head/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/hero/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/image/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/search/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/subnav/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/tabs/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/terminal/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/toggle/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/accordion/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/alert-banner/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/code-block/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/docs-sidenav/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/learn-callout/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/link-wrap/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/logo-grid/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/marketo-form/README.md: -------------------------------------------------------------------------------- 1 | # @hashicorp/react-marketo-form 2 | -------------------------------------------------------------------------------- /packages/select-input/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-input/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-split/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-splits/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/use-cases/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .next 4 | out 5 | .env.local -------------------------------------------------------------------------------- /packages/call-to-action/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/checkbox-input/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/consent-manager/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/enterprise-alert/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/hashi-stack-menu/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/section-header/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/sentinel-embedded/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/tabbed-accordion/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/textarea-input/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/product-download-page/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/product-features-list/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/stepped-feature-list/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-split-with-code/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-split-with-image/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/text-split-with-logo-grid/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/vertical-text-block-list/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js -------------------------------------------------------------------------------- /packages/markdown-page/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.js 4 | fixtures 5 | -------------------------------------------------------------------------------- /packages/docs-page/.npmignore: -------------------------------------------------------------------------------- 1 | docs.mdx 2 | props.js 3 | *.test.* 4 | 5 | __fixtures__ 6 | __snapshots__ -------------------------------------------------------------------------------- /packages/product-features-list/README.md: -------------------------------------------------------------------------------- 1 | # Product Features List 2 | 3 | A list for product features 4 | -------------------------------------------------------------------------------- /packages/featured-slider/README.md: -------------------------------------------------------------------------------- 1 | # Featured Slider 2 | 3 | A slider for featuring and linking to use cases 4 | -------------------------------------------------------------------------------- /packages/tabbed-accordion/README.md: -------------------------------------------------------------------------------- 1 | # TabbedAccordion 2 | 3 | Display a set of Accordion items grouped under tabs. 4 | -------------------------------------------------------------------------------- /packages/call-to-action/README.md: -------------------------------------------------------------------------------- 1 | # Call To Action 2 | 3 | Display a title, content, and links in a call-to-action format. 4 | -------------------------------------------------------------------------------- /packages/text-split/README.md: -------------------------------------------------------------------------------- 1 | # Text Split 2 | 3 | Display a title, description, and links alongside arbitrary content. 4 | -------------------------------------------------------------------------------- /packages/sentinel-embedded/README.md: -------------------------------------------------------------------------------- 1 | # Sentinel embedded playground 2 | 3 | Provides support for embedding the Sentinel playground. -------------------------------------------------------------------------------- /packages/markdown-page/fixtures/test-page.mdx: -------------------------------------------------------------------------------- 1 | # Test Page 2 | 3 | This is a cool test page for the `` component, wow! 4 | -------------------------------------------------------------------------------- /packages/toggle/readme.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | A simple toggle component. 4 | 5 | ### Props 6 | 7 | - `enabled` (boolean) - State of toggle 8 | -------------------------------------------------------------------------------- /packages/button/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment buttonFields on SbcButtonV2Record { 2 | id 3 | title 4 | url 5 | external 6 | brand 7 | } 8 | -------------------------------------------------------------------------------- /packages/alert/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment alertFields on AlertRecord { 2 | id 3 | tag 4 | text 5 | textColor 6 | tagColor 7 | url 8 | } 9 | -------------------------------------------------------------------------------- /packages/form-fields/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | export default {} 7 | -------------------------------------------------------------------------------- /packages/image/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment imageFields on FileFieldInterface { 2 | id 3 | url 4 | alt 5 | format 6 | width 7 | height 8 | } 9 | -------------------------------------------------------------------------------- /packages/docs-page/content-api/__fixtures__/document_404.json: -------------------------------------------------------------------------------- 1 | { 2 | "meta": { 3 | "status_code": 404, 4 | "status_text": "Not Found" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs-page/content-api/__fixtures__/navData_404.json: -------------------------------------------------------------------------------- 1 | { 2 | "meta": { 3 | "status_code": 404, 4 | "status_text": "Not Found" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | /// 7 | -------------------------------------------------------------------------------- /packages/hashi-stack-menu/README.md: -------------------------------------------------------------------------------- 1 | # HashiStack Menu 2 | 3 | Display the entire suite of products, platforms, and technologies provided by HashiCorp in a single menu 4 | -------------------------------------------------------------------------------- /packages/markdown-page/fixtures/test-page-with-component.mdx: -------------------------------------------------------------------------------- 1 | # Test Page 2 | 3 | Check out this custom component: 4 | 5 | 6 | 7 | how great is that? 8 | -------------------------------------------------------------------------------- /packages/inline-video/README.md: -------------------------------------------------------------------------------- 1 | # InlineVideo 2 | 3 | Featured video with optional description. 4 | 5 | ### Props 6 | 7 | See [the props file](props.js) for more details. 8 | -------------------------------------------------------------------------------- /packages/section-header/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment sectionHeaderFields on SbcSectionHeaderRecord { 2 | id 3 | headline 4 | description(markdown: true) 5 | useH1 6 | } 7 | -------------------------------------------------------------------------------- /packages/text-splits/README.md: -------------------------------------------------------------------------------- 1 | # Text Splits 2 | 3 | Display an array of `text-split` components, automatically switching to the appropriate component for each array item. 4 | -------------------------------------------------------------------------------- /packages/docs-page/content-api/__fixtures__/versionMetadata_empty.json: -------------------------------------------------------------------------------- 1 | { 2 | "meta": { 3 | "status_code": 200, 4 | "status_text": "OK" 5 | }, 6 | "result": [] 7 | } 8 | -------------------------------------------------------------------------------- /packages/code-block/mdx/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .codeMargin { 7 | margin: 1.5rem 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/docs-sidenav/icons/bullet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/alert-banner/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment alertBannerFields on AlertBannerRecord { 2 | id 3 | tag 4 | theme 5 | text 6 | linkText 7 | url 8 | expirationDate 9 | } 10 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | module.exports = { 7 | ...require('@hashicorp/platform-postcss-config'), 8 | } 9 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_ALGOLIA_APP_ID=YY0FFNI7MF 2 | NEXT_PUBLIC_ALGOLIA_INDEX=react-components_TEST 3 | NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY=44ed2a0b923b306ea74acd4ac0dee741 4 | OCKTOKIT_ACCESS_TOKEN=abcd_TEST -------------------------------------------------------------------------------- /packages/alert-banner/README.md: -------------------------------------------------------------------------------- 1 | ### Alert Banner 2 | 3 | An alert banner that links somewhere, such as to a new release or announcement. Sets a cookie when closed to hide itself on future page visits. 4 | -------------------------------------------------------------------------------- /packages/code-block/fragment.graphql: -------------------------------------------------------------------------------- 1 | fragment codeBlockFields on SbcCodeBlockRecord { 2 | id 3 | code 4 | chrome 5 | language { 6 | slug 7 | position 8 | name 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/content/styles/p.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .p { 7 | & p { 8 | margin: 20px 0; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/accordion/readme.md: -------------------------------------------------------------------------------- 1 | # Accordion 2 | 3 | Display a list of titled items with expandable content. 4 | 5 | [See Accordion Documentation Here](https://react-components.vercel.app/?component=Accordion) 6 | -------------------------------------------------------------------------------- /packages/marketo-form/server/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | import { buildApiRoutes } from './api-routes' 7 | 8 | export { buildApiRoutes } 9 | -------------------------------------------------------------------------------- /packages/content/styles/strong.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .strong { 7 | & strong { 8 | color: var(--black); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/inline-svg/README.md: -------------------------------------------------------------------------------- 1 | # InlineSvg 2 | 3 | The `` component renders an `` from a given string. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-inline-svg 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/video-feature/README.md: -------------------------------------------------------------------------------- 1 | # VideoFeature 2 | 3 | A component used to showcase a video alongside more details about its content and creator. 4 | 5 | ### Props 6 | 7 | See [the props file](props.js) for more details. 8 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/stepped-feature-list/README.md: -------------------------------------------------------------------------------- 1 | # SteppedFeatureList 2 | 3 | The `` component renders a stepped list (on larger breakpoints) and a carousel (on mobile breakpoints) to navigate through 4 | a list of features. 5 | -------------------------------------------------------------------------------- /packages/tabs/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/terminal/README.md: -------------------------------------------------------------------------------- 1 | # Alert 2 | 3 | The `` is a representation of a terminal in a static state. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-command-line-terminal 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/text-split-with-image/styles/text-split-with-image.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .imgElem { 7 | display: block; 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /packages/markdown-page/fixtures/test-component.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | export default function TestComponent() { 7 | return

hello im a test component!

8 | } 9 | -------------------------------------------------------------------------------- /packages/tabs/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .content { 7 | composes: g-grid-container from global; 8 | color: var(--content-default-color); 9 | } 10 | -------------------------------------------------------------------------------- /packages/close-button/docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | componentName: 'CloseButton' 3 | --- 4 | 5 | 6 | {` {}} ariaLabel="Close video" />`} 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/content/styles/img.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .img { 7 | & img { 8 | margin: 1rem auto; 9 | width: 100%; 10 | height: auto; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/learn-callout/README.md: -------------------------------------------------------------------------------- 1 | # LearnCallout 2 | 3 | The `` component renders callouts that lead to guides on HashiCorp Learn. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-learn-callout 9 | ``` 10 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | module.exports = { 7 | ...require('@hashicorp/platform-cli/config/stylelint.config.js'), 8 | /* Specify overrides here */ 9 | } 10 | -------------------------------------------------------------------------------- /packages/accordion/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | @import './styles/index.css'; 7 | @import './partials/AccordionItems/style.css'; 8 | @import './partials/Collapsible/style.css'; 9 | -------------------------------------------------------------------------------- /packages/content/styles/iframe.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .iframe { 7 | & iframe:not([class]) { 8 | margin: 1rem auto; 9 | max-width: 100%; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/form-fields/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@hashicorp/react-form-fields", 3 | "version": "0.2.2", 4 | "dependencies": { 5 | "@hashicorp/flight-icons": "^2.5.0", 6 | "classnames": "^2.3.2", 7 | "clsx": "^1.2.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/hashi-stack-menu/assets/icon-dropdown-gray-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/hashi-stack-menu/assets/icon-dropdown-gray-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/notification/README.md: -------------------------------------------------------------------------------- 1 | # Notification 2 | 3 | > A suite of components for rendering notifications 4 | 5 | A large portion of the core library is lifted from [react-hot-toast](https://react-hot-toast.com/) and modified to fit our specific needs. 6 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | module.exports = { 7 | ...require('@hashicorp/platform-cli/config/prettier.config.js'), 8 | /* Specify overrides here */ 9 | } 10 | -------------------------------------------------------------------------------- /.copywrite.hcl: -------------------------------------------------------------------------------- 1 | schema_version = 1 2 | 3 | project { 4 | license = "MPL-2.0" 5 | # The year the repo was created, matches the HashiCorp default 6 | copyright_year = 2020 7 | 8 | header_ignore = [ 9 | "next-env.d.ts", 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /graphql.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | declare module '*.graphql' { 7 | import { DocumentNode } from 'graphql' 8 | 9 | const value: DocumentNode 10 | export = value 11 | } 12 | -------------------------------------------------------------------------------- /swingset-extensions/next-router-debugger/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .debugger { 7 | border: 1px dashed red; 8 | font-size: 0.75em; 9 | padding: 12px; 10 | } 11 | -------------------------------------------------------------------------------- /packages/accordion/partials/AccordionItems/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/inline-svg/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | export default function InlineSvg({ src, ...props }) { 7 | return
8 | } 9 | -------------------------------------------------------------------------------- /packages/notification/components/notification-with-language/flags/es.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/global.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | @import '~@hashicorp/mktg-global-styles/style.css'; 7 | 8 | .swingset-logo { 9 | margin: 1rem 1rem 0.25rem 2rem; 10 | height: 32px; 11 | } 12 | -------------------------------------------------------------------------------- /packages/alert/README.md: -------------------------------------------------------------------------------- 1 | # Alert 2 | 3 | The `` component renders a small alert banner with a link. It is often used to redirect users to a new release or announcement. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-alert 9 | ``` 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | module.exports = { 7 | root: true, 8 | extends: './node_modules/@hashicorp/platform-cli/config/.eslintrc.js', 9 | /* Specify overrides here */ 10 | } 11 | -------------------------------------------------------------------------------- /packages/enterprise-alert/README.md: -------------------------------------------------------------------------------- 1 | # EnterpriseAlert 2 | 3 | The `` component renders an alert used to note the requirement of an enterprise product. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-enterprise-alert 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/subnav/partials/DropdownTrigger/icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/code-block/README.md: -------------------------------------------------------------------------------- 1 | # Code Block 2 | 3 | A styled code block with clipboard functionality. 4 | 5 | ## Props 6 | 7 | Refer to our [component playground](https://react-components.hashicorp.vercel.app/?component=CodeBlock) for details on the props this component accepts. 8 | -------------------------------------------------------------------------------- /packages/consent-manager/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | @media only percy { 8 | display: none; 9 | } 10 | 11 | @media print { 12 | display: none; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/hashi-stack-menu/docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | componentName: 'HashiStackMenu' 3 | --- 4 | 5 | 6 | {``} 7 | 8 | 9 | 10 | 11 | ### Props 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/glossary-page/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .tableOfContents { 7 | column-width: 14em; 8 | margin-block-start: 0; 9 | 10 | & li:first-of-type { 11 | margin-top: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/min-100-layout/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | display: flex; 8 | min-height: 100vh; 9 | flex-direction: column; 10 | } 11 | 12 | .footer { 13 | margin-top: auto; 14 | } 15 | -------------------------------------------------------------------------------- /packages/notification/components/notification-with-language/flags/de.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/case-study-slider/readme.md: -------------------------------------------------------------------------------- 1 | # Case Study Slider 2 | 3 | A slider component that can display up to three case studies and allow a visitor to toggle between them, and click through to read. 4 | 5 | ### Props 6 | 7 | See the [props file](props.js) for more details on the component's props! 8 | -------------------------------------------------------------------------------- /packages/docs-page/server/resolve-nav-data.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | import { resolveNavData } from './resolve-nav-data' 7 | 8 | describe('resolveNavData', () => { 9 | it.todo('should resolve nav data') 10 | }) 11 | -------------------------------------------------------------------------------- /packages/content/styles/hr.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .hr { 7 | & hr:not([class]) { 8 | height: 1px; 9 | border: none; 10 | color: var(--gray-5); 11 | background-color: var(--gray-5); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/placeholder/README.md: -------------------------------------------------------------------------------- 1 | # Placeholder 2 | 3 | The `` component is used to render pre-styled skeleton loading states. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-placeholder 9 | ``` 10 | 11 | ## Usage 12 | 13 | See usage examples in [docs.mdx](docs.mdx). 14 | -------------------------------------------------------------------------------- /swingset-extensions/usage-details/usage-details.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | margin: 48px 0; 8 | } 9 | 10 | .list { 11 | list-style: none; 12 | padding: 0; 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | -------------------------------------------------------------------------------- /packages/hero/carousel.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | test.todo('renders each video') 7 | test.todo('shows the currently active video') 8 | test.todo('switches videos automatically when one ends') 9 | test.todo('switches videos on click') 10 | -------------------------------------------------------------------------------- /packages/pricing-tiers/README.md: -------------------------------------------------------------------------------- 1 | # Pricing Tier List 2 | 3 | The `` component is used to display a list of cards, each containing pricing-related details on product tiers. Supports a maximum of 5 tiers. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install @hashicorp/react-pricing-tiers 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/button/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | Arrow pointing right 2 | -------------------------------------------------------------------------------- /packages/docs-sidenav/README.md: -------------------------------------------------------------------------------- 1 | # Docs Sidenav 2 | 3 | Side navigation for HashiCorp's product documentation. Fairly tightly tied to our specific documentation sites and the format that middleman uses to catalog pages and frontmatter at the moment. 4 | 5 | ## Props 6 | 7 | See [the props file](props.js) for more details. 8 | -------------------------------------------------------------------------------- /packages/accordion/partials/Collapsible/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | overflow: hidden; 8 | height: 0; 9 | transition: height 0.3s; 10 | } 11 | 12 | .inner { 13 | opacity: 1; 14 | transition: opacity 0.3s; 15 | } 16 | -------------------------------------------------------------------------------- /packages/callouts/partials/callout-item/fixtures/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "icon": "Default svg title", 3 | "heading": "My test heading", 4 | "content": "My test content", 5 | "product": "hashicorp", 6 | "link": { 7 | "text": "My test link", 8 | "url": "/some/test/path" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/feedback-form/icons/thumbs-up.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/hashi-stack-menu/props.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | module.exports = { 7 | onPanelChange: { 8 | type: 'function', 9 | description: 10 | 'An optional callback function run on change of the active panel state', 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /packages/marketo-form/partials/fields/name-field/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .name { 7 | display: grid; 8 | grid-gap: 8px; 9 | @media (--medium-up) { 10 | grid-gap: 32px; 11 | grid-template-columns: 1fr 1fr; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/marketo-form/partials/label/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .label { 7 | color: var(--gray-3); 8 | composes: g-type-label from global; 9 | display: block; 10 | padding-bottom: 8px; 11 | text-transform: uppercase; 12 | } 13 | -------------------------------------------------------------------------------- /packages/open-api-page/partials/collapsible/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | overflow: hidden; 8 | height: 0; 9 | transition: height 0.3s; 10 | } 11 | 12 | .inner { 13 | opacity: 1; 14 | transition: opacity 0.3s; 15 | } 16 | -------------------------------------------------------------------------------- /swingset-extensions/playground/hooks/use-safe-layout-effect.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | import { useEffect, useLayoutEffect } from 'react' 7 | 8 | export const useSafeLayoutEffect = 9 | typeof window === 'undefined' ? useEffect : useLayoutEffect 10 | -------------------------------------------------------------------------------- /packages/accordion/style.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) HashiCorp, Inc. 3 | * SPDX-License-Identifier: MPL-2.0 4 | */ 5 | 6 | .root { 7 | background: var(--white); 8 | padding-top: 128px; 9 | padding-bottom: 128px; 10 | } 11 | 12 | .heading { 13 | composes: g-type-display-2 from global; 14 | margin: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/aside/README.md: -------------------------------------------------------------------------------- 1 | # Aside 2 | 3 | The `