├── .all-contributorsrc ├── .browserslistrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── npm-publish.yml │ └── storybook-deploy.yml ├── .gitignore ├── .npmrc ├── .storybook ├── main.ts ├── preview.ts └── styles.css ├── .stylelintrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── components ├── Accessibility │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Accessibility.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── Accordion │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Accordion.stories.tsx │ │ ├── Accordion.test.tsx │ │ ├── __snapshots__ │ │ │ └── Accordion.test.tsx.snap │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── BundleSize │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── BundleSize.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── DesignSpec │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── DesignSpec.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── Guideline │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Guideline.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── IntendedUsage │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── IntendedUsage.module.css │ │ ├── IntendedUsage.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── RelatedComponents │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── RelatedComponents.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── ResponsiveStory │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── ResponsiveStory.module.css │ │ ├── ResponsiveStory.stories.tsx │ │ ├── devices.min.css │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── Row │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Row.module.css │ │ ├── Row.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── Shield │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Shield.module.css │ │ ├── Shield.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── ShieldRow │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── ShieldRow.module.css │ │ ├── ShieldRow.stories.tsx │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── Tabs │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Tabs.module.css │ │ ├── Tabs.stories.tsx │ │ ├── Tabs.test.tsx │ │ ├── __snapshots__ │ │ │ └── Tabs.test.tsx.snap │ │ ├── index.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts └── Version │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── Version.stories.mdx │ ├── Version.stories.tsx │ └── index.tsx │ ├── tsconfig.build.json │ ├── tsconfig.json │ ├── vite-env.d.ts │ └── vite.config.ts ├── eslint.config.js ├── example ├── Example.mdx ├── Example.stories.tsx ├── package.json └── yarn.lock ├── jest.config.js ├── lerna.json ├── media └── logo-mark.svg ├── package.json ├── packages └── doc-blocks │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── index.tsx │ └── vite-env.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── renovate.json ├── tsconfig.build.json ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "doc-blocks", 3 | "projectOwner": "intuit", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "none", 12 | "contributors": [ 13 | { 14 | "login": "hipstersmoothie", 15 | "name": "Andrew Lisowski", 16 | "avatar_url": "https://avatars3.githubusercontent.com/u/1192452?v=4", 17 | "profile": "http://hipstersmoothie.com/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "example", 22 | "infra" 23 | ] 24 | }, 25 | { 26 | "login": "kharrop", 27 | "name": "Kelly Harrop", 28 | "avatar_url": "https://avatars0.githubusercontent.com/u/24794756?v=4", 29 | "profile": "https://github.com/kharrop", 30 | "contributions": [ 31 | "doc", 32 | "code" 33 | ] 34 | }, 35 | { 36 | "login": "kendallgassner", 37 | "name": "Kendall Gassner", 38 | "avatar_url": "https://avatars.githubusercontent.com/u/15275462?v=4", 39 | "profile": "https://github.com/kendallgassner", 40 | "contributions": [ 41 | "code" 42 | ] 43 | }, 44 | { 45 | "login": "fattslug", 46 | "name": "Sean Powell", 47 | "avatar_url": "https://avatars.githubusercontent.com/u/18297343?v=4", 48 | "profile": "https://github.com/fattslug", 49 | "contributions": [ 50 | "doc", 51 | "example", 52 | "test", 53 | "code", 54 | "infra" 55 | ] 56 | }, 57 | { 58 | "login": "NoWorries", 59 | "name": "Josh Harwood", 60 | "avatar_url": "https://avatars.githubusercontent.com/u/803064?v=4", 61 | "profile": "https://github.com/NoWorries", 62 | "contributions": [ 63 | "code" 64 | ] 65 | } 66 | ], 67 | "contributorsPerLine": 7 68 | } 69 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | ie >= 10 2 | Edge >= 12 3 | Firefox >= 11 4 | Chrome >= 4 5 | Opera >= 30 6 | Safari >= 5 7 | iOS >= 5 8 | Android >= 4.0 -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: bug 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | 11 | 12 | 13 | **To Reproduce** 14 | 15 | 16 | 17 | 18 | 19 | **Expected behavior** 20 | 21 | 22 | 23 | **Screenshots** 24 | 25 | 26 | 27 | **Environment information:** 28 | 29 | 30 | 31 | ```txt 32 | 33 | ``` 34 | 35 | **Additional context** 36 | 37 | 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: enhancement 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | 11 | 12 | 13 | **Describe the solution you'd like** 14 | 15 | 16 | 17 | **Describe alternatives you've considered** 18 | 19 | 20 | 21 | **Additional context** 22 | 23 | 24 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # What Changed 2 | 3 | ## Why 4 | 5 | Todo: 6 | 7 | - [ ] Add tests 8 | - [ ] Add docs 9 | 10 | ## Change Type 11 | 12 | Indicate the type of change your pull request is: 13 | 14 | - [ ] `documentation` 15 | - [ ] `patch` 16 | - [ ] `minor` 17 | - [ ] `major` 18 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | pull_request: 8 | types: [opened, synchronize, reopened] 9 | release: 10 | types: [created] 11 | push: 12 | branches: 13 | - "master" 14 | 15 | jobs: 16 | build-publish: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: actions/checkout@v4 20 | - uses: actions/setup-node@v4 21 | with: 22 | node-version: 22 23 | cache: "yarn" 24 | - name: Install dependencies 25 | run: yarn install 26 | - name: Test 27 | run: yarn test 28 | - name: Build 29 | run: yarn build 30 | - name: Prepare repository 31 | run: git fetch --unshallow --tags 32 | - name: Release 33 | env: 34 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 36 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 37 | PR: ${{ steps.PR.outputs.number }} 38 | run: yarn release 39 | -------------------------------------------------------------------------------- /.github/workflows/storybook-deploy.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 3 | 4 | name: Storybook Deployment 5 | 6 | on: 7 | push: 8 | branches: 9 | - "master" 10 | 11 | permissions: 12 | contents: read 13 | pages: write 14 | id-token: write 15 | 16 | jobs: 17 | storybook-publish: 18 | environment: 19 | name: github-pages 20 | url: ${{ steps.build-publish.outputs.page_url }} 21 | runs-on: ubuntu-latest 22 | steps: 23 | - uses: actions/checkout@v4 24 | with: 25 | fetch-depth: 0 26 | - uses: actions/setup-node@v4 27 | with: 28 | node-version: 22 29 | cache: "yarn" 30 | - name: Install 31 | run: yarn install 32 | - name: Build 33 | run: yarn build 34 | - name: Deploy Storybook 35 | uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 36 | with: 37 | path: storybook-static 38 | install_command: yarn install 39 | build_command: yarn build:storybook 40 | checkout: false 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.swp 3 | .idea 4 | node_modules 5 | report 6 | dist/ 7 | commonjs/ 8 | module/ 9 | target/ 10 | npm-debug.log 11 | npm-shrinkwrap.json 12 | *.iml 13 | jsconfig.json 14 | .vscode/* 15 | !.vscode/settings.json 16 | _node 17 | .nyc_output 18 | yarn-error.log 19 | package-lock.json 20 | lerna-debug.log 21 | coverage/ 22 | junit.xml 23 | out/ 24 | bundle-master 25 | bundle-pr 26 | diff.html 27 | roleFile 28 | core.* 29 | .env 30 | .eslintcache 31 | tsconfig.tsbuildinfo 32 | 33 | *storybook.log 34 | storybook-static/ -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | registry=https://registry.npmjs.com -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/react-vite"; 2 | import { join, dirname } from "path"; 3 | 4 | /** 5 | * This function is used to resolve the absolute path of a package. 6 | * It is needed in projects that use Yarn PnP or are set up within a monorepo. 7 | */ 8 | function getAbsolutePath(value: string): any { 9 | return dirname(require.resolve(join(value, "package.json"))); 10 | } 11 | const config: StorybookConfig = { 12 | stories: ["../components/**/*.stories.@(js|jsx|mjs|ts|tsx)"], 13 | core: { 14 | builder: "@storybook/builder-vite", 15 | }, 16 | addons: [getAbsolutePath("@chromatic-com/storybook")], 17 | framework: { 18 | name: getAbsolutePath("@storybook/react-vite"), 19 | options: {}, 20 | }, 21 | }; 22 | export default config; 23 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from "@storybook/react"; 2 | import "./styles.css"; 3 | 4 | const preview: Preview = { 5 | parameters: { 6 | controls: { 7 | matchers: { 8 | color: /(background|color)$/i, 9 | date: /Date$/i, 10 | }, 11 | }, 12 | }, 13 | }; 14 | 15 | export default preview; 16 | -------------------------------------------------------------------------------- /.storybook/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 3 | Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 4 | "Segoe UI Symbol"; 5 | } 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@design-systems/stylelint-config"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#a979f2", 4 | "activityBar.activeBorder": "#f7c7a8", 5 | "activityBar.background": "#a979f2", 6 | "activityBar.foreground": "#15202b", 7 | "activityBar.inactiveForeground": "#15202b99", 8 | "activityBarBadge.background": "#f7c7a8", 9 | "activityBarBadge.foreground": "#15202b", 10 | "statusBar.background": "#8b4aee", 11 | "statusBar.foreground": "#e7e7e7", 12 | "statusBarItem.hoverBackground": "#a979f2", 13 | "titleBar.activeBackground": "#8b4aee", 14 | "titleBar.activeForeground": "#e7e7e7", 15 | "titleBar.inactiveBackground": "#8b4aee99", 16 | "titleBar.inactiveForeground": "#e7e7e799", 17 | "editorGroup.border": "#a979f2", 18 | "panel.border": "#a979f2", 19 | "sash.hoverBorder": "#a979f2", 20 | "sideBar.border": "#a979f2", 21 | "statusBarItem.remoteBackground": "#8b4aee", 22 | "statusBarItem.remoteForeground": "#e7e7e7" 23 | }, 24 | "peacock.color": "#8b4aee" 25 | } 26 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v2.0.0 (Wed Jul 02 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - `@doc-blocks/accordion`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/tabs`, `@doc-blocks/all` 6 | - feat: bump to storybook 9 [#36](https://github.com/intuit/doc-blocks/pull/36) (sean_powell@intuit.com [@fattslug](https://github.com/fattslug)) 7 | 8 | #### Authors: 2 9 | 10 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 11 | - spowell9 (sean_powell@intuit.com) 12 | 13 | --- 14 | 15 | # v1.0.0 (Thu May 01 2025) 16 | 17 | #### 💥 Breaking Change 18 | 19 | - `@doc-blocks/accessibility`, `@doc-blocks/accordion`, `@doc-blocks/bundle-size`, `@doc-blocks/design-spec`, `@doc-blocks/guideline`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield`, `@doc-blocks/shield-row`, `@doc-blocks/tabs`, `@doc-blocks/version`, `@doc-blocks/doc-blocks` 20 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 21 | 22 | #### 🐛 Bug Fix 23 | 24 | - fix: publish on master push [#35](https://github.com/intuit/doc-blocks/pull/35) (sean_powell@intuit.com [@fattslug](https://github.com/fattslug)) 25 | 26 | #### Authors: 2 27 | 28 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 29 | - spowell9 (sean_powell@intuit.com) 30 | 31 | --- 32 | 33 | # v0.8.15 (Mon Jul 25 2022) 34 | 35 | #### 🐛 Bug Fix 36 | 37 | - `@doc-blocks/tabs` 38 | - add missing peer deps [#26](https://github.com/intuit/doc-blocks/pull/26) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 39 | 40 | #### Authors: 1 41 | 42 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 43 | 44 | --- 45 | 46 | # v0.8.14 (Mon Jul 25 2022) 47 | 48 | #### 🐛 Bug Fix 49 | 50 | - `@doc-blocks/accordion`, `@doc-blocks/guideline`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story` 51 | - add missing peer deps [#25](https://github.com/intuit/doc-blocks/pull/25) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 52 | 53 | #### Authors: 1 54 | 55 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 56 | 57 | --- 58 | 59 | # v0.8.13 (Tue Mar 08 2022) 60 | 61 | #### 🐛 Bug Fix 62 | 63 | - `@doc-blocks/guideline` 64 | - Update index.tsx [#24](https://github.com/intuit/doc-blocks/pull/24) ([@NoWorries](https://github.com/NoWorries)) 65 | 66 | #### Authors: 1 67 | 68 | - Josh Harwood ([@NoWorries](https://github.com/NoWorries)) 69 | 70 | --- 71 | 72 | # v0.8.12 (Mon Nov 15 2021) 73 | 74 | #### 🐛 Bug Fix 75 | 76 | - `@doc-blocks/accordion` 77 | - Adding styled-components dependency to Accordion [#22](https://github.com/intuit/doc-blocks/pull/22) (sean_powell@intuit.com) 78 | 79 | #### Authors: 1 80 | 81 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 82 | 83 | --- 84 | 85 | # v0.8.11 (Thu Oct 21 2021) 86 | 87 | #### 🐛 Bug Fix 88 | 89 | - `@doc-blocks/accordion` 90 | - Removing width and horizontal padding from accordion panel [#21](https://github.com/intuit/doc-blocks/pull/21) ([@kharrop](https://github.com/kharrop)) 91 | 92 | #### Authors: 1 93 | 94 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 95 | 96 | --- 97 | 98 | # v0.8.10 (Thu Oct 21 2021) 99 | 100 | #### 🐛 Bug Fix 101 | 102 | - `@doc-blocks/accordion` 103 | - Adding className support for accordion [#19](https://github.com/intuit/doc-blocks/pull/19) ([@kharrop](https://github.com/kharrop)) 104 | 105 | #### Authors: 1 106 | 107 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 108 | 109 | --- 110 | 111 | # v0.8.9 (Mon Oct 18 2021) 112 | 113 | #### 🐛 Bug Fix 114 | 115 | - `@doc-blocks/accordion`, `@doc-blocks/tabs` 116 | - Adding option for external tab state [#18](https://github.com/intuit/doc-blocks/pull/18) (sean_powell@intuit.com) 117 | 118 | #### Authors: 1 119 | 120 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 121 | 122 | --- 123 | 124 | # v0.8.8 (Thu Oct 14 2021) 125 | 126 | #### 🐛 Bug Fix 127 | 128 | - `@doc-blocks/accordion`, `@doc-blocks/tabs` 129 | - Updating Tabs & Accordion exports [#17](https://github.com/intuit/doc-blocks/pull/17) (sean_powell@intuit.com) 130 | 131 | #### Authors: 1 132 | 133 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 134 | 135 | --- 136 | 137 | # v0.8.7 (Tue Oct 05 2021) 138 | 139 | #### 🐛 Bug Fix 140 | 141 | - `@doc-blocks/accordion`, `doc-blocks` 142 | - Updating exports to include tabs and accordion [#16](https://github.com/intuit/doc-blocks/pull/16) (sean_powell@intuit.com) 143 | 144 | #### Authors: 1 145 | 146 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 147 | 148 | --- 149 | 150 | # v0.8.6 (Mon Oct 04 2021) 151 | 152 | #### 🐛 Bug Fix 153 | 154 | - `@doc-blocks/accordion` 155 | - Creating Accordion component [#14](https://github.com/intuit/doc-blocks/pull/14) (sean_powell@intuit.com) 156 | - `@doc-blocks/tabs` 157 | - Adding Tabs onChange handler [#15](https://github.com/intuit/doc-blocks/pull/15) (sean_powell@intuit.com) 158 | 159 | #### Authors: 1 160 | 161 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 162 | 163 | --- 164 | 165 | # v0.8.5 (Fri Aug 13 2021) 166 | 167 | #### 🐛 Bug Fix 168 | 169 | - `@doc-blocks/row` 170 | - Adding `align` prop [#12](https://github.com/intuit/doc-blocks/pull/12) ([@kharrop](https://github.com/kharrop)) 171 | 172 | #### Authors: 1 173 | 174 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 175 | 176 | --- 177 | 178 | # v0.8.4 (Fri Aug 13 2021) 179 | 180 | #### 🐛 Bug Fix 181 | 182 | - `@doc-blocks/tabs` 183 | - Adding tabs component [#13](https://github.com/intuit/doc-blocks/pull/13) (sean_powell@intuit.com) 184 | 185 | #### 📝 Documentation 186 | 187 | - New logo mark [#11](https://github.com/intuit/doc-blocks/pull/11) ([@kharrop](https://github.com/kharrop)) 188 | 189 | #### Authors: 2 190 | 191 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 192 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 193 | 194 | --- 195 | 196 | # v0.8.3 (Mon May 24 2021) 197 | 198 | #### 🐛 Bug Fix 199 | 200 | - `@doc-blocks/gallery`, `@doc-blocks/guideline`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield-row` 201 | - Bump Storybook to 6.2.9 [#9](https://github.com/intuit/doc-blocks/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 202 | 203 | #### Authors: 1 204 | 205 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 206 | 207 | --- 208 | 209 | # v0.8.2 (Thu Nov 05 2020) 210 | 211 | #### 🐛 Bug Fix 212 | 213 | - `@doc-blocks/gallery` 214 | - Fix for wider characters in alphabet nav [#7](https://github.com/intuit/doc-blocks/pull/7) ([@kharrop](https://github.com/kharrop)) 215 | 216 | #### Authors: 1 217 | 218 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 219 | 220 | --- 221 | 222 | # v0.8.1 (Mon Nov 02 2020) 223 | 224 | #### 🐛 Bug Fix 225 | 226 | - `@doc-blocks/gallery` 227 | - Gallery updates [#6](https://github.com/intuit/doc-blocks/pull/6) ([@kharrop](https://github.com/kharrop)) 228 | 229 | #### Authors: 1 230 | 231 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 232 | 233 | --- 234 | 235 | # v0.8.0 (Wed Oct 28 2020) 236 | 237 | #### 🚀 Enhancement 238 | 239 | - `@doc-blocks/gallery` 240 | - allow for regex in match path [#5](https://github.com/intuit/doc-blocks/pull/5) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 241 | 242 | #### 📝 Documentation 243 | 244 | - `@doc-blocks/gallery` 245 | - more docs for gallery props [#4](https://github.com/intuit/doc-blocks/pull/4) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 246 | - add gallery prop docs [#3](https://github.com/intuit/doc-blocks/pull/3) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 247 | 248 | #### Authors: 1 249 | 250 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 251 | 252 | --- 253 | 254 | # v0.7.0 (Mon Oct 19 2020) 255 | 256 | #### 🚀 Enhancement 257 | 258 | - `@doc-blocks/accessibility`, `@doc-blocks/bundle-size`, `@doc-blocks/design-spec`, `@doc-blocks/gallery`, `@doc-blocks/guideline`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield`, `@doc-blocks/shield-row`, `@doc-blocks/version`, `doc-blocks` 259 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 260 | 261 | #### 🐛 Bug Fix 262 | 263 | - `@doc-blocks/accessibility`, `@doc-blocks/bundle-size`, `@doc-blocks/design-spec`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield`, `@doc-blocks/shield-row`, `@doc-blocks/version`, `doc-blocks` 264 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 265 | 266 | #### Authors: 1 267 | 268 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 269 | 270 | --- 271 | 272 | # v0.6.5 (Wed Oct 14 2020) 273 | 274 | #### ⚠️ Pushed to `master` 275 | 276 | - add more auto plugins ([@hipstersmoothie](https://github.com/hipstersmoothie)) 277 | - `@doc-blocks/accessibility`, `@doc-blocks/bundle-size`, `@doc-blocks/design-spec`, `@doc-blocks/guideline`, `@doc-blocks/header-link`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield`, `@doc-blocks/shield-row`, `@doc-blocks/version`, `doc-blocks` 278 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 279 | - `@doc-blocks/accessibility`, `@doc-blocks/bundle-size`, `@doc-blocks/design-spec`, `@doc-blocks/guideline`, `@doc-blocks/header-link`, `@doc-blocks/intended-usage`, `@doc-blocks/related-components`, `@doc-blocks/responsive-story`, `@doc-blocks/row`, `@doc-blocks/shield`, `@doc-blocks/shield-row`, `@doc-blocks/version`, `doc-blocks` 280 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 281 | 282 | #### Authors: 1 283 | 284 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 285 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Intuit 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 19 | OR OTHER DEALINGS IN THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | doc-blocks logo 3 |

doc-blocks

4 |
5 | 6 | > A design system for doc-blocks UI components, built on [@design-systems/cli](https://github.com/intuit/design-systems-cli). 7 | 8 | ## 👍 Philosophy 9 | 10 | This repo contains a collection of components that make writing rich component documentation with `@storybook/addon-docs` a breeze! 11 | 12 | ## 🚀 Usage 13 | 14 | To use a component from this repo you will first need to install the component into your project. 15 | 16 | For an example we will try to use the `@doc-blocks/row` component. 17 | 18 | ```sh 19 | npm i @doc-blocks/row 20 | # or with yarn 21 | yarn add @doc-blocks/row 22 | ``` 23 | 24 | Then to use the component in your code just import it! 25 | 26 | ```js 27 | import { Row } from "@doc-blocks/row"; 28 | ``` 29 | 30 | If you don't want to install all of the different components you can install [`doc-blocks`](./packages/doc-blocks/README.md). 31 | 32 | ## 🤝 Contributing 33 | 34 | To create a new component: 35 | 36 | ```sh 37 | yarn run create 38 | ``` 39 | 40 | Follow the prompts and you will have a new sub-package for your component! 41 | 42 | ```sh 43 | # First link the package 44 | yarn 45 | # Then start developing 46 | cd components/ 47 | yarn run dev 48 | ``` 49 | 50 | Before submitting a pull request ensure that all of the following work: 51 | 52 | 1. `yarn build` 53 | 2. `yarn lint` 54 | 3. `yarn test` 55 | 56 | ### How to use the `scripts` 57 | 58 | Inside the package.json there are a bunch of scripts that this repo uses to run the project in development and to build the project. 59 | 60 | Below you can read a description of scripts you should use while developing in this project. 61 | 62 | - `yarn dev`: Builds everything and starts a storybook with all components 63 | - `yarn test`: Run `jest` over the test files 64 | - `yarn lint`: Lint all files using `eslint` 65 | - `yarn clean`: Remove all dependencies, build files, and generated files from the project 66 | - `yarn create`: Create a new components withing the repo 67 | - `yarn create:package`: Create a new package withing the repo 68 | - `yarn size`: Determine how your changes effect the size of all sub-packages 69 | 70 | #### Package Level `scripts` 71 | 72 | Every command works at both the monorepo and package level. The means you can run some script from just the package/component for a faster development experience. 73 | 74 | - `yarn dev`: Build any dependency in the monorepo the component depends on, and start a storybook with just the component 75 | - `yarn test`: Test just the component 76 | - `yarn lint`: Lint just the component 77 | - `yarn clean`: Clean the generated files for just the component 78 | - `yarn size`: Determine how your changes effect the size of the component 79 | 80 | ## Contributors ✨ 81 | 82 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |

Andrew Lisowski
💻 📖 💡 🚇
Kelly Harrop
📖 💻
Kendall Gassner
💻
Sean Powell
📖 💡 ⚠️ 💻 🚇
Josh Harwood
💻
96 | 97 | 98 | 99 | 100 | 101 | 102 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 103 | -------------------------------------------------------------------------------- /components/Accessibility/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.0 (Thu May 01 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v0.7.0 (Mon Oct 19 2020) 15 | 16 | #### 🚀 Enhancement 17 | 18 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 19 | 20 | #### 🐛 Bug Fix 21 | 22 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 23 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 24 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 25 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 26 | 27 | #### Authors: 1 28 | 29 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 30 | 31 | --- 32 | 33 | # v0.6.5 (Wed Oct 14 2020) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 38 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 39 | 40 | #### Authors: 1 41 | 42 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 43 | -------------------------------------------------------------------------------- /components/Accessibility/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/accessibility 2 | 3 | Welcome to my `Accessibility` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/accessibility 9 | # or with yarn 10 | yarn add @doc-blocks/accessibility 11 | ``` 12 | 13 | ## Usage 14 | 15 | **Example:** 16 | 17 | ```jsx 18 | import { Accessibility } from "@doc-blocks/accessibility"; 19 | 20 | ; 21 | ``` 22 | -------------------------------------------------------------------------------- /components/Accessibility/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Accessibility/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/accessibility", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "exports": { 8 | ".": { 9 | "import": "./dist/esm/index.js", 10 | "require": "./dist/cjs/index.js" 11 | } 12 | }, 13 | "types": "./dist", 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Kendall Gassner kendall.gassner@yahoo.com", 16 | "contributors": [ 17 | "Kendall Gassner kendall.gassner@yahoo.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2", 35 | "@doc-blocks/shield": "link:../Shield" 36 | }, 37 | "peerDependencies": { 38 | "react": ">= 18.2.0" 39 | }, 40 | "files": [ 41 | "dist", 42 | "src", 43 | "!*.snippet.*", 44 | "!*theme.*", 45 | "!*.test.*", 46 | "!__snapshots__", 47 | "!__tests__" 48 | ], 49 | "devDependencies": { 50 | "@eslint/js": "9.25.1", 51 | "@types/node": "22.15.3", 52 | "@types/react": "19.1.2", 53 | "@types/react-dom": "19.1.3", 54 | "@vitejs/plugin-react": "4.4.1", 55 | "eslint": "9.25.1", 56 | "eslint-plugin-react-hooks": "5.2.0", 57 | "eslint-plugin-react-refresh": "0.4.20", 58 | "global": "4.4.0", 59 | "typescript": "5.8.3", 60 | "typescript-eslint": "8.31.1", 61 | "vite": "6.3.4" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /components/Accessibility/src/Accessibility.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | 3 | import { Accessibility } from "."; 4 | 5 | const meta: Meta = { 6 | title: "Shields/Accessibility", 7 | component: Accessibility, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | tags: ["autodocs"], 12 | }; 13 | 14 | export default meta; 15 | type Story = StoryObj; 16 | 17 | export const BasicUsage: Story = { 18 | args: { 19 | tag: "a11y", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /components/Accessibility/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Shield } from "@doc-blocks/shield"; 2 | 3 | export interface AccessibilityProps { 4 | /** The current accessibility tag */ 5 | tag?: string; 6 | } 7 | 8 | /** A simple component. */ 9 | export const Accessibility = ({ tag }: AccessibilityProps) => ( 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /components/Accessibility/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/Accessibility/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/Accessibility/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/Accessibility/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/Accordion/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v2.0.0 (Wed Jul 02 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: bump to storybook 9 [#36](https://github.com/intuit/doc-blocks/pull/36) (sean_powell@intuit.com [@fattslug](https://github.com/fattslug)) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v1.0.0 (Thu May 01 2025) 15 | 16 | #### 💥 Breaking Change 17 | 18 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 19 | 20 | #### Authors: 2 21 | 22 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 23 | - spowell9 (sean_powell@intuit.com) 24 | 25 | --- 26 | 27 | # v0.8.14 (Mon Jul 25 2022) 28 | 29 | #### 🐛 Bug Fix 30 | 31 | - add missing peer deps [#25](https://github.com/intuit/doc-blocks/pull/25) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 32 | - add missing peer deps ([@hipstersmoothie](https://github.com/hipstersmoothie)) 33 | 34 | #### Authors: 1 35 | 36 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 37 | 38 | --- 39 | 40 | # v0.8.12 (Mon Nov 15 2021) 41 | 42 | #### 🐛 Bug Fix 43 | 44 | - Adding styled-components dependency to Accordion [#22](https://github.com/intuit/doc-blocks/pull/22) (sean_powell@intuit.com) 45 | 46 | #### Authors: 1 47 | 48 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 49 | 50 | --- 51 | 52 | # v0.8.11 (Thu Oct 21 2021) 53 | 54 | #### 🐛 Bug Fix 55 | 56 | - Removing width and horizontal padding from accordion panel [#21](https://github.com/intuit/doc-blocks/pull/21) ([@kharrop](https://github.com/kharrop)) 57 | 58 | #### Authors: 1 59 | 60 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 61 | 62 | --- 63 | 64 | # v0.8.10 (Thu Oct 21 2021) 65 | 66 | #### 🐛 Bug Fix 67 | 68 | - Adding className support for accordion [#19](https://github.com/intuit/doc-blocks/pull/19) ([@kharrop](https://github.com/kharrop)) 69 | 70 | #### Authors: 1 71 | 72 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 73 | 74 | --- 75 | 76 | # v0.8.9 (Mon Oct 18 2021) 77 | 78 | #### 🐛 Bug Fix 79 | 80 | - Adding option for external tab state [#18](https://github.com/intuit/doc-blocks/pull/18) (sean_powell@intuit.com) 81 | 82 | #### Authors: 1 83 | 84 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 85 | 86 | --- 87 | 88 | # v0.8.8 (Thu Oct 14 2021) 89 | 90 | #### 🐛 Bug Fix 91 | 92 | - Updating Tabs & Accordion exports [#17](https://github.com/intuit/doc-blocks/pull/17) (sean_powell@intuit.com) 93 | 94 | #### Authors: 1 95 | 96 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 97 | 98 | --- 99 | 100 | # v0.8.7 (Tue Oct 05 2021) 101 | 102 | #### 🐛 Bug Fix 103 | 104 | - Updating exports to include tabs and accordion [#16](https://github.com/intuit/doc-blocks/pull/16) (sean_powell@intuit.com) 105 | 106 | #### Authors: 1 107 | 108 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 109 | 110 | --- 111 | 112 | # v0.8.4 (Mon Oct 04 2021) 113 | 114 | #### 🐛 Bug Fix 115 | 116 | - Creating Accordion component [#14](https://github.com/intuit/doc-blocks/pull/14) (sean_powell@intuit.com) 117 | 118 | #### Authors: 1 119 | 120 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 121 | -------------------------------------------------------------------------------- /components/Accordion/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/accordion 2 | 3 | Welcome to my `Accordion` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/accordion 9 | # or with yarn 10 | yarn add @doc-blocks/accordion 11 | ``` 12 | 13 | Then to use the component in your code just import it! 14 | 15 | ```js 16 | import { Accordion } from "@doc-blocks/accordion"; 17 | // and with css-modules 18 | import "@doc-blocks/accordion/dist/main.css"; 19 | ``` 20 | 21 | ## Usage 22 | 23 | The Accordion component handles all click events internally so all you have to worry about is the content you want to display. 24 | Remember to provide an `id` prop to tie the accordion title to its panel! 25 | Feel free to add whatever classes or styles you want to either `Accordion.Title` or `Accordion.Panel` - they will be applied to the respective DOM elements. 26 | To use the `Accordion`, just do this: 27 | 28 | ```js 29 | const AccordionInterface = () => ( 30 | 31 | Colors that make me happy 32 | 33 | Black, Burgundy, Maroon, Mahogany 34 | 35 | Colors that make me angry 36 | Pink, Green, White, Orange 37 | 38 | ); 39 | ``` 40 | 41 | Or with an `Array.map()`: 42 | 43 | ```js 44 | const AccordionInterface = () => ( 45 | 46 | {accordionItems.map((accordion) => ( 47 | 48 | {accordion.title} 49 | {accordion.content} 50 | 51 | ))} 52 | 53 | ); 54 | ``` 55 | 56 | ### onChange Handler 57 | 58 | When a user clicks on an Accordion title, the `onChange` handler is called. You can make use of this functionality by adding an `onChange` prop to the `` wrapper like so: 59 | 60 | ```jsx 61 | const TabbedInterface = () => ( 62 | console.log(selectedId)}>... 63 | ); 64 | ``` 65 | 66 | ### Active Class 67 | 68 | You can apply an `activeClassName` to each `Accordion.Title` and `Accordion.Panel` component. When that accordion item is selected, the specified classes will be applied. 69 | 70 | ```jsx 71 | const AccordionInterface = () => ( 72 | 73 | 74 | Colors that make me happy 75 | 76 | 77 | Black, Burgundy, Maroon, Mahogany 78 | 79 | 80 | Colors that make me angry 81 | 82 | 83 | Pink, Green, White, Orange 84 | 85 | 86 | ); 87 | ``` 88 | -------------------------------------------------------------------------------- /components/Accordion/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | setupFiles: [], 9 | setupFilesAfterEnv: [require.resolve("@testing-library/jest-dom")], 10 | }; 11 | -------------------------------------------------------------------------------- /components/Accordion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/accordion", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Sean Powell sean_powell@intuit.com", 16 | "contributors": [ 17 | "Sean Powell sean_powell@intuit.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "7.11.2" 35 | }, 36 | "peerDependencies": { 37 | "react": ">= 18.2.0" 38 | }, 39 | "files": [ 40 | "dist", 41 | "src", 42 | "!*.snippet.*", 43 | "!*theme.*", 44 | "!*.test.*", 45 | "!__snapshots__", 46 | "!__tests__" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /components/Accordion/src/Accordion.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import { fn } from "storybook/test"; 4 | 5 | import { Accordion } from "."; 6 | 7 | const meta: Meta = { 8 | title: "Components/Accordion", 9 | component: Accordion, 10 | parameters: { 11 | layout: "centered", 12 | }, 13 | tags: ["autodocs"], 14 | args: { 15 | onChange: fn(), 16 | }, 17 | }; 18 | 19 | export default meta; 20 | type Story = StoryObj; 21 | 22 | export const BasicUsage: Story = { 23 | render: ({ onChange }) => ( 24 | onChange?.(selectedId)}> 25 | 26 | Title 1 27 | 28 | Panel 1 29 | 30 | Title 2 31 | 32 | Panel 2 33 | 34 | ), 35 | }; 36 | 37 | const Chevron = ({ style }: { style: React.CSSProperties }) => ( 38 | 46 | 47 | 48 | ); 49 | 50 | export const WithIndicators = ({ 51 | onChange, 52 | }: { 53 | onChange: (selectedId: string | null) => void; 54 | }) => { 55 | const [selectedId, setSelectedId] = React.useState(null); 56 | 57 | return ( 58 | { 60 | onChange(selected); 61 | setSelectedId(selected); 62 | }} 63 | > 64 | 65 |
71 | 78 |
79 | Title 1 80 | 81 | Panel 1 82 | 83 |
89 | 96 |
97 | Title 2 98 | 99 | Panel 2 100 | 101 | ); 102 | }; 103 | -------------------------------------------------------------------------------- /components/Accordion/src/Accordion.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { screen, render, cleanup } from "@testing-library/react"; 3 | import userEvent from "@testing-library/user-event"; 4 | 5 | import { Accordion } from "."; 6 | 7 | const AccordionStub = ({ spy }: { spy?: jest.Mock }) => ( 8 | spy?.(selectedId)}> 9 | 14 | Title 1 15 | 16 | 21 | Panel 1 22 | 23 | 28 | Title 2 29 | 30 | 35 | Panel 2 36 | 37 | 38 | ); 39 | 40 | afterEach(cleanup); 41 | 42 | describe("Accordion", () => { 43 | test("It matches the snapshot", () => { 44 | const { container } = render(); 45 | expect(container).toMatchSnapshot(); 46 | }); 47 | 48 | test("It renders all accordions", () => { 49 | const { queryByText } = render(); 50 | expect(queryByText("Title 1")).toBeInTheDocument(); 51 | expect(queryByText("Title 2")).toBeInTheDocument(); 52 | }); 53 | 54 | test("It renders with all accordions collapsed", () => { 55 | const { queryByText } = render(); 56 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 57 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 58 | expect(queryByText("Panel 2")).toHaveClass("collapsed"); 59 | expect(queryByText("Panel 2")).not.toHaveClass("expanded"); 60 | }); 61 | 62 | test("It applies the provided className to the accordion title & panel", () => { 63 | const { queryByText } = render(); 64 | expect(queryByText("Title 1")).toHaveClass("title-1-default"); 65 | expect(queryByText("Panel 1")).toHaveClass("panel-1-default"); 66 | }); 67 | 68 | test("It expands and collapses the accordion panel when selected", async () => { 69 | const user = userEvent.setup(); 70 | const { queryByText, getByText } = render(); 71 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 72 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 73 | 74 | await user.click(getByText("Title 1")); 75 | 76 | expect(queryByText("Panel 1")).toHaveClass("expanded"); 77 | expect(queryByText("Panel 1")).not.toHaveClass("collapsed"); 78 | 79 | await user.click(getByText("Title 1")); 80 | 81 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 82 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 83 | }); 84 | 85 | test("It expands and collapses the accordion panel with keyboard events", async () => { 86 | const user = userEvent.setup(); 87 | const { queryByText } = render(); 88 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 89 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 90 | 91 | await user.type(screen.getByText("Title 1"), "{space}"); 92 | 93 | expect(queryByText("Panel 1")).toHaveClass("expanded"); 94 | expect(queryByText("Panel 1")).not.toHaveClass("collapsed"); 95 | 96 | await user.type(screen.getByText("Title 1"), "{space}"); 97 | 98 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 99 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 100 | }); 101 | 102 | test("It collapses all other panels when another title is selected", async () => { 103 | const user = userEvent.setup(); 104 | const { queryByText } = render(); 105 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 106 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 107 | 108 | await user.click(screen.getByText("Title 1")); 109 | 110 | expect(queryByText("Panel 1")).toHaveClass("expanded"); 111 | expect(queryByText("Panel 1")).not.toHaveClass("collapsed"); 112 | 113 | await user.click(screen.getByText("Title 2")); 114 | 115 | expect(queryByText("Panel 1")).not.toHaveClass("expanded"); 116 | expect(queryByText("Panel 1")).toHaveClass("collapsed"); 117 | expect(queryByText("Panel 2")).not.toHaveClass("collapsed"); 118 | expect(queryByText("Panel 2")).toHaveClass("expanded"); 119 | }); 120 | 121 | test("It toggles the activeClassName to the selected accordion title & panel", async () => { 122 | const user = userEvent.setup(); 123 | const { queryByText } = render(); 124 | expect(queryByText("Title 1")).not.toHaveClass("title-1-selected"); 125 | expect(queryByText("Panel 1")).not.toHaveClass("panel-1-selected"); 126 | 127 | await user.click(screen.getByText("Title 1")); 128 | 129 | expect(queryByText("Title 1")).toHaveClass("title-1-selected"); 130 | expect(queryByText("Panel 1")).toHaveClass("panel-1-selected"); 131 | 132 | await user.click(screen.getByText("Title 1")); 133 | 134 | expect(queryByText("Title 1")).not.toHaveClass("title-1-selected"); 135 | expect(queryByText("Panel 1")).not.toHaveClass("panel-1-selected"); 136 | }); 137 | 138 | test("It calls onChange when a tab is clicked", async () => { 139 | const user = userEvent.setup(); 140 | const spy = jest.fn(); 141 | const { queryByText } = render(); 142 | expect(queryByText("Title 1")).toBeInTheDocument(); 143 | expect(queryByText("Title 2")).toBeInTheDocument(); 144 | 145 | await user.click(screen.getByText("Title 2")); 146 | 147 | expect(spy).toHaveBeenCalledTimes(1); 148 | expect(spy).toHaveBeenCalledWith("two"); 149 | }); 150 | }); 151 | -------------------------------------------------------------------------------- /components/Accordion/src/__snapshots__/Accordion.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Accordion It matches the snapshot 1`] = ` 4 |
5 |
6 |
13 | Title 1 14 |
15 | 23 |
30 | Title 2 31 |
32 | 40 |
41 |
42 | `; 43 | -------------------------------------------------------------------------------- /components/Accordion/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/ban-ts-comment */ 2 | import React from "react"; 3 | 4 | export interface AccordionCompositionProps 5 | extends React.DetailedHTMLProps< 6 | React.HTMLAttributes, 7 | HTMLDivElement 8 | > { 9 | /** Class to apply when selected */ 10 | activeClassName?: string; 11 | /** ID to assign to accordion item */ 12 | id: string; 13 | } 14 | 15 | export interface AccordionProps { 16 | /** Children of accordion wrapper */ 17 | children?: React.ReactNode[]; 18 | /** Classes to apply to accordion wrapper **/ 19 | className?: string; 20 | /** Callback after an accordion panel is expanded */ 21 | onChange?: (selectedId: string | null) => void; 22 | } 23 | 24 | interface AccordionContextProps { 25 | /** ID of currently selected panel */ 26 | selectedId: string | null; 27 | /** Setter method for setting selected panel */ 28 | setSelectedId: React.Dispatch>; 29 | /** Callback after an accordion panel is expanded (derived from AccordionProps) */ 30 | onChange?: (selectedId: string | null) => void; 31 | } 32 | 33 | // Setting up context with dummy values to satisfy typechecking 34 | const AccordionContext = React.createContext({ 35 | selectedId: null, 36 | setSelectedId: () => null, 37 | onChange: () => null, 38 | }); 39 | 40 | /** Accordion component */ 41 | export const Accordion = ({ 42 | className: accordionWrapperClassName, 43 | children, 44 | onChange, 45 | ...rest 46 | }: AccordionProps) => { 47 | const [selectedId, setSelectedId] = React.useState(null); 48 | 49 | return ( 50 | /* @ts-ignore */ 51 | 52 |
53 | {children} 54 |
55 | 56 | ); 57 | }; 58 | 59 | /** Renders the accordion title */ 60 | const Title = ({ 61 | id, 62 | children, 63 | className, 64 | activeClassName, 65 | }: AccordionCompositionProps) => { 66 | const { selectedId, setSelectedId, onChange } = React.useContext( 67 | AccordionContext 68 | ); 69 | 70 | return ( 71 |
{ 85 | setSelectedId((prev) => { 86 | const selected = prev === id ? null : id; 87 | onChange?.(selected); 88 | return selected; 89 | }); 90 | }} 91 | onKeyDown={(e) => { 92 | if (e.key === "Enter" || e.key === " " || e.key === "Space") { 93 | e.preventDefault(); 94 | setSelectedId((prev) => { 95 | const selected = prev === id ? null : id; 96 | onChange?.(selected); 97 | return selected; 98 | }); 99 | } 100 | }} 101 | > 102 | {children} 103 |
104 | ); 105 | }; 106 | 107 | /** Renders the accordion content panel */ 108 | const Panel = ({ 109 | id, 110 | children, 111 | className, 112 | activeClassName, 113 | }: AccordionCompositionProps) => { 114 | const { selectedId } = React.useContext(AccordionContext); 115 | const panelRef = React.useRef(null); 116 | const isSelected = selectedId === id; 117 | 118 | return ( 119 |
133 | {children} 134 |
135 | ); 136 | }; 137 | 138 | Accordion.Title = Title; 139 | Accordion.Panel = Panel; 140 | -------------------------------------------------------------------------------- /components/Accordion/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/Accordion/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/Accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/Accordion/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/BundleSize/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.0 (Thu May 01 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v0.7.0 (Mon Oct 19 2020) 15 | 16 | #### 🚀 Enhancement 17 | 18 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 19 | 20 | #### 🐛 Bug Fix 21 | 22 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 23 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 24 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 25 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 26 | 27 | #### Authors: 1 28 | 29 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 30 | 31 | --- 32 | 33 | # v0.6.5 (Wed Oct 14 2020) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 38 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 39 | 40 | #### Authors: 1 41 | 42 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 43 | -------------------------------------------------------------------------------- /components/BundleSize/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/bundle-size 2 | 3 | Welcome to my `BundleSize` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/bundle-size 9 | # or with yarn 10 | yarn add @doc-blocks/bundle-size 11 | ``` 12 | 13 | Then to use the component in your code just import it! 14 | 15 | ```js 16 | import { BundleSize } from "@doc-blocks/bundle-size"; 17 | 18 | ; 19 | ``` 20 | -------------------------------------------------------------------------------- /components/BundleSize/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/BundleSize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/bundle-size", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2", 35 | "@doc-blocks/shield": "link:../Shield" 36 | }, 37 | "peerDependencies": { 38 | "react": ">= 18.2.0" 39 | }, 40 | "files": [ 41 | "dist", 42 | "src", 43 | "!*.snippet.*", 44 | "!*theme.*", 45 | "!*.test.*", 46 | "!__snapshots__", 47 | "!__tests__" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /components/BundleSize/src/BundleSize.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | 3 | import { BundleSize } from "./index"; 4 | 5 | const meta: Meta = { 6 | title: "Shields/Bundle Size", 7 | component: BundleSize, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | tags: ["autodocs"], 12 | }; 13 | 14 | export default meta; 15 | type Story = StoryObj; 16 | 17 | export const BasicUsage: Story = { 18 | args: { 19 | size: "1.2 kB", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /components/BundleSize/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Shield } from "@doc-blocks/shield"; 3 | 4 | export interface BundleSizeProps { 5 | /** The current BundleSize */ 6 | size: string; 7 | } 8 | 9 | /** A simple component. */ 10 | export const BundleSize = ({ size }: BundleSizeProps) => ( 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /components/BundleSize/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/BundleSize/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/BundleSize/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/BundleSize/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/DesignSpec/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.0 (Thu May 01 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v0.7.0 (Mon Oct 19 2020) 15 | 16 | #### 🚀 Enhancement 17 | 18 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 19 | 20 | #### 🐛 Bug Fix 21 | 22 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 23 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 24 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 25 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 26 | 27 | #### Authors: 1 28 | 29 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 30 | 31 | --- 32 | 33 | # v0.6.5 (Wed Oct 14 2020) 34 | 35 | #### ⚠️ Pushed to `master` 36 | 37 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 38 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 39 | 40 | #### Authors: 1 41 | 42 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 43 | -------------------------------------------------------------------------------- /components/DesignSpec/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/design-spec 2 | 3 | A component to display a `DesignSpec` shield. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/design-spec 9 | # or with yarn 10 | yarn add @doc-blocks/design-spec 11 | ``` 12 | 13 | Then to use the component in your code just import it! 14 | 15 | ```js 16 | import { DesignSpec } from "@doc-blocks/design-spec"; 17 | 18 | ; 19 | ``` 20 | -------------------------------------------------------------------------------- /components/DesignSpec/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/DesignSpec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/design-spec", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2", 35 | "@doc-blocks/shield": "link:../Shield" 36 | }, 37 | "peerDependencies": { 38 | "react": ">= 18.2.0" 39 | }, 40 | "files": [ 41 | "dist", 42 | "src", 43 | "!*.snippet.*", 44 | "!*theme.*", 45 | "!*.test.*", 46 | "!__snapshots__", 47 | "!__tests__" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /components/DesignSpec/src/DesignSpec.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | 3 | import { DesignSpec } from "."; 4 | 5 | const meta: Meta = { 6 | title: "Shields/Design Spec", 7 | component: DesignSpec, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | tags: ["autodocs"], 12 | }; 13 | 14 | export default meta; 15 | type Story = StoryObj; 16 | 17 | export const BasicUsage: Story = { 18 | args: { 19 | type: "figma", 20 | url: "http://figma.com/", 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /components/DesignSpec/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Shield } from "@doc-blocks/shield"; 3 | 4 | const typeMap: Record = { 5 | figma: "#a259ff", 6 | zeplin: "#f69833", 7 | abstract: "#191a1b", 8 | }; 9 | 10 | interface DesignSpecProps { 11 | /** Where the spec came from */ 12 | type: string; 13 | /** Link to a spec */ 14 | url: string; 15 | } 16 | 17 | /** A simple component. */ 18 | export const DesignSpec = ({ type, url }: DesignSpecProps) => ( 19 | 26 | ); 27 | -------------------------------------------------------------------------------- /components/DesignSpec/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/DesignSpec/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/DesignSpec/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/DesignSpec/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/Guideline/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.0 (Thu May 01 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v0.8.14 (Mon Jul 25 2022) 15 | 16 | #### 🐛 Bug Fix 17 | 18 | - add missing peer deps [#25](https://github.com/intuit/doc-blocks/pull/25) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 19 | - add missing peer deps ([@hipstersmoothie](https://github.com/hipstersmoothie)) 20 | 21 | #### Authors: 1 22 | 23 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 24 | 25 | --- 26 | 27 | # v0.8.13 (Tue Mar 08 2022) 28 | 29 | #### 🐛 Bug Fix 30 | 31 | - Update index.tsx [#24](https://github.com/intuit/doc-blocks/pull/24) ([@NoWorries](https://github.com/NoWorries)) 32 | - Update index.tsx ([@NoWorries](https://github.com/NoWorries)) 33 | 34 | #### Authors: 1 35 | 36 | - Josh Harwood ([@NoWorries](https://github.com/NoWorries)) 37 | 38 | --- 39 | 40 | # v0.8.3 (Mon May 24 2021) 41 | 42 | #### 🐛 Bug Fix 43 | 44 | - Bump Storybook to 6.2.9 [#9](https://github.com/intuit/doc-blocks/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 45 | - document ([@kendallgassner](https://github.com/kendallgassner)) 46 | - lint ([@kendallgassner](https://github.com/kendallgassner)) 47 | 48 | #### Authors: 1 49 | 50 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 51 | 52 | --- 53 | 54 | # v0.7.0 (Mon Oct 19 2020) 55 | 56 | #### 🚀 Enhancement 57 | 58 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 59 | 60 | #### 🐛 Bug Fix 61 | 62 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 63 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 64 | 65 | #### Authors: 1 66 | 67 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 68 | 69 | --- 70 | 71 | # v0.6.5 (Wed Oct 14 2020) 72 | 73 | #### ⚠️ Pushed to `master` 74 | 75 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 76 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 77 | 78 | #### Authors: 1 79 | 80 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 81 | -------------------------------------------------------------------------------- /components/Guideline/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/guideline 2 | 3 | Welcome to my `Guideline` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/guideline 9 | # or with yarn 10 | yarn add @doc-blocks/guideline 11 | ``` 12 | 13 | ## Usage 14 | 15 | To use this component simply provide a label and some jsx to render. 16 | 17 | **Example:** 18 | 19 | ```jsx 20 | import { Do, Dont } from '@doc-blocks/guideline'; 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /components/Guideline/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Guideline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/guideline", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2" 35 | }, 36 | "peerDependencies": { 37 | "react": ">= 18.2.0" 38 | }, 39 | "devDependencies": { 40 | "@doc-blocks/row": "link:../Row" 41 | }, 42 | "files": [ 43 | "dist", 44 | "src", 45 | "!*.snippet.*", 46 | "!*theme.*", 47 | "!*.test.*", 48 | "!__snapshots__", 49 | "!__tests__" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /components/Guideline/src/Guideline.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import { Row } from "@doc-blocks/row"; 4 | 5 | import { Do, Dont } from "."; 6 | 7 | const meta: Meta = { 8 | title: "Components/Guideline", 9 | parameters: { 10 | layout: "centered", 11 | }, 12 | tags: ["autodocs"], 13 | }; 14 | 15 | export default meta; 16 | type Story = StoryObj; 17 | 18 | /** 19 | * The `Do` guideline should show the right way to use the component. 20 | */ 21 | export const DoExample: Story = { 22 | name: "Do", 23 | render: () => ( 24 | 25 | 26 | 27 | ), 28 | }; 29 | 30 | /** 31 | * The `Don't` guideline should show the wrong way to use the component. 32 | */ 33 | export const DontExample: Story = { 34 | name: "Dont", 35 | render: () => ( 36 | 37 | 38 | 39 | ), 40 | }; 41 | 42 | /** 43 | * Used with `@doc-blocks/row` you can display a pair of `Do/Don't` on one line. 44 | */ 45 | export const DoAndDontRow: Story = { 46 | name: "A Row of Do/Dont", 47 | render: () => ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | ), 57 | }; 58 | -------------------------------------------------------------------------------- /components/Guideline/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface LineProps { 4 | /** The color of the line */ 5 | color: string; 6 | } 7 | 8 | /** A line */ 9 | const Line = ({ color }: LineProps) => ( 10 |
18 | ); 19 | 20 | export interface CreateGuidelineProps { 21 | /** The label for the guideline */ 22 | guidelineLabel: React.ReactNode; 23 | /** The color of the line */ 24 | color: string; 25 | } 26 | 27 | export interface GuidelineProps 28 | extends React.DetailedHTMLProps< 29 | React.HTMLAttributes, 30 | HTMLDivElement 31 | > { 32 | /** The label for the guideline */ 33 | label: React.ReactNode; 34 | } 35 | 36 | /** A good thing to do with the component. */ 37 | const Guideline = ({ 38 | color, 39 | guidelineLabel, 40 | label, 41 | children, 42 | ...html 43 | }: GuidelineProps & CreateGuidelineProps) => ( 44 |
45 |
51 | {children} 52 |
53 | 54 | 55 | 56 |
57 | {guidelineLabel}: 58 | {label} 59 |
60 |
61 | ); 62 | 63 | /** A good thing to do with the component. */ 64 | export const Do = (props: GuidelineProps) => ( 65 | 66 | ); 67 | 68 | /** A bad thing to do with the component. */ 69 | export const Dont = (props: GuidelineProps) => ( 70 | 71 | ); 72 | -------------------------------------------------------------------------------- /components/Guideline/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/Guideline/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/Guideline/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/Guideline/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/IntendedUsage/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.0 (Thu May 01 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v0.8.3 (Mon May 24 2021) 15 | 16 | #### 🐛 Bug Fix 17 | 18 | - Bump Storybook to 6.2.9 [#9](https://github.com/intuit/doc-blocks/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 19 | - document ([@kendallgassner](https://github.com/kendallgassner)) 20 | - lint ([@kendallgassner](https://github.com/kendallgassner)) 21 | 22 | #### Authors: 1 23 | 24 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 25 | 26 | --- 27 | 28 | # v0.7.0 (Mon Oct 19 2020) 29 | 30 | #### 🚀 Enhancement 31 | 32 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 33 | 34 | #### 🐛 Bug Fix 35 | 36 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 37 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 38 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 39 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 40 | 41 | #### Authors: 1 42 | 43 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 44 | 45 | --- 46 | 47 | # v0.6.5 (Wed Oct 14 2020) 48 | 49 | #### ⚠️ Pushed to `master` 50 | 51 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 52 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 53 | 54 | #### Authors: 1 55 | 56 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 57 | -------------------------------------------------------------------------------- /components/IntendedUsage/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/intended-usage 2 | 3 | Welcome to my `IntendedUsage` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/intended-usage 9 | # or with yarn 10 | yarn add @doc-blocks/intended-usage 11 | ``` 12 | 13 | ## Usage 14 | 15 | **Example:** 16 | 17 | ```jsx 18 | import { BestFor, NotFor } from '@doc-blocks/intended-usage'; 19 | 20 | 21 |
    22 |
  • one
    • 23 |
  • two
    • 24 |
  • three
    • 25 |
26 | 27 | 28 | 29 |
    30 |
  • four
    • 31 |
  • five
    • 32 |
  • six
    • 33 |
34 | 35 | ``` 36 | -------------------------------------------------------------------------------- /components/IntendedUsage/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/IntendedUsage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/intended-usage", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2", 35 | "@design-systems/utils": "4.15.4", 36 | "emotion": "^10.0.27" 37 | }, 38 | "peerDependencies": { 39 | "react": ">= 18.2.0" 40 | }, 41 | "files": [ 42 | "dist", 43 | "src", 44 | "!*.snippet.*", 45 | "!*theme.*", 46 | "!*.test.*", 47 | "!__snapshots__", 48 | "!__tests__" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /components/IntendedUsage/src/IntendedUsage.module.css: -------------------------------------------------------------------------------- 1 | .intended-usage { 2 | margin: 40px 0; 3 | } 4 | 5 | .intended-usage ul { 6 | list-style: none; 7 | padding-left: 0; 8 | margin: 0; 9 | } 10 | 11 | .intended-usage li { 12 | padding: 5px 0 5px 30px; 13 | position: relative; 14 | line-height: 24px; 15 | } 16 | 17 | .intended-usage li:before { 18 | position: absolute; 19 | left: 0; 20 | top: 6px; 21 | } 22 | 23 | .intended-usage-title { 24 | font-weight: 500; 25 | margin-bottom: 10px; 26 | font-size: 24px; 27 | } 28 | -------------------------------------------------------------------------------- /components/IntendedUsage/src/IntendedUsage.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Meta, StoryObj } from "@storybook/react"; 3 | import { BestFor, NotFor } from "."; 4 | 5 | const meta: Meta = { 6 | title: "Components/Intended Usage", 7 | component: BestFor, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | tags: ["autodocs"], 12 | }; 13 | 14 | export default meta; 15 | 16 | type Story = StoryObj; 17 | 18 | export const BestForStory: Story = { 19 | name: "Best For", 20 | render: () => ( 21 | 22 |
    23 |
  • one
    • 24 |
  • two
    • 25 |
  • three
    • 26 |
27 | 28 | ), 29 | }; 30 | 31 | export const NotForStory: Story = { 32 | name: "Not For", 33 | render: () => ( 34 | 35 |
    36 |
  • one
    • 37 |
  • two
    • 38 |
  • 39 | With a really really really really really really really really really 40 | really really really really really really really really really really 41 | really really really really really long line 42 |
    • 43 |
44 | 45 | ), 46 | }; 47 | 48 | export const Together: Story = { 49 | name: "Together", 50 | render: () => ( 51 | <> 52 | 53 |
    54 |
  • one
    • 55 |
  • two
    • 56 |
  • three
    • 57 |
58 | 59 | 60 |
    61 |
  • four
    • 62 |
  • five
    • 63 |
  • six
    • 64 |
65 | 66 | 67 | ), 68 | }; 69 | -------------------------------------------------------------------------------- /components/IntendedUsage/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import styles from "./IntendedUsage.module.css"; 4 | 5 | export interface IntendedUsageProps 6 | extends React.DetailedHTMLProps< 7 | React.HTMLAttributes, 8 | HTMLDivElement 9 | > { 10 | /** The title of the section */ 11 | sectionTitle: string; 12 | /** The icon for the list */ 13 | icon: string; 14 | } 15 | 16 | /** A fancy list */ 17 | export const IntendedUsage = ({ 18 | children, 19 | sectionTitle, 20 | icon, 21 | ...props 22 | }: IntendedUsageProps) => { 23 | const uid = Math.random().toString(36).substring(2, 15); 24 | 25 | // Add the icon dynamically with a style element 26 | const iconStyle = ` 27 | .${styles["intended-usage"]}#${uid} li:before { 28 | content: "${icon}"; 29 | } 30 | `; 31 | 32 | return ( 33 |
34 | 35 |
{sectionTitle}
36 | {children} 37 |
38 | ); 39 | }; 40 | 41 | /** A component that lists what the component being documented is intended to be used like. */ 42 | export const BestFor = ( 43 | props: React.DetailedHTMLProps< 44 | React.HTMLAttributes, 45 | HTMLDivElement 46 | > 47 | ) => ; 48 | 49 | /** A component that lists what the component being documented is not intended to be used like. */ 50 | export const NotFor = ( 51 | props: React.DetailedHTMLProps< 52 | React.HTMLAttributes, 53 | HTMLDivElement 54 | > 55 | ) => ; 56 | -------------------------------------------------------------------------------- /components/IntendedUsage/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/IntendedUsage/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/IntendedUsage/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/IntendedUsage/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/RelatedComponents/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v2.0.0 (Wed Jul 02 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: bump to storybook 9 [#36](https://github.com/intuit/doc-blocks/pull/36) (sean_powell@intuit.com [@fattslug](https://github.com/fattslug)) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v1.0.0 (Thu May 01 2025) 15 | 16 | #### 💥 Breaking Change 17 | 18 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 19 | 20 | #### Authors: 2 21 | 22 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 23 | - spowell9 (sean_powell@intuit.com) 24 | 25 | --- 26 | 27 | # v0.8.14 (Mon Jul 25 2022) 28 | 29 | #### 🐛 Bug Fix 30 | 31 | - add missing peer deps [#25](https://github.com/intuit/doc-blocks/pull/25) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 32 | - add missing peer deps ([@hipstersmoothie](https://github.com/hipstersmoothie)) 33 | 34 | #### Authors: 1 35 | 36 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 37 | 38 | --- 39 | 40 | # v0.8.3 (Mon May 24 2021) 41 | 42 | #### 🐛 Bug Fix 43 | 44 | - Bump Storybook to 6.2.9 [#9](https://github.com/intuit/doc-blocks/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 45 | - lint ([@kendallgassner](https://github.com/kendallgassner)) 46 | 47 | #### Authors: 1 48 | 49 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 50 | 51 | --- 52 | 53 | # v0.7.0 (Mon Oct 19 2020) 54 | 55 | #### 🚀 Enhancement 56 | 57 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 58 | 59 | #### 🐛 Bug Fix 60 | 61 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 62 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 63 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 64 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 65 | 66 | #### Authors: 1 67 | 68 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 69 | 70 | --- 71 | 72 | # v0.6.5 (Wed Oct 14 2020) 73 | 74 | #### ⚠️ Pushed to `master` 75 | 76 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 77 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 78 | 79 | #### Authors: 1 80 | 81 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 82 | -------------------------------------------------------------------------------- /components/RelatedComponents/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/related-components 2 | 3 | Welcome to my `RelatedComponents` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/related-components 9 | # or with yarn 10 | yarn add @doc-blocks/related-components 11 | ``` 12 | 13 | ## Usage 14 | 15 | **Example:** 16 | 17 | ```jsx 18 | import { RelatedComponents } from "@doc-blocks/related-components"; 19 | 20 | ; 23 | ``` 24 | -------------------------------------------------------------------------------- /components/RelatedComponents/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/RelatedComponents/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/related-components", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2" 35 | }, 36 | "peerDependencies": { 37 | "@storybook/addon-links": "^9.0.0", 38 | "react": ">= 18.2.0" 39 | }, 40 | "devDependencies": { 41 | "@storybook/addon-links": "^9.0.0" 42 | }, 43 | "files": [ 44 | "dist", 45 | "src", 46 | "!*.snippet.*", 47 | "!*theme.*", 48 | "!*.test.*", 49 | "!__snapshots__", 50 | "!__tests__" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /components/RelatedComponents/src/RelatedComponents.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | 4 | import { RelatedComponents } from "."; 5 | 6 | const meta: Meta = { 7 | title: "Components/Related Components", 8 | component: RelatedComponents, 9 | parameters: { 10 | layout: "centered", 11 | }, 12 | tags: ["autodocs"], 13 | }; 14 | 15 | export default meta; 16 | type Story = StoryObj; 17 | 18 | export const BasicUsage: Story = { 19 | render: (args) => ( 20 | 21 | ), 22 | args: { 23 | components: ["Components/Responsive Story", "Components/Row"], 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /components/RelatedComponents/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LinkTo from "@storybook/addon-links/react"; 3 | 4 | interface KindLinkProps { 5 | /** Text of the link */ 6 | children: string; 7 | /** The kind to link to */ 8 | kind: string; 9 | } 10 | 11 | /** A link to a story kind */ 12 | const KindLink = ({ kind, children }: KindLinkProps) => ( 13 | {children} 14 | ); 15 | 16 | export interface RelatedComponentsProps { 17 | /** Stories that are related to this one */ 18 | components: string[]; 19 | } 20 | 21 | /** A component to list related components */ 22 | export const RelatedComponents = (props: RelatedComponentsProps) => ( 23 |
31 | 37 | Related Components: 38 | 39 | 40 | {props.components.map((component, i) => ( 41 | 42 | {component.split("/")[1]} 43 | {i !== props.components.length - 1 && ", "} 44 | 45 | ))} 46 | 47 |
48 | ); 49 | -------------------------------------------------------------------------------- /components/RelatedComponents/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /components/RelatedComponents/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["src/**/*.test.+(ts|tsx)", "src/**/*.stories.+(ts|tsx)"], 4 | "types": ["vite/client"] 5 | } 6 | -------------------------------------------------------------------------------- /components/RelatedComponents/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.+(ts|tsx)"], 4 | "compilerOptions": { 5 | "outDir": "./dist", 6 | "rootDir": "./src" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /components/RelatedComponents/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import react from "@vitejs/plugin-react"; 4 | import dts from "vite-plugin-dts"; 5 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react(), 11 | dts({ 12 | tsconfigPath: "tsconfig.build.json", 13 | }), 14 | cssInjectedByJsPlugin(), 15 | ], 16 | build: { 17 | lib: { 18 | entry: resolve(__dirname, `src/index.tsx`), 19 | formats: ["es", "cjs"], 20 | fileName(format) { 21 | if (format === "es") { 22 | return "esm/[name].js"; 23 | } 24 | 25 | return "cjs/[name].js"; 26 | }, 27 | }, 28 | rollupOptions: { 29 | external: ["react", "react-dom"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "React-dom", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /components/ResponsiveStory/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v2.0.0 (Wed Jul 02 2025) 2 | 3 | #### 💥 Breaking Change 4 | 5 | - feat: bump to storybook 9 [#36](https://github.com/intuit/doc-blocks/pull/36) (sean_powell@intuit.com [@fattslug](https://github.com/fattslug)) 6 | 7 | #### Authors: 2 8 | 9 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 10 | - spowell9 (sean_powell@intuit.com) 11 | 12 | --- 13 | 14 | # v1.0.0 (Thu May 01 2025) 15 | 16 | #### 💥 Breaking Change 17 | 18 | - feat: add github actions pipeline, bump to react v18 + storybook v8 + lerna v7 + auto v11 + vite [#34](https://github.com/intuit/doc-blocks/pull/34) ([@fattslug](https://github.com/fattslug) sean_powell@intuit.com) 19 | 20 | #### Authors: 2 21 | 22 | - Sean Powell ([@fattslug](https://github.com/fattslug)) 23 | - spowell9 (sean_powell@intuit.com) 24 | 25 | --- 26 | 27 | # v0.8.14 (Mon Jul 25 2022) 28 | 29 | #### 🐛 Bug Fix 30 | 31 | - add missing peer deps [#25](https://github.com/intuit/doc-blocks/pull/25) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 32 | - add missing peer deps ([@hipstersmoothie](https://github.com/hipstersmoothie)) 33 | 34 | #### Authors: 1 35 | 36 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 37 | 38 | --- 39 | 40 | # v0.8.3 (Mon May 24 2021) 41 | 42 | #### 🐛 Bug Fix 43 | 44 | - Bump Storybook to 6.2.9 [#9](https://github.com/intuit/doc-blocks/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 45 | - document ([@kendallgassner](https://github.com/kendallgassner)) 46 | - lint ([@kendallgassner](https://github.com/kendallgassner)) 47 | 48 | #### Authors: 1 49 | 50 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 51 | 52 | --- 53 | 54 | # v0.7.0 (Mon Oct 19 2020) 55 | 56 | #### 🚀 Enhancement 57 | 58 | - Add Gallery component [#2](https://github.com/intuit/doc-blocks/pull/2) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 59 | 60 | #### 🐛 Bug Fix 61 | 62 | - upgrade prettier ([@hipstersmoothie](https://github.com/hipstersmoothie)) 63 | - Add Gallery component ([@hipstersmoothie](https://github.com/hipstersmoothie)) 64 | - remove default exports and update example [#1](https://github.com/intuit/doc-blocks/pull/1) ([@hipstersmoothie](https://github.com/hipstersmoothie)) 65 | - remove default exports and update example ([@hipstersmoothie](https://github.com/hipstersmoothie)) 66 | 67 | #### Authors: 1 68 | 69 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 70 | 71 | --- 72 | 73 | # v0.6.5 (Wed Oct 14 2020) 74 | 75 | #### ⚠️ Pushed to `master` 76 | 77 | - add publishConfig ([@hipstersmoothie](https://github.com/hipstersmoothie)) 78 | - init ([@hipstersmoothie](https://github.com/hipstersmoothie)) 79 | 80 | #### Authors: 1 81 | 82 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 83 | -------------------------------------------------------------------------------- /components/ResponsiveStory/README.md: -------------------------------------------------------------------------------- 1 | # @doc-blocks/responsive-story 2 | 3 | Welcome to my `ResponsiveStory` component. 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm i @doc-blocks/responsive-story 9 | # or with yarn 10 | yarn add @doc-blocks/responsive-story 11 | ``` 12 | 13 | Add the following to your `preview-head.html`. 14 | 15 | ```html 16 | 20 | ``` 21 | 22 | ## Usage 23 | 24 | Provide the ID of a story to render in a iframe + mock device. 25 | 26 | **Example:** 27 | 28 | ```jsx 29 | import { ResponsiveStory } from "@doc-blocks/responsive-story"; 30 | 31 | ; 32 | ``` 33 | -------------------------------------------------------------------------------- /components/ResponsiveStory/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require("@design-systems/test/jest.config.base"); 2 | const { name } = require("./package.json"); 3 | 4 | module.exports = { 5 | ...base, 6 | name, 7 | displayName: name, 8 | }; 9 | -------------------------------------------------------------------------------- /components/ResponsiveStory/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doc-blocks/responsive-story", 3 | "version": "2.0.0", 4 | "type": "module", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist", 8 | "exports": { 9 | ".": { 10 | "import": "./dist/esm/index.js", 11 | "require": "./dist/cjs/index.js" 12 | } 13 | }, 14 | "repository": "https://github.com/intuit/doc-blocks", 15 | "author": "Andrew Lisowski lisowski54@gmail.com", 16 | "contributors": [ 17 | "Andrew Lisowski lisowski54@gmail.com" 18 | ], 19 | "license": "MIT", 20 | "sideEffects": [ 21 | "*.css" 22 | ], 23 | "publishConfig": { 24 | "registry": "https://registry.npmjs.org/", 25 | "access": "public" 26 | }, 27 | "scripts": { 28 | "dev": "vite", 29 | "build": "vite build", 30 | "lint": "eslint .", 31 | "preview": "vite preview" 32 | }, 33 | "dependencies": { 34 | "@babel/runtime": "^7.11.2", 35 | "@storybook/addon-docs": "^9.0.0", 36 | "clsx": "^1.1.1" 37 | }, 38 | "peerDependencies": { 39 | "@storybook/addon-docs": "^9.0.0", 40 | "react": ">= 18.2.0" 41 | }, 42 | "files": [ 43 | "dist", 44 | "src", 45 | "!*.snippet.*", 46 | "!*theme.*", 47 | "!*.test.*", 48 | "!__snapshots__", 49 | "!__tests__" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /components/ResponsiveStory/src/ResponsiveStory.module.css: -------------------------------------------------------------------------------- 1 | .deviceSelect { 2 | cursor: pointer; 3 | color: rgb(51, 51, 51); 4 | text-align: center; 5 | appearance: none; 6 | font-size: 12px; 7 | line-height: 16px; 8 | font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", 9 | "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, 10 | Arial, sans-serif; 11 | font-weight: 700; 12 | padding: 4px 10px; 13 | background: rgb(255, 255, 255); 14 | border: 1px solid rgba(0, 0, 0, 0.1); 15 | border-radius: 4px; 16 | margin: 20px 0; 17 | text-align-last: center; 18 | } 19 | 20 | .infoBar { 21 | height: 30px; 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: flex-end; 25 | padding: 0 25px 0 34px; 26 | font-size: 14px; 27 | } 28 | 29 | .iframeLabel { 30 | width: 100%; 31 | align-items: center; 32 | justify-content: center; 33 | display: flex; 34 | margin-top: 14px; 35 | } 36 | 37 | .iframeLabel > *:not(:last-child) { 38 | margin-right: 10px; 39 | } 40 | 41 | .showCodeButton { 42 | cursor: pointer; 43 | display: flex; 44 | align-items: center; 45 | color: rgb(51, 51, 51); 46 | font-size: 12px; 47 | line-height: 16px; 48 | font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", 49 | "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, 50 | Arial, sans-serif; 51 | font-weight: 700; 52 | margin-left: -1px; 53 | padding: 4px 10px; 54 | background: rgb(255, 255, 255); 55 | border: 1px solid rgba(0, 0, 0, 0.1); 56 | border-radius: 4px; 57 | } 58 | 59 | .responsiveStoryWrapper { 60 | margin: 30px auto; 61 | display: flex; 62 | flex-direction: column; 63 | } 64 | 65 | .iframe { 66 | border: none; 67 | width: 100%; 68 | height: 100%; 69 | margin: auto; 70 | display: block; 71 | } 72 | 73 | .iframeIphoneLandscape { 74 | padding-left: 30px; 75 | box-sizing: border-box; 76 | } 77 | 78 | .iframeMac { 79 | width: 1200px; 80 | height: 750px; 81 | transform: scale(0.8); 82 | transform-origin: 0 0; 83 | } 84 | -------------------------------------------------------------------------------- /components/ResponsiveStory/src/ResponsiveStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import React from "react"; 3 | import { ResponsiveStory } from "."; 4 | 5 | const meta: Meta = { 6 | title: "Components/Responsive Story", 7 | component: ResponsiveStory, 8 | parameters: { 9 | layout: "centered", 10 | docs: { 11 | description: { 12 | component: `The \`ResponsiveStory\` lets you render any story in an \`iframe\` with a fancy device wrapper. 13 | Since it is in an \`iframe\` all of the media queries work and your component will actually render at that screen size. 14 | It will also display the source for the story you are documenting.`, 15 | }, 16 | }, 17 | }, 18 | }; 19 | 20 | export default meta; 21 | type Story = StoryObj; 22 | 23 | /** 24 | * Basic example of the ResponsiveStory component. 25 | */ 26 | export const BasicUsage: Story = { 27 | args: { 28 | id: "components-row--basic-usage", 29 | }, 30 | }; 31 | 32 | /** 33 | * Example with a label for additional context. 34 | */ 35 | export const WithLabel: Story = { 36 | args: { 37 | id: "components-row--basic-usage", 38 | label: "A label for the story", 39 | }, 40 | }; 41 | 42 | /** 43 | * Examples showing different device options. 44 | */ 45 | export const Devices: Story = { 46 | render: () => ( 47 |
48 | 49 | 50 | 51 |
52 | ), 53 | }; 54 | 55 | /** 56 | * Let the user choose which device to render on. 57 | */ 58 | export const ChooseDevice: Story = { 59 | args: { 60 | id: "components-row--basic-usage", 61 | device: "choose", 62 | }, 63 | }; 64 | 65 | /** 66 | * Different alignment options for the device. 67 | */ 68 | export const Align: Story = { 69 | render: () => ( 70 |
71 | 72 | 73 | 74 |
75 | ), 76 | }; 77 | 78 | /** 79 | * Examples showing only portions of the device. 80 | */ 81 | export const TopOrBottom: Story = { 82 | render: () => ( 83 |
84 | 85 | 86 |
87 | ), 88 | }; 89 | 90 | /** 91 | * Examples showing devices in landscape mode. 92 | */ 93 | export const RotateMobile: Story = { 94 | render: () => ( 95 |
96 | 97 | 102 |
103 | ), 104 | }; 105 | 106 | /** 107 | * Example showing customized header colors. 108 | */ 109 | export const MobileHeader: Story = { 110 | args: { 111 | id: "components-row--basic-usage", 112 | headerColor: "black", 113 | headerText: "white", 114 | }, 115 | }; 116 | 117 | /** 118 | * Example showing device with custom screen styles. 119 | */ 120 | export const DeviceStyles: Story = { 121 | args: { 122 | id: "components-row--basic-usage", 123 | headerColor: "black", 124 | headerText: "white", 125 | screenStyles: { paddingTop: 20 }, 126 | }, 127 | }; 128 | 129 | /** 130 | * Inline example story for demonstrating a simple button. 131 | */ 132 | export const Test: Story = { 133 | render: () => , 134 | }; 135 | 136 | /** 137 | * Example showing how to reference an inline story. 138 | */ 139 | export const InlineReference: Story = { 140 | render: () => ( 141 | 146 | ), 147 | }; 148 | -------------------------------------------------------------------------------- /components/ResponsiveStory/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unused-prop-types */ 2 | 3 | import React from "react"; 4 | import makeClass from "clsx"; 5 | import { Source } from "@storybook/addon-docs"; 6 | 7 | import styles from "./ResponsiveStory.module.css"; 8 | import "./devices.min.css"; 9 | 10 | const devices = ["iPad", "iPhone", "mac"] as const; 11 | type Device = typeof devices[number]; 12 | 13 | interface DeviceProp { 14 | /** The device to render the story in */ 15 | device?: "iPad" | "iPhone" | "mac" | "choose"; 16 | } 17 | 18 | interface IsLandscape { 19 | /** Display the device in landscape mode */ 20 | isLandscape?: boolean; 21 | } 22 | 23 | export type DeviceProps = IsLandscape & { 24 | /** The content to display in the device screen */ 25 | children: React.ReactNode; 26 | /** Color to make iOS header */ 27 | headerColor?: string; 28 | /** Color to make iOS header text */ 29 | headerText?: string; 30 | }; 31 | 32 | /** A mock iPhone */ 33 | const IPhone = ({ 34 | children, 35 | isLandscape, 36 | headerColor, 37 | headerText, 38 | }: DeviceProps) => { 39 | const time = new Date(Date.now()); 40 | 41 | return ( 42 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | {!isLandscape && ( 65 |
69 | {`${time.getHours() % 12}:${time.getMinutes()}`} 70 |
71 | )} 72 | {children} 73 |
74 |
75 | ); 76 | }; 77 | 78 | /** A mock iPad */ 79 | const IPad = ({ children, isLandscape }: DeviceProps) => ( 80 |
86 |
87 |
{children}
88 |
89 |
90 | ); 91 | 92 | /** A mock mac */ 93 | const Mac = ({ children }: DeviceProps) => ( 94 |
95 |
96 |
97 |
{children}
98 |
99 |
100 | ); 101 | 102 | /** Show only a portion of the device */ 103 | function useTopOrBottom(top: number | undefined, bottom: number | undefined) { 104 | if (top) { 105 | return { height: top, overflowY: "hidden" } as const; 106 | } 107 | 108 | if (bottom) { 109 | return { 110 | height: bottom, 111 | display: "flex", 112 | alignItems: "flex-end", 113 | overflowY: "hidden", 114 | } as const; 115 | } 116 | 117 | return {}; 118 | } 119 | 120 | const deviceMap: Record JSX.Element> = { 121 | iPhone: IPhone, 122 | iPad: IPad, 123 | mac: Mac, 124 | }; 125 | 126 | type ResponsiveStoryBaseProps = IsLandscape & 127 | DeviceProp & { 128 | /** The id of the story to render */ 129 | id: string; 130 | /** An optional label to put below the story */ 131 | label?: string; 132 | /** Display the device in landscape mode */ 133 | isLandscape?: boolean; 134 | /** How to align the story */ 135 | align?: "start" | "center" | "end"; 136 | /** Color to make iOS header */ 137 | headerColor?: string; 138 | /** Color to make iOS header text */ 139 | headerText?: string; 140 | /** Styles to add to the device wrapper. */ 141 | screenStyles?: React.CSSProperties; 142 | }; 143 | 144 | interface TopProps extends ResponsiveStoryBaseProps { 145 | /** A number x between 1-100 to show only the top x% of the device */ 146 | top: number; 147 | } 148 | 149 | interface BottomProps extends ResponsiveStoryBaseProps { 150 | /** A number x between 1-100 to show only the top x% of the device */ 151 | bottom: number; 152 | } 153 | 154 | export type ResponsiveStoryProps = 155 | | ResponsiveStoryBaseProps 156 | | TopProps 157 | | BottomProps; 158 | 159 | /** Render a story in an iframe so it's responsive */ 160 | export const ResponsiveStory = ({ 161 | id, 162 | label, 163 | device = "iPhone", 164 | isLandscape, 165 | align = "start", 166 | headerColor, 167 | headerText, 168 | screenStyles = {}, 169 | ...rest 170 | }: ResponsiveStoryProps) => { 171 | const [open, setOpen] = React.useState(false); 172 | const [currentDevice, setCurrentDevice] = React.useState( 173 | device === "choose" ? "mac" : device 174 | ); 175 | 176 | const DeviceComponent = deviceMap[currentDevice]; 177 | const top = "top" in rest ? rest.top : undefined; 178 | const bottom = "bottom" in rest ? rest.bottom : undefined; 179 | 180 | const iframeClasses = makeClass( 181 | styles.iframe, 182 | currentDevice === "iPhone" && isLandscape && styles.iframeIphoneLandscape, 183 | currentDevice === "mac" && styles.iframeMac 184 | ); 185 | 186 | return ( 187 |
193 |
194 |
203 | 208 |