diff --git a/.github/workflows/figma_connect_publish.yml b/.github/workflows/figma_connect_publish.yml new file mode 100644 index 00000000000..a1ca528e9c9 --- /dev/null +++ b/.github/workflows/figma_connect_publish.yml @@ -0,0 +1,17 @@ +name: Figma Connect Publish on Change + +on: + push: + paths: + - packages/react/src/components/**/*.figma.tsx + branches: + - main + +jobs: + code-connect: + name: Code Connect + runs-on: ubuntu-latest + steps: + - run: npx figma connect publish + env: + FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }} diff --git a/.github/workflows/release_tracking.yml b/.github/workflows/release_tracking.yml index 7b509d8fa93..33eec97fbf2 100644 --- a/.github/workflows/release_tracking.yml +++ b/.github/workflows/release_tracking.yml @@ -14,6 +14,6 @@ on: jobs: release-tracking: name: Release Tracking - uses: primer/.github/.github/workflows/release_tracking.yml@create_release_tracking_workflow + uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.0 secrets: datadog_api_key: ${{ secrets.DATADOG_API_KEY }} diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png index a440bac0462..25047e1c0be 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png index ea7d9b5060b..cf6e2f23a32 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png index 8b638d1027f..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png index b3652c634ef..d0b6c6bed33 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png index 50c0f367fb1..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png index 8b638d1027f..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png index a440bac0462..25047e1c0be 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png index ea7d9b5060b..cf6e2f23a32 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png index 38e57085e60..3356316c176 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png index 8b638d1027f..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png index b3652c634ef..d0b6c6bed33 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png index 50c0f367fb1..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png index 8b638d1027f..07b7fe20219 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png new file mode 100644 index 00000000000..3e4fa9cd396 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png new file mode 100644 index 00000000000..8f62c1110e8 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png new file mode 100644 index 00000000000..524f7ab4b42 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png new file mode 100644 index 00000000000..867b74c991d Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3e4fa9cd396 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png new file mode 100644 index 00000000000..c7ac1eb2675 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png new file mode 100644 index 00000000000..197b16c86d4 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png new file mode 100644 index 00000000000..accea194cbd Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png new file mode 100644 index 00000000000..c7ac1eb2675 Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png index b3f6708b0f5..2363b09613e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png index c8dda09df8a..3df5d6406ea 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png index 8e0679a02ba..cd4f60848d3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png index ab0de14348d..12dcf665b09 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png index 5836f110b49..7469431945f 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png index 829f54bac15..ba354f9b21e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png index fe988f5561b..e98b6fcae93 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png index 8477eafb381..4cfabeebcab 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png index b4c4297abd4..6be7566a72e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png index b3f6708b0f5..2363b09613e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png index c8dda09df8a..3df5d6406ea 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png index 8e0679a02ba..cd4f60848d3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png index ab0de14348d..12dcf665b09 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png index 5836f110b49..7469431945f 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png index 829f54bac15..ba354f9b21e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png index fe988f5561b..e98b6fcae93 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png index 8477eafb381..4cfabeebcab 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png index b4c4297abd4..6be7566a72e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png index 1b573d76a4f..244d78d37f7 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png index 4c29ee3ffb4..7fda017543c 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png index 19adc5f70e0..10948550911 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png index 1b573d76a4f..53180d70c01 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png index 1b573d76a4f..244d78d37f7 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png index 5d7cbce8a95..d9d5648d19b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png index 0b26ac05bbe..baa255dd1e9 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png index e001f993cb6..65890f3ec93 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png index 5d7cbce8a95..d9d5648d19b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png index bb445dd2a42..38bbc5226be 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png index f8101a75aa2..6ffaa7445f5 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png index 2a85441564e..a8faae031fa 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png index 079914a60f2..6b742a8d1dc 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png index 5ab0bc1a1e2..ee539c752b9 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png index 7f3a7b044e3..7be7644daf2 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png index 8cdd5392a1b..a380ddf649a 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png index 0043b0f9bc5..5f23f30655f 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png index d8a5c21f5e9..cf7994246a6 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts index e19dddf0b30..577e6a3e906 100644 --- a/e2e/components/PageHeader.test.ts +++ b/e2e/components/PageHeader.test.ts @@ -673,4 +673,38 @@ test.describe('PageHeader', () => { }) } }) + + test.describe('Large Variant with Multiline Title', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) }) diff --git a/examples/app-router/package.json b/examples/app-router/package.json index b40cdd2f515..3d1a704c784 100644 --- a/examples/app-router/package.json +++ b/examples/app-router/package.json @@ -9,7 +9,7 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@primer/react": "36.19.0", + "@primer/react": "36.20.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index f346c8b5bc9..d6e72b61333 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -20,7 +20,7 @@ "@typescript-eslint/eslint-plugin": "^7.3.1", "@typescript-eslint/parser": "^7.3.1", "@vitejs/plugin-react": "^4.2.1", - "@primer/react": "36.19.0", + "@primer/react": "36.20.0", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 702d62617d6..c0420e45ccf 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@primer/octicons-react": "19.x", - "@primer/react": "36.19.0", + "@primer/react": "36.20.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/package-lock.json b/package-lock.json index e9efa4eadac..659c38494d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "eslint-plugin-primer-react": "4.0.2", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", - "eslint-plugin-ssr-friendly": "1.2.0", + "eslint-plugin-ssr-friendly": "1.3.0", "eslint-plugin-storybook": "0.6.15", "eslint-plugin-testing-library": "6.0.2", "husky": "8.0.3", @@ -317,7 +317,7 @@ "examples/app-router": { "name": "example-app-router", "dependencies": { - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -336,7 +336,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.3.1", @@ -391,7 +391,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "19.x", - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -4526,6 +4526,283 @@ "node": ">=14" } }, + "node_modules/@figma/code-connect": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@figma/code-connect/-/code-connect-0.1.1.tgz", + "integrity": "sha512-GwLpdsiM1+bFEkMYpv5TNDOopjgCrZxitzIaYBbYC2ovhVNYpoZHMtVjEHuAONurd4OWg7BvA1HhuScI3qz7Hg==", + "dev": true, + "dependencies": { + "@babel/core": "^7.23.6", + "@babel/generator": "^7.23.6", + "@babel/parser": "^7.23.6", + "@babel/types": "^7.23.6", + "@storybook/csf-tools": "^7.6.7", + "axios": "^1.6.0", + "chalk": "^4.1.2", + "commander": "^11.1.0", + "dotenv": "^16.3.1", + "glob": "^10.3.10", + "lodash": "^4.17.21", + "minimatch": "^9.0.3", + "prettier": "^3.2.4", + "typescript": "5.4.2" + }, + "bin": { + "figma": "bin/figma" + } + }, + "node_modules/@figma/code-connect/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@figma/code-connect/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@figma/code-connect/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@figma/code-connect/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@figma/code-connect/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@figma/code-connect/node_modules/commander": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", + "dev": true, + "engines": { + "node": ">=16" + } + }, + "node_modules/@figma/code-connect/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@figma/code-connect/node_modules/dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, + "node_modules/@figma/code-connect/node_modules/foreground-child": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", + "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@figma/code-connect/node_modules/glob": { + "version": "10.3.12", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz", + "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^2.3.6", + "minimatch": "^9.0.1", + "minipass": "^7.0.4", + "path-scurry": "^1.10.2" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@figma/code-connect/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@figma/code-connect/node_modules/minimatch": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", + "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@figma/code-connect/node_modules/minipass": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz", + "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==", + "dev": true, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/@figma/code-connect/node_modules/prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/@figma/code-connect/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@figma/code-connect/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@figma/code-connect/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@figma/code-connect/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@figma/code-connect/node_modules/typescript": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", + "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/@figma/code-connect/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/@floating-ui/core": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", @@ -28914,9 +29191,10 @@ } }, "node_modules/eslint-plugin-ssr-friendly": { - "version": "1.2.0", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-ssr-friendly/-/eslint-plugin-ssr-friendly-1.3.0.tgz", + "integrity": "sha512-VOYl9OgK9mSVWxwl3pSTzNmBUMhPYjDGmxgyjSM9Agdve4GHjn0gAcCG/seg1taaW/aBWTkb7Aw4GIBsxVhL9Q==", "dev": true, - "license": "MIT", "dependencies": { "globals": "^13.8.0" }, @@ -49152,11 +49430,12 @@ "license": "MIT" }, "node_modules/path-scurry": { - "version": "1.10.1", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz", + "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==", "dev": true, - "license": "BlueOak-1.0.0", "dependencies": { - "lru-cache": "^9.1.1 || ^10.0.0", + "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" }, "engines": { @@ -61633,7 +61912,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "36.18.0", + "version": "36.19.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", @@ -61677,6 +61956,7 @@ "@babel/plugin-transform-modules-commonjs": "7.24.1", "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.24.1", + "@figma/code-connect": "^0.1.1", "@primer/css": "^21.0.1", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-commonjs": "25.0.4", diff --git a/package.json b/package.json index ab963a42a63..a0dffaf9330 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "eslint-plugin-primer-react": "4.0.2", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", - "eslint-plugin-ssr-friendly": "1.2.0", + "eslint-plugin-ssr-friendly": "1.3.0", "eslint-plugin-storybook": "0.6.15", "eslint-plugin-testing-library": "6.0.2", "husky": "8.0.3", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 0a49016cd8f..9822451e3d6 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,28 @@ # @primer/react +## 36.20.0 + +### Minor Changes + +- [#4358](https://github.com/primer/react/pull/4358) [`e34e4b265f7584c344a4b6b7145da1a5eec1ffb5`](https://github.com/primer/react/commit/e34e4b265f7584c344a4b6b7145da1a5eec1ffb5) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - PageHeader: Update the layout styles so that all interactive content comes after the title (while keeping the component visually the same). + This is a breaking change however PageHeader is still a draft component so we are releasing the changes as minor but please upgrade with caution. + +- [#4617](https://github.com/primer/react/pull/4617) [`42ba5dc5e722c2341761bf4c6e1e993aac9f2ca8`](https://github.com/primer/react/commit/42ba5dc5e722c2341761bf4c6e1e993aac9f2ca8) Thanks [@JelloBagel](https://github.com/JelloBagel)! - Add an ability to provide custom `aria-label` and `aria-labelledby` to `TreeView.Item` + +## 36.19.1 + +### Patch Changes + +- [#4555](https://github.com/primer/react/pull/4555) [`9b63299689500808167bacff624ff910269417b1`](https://github.com/primer/react/commit/9b63299689500808167bacff624ff910269417b1) Thanks [@JoyceZhu](https://github.com/JoyceZhu)! - Add `openInFocus` prop (default: true) to `AutocompleteInput` + +- [#4601](https://github.com/primer/react/pull/4601) [`f57dd3d687042069c5e5712aa906e59df9f8729e`](https://github.com/primer/react/commit/f57dd3d687042069c5e5712aa906e59df9f8729e) Thanks [@bwittenberg](https://github.com/bwittenberg)! - SelectPanel2: Minor optimization for escape key event listener binding + +- [#4589](https://github.com/primer/react/pull/4589) [`ed701bee8b6c1a9fb9b91462034f8fe04b0244ad`](https://github.com/primer/react/commit/ed701bee8b6c1a9fb9b91462034f8fe04b0244ad) Thanks [@joshblack](https://github.com/joshblack)! - Update how gap is set in Stack to work in wide breakpoints + +- [#4598](https://github.com/primer/react/pull/4598) [`32c687041a600e8b54ffaf9b3ab77f9215a37e3e`](https://github.com/primer/react/commit/32c687041a600e8b54ffaf9b3ab77f9215a37e3e) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Replaced space-small with base-size-6 + +- [#4543](https://github.com/primer/react/pull/4543) [`e47445df6c389fef2aacc72449c02ff471e4cb68`](https://github.com/primer/react/commit/e47445df6c389fef2aacc72449c02ff471e4cb68) Thanks [@TylerJDev](https://github.com/TylerJDev)! - FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator` + ## 36.19.0 ### Minor Changes diff --git a/packages/react/figma.config.json b/packages/react/figma.config.json new file mode 100644 index 00000000000..e8fb8b69634 --- /dev/null +++ b/packages/react/figma.config.json @@ -0,0 +1,12 @@ +{ + "codeConnect": { + "include": ["src/**/*.figma.tsx", "src/**/*.tsx"], + "exclude": ["test/**", "docs/**", "build/**"], + "react": { + "importPaths": { + "./src/*": "@primer/react" + }, + "paths": {} + } + } +} diff --git a/packages/react/package.json b/packages/react/package.json index d1b0d486ad5..96d701a2ff4 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "36.19.0", + "version": "36.20.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js", @@ -126,6 +126,7 @@ "@babel/plugin-transform-modules-commonjs": "7.24.1", "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.24.1", + "@figma/code-connect": "^0.1.1", "@primer/css": "^21.0.1", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-commonjs": "25.0.4", @@ -241,4 +242,4 @@ "optional": true } } -} +} \ No newline at end of file diff --git a/packages/react/script/figma-connect-icons.ts b/packages/react/script/figma-connect-icons.ts new file mode 100644 index 00000000000..4d8eb8a9979 --- /dev/null +++ b/packages/react/script/figma-connect-icons.ts @@ -0,0 +1,229 @@ +import fs from 'fs' +import path from 'path' + +/** + * Typings for the Figma API response + */ + +interface PublishedComponent { + key: string + file_key: string + node_id: string + thumbnail_url: string + name: string + description: string + description_rt: string + created_at: string + updated_at: string + containing_frame: { + name: string + nodeId: string + pageId: string + pageName: string + backgroundColor: string + containingStateGroup?: { + name: string + nodeId: string + } + } + user: { + id: string + handle: string + img_url: string + } +} + +interface PublishedFileComponentsResponse { + error: boolean + status: number + meta: { + components: PublishedComponent[] + } +} + +interface IconInfo { + /** The figma node id */ + id: string + /** The ComponentName of this icon */ + name: string + /** The icon's figma layer name */ + figmaName: string + /** The url of the icon in figma */ + figmaUrl: string + /** size of the icon */ + size: string +} + +/** + * --- EDIT THESE VALUES --- + */ + +/** + * The name of the Code Connect file that will be generated + */ +const ICONS_CODE_CONNECT_FILE = './src/Octicon/Octicon.figma.tsx' + +/** + * Where your icons should be imported from in your codebase + */ +const ICONS_IMPORT_PATH = '@primer/octicons-react' + +/** + * The ID/key of your figma file, for example in: + * https://figma.com/file/ABc123IjkLmnOPq/ + * ^ this is the file key + */ +const FIGMA_FILE_KEY = '1ljgTFkT5NKNRfq5hw07JQ' +/** + * ------------------------- + */ + +// INTERNAL ONLY REMOVE LATER +const apiUrl = process.env.API_URL || `https://api.figma.com/v1/files/` +const fileUrl = process.env.FILE_URL || `https://figma.com/file/` + +/** + * Fetch all published components from the figma file + * + * @returns a list of components + */ +async function fetchPublishedFileComponents() { + if (!process.env.FIGMA_ACCESS_TOKEN) { + throw new Error('FIGMA_ACCESS_TOKEN env variable is not set') + } + const url = `${apiUrl}${FIGMA_FILE_KEY}/components` + const res = await fetch(url, { + headers: {'X-Figma-Token': process.env.FIGMA_ACCESS_TOKEN}, + }) + if (!res.ok) { + const txt = await res.text() + throw new Error(`Failed to fetch ${url.toString()}: ${res.status}\n\n${txt}`) + } + const json = (await res.json()) as PublishedFileComponentsResponse + return json.meta.components +} + +/** + * Gets the id and name of a figma component, and filters out + * components that are not icons. + * + * @param component a published figma component + * @returns the id and name of the component + */ +function getComponentMeta(component: PublishedComponent): {id: string; name: string} | null { + let id = component.node_id + let name = component.name + + // --- EDIT THIS --- + // Edit this to select the components in figma that are icons, for + // example this only selects components which name starts with `icon.` + // const isIconComponent = component.name.startsWith('icon.') + const isIconComponent = component.name + + // This part handles icons that are variants in a component set + // and can be removed if you're using separate components for icons. + if (!isIconComponent) { + const stateGroup = component.containing_frame.containingStateGroup + // const isIconVariant = stateGroup && stateGroup.name.startsWith('icon.') + const isIconVariant = stateGroup && stateGroup.name + if (!isIconVariant) return null + + id = stateGroup.nodeId + name = stateGroup.name + } + + return {id, name} +} + +/** + * Gets the URL of a figma component + * + * @param icon a published figma component + * @returns a URL to the figma component + */ +function figmaUrlOfComponent(icon: PublishedComponent) { + const nodeId = icon.containing_frame.containingStateGroup?.nodeId ?? icon.node_id + const urlId = nodeId.replace(':', '-') + return `${fileUrl}${icon.file_key}/?node-id=${urlId}` +} + +/** + * Writes the icons to a Code Connect file + * + * @param dir directory to write the file to + * @param icons icons to write to the file + */ +async function writeCodeConnectFile(dir: string, icons: IconInfo[]) { + const uniqueNames = new Set([...icons.map(icon => icon.name)]) + + fs.writeFileSync( + path.join(dir, ICONS_CODE_CONNECT_FILE), + `// Code generated by script/figma-connect-icons.ts. DO NOT EDIT. + +import React from 'react' +import figma from '@figma/code-connect' +import { +${Array.from(uniqueNames) + .map(iconName => ` ${iconName},`) + .join('\n')} +} from '${ICONS_IMPORT_PATH}' + +${icons + .map( + icon => `figma.connect(${icon.name}, '${icon.figmaUrl}', { + example: () => <${icon.name} size={${icon.size}} />, +})`, + ) + .join('\n\n')} +`, + ) +} + +/** + * Entry point for the script + */ +async function generateCodeConnectIcons() { + const components = await fetchPublishedFileComponents() + const icons: IconInfo[] = [] + + for (const icon of components) { + const meta = getComponentMeta(icon) + if (!meta) continue + + const id = icon.node_id + const figmaName = meta.name + const figmaUrl = figmaUrlOfComponent(icon) + + // --- EDIT THIS --- + // This is where you want to convert the figma component name to + // a component name in your codebase. In this example, icons are + // called e.g: `icon.32.arrow.right` and the component name then + // becomes `IconArrowRight` + let name = `${figmaName + .split(/[.-]/g) + .map(part => part.charAt(0).toUpperCase() + part.slice(1)) + .join('')}Icon` + + // remove the size from the name + name = name.replace(/[0-9]+/g, '') + + // extract the size from the name + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [_match, size] = figmaName.match(/([0-9]+)/) ?? [null, '16'] // default to 16 if no size specified in the Figma name + + const info: IconInfo = { + id, + name, + figmaName, + figmaUrl, + size, + } + icons.push(info) + } + // eslint-disable-next-line no-console + console.log(`found ${icons.length} published icons`) + + await writeCodeConnectFile('.', icons) +} + +generateCodeConnectIcons() diff --git a/packages/react/src/Autocomplete/Autocomplete.docs.json b/packages/react/src/Autocomplete/Autocomplete.docs.json index 39b19c9ce45..80da9258ba4 100644 --- a/packages/react/src/Autocomplete/Autocomplete.docs.json +++ b/packages/react/src/Autocomplete/Autocomplete.docs.json @@ -19,6 +19,12 @@ "name": "as", "type": "React.ElementType", "defaultValue": "TextInput" + }, + { + "name": "openOnFocus", + "type": "boolean", + "defaultValue": "true", + "description": "Whether the associated autocomplete menu should open on an input focus event" } ], "passthrough": { diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx index 0ff949cb574..ed0fb56ddc9 100644 --- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx @@ -29,6 +29,9 @@ const getArgsByChildComponent = ({ menuLoading, selectionVariant, + // Autocomplete.Input + openOnFocus, + // Autocomplete.Overlay anchorSide, height, @@ -65,6 +68,7 @@ any) => { } return { menuArgs: {emptyStateText, loading: menuLoading, selectionVariant}, + inputArgs: {openOnFocus}, overlayArgs: {anchorSide, height, maxHeight: overlayMaxHeight, width}, textInputArgs, textInputWithTokensArgs: { @@ -131,6 +135,7 @@ const autocompleteStoryMeta: Meta = { emptyStateText: 'No selectable options', menuLoading: false, selectionVariant: 'single', + openOnFocus: true, anchorSide: undefined, height: 'auto', overlayMaxHeight: undefined, @@ -161,6 +166,16 @@ const autocompleteStoryMeta: Meta = { }, }, + // Autocomplete.Input + openOnFocus: { + control: { + type: 'boolean', + }, + table: { + category: 'Autocomplete.Input', + }, + }, + // Autocomplete.Overlay anchorSide: { control: { @@ -217,7 +232,7 @@ const autocompleteStoryMeta: Meta = { export const Default = (args: FormControlArgs) => { const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) + const {menuArgs, inputArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) const isMultiselect = menuArgs.selectionVariant === 'multiple' const [selectedItemIds, setSelectedItemIds] = useState>([]) const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => { @@ -228,12 +243,19 @@ export const Default = (args: FormControlArgs) => { setSelectedItemIds(newlySelectedItems.map(item => item.id)) } + const autocompleteInput = {...inputArgs, ...textInputArgs} + const formValidationId = 'validation-field' return ( event.preventDefault()}> - + ) => { {captionArgs.children && } {validationArgs.children && validationArgs.variant && ( - + )} diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx index 7cdb0469491..f114d881aee 100644 --- a/packages/react/src/Autocomplete/AutocompleteInput.tsx +++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx @@ -10,11 +10,27 @@ import useSafeTimeout from '../hooks/useSafeTimeout' type InternalAutocompleteInputProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any as?: React.ComponentType> + // When false, the autocomplete menu will not render either on mouse click or + // keyboard focus. + openOnFocus?: boolean } +const ARROW_KEYS_NAV = new Set(['ArrowUp', 'ArrowDown']) + const AutocompleteInput = React.forwardRef( ( - {as: Component = TextInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, ...props}, + { + as: Component = TextInput, + onFocus, + onBlur, + onChange, + onKeyDown, + onKeyUp, + onKeyPress, + value, + openOnFocus = true, + ...props + }, forwardedRef, ) => { const autocompleteContext = useContext(AutocompleteContext) @@ -38,10 +54,12 @@ const AutocompleteInput = React.forwardRef( const handleInputFocus: FocusEventHandler = useCallback( event => { - onFocus && onFocus(event) - setShowMenu(true) + if (openOnFocus) { + onFocus?.(event) + setShowMenu(true) + } }, - [onFocus, setShowMenu], + [onFocus, setShowMenu, openOnFocus], ) const handleInputBlur: FocusEventHandler = useCallback( @@ -83,8 +101,11 @@ const AutocompleteInput = React.forwardRef( setInputValue('') inputRef.current.value = '' } + if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) { + setShowMenu(true) + } }, - [inputRef, setInputValue, setHighlightRemainingText, onKeyDown], + [inputRef, setInputValue, setHighlightRemainingText, onKeyDown, showMenu, setShowMenu], ) const handleInputKeyUp: KeyboardEventHandler = useCallback( diff --git a/packages/react/src/Avatar/Avatar.figma.tsx b/packages/react/src/Avatar/Avatar.figma.tsx new file mode 100644 index 00000000000..fe28d8e0036 --- /dev/null +++ b/packages/react/src/Avatar/Avatar.figma.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import Avatar from './Avatar' +import figma from '@figma/code-connect' + +/** + * -- This file was auto-generated by `figma connect create` -- + * `props` includes a mapping from Figma properties and variants to + * suggested values. You should update this to match the props of your + * code component, and update the `example` function to return the + * code example you'd like to see in Figma + */ + +figma.connect( + Avatar, + 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=3805-11&mode=design&t=n5UtEmPJTCzDEJKK-4', + { + props: { + size: figma.enum('size', { + '16px': 16, + '20px': 20, + '24px': 24, + '28px': 28, + '32px': 32, + '40px': 40, + '48px': 48, + '64px': 64, + }), + square: figma.boolean('square'), + }, + example: ({size, square}) => , + }, +) diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx index fc4ecedb586..2dee74f606c 100644 --- a/packages/react/src/Banner/Banner.examples.stories.tsx +++ b/packages/react/src/Banner/Banner.examples.stories.tsx @@ -150,3 +150,40 @@ export const Multiline = () => { /> ) } + +export const DismissBanner = () => { + const ref = React.useRef>(null) + const [banner, setBanner] = React.useState | null>({ + title: 'Info', + description: ( + <> + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + ), + }) + + return ( + <> +
+ {banner ? ( + { + setBanner(null) + ref.current?.focus() + }} + /> + ) : null} +

+ Example page title +

+

Example page content

+
+ + ) +} diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 8f61ba1a1d1..ffc72811a9e 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -264,7 +264,7 @@ const StyledBanner = styled.div` } &[data-title-hidden=''] .BannerContent { - margin-block: var(--space-small, 0.375rem); + margin-block: var(--base-size-6, 0.375rem); } @media screen and (min-width: 544px) { diff --git a/packages/react/src/BranchName/BranchName.figma.tsx b/packages/react/src/BranchName/BranchName.figma.tsx new file mode 100644 index 00000000000..1633be20376 --- /dev/null +++ b/packages/react/src/BranchName/BranchName.figma.tsx @@ -0,0 +1,27 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck +import React from 'react' +import BranchName from './BranchName' +import figma from '@figma/code-connect' + +/** + * -- This file was auto-generated by `figma connect create` -- + * `props` includes a mapping from Figma properties and variants to + * suggested values. You should update this to match the props of your + * code component, and update the `example` function to return the + * code example you'd like to see in Figma + */ + +figma.connect( + BranchName, + 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=3655-7208&mode=design&t=HqwKHI6akvFT5reK-4', + { + props: { + as: figma.enum('type', { + text: 'span', + link: undefined, + }), + }, + example: ({as}) => , + }, +) diff --git a/packages/react/src/Button/Button.figma.tsx b/packages/react/src/Button/Button.figma.tsx new file mode 100644 index 00000000000..510394f8d7a --- /dev/null +++ b/packages/react/src/Button/Button.figma.tsx @@ -0,0 +1,52 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck +import {figma} from '@figma/code-connect' +import {ButtonComponent as Button} from './Button' +import React from 'react' + +const componentProps = { + disabled: figma.enum('state', {disabled: true}), + inactive: figma.enum('state', {inactive: true}), + size: figma.enum('size', { + small: 'small', + medium: 'medium', + large: 'large', + }), + alignContent: figma.enum('alignContent', { + start: 'start', + center: 'center', + }), + variant: figma.enum('variant', { + primary: 'primary', + secondary: 'default', + danger: 'danger', + invisible: 'invisible', + }), + leadingVisual: figma.boolean('leadingVisual?', { + true: figma.instance('leadingVisual'), + false: undefined, + }), + trailingVisual: figma.boolean('trailingVisual?', { + true: figma.instance('trailingVisual'), + false: undefined, + }), +} + +figma.connect( + Button, + 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=30258%3A5582&mode=design&t=TVF2yeiff0ZtzQll-1', + { + props: componentProps, + example: ({size, disabled, inactive, alignContent, leadingVisual, variant}) => ( + + ), + }, +) diff --git a/packages/react/src/FormControl/FormControl.docs.json b/packages/react/src/FormControl/FormControl.docs.json index a4c737b98b6..94dcd39ad7c 100644 --- a/packages/react/src/FormControl/FormControl.docs.json +++ b/packages/react/src/FormControl/FormControl.docs.json @@ -56,6 +56,18 @@ "defaultValue": "'label'", "description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'" }, + { + "name": "requiredText", + "type": "string", + "defaultValue": "'*'", + "description": "The text to display when the field is required" + }, + { + "name": "requiredIndicator", + "type": "boolean", + "defaultValue": "true", + "description": "Whether to show or hide the required text in the accessibility tree, the required text is still shown visually." + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx index 07bb3fecb8d..b8184d635e6 100644 --- a/packages/react/src/FormControl/FormControl.features.stories.tsx +++ b/packages/react/src/FormControl/FormControl.features.stories.tsx @@ -10,6 +10,7 @@ import { Radio, RadioGroup, Select, + Text, TextInput, TextInputWithTokens, Textarea, @@ -306,3 +307,30 @@ export const DisabledInputs = () => ( ) + +export const CustomRequired = () => ( + + + Form Input Label + This is a form field with a custom required indicator + + + + Required fields are marked with an asterisk (*) + + Form Input Label + + This is a form field with a required indicator that is hidden in the accessibility tree + + + + + + + Form Input Label + + This is a form field that is marked as optional, it is not required + + + +) diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/_FormControlLabel.tsx index 62c346d8ff8..8c52c909c52 100644 --- a/packages/react/src/FormControl/_FormControlLabel.tsx +++ b/packages/react/src/FormControl/_FormControlLabel.tsx @@ -8,12 +8,14 @@ export type Props = { * Whether the label should be visually hidden */ visuallyHidden?: boolean + requiredText?: string + requiredIndicator?: boolean id?: string } & SxProp const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, sx, ...props}) => { +> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, ...props}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -26,6 +28,8 @@ const FormControlLabel: React.FC< id, visuallyHidden, required, + requiredText, + requiredIndicator, disabled, sx, ...props, @@ -36,6 +40,8 @@ const FormControlLabel: React.FC< visuallyHidden, htmlFor: htmlFor || formControlId, required, + requiredText, + requiredIndicator, disabled, sx, ...props, diff --git a/packages/react/src/Link/Link.figma.tsx b/packages/react/src/Link/Link.figma.tsx new file mode 100644 index 00000000000..26f528373f1 --- /dev/null +++ b/packages/react/src/Link/Link.figma.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import Link from './Link' +import figma from '@figma/code-connect' + +/** + * -- This file was auto-generated by `figma connect create` -- + * `props` includes a mapping from Figma properties and variants to + * suggested values. You should update this to match the props of your + * code component, and update the `example` function to return the + * code example you'd like to see in Figma + */ + +figma.connect( + Link, + 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=20953-78768&mode=design&t=HqwKHI6akvFT5reK-4', + { + props: { + label: figma.string('link text'), + inline: figma.boolean('inline'), + trailingVisual: figma.boolean('trailingVisual?', { + true: figma.instance('trailingVisual'), + false: undefined, + }), + leadingVisual: figma.boolean('leadingVisual?', { + true: figma.instance('leadingVisual'), + false: undefined, + }), + muted: figma.boolean('muted'), + }, + example: ({label, inline, muted, leadingVisual, trailingVisual}) => ( + + {leadingVisual} + {label} + {trailingVisual} + + ), + }, +) diff --git a/packages/react/src/NavList/NavList.stories.tsx b/packages/react/src/NavList/NavList.stories.tsx index 33589e21bdb..704c6b8cae9 100644 --- a/packages/react/src/NavList/NavList.stories.tsx +++ b/packages/react/src/NavList/NavList.stories.tsx @@ -224,4 +224,26 @@ export const WithInactiveItems: Story = () => ( ) +export const WithGroup = () => ( + + + + + + Item 1A + + Item 1B + Item 1C + + + Item 2A + Item 2B + Item 2C + + + + + +) + export default meta diff --git a/packages/react/src/Octicon/Octicon.figma.tsx b/packages/react/src/Octicon/Octicon.figma.tsx new file mode 100644 index 00000000000..84b9df8a16d --- /dev/null +++ b/packages/react/src/Octicon/Octicon.figma.tsx @@ -0,0 +1,2711 @@ +// Code generated by script/figma-connect-icons.ts. DO NOT EDIT. + +import React from 'react' +import figma from '@figma/code-connect' +import { + InfinityIcon, + FileBinaryIcon, + PackageDependenciesIcon, + ArrowUpLeftIcon, + RubyIcon, + PackageDependentsIcon, + DiffRenamedIcon, + HourglassIcon, + MoveToStartIcon, + TabIcon, + GitPullRequestIcon, + AccessibilityInsetIcon, + GoalIcon, + ZoomOutIcon, + LogoGithubIcon, + FileMediaIcon, + ChevronRightIcon, + FiscalHostIcon, + DiffRemovedIcon, + FileMovedIcon, + MoveToBottomIcon, + XIcon, + PaperAirplaneIcon, + HashIcon, + UndoIcon, + CheckCircleFillIcon, + UnlinkIcon, + EllipsisIcon, + VideoIcon, + KebabHorizontalIcon, + ArrowBothIcon, + ServerIcon, + StopIcon, + SquareFillIcon, + SmileyIcon, + CreditCardIcon, + PivotColumnIcon, + HeartIcon, + ListOrderedIcon, + ItalicIcon, + CircleIcon, + CodeOfConductIcon, + BellFillIcon, + TelescopeIcon, + ArrowUpIcon, + QuestionIcon, + ScreenFullIcon, + ShieldCheckIcon, + ArrowLeftIcon, + SyncIcon, + VersionsIcon, + IdBadgeIcon, + IterationsIcon, + AlertFillIcon, + RowsIcon, + GitMergeIcon, + DownloadIcon, + FileIcon, + SlidersIcon, + RocketIcon, + ChevronLeftIcon, + HomeFillIcon, + GrabberIcon, + ZoomInIcon, + StarFillIcon, + RedoIcon, + FileRemovedIcon, + ChevronDownIcon, + SidebarCollapseIcon, + SkipFillIcon, + ZapIcon, + SearchIcon, + MarkGithubIcon, + PeopleIcon, + HeadingIcon, + DiamondIcon, + ArrowSwitchIcon, + PinSlashIcon, + LocationIcon, + ArrowUpRightIcon, + SparkleFillIcon, + TrashIcon, + FileDirectoryOpenFillIcon, + ShareAndroidIcon, + DuplicateIcon, + FoldUpIcon, + GitCommitIcon, + BellIcon, + FileCodeIcon, + BookmarkSlashIcon, + BellSlashIcon, + MegaphoneIcon, + CommandPaletteIcon, + TriangleRightIcon, + ProjectRoadmapIcon, + NumberIcon, + PaperclipIcon, + TriangleUpIcon, + ChevronUpIcon, + FileSubmoduleIcon, + MortarBoardIcon, + NoteIcon, + CodescanIcon, + WorkflowIcon, + CommentIcon, + ArrowRightIcon, + SunIcon, + DiffModifiedIcon, + HorizontalRuleIcon, + ContainerIcon, + EyeIcon, + CloudOfflineIcon, + UnlockIcon, + ShieldXIcon, + CrossReferenceIcon, + BookmarkFillIcon, + ThumbsdownIcon, + DeviceMobileIcon, + BookmarkSlashFillIcon, + DesktopDownloadIcon, + CodeReviewIcon, + FoldDownIcon, + CloudIcon, + MirrorIcon, + MarkdownIcon, + SortAscIcon, + BrowserIcon, + SidebarExpandIcon, + ColumnsIcon, + SquirrelIcon, + MoveToTopIcon, + UnverifiedIcon, + PersonIcon, + LogIcon, + TypographyIcon, + FeedMergedIcon, + DeviceCameraVideoIcon, + BoldIcon, + ToolsIcon, + FileDiffIcon, + CpuIcon, + NorthStarIcon, + HistoryIcon, + FoldIcon, + MentionIcon, + DotIcon, + LockIcon, + QuoteIcon, + ScreenNormalIcon, + BroadcastIcon, + RepoPushIcon, + HubotIcon, + ShieldLockIcon, + GitBranchIcon, + MuteIcon, + DependabotIcon, + DiffAddedIcon, + FilterIcon, + PulseIcon, + TabExternalIcon, + RelFilePathIcon, + ArchiveIcon, + UnmuteIcon, + SkipIcon, + FileZipIcon, + GitPullRequestClosedIcon, + RepoLockedIcon, + CircleSlashIcon, + FileAddedIcon, + ReplyIcon, + InboxIcon, + PlugIcon, + StrikethroughIcon, + UnfoldIcon, + TriangleLeftIcon, + MultiSelectIcon, + RssIcon, + GiftIcon, + DatabaseIcon, + SingleSelectIcon, + FeedRocketIcon, + WebhookIcon, + SortDescIcon, + ArrowDownRightIcon, + SquareIcon, + SponsorTiersIcon, + KeyAsteriskIcon, + ArrowDownIcon, + SignOutIcon, + PaintbrushIcon, + CacheIcon, + MoveToEndIcon, + ReportIcon, + PersonFillIcon, + ArrowDownLeftIcon, + ShieldSlashIcon, + NoEntryFillIcon, + BeakerIcon, + FeedDiscussionIcon, + NoEntryIcon, + ShareIcon, + CopyIcon, + LogoGistIcon, + UnreadIcon, + TasklistIcon, + FeedHeartIcon, + IssueReopenedIcon, + GitMergeQueueIcon, + FeedPersonIcon, + FeedRepoIcon, + IssueDraftIcon, + MoonIcon, + AccessibilityIcon, + AppsIcon, + LinkIcon, + PlayIcon, + RepoForkedIcon, + TerminalIcon, + DiffIgnoredIcon, + BlockedIcon, + CodescanCheckmarkIcon, + InfoIcon, + GitPullRequestDraftIcon, + RepoTemplateIcon, + SignInIcon, + FeedStarIcon, + DeviceDesktopIcon, + BugIcon, + LinkExternalIcon, + GitCompareIcon, + FeedTagIcon, + FeedForkedIcon, + BriefcaseIcon, + KeyIcon, + MailIcon, + FeedTrophyIcon, + PersonAddIcon, + RepoDeletedIcon, + MeterIcon, + StopwatchIcon, + ProjectSymlinkIcon, + TelescopeFillIcon, + UploadIcon, + XCircleFillIcon, + TableIcon, + StarIcon, + AlertIcon, + TagIcon, + GearIcon, + ImageIcon, + ClockIcon, + BookIcon, + ProjectIcon, + GraphIcon, + CalendarIcon, + GlobeIcon, + ClockFillIcon, + CheckboxIcon, + RepoIcon, + ThreeBarsIcon, + VerifiedIcon, + ReadIcon, + FileDirectoryIcon, + CodeIcon, + HomeIcon, + CodespacesIcon, + BookmarkIcon, + MilestoneIcon, + DeviceCameraIcon, + ChecklistIcon, + PencilIcon, + CheckCircleIcon, + PinIcon, + CommentDiscussionIcon, + TrophyIcon, + LawIcon, + ThumbsupIcon, + HeartFillIcon, + FileBadgeIcon, + PackageIcon, + IssueClosedIcon, + OrganizationIcon, + FileDirectoryFillIcon, + CheckIcon, + StackIcon, + DashIcon, + LightBulbIcon, + CopilotErrorIcon, + IssueTracksIcon, + IssueTrackedByIcon, + CopilotWarningIcon, + EyeClosedIcon, + ListUnorderedIcon, + DiffIcon, + FlameIcon, + FileSymlinkFileIcon, + PasteIcon, + IssueOpenedIcon, + CodeSquareIcon, + ShieldIcon, + PlusCircleIcon, + DotFillIcon, + PlusIcon, + TriangleDownIcon, + CopilotIcon, + XCircleIcon, +} from '@primer/octicons-react' +figma.connect(InfinityIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-890', { + example: () => , +}) + +figma.connect(FileBinaryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-874', { + example: () => , +}) + +figma.connect(PackageDependenciesIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-124', { + example: () => , +}) + +figma.connect(ArrowUpLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-89', { + example: () => , +}) + +figma.connect(RubyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-31', { + example: () => , +}) + +figma.connect(PackageDependentsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-968', { + example: () => , +}) + +figma.connect(DiffRenamedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-248', { + example: () => , +}) + +figma.connect(HourglassIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-922', { + example: () => , +}) + +figma.connect(MoveToStartIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-156', { + example: () => , +}) + +figma.connect(TabIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-868', { + example: () => , +}) + +figma.connect(GitPullRequestIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-879', { + example: () => , +}) + +figma.connect(AccessibilityInsetIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5480-624', { + example: () => , +}) + +figma.connect(GoalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4238-103', { + example: () => , +}) + +figma.connect(ZoomOutIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4640-117', { + example: () => , +}) + +figma.connect(LogoGithubIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=181-956', { + example: () => , +}) + +figma.connect(FileMediaIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1006', { + example: () => , +}) + +figma.connect(ChevronRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-290', { + example: () => , +}) + +figma.connect(FiscalHostIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5456-399', { + example: () => , +}) + +figma.connect(DiffRemovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5478-548', { + example: () => , +}) + +figma.connect(DiffRenamedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5478-545', { + example: () => , +}) + +figma.connect(FileMovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5458-470', { + example: () => , +}) + +figma.connect(MoveToBottomIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-139', { + example: () => , +}) + +figma.connect(XIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-915', { + example: () => , +}) + +figma.connect(DiffRemovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-250', { + example: () => , +}) + +figma.connect(PaperAirplaneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-120', { + example: () => , +}) + +figma.connect(HashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1767-37', { + example: () => , +}) + +figma.connect(UndoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5451-218', { + example: () => , +}) + +figma.connect(UnlinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-115', { + example: () => , +}) + +figma.connect(EllipsisIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-39', { + example: () => , +}) + +figma.connect(VideoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1737-12', { + example: () => , +}) + +figma.connect(KebabHorizontalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-162', { + example: () => , +}) + +figma.connect(ArrowBothIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-329', { + example: () => , +}) + +figma.connect(ServerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-72', { + example: () => , +}) + +figma.connect(StopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-921', { + example: () => , +}) + +figma.connect(SquareFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-43', { + example: () => , +}) + +figma.connect(SmileyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1023', { + example: () => , +}) + +figma.connect(CreditCardIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-268', { + example: () => , +}) + +figma.connect(PivotColumnIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5153-113', { + example: () => , +}) + +figma.connect(HeartIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-190', { + example: () => , +}) + +figma.connect(ListOrderedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-150', { + example: () => , +}) + +figma.connect(ItalicIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-166', { + example: () => , +}) + +figma.connect(CircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=964-32', { + example: () => , +}) + +figma.connect(CodeOfConductIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2766-227', { + example: () => , +}) + +figma.connect(BellFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-909', { + example: () => , +}) + +figma.connect(TelescopeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1003', { + example: () => , +}) + +figma.connect(ArrowUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-321', { + example: () => , +}) + +figma.connect(XCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=964-28', { + example: () => , +}) + +figma.connect(QuestionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-970', { + example: () => , +}) + +figma.connect(ScreenFullIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-78', { + example: () => , +}) + +figma.connect(ShieldCheckIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-64', { + example: () => , +}) + +figma.connect(ArrowLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-914', { + example: () => , +}) + +figma.connect(SyncIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-46', { + example: () => , +}) + +figma.connect(VersionsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-4', { + example: () => , +}) + +figma.connect(IdBadgeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5453-380', { + example: () => , +}) + +figma.connect(IterationsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2575-77', { + example: () => , +}) + +figma.connect(AlertFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3971-108', { + example: () => , +}) + +figma.connect(RowsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-8', { + example: () => , +}) + +figma.connect(GitMergeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-877', { + example: () => , +}) + +figma.connect(ShieldCheckIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-940', { + example: () => , +}) + +figma.connect(DownloadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-153', { + example: () => , +}) + +figma.connect(FileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-234', { + example: () => , +}) + +figma.connect(SlidersIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3456-103', { + example: () => , +}) + +figma.connect(RocketIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-900', { + example: () => , +}) + +figma.connect(ChevronLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4508-141', { + example: () => , +}) + +figma.connect(HomeFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1033', { + example: () => , +}) + +figma.connect(GrabberIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-864', { + example: () => , +}) + +figma.connect(ZoomInIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4640-122', { + example: () => , +}) + +figma.connect(StarFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-939', { + example: () => , +}) + +figma.connect(RedoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-326', { + example: () => , +}) + +figma.connect(FileRemovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3480-123', { + example: () => , +}) + +figma.connect(ChevronDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-294', { + example: () => , +}) + +figma.connect(SidebarCollapseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3757-124', { + example: () => , +}) + +figma.connect(SkipFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-125', { + example: () => , +}) + +figma.connect(ZapIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-35', { + example: () => , +}) + +figma.connect(SearchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-74', { + example: () => , +}) + +figma.connect(MarkGithubIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-947', { + example: () => , +}) + +figma.connect(PeopleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1034', { + example: () => , +}) + +figma.connect(HeadingIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-957', { + example: () => , +}) + +figma.connect(DiamondIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2061-1', { + example: () => , +}) + +figma.connect(ArrowSwitchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3042-222', { + example: () => , +}) + +figma.connect(PinSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-122', { + example: () => , +}) + +figma.connect(LocationIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-903', { + example: () => , +}) + +figma.connect(CircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1051', { + example: () => , +}) + +figma.connect(ArrowUpRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-101', { + example: () => , +}) + +figma.connect(SparkleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5451-290', { + example: () => , +}) + +figma.connect(TrashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-893', { + example: () => , +}) + +figma.connect(SlidersIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-301', { + example: () => , +}) + +figma.connect(ArrowUpLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-912', { + example: () => , +}) + +figma.connect(FileDirectoryOpenFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5458-441', { + example: () => , +}) + +figma.connect(ShareAndroidIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-994', { + example: () => , +}) + +figma.connect(DuplicateIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2384-79', { + example: () => , +}) + +figma.connect(FoldUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-932', { + example: () => , +}) + +figma.connect(GitCommitIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-882', { + example: () => , +}) + +figma.connect(BellIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-911', { + example: () => , +}) + +figma.connect(FileCodeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-873', { + example: () => , +}) + +figma.connect(BookmarkSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1027', { + example: () => , +}) + +figma.connect(BellSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-908', { + example: () => , +}) + +figma.connect(MegaphoneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-979', { + example: () => , +}) + +figma.connect(PaperAirplaneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-937', { + example: () => , +}) + +figma.connect(CommandPaletteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3763-106', { + example: () => , +}) + +figma.connect(ArrowBothIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-880', { + example: () => , +}) + +figma.connect(TriangleRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-885', { + example: () => , +}) + +figma.connect(ProjectRoadmapIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-121', { + example: () => , +}) + +figma.connect(NumberIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1960-5', { + example: () => , +}) + +figma.connect(PaperclipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3751-106', { + example: () => , +}) + +figma.connect(TriangleUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-927', { + example: () => , +}) + +figma.connect(ChevronUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-883', { + example: () => , +}) + +figma.connect(ItalicIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-986', { + example: () => , +}) + +figma.connect(ServerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1002', { + example: () => , +}) + +figma.connect(ChevronLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-881', { + example: () => , +}) + +figma.connect(FileSubmoduleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-996', { + example: () => , +}) + +figma.connect(AccessibilityInsetIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5480-606', { + example: () => , +}) + +figma.connect(MortarBoardIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-866', { + example: () => , +}) + +figma.connect(NoteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1017', { + example: () => , +}) + +figma.connect(CodescanIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-12', { + example: () => , +}) + +figma.connect(WorkflowIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-899', { + example: () => , +}) + +figma.connect(CommentIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-948', { + example: () => , +}) + +figma.connect(ArrowRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-918', { + example: () => , +}) + +figma.connect(CreditCardIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-928', { + example: () => , +}) + +figma.connect(FileRemovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5458-457', { + example: () => , +}) + +figma.connect(FileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-871', { + example: () => , +}) + +figma.connect(SunIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=857-26', { + example: () => , +}) + +figma.connect(DiffModifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5478-546', { + example: () => , +}) + +figma.connect(HorizontalRuleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-990', { + example: () => , +}) + +figma.connect(ContainerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1508-116', { + example: () => , +}) + +figma.connect(EyeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1011', { + example: () => , +}) + +figma.connect(CloudOfflineIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3148-217', { + example: () => , +}) + +figma.connect(UnlockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-980', { + example: () => , +}) + +figma.connect(ShieldXIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1049', { + example: () => , +}) + +figma.connect(CrossReferenceIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-925', { + example: () => , +}) + +figma.connect(BookmarkFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-967', { + example: () => , +}) + +figma.connect(ThumbsdownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-998', { + example: () => , +}) + +figma.connect(HashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1767-15', { + example: () => , +}) + +figma.connect(DeviceMobileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-989', { + example: () => , +}) + +figma.connect(BookmarkSlashFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1030', { + example: () => , +}) + +figma.connect(DesktopDownloadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-991', { + example: () => , +}) + +figma.connect(CodeReviewIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-923', { + example: () => , +}) + +figma.connect(FoldDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-887', { + example: () => , +}) + +figma.connect(CloudIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3121-241', { + example: () => , +}) + +figma.connect(MirrorIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-938', { + example: () => , +}) + +figma.connect(MarkdownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-995', { + example: () => , +}) + +figma.connect(MoveToBottomIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-156', { + example: () => , +}) + +figma.connect(SortAscIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2117-82', { + example: () => , +}) + +figma.connect(BrowserIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1917-82', { + example: () => , +}) + +figma.connect(SidebarExpandIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3757-123', { + example: () => , +}) + +figma.connect(ColumnsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-7', { + example: () => , +}) + +figma.connect(SquirrelIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1000-26', { + example: () => , +}) + +figma.connect(MoveToTopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-155', { + example: () => , +}) + +figma.connect(UnverifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-984', { + example: () => , +}) + +figma.connect(PersonIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-905', { + example: () => , +}) + +figma.connect(LogIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3967-103', { + example: () => , +}) + +figma.connect(TypographyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1047', { + example: () => , +}) + +figma.connect(ScreenFullIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1018', { + example: () => , +}) + +figma.connect(FeedMergedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3071-224', { + example: () => , +}) + +figma.connect(DeviceCameraVideoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-985', { + example: () => , +}) + +figma.connect(BoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-999', { + example: () => , +}) + +figma.connect(ToolsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-891', { + example: () => , +}) + +figma.connect(FileDiffIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-870', { + example: () => , +}) + +figma.connect(CpuIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-944', { + example: () => , +}) + +figma.connect(NorthStarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=184-6', { + example: () => , +}) + +figma.connect(HistoryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-953', { + example: () => , +}) + +figma.connect(FoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1024', { + example: () => , +}) + +figma.connect(PivotColumnIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5153-110', { + example: () => , +}) + +figma.connect(MentionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-930', { + example: () => , +}) + +figma.connect(DotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1045', { + example: () => , +}) + +figma.connect(ChevronRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4502-199', { + example: () => , +}) + +figma.connect(LockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-961', { + example: () => , +}) + +figma.connect(QuoteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-971', { + example: () => , +}) + +figma.connect(ScreenNormalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-941', { + example: () => , +}) + +figma.connect(BroadcastIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-889', { + example: () => , +}) + +figma.connect(RepoPushIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-963', { + example: () => , +}) + +figma.connect(HubotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1028', { + example: () => , +}) + +figma.connect(ShieldLockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1019', { + example: () => , +}) + +figma.connect(ChevronDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-978', { + example: () => , +}) + +figma.connect(GitBranchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-878', { + example: () => , +}) + +figma.connect(MuteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1020', { + example: () => , +}) + +figma.connect(DependabotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-14', { + example: () => , +}) + +figma.connect(DiffAddedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5478-549', { + example: () => , +}) + +figma.connect(FilterIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-942', { + example: () => , +}) + +figma.connect(PulseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1035', { + example: () => , +}) + +figma.connect(TabExternalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5451-278', { + example: () => , +}) + +figma.connect(RelFilePathIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4223-108', { + example: () => , +}) + +figma.connect(ArchiveIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1009', { + example: () => , +}) + +figma.connect(UnmuteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-997', { + example: () => , +}) + +figma.connect(SkipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1041', { + example: () => , +}) + +figma.connect(ListOrderedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-946', { + example: () => , +}) + +figma.connect(FileZipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-910', { + example: () => , +}) + +figma.connect(GitPullRequestClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2059-94', { + example: () => , +}) + +figma.connect(RepoLockedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3217-224', { + example: () => , +}) + +figma.connect(CircleSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1031', { + example: () => , +}) + +figma.connect(FileAddedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5458-477', { + example: () => , +}) + +figma.connect(ReplyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-895', { + example: () => , +}) + +figma.connect(InboxIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1032', { + example: () => , +}) + +figma.connect(PlugIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-972', { + example: () => , +}) + +figma.connect(StrikethroughIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1554-89', { + example: () => , +}) + +figma.connect(UnfoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-888', { + example: () => , +}) + +figma.connect(TriangleLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-884', { + example: () => , +}) + +figma.connect(MultiSelectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1666-79', { + example: () => , +}) + +figma.connect(RssIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-926', { + example: () => , +}) + +figma.connect(RepoDeletedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-315', { + example: () => , +}) + +figma.connect(GiftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1025', { + example: () => , +}) + +figma.connect(DatabaseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-264', { + example: () => , +}) + +figma.connect(SquareFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-83', { + example: () => , +}) + +figma.connect(SingleSelectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-17', { + example: () => , +}) + +figma.connect(QuoteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-96', { + example: () => , +}) + +figma.connect(FeedRocketIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-549', { + example: () => , +}) + +figma.connect(WebhookIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-235', { + example: () => , +}) + +figma.connect(SortDescIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2117-83', { + example: () => , +}) + +figma.connect(HeadingIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-192', { + example: () => , +}) + +figma.connect(ArrowDownRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-90', { + example: () => , +}) + +figma.connect(SquareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-82', { + example: () => , +}) + +figma.connect(SortDescIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2117-81', { + example: () => , +}) + +figma.connect(ChevronUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4445-118', { + example: () => , +}) + +figma.connect(SponsorTiersIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-130', { + example: () => , +}) + +figma.connect(KeyAsteriskIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-370', { + example: () => , +}) + +figma.connect(ArrowDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-327', { + example: () => , +}) + +figma.connect(MoveToTopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-137', { + example: () => , +}) + +figma.connect(SignOutIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=72-2042', { + example: () => , +}) + +figma.connect(BroadcastIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-304', { + example: () => , +}) + +figma.connect(PaintbrushIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1000-48', { + example: () => , +}) + +figma.connect(CacheIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3735-109', { + example: () => , +}) + +figma.connect(ChevronLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-292', { + example: () => , +}) + +figma.connect(MoveToEndIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-157', { + example: () => , +}) + +figma.connect(SunIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=857-34', { + example: () => , +}) + +figma.connect(ReportIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-74', { + example: () => , +}) + +figma.connect(SignOutIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-901', { + example: () => , +}) + +figma.connect(PersonFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2510-78', { + example: () => , +}) + +figma.connect(EllipsisIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5460-511', { + example: () => , +}) + +figma.connect(ZoomOutIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4640-123', { + example: () => , +}) + +figma.connect(ArrowDownLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-88', { + example: () => , +}) + +figma.connect(SidebarExpandIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3757-107', { + example: () => , +}) + +figma.connect(ShieldSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3849-103', { + example: () => , +}) + +figma.connect(HorizontalRuleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=186-6', { + example: () => , +}) + +figma.connect(NoEntryFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2617-91', { + example: () => , +}) + +figma.connect(BeakerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1014', { + example: () => , +}) + +figma.connect(CloudIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3121-221', { + example: () => , +}) + +figma.connect(FeedDiscussionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-555', { + example: () => , +}) + +figma.connect(UndoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5448-193', { + example: () => , +}) + +figma.connect(TriangleLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-24', { + example: () => , +}) + +figma.connect(NoEntryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2595-86', { + example: () => , +}) + +figma.connect(UnverifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-10', { + example: () => , +}) + +figma.connect(ShareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1117-74', { + example: () => , +}) + +figma.connect(CopyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1923-82', { + example: () => , +}) + +figma.connect(CopyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1923-94', { + example: () => , +}) + +figma.connect(DiamondIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2061-0', { + example: () => , +}) + +figma.connect(LogoGistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-340', { + example: () => , +}) + +figma.connect(UnreadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-106', { + example: () => , +}) + +figma.connect(MirrorIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=20-74', { + example: () => , +}) + +figma.connect(TasklistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-974', { + example: () => , +}) + +figma.connect(ReplyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-94', { + example: () => , +}) + +figma.connect(TasklistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-42', { + example: () => , +}) + +figma.connect(CodeOfConductIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2766-221', { + example: () => , +}) + +figma.connect(UnlinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-118', { + example: () => , +}) + +figma.connect(UnreadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-112', { + example: () => , +}) + +figma.connect(ShieldSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4715-108', { + example: () => , +}) + +figma.connect(PackageDependenciesIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-931', { + example: () => , +}) + +figma.connect(InfinityIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-176', { + example: () => , +}) + +figma.connect(CodescanIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-23', { + example: () => , +}) + +figma.connect(FeedHeartIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-553', { + example: () => , +}) + +figma.connect(SortAscIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2117-80', { + example: () => , +}) + +figma.connect(IterationsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2577-89', { + example: () => , +}) + +figma.connect(IssueReopenedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-168', { + example: () => , +}) + +figma.connect(GitMergeQueueIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3751-103', { + example: () => , +}) + +figma.connect(FeedPersonIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-551', { + example: () => , +}) + +figma.connect(NorthStarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=184-4', { + example: () => , +}) + +figma.connect(PersonFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2558-77', { + example: () => , +}) + +figma.connect(FeedRepoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-554', { + example: () => , +}) + +figma.connect(IssueDraftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2246-22', { + example: () => , +}) + +figma.connect(ArrowDownLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-102', { + example: () => , +}) + +figma.connect(MoonIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=858-2', { + example: () => , +}) + +figma.connect(MoonIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=857-27', { + example: () => , +}) + +figma.connect(ArrowDownRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-100', { + example: () => , +}) + +figma.connect(CommandPaletteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3763-105', { + example: () => , +}) + +figma.connect(AccessibilityIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-246', { + example: () => , +}) + +figma.connect(ArrowUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-916', { + example: () => , +}) + +figma.connect(AppsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5420-122', { + example: () => , +}) + +figma.connect(CloudOfflineIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3148-214', { + example: () => , +}) + +figma.connect(LinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-902', { + example: () => , +}) + +figma.connect(TypographyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-18', { + example: () => , +}) + +figma.connect(AccessibilityIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5480-652', { + example: () => , +}) + +figma.connect(ZoomInIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4640-116', { + example: () => , +}) + +figma.connect(PlayIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1008', { + example: () => , +}) + +figma.connect(RepoForkedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-90', { + example: () => , +}) + +figma.connect(FileBinaryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=32-97', { + example: () => , +}) + +figma.connect(SkipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-58', { + example: () => , +}) + +figma.connect(TerminalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-906', { + example: () => , +}) + +figma.connect(DiffIgnoredIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5478-547', { + example: () => , +}) + +figma.connect(TriangleUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-20', { + example: () => , +}) + +figma.connect(BlockedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1923-78', { + example: () => , +}) + +figma.connect(BoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-312', { + example: () => , +}) + +figma.connect(CodescanCheckmarkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-13', { + example: () => , +}) + +figma.connect(InfoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-993', { + example: () => , +}) + +figma.connect(GitPullRequestDraftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2059-89', { + example: () => , +}) + +figma.connect(PackageDependentsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-122', { + example: () => , +}) + +figma.connect(RepoTemplateIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-86', { + example: () => , +}) + +figma.connect(SignInIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=72-2045', { + example: () => , +}) + +figma.connect(ScreenNormalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-76', { + example: () => , +}) + +figma.connect(CodeReviewIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-278', { + example: () => , +}) + +figma.connect(FeedStarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-552', { + example: () => , +}) + +figma.connect(DeviceDesktopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-892', { + example: () => , +}) + +figma.connect(SkipFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-123', { + example: () => , +}) + +figma.connect(EyeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-238', { + example: () => , +}) + +figma.connect(IssueDraftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2246-19', { + example: () => , +}) + +figma.connect(RowsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-6', { + example: () => , +}) + +figma.connect(BugIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2314-132', { + example: () => , +}) + +figma.connect(LinkExternalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1016', { + example: () => , +}) + +figma.connect(SignInIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-952', { + example: () => , +}) + +figma.connect(RssIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-80', { + example: () => , +}) + +figma.connect(LogoGistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5452-335', { + example: () => , +}) + +figma.connect(GitCompareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-204', { + example: () => , +}) + +figma.connect(ReportIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-76', { + example: () => , +}) + +figma.connect(PersonIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-114', { + example: () => , +}) + +figma.connect(FeedTagIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2772-547', { + example: () => , +}) + +figma.connect(DiffAddedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-256', { + example: () => , +}) + +figma.connect(RepoTemplateIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1012', { + example: () => , +}) + +figma.connect(FeedForkedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3071-225', { + example: () => , +}) + +figma.connect(NumberIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1958-5', { + example: () => , +}) + +figma.connect(ShieldXIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-60', { + example: () => , +}) + +figma.connect(SquareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-42', { + example: () => , +}) + +figma.connect(BriefcaseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-27', { + example: () => , +}) + +figma.connect(KebabHorizontalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1046', { + example: () => , +}) + +figma.connect(KeyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1044', { + example: () => , +}) + +figma.connect(MailIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1015', { + example: () => , +}) + +figma.connect(BlockedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1923-93', { + example: () => , +}) + +figma.connect(FeedTrophyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3071-226', { + example: () => , +}) + +figma.connect(ContainerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1508-131', { + example: () => , +}) + +figma.connect(PersonAddIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1910-76', { + example: () => , +}) + +figma.connect(DependabotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-21', { + example: () => , +}) + +figma.connect(DiffIgnoredIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-254', { + example: () => , +}) + +figma.connect(FileMovedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3480-122', { + example: () => , +}) + +figma.connect(RepoDeletedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-243', { + example: () => , +}) + +figma.connect(MeterIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1000-47', { + example: () => , +}) + +figma.connect(StopwatchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1010', { + example: () => , +}) + +figma.connect(CodescanCheckmarkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1944-22', { + example: () => , +}) + +figma.connect(ProjectSymlinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-122', { + example: () => , +}) + +figma.connect(TelescopeFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2558-74', { + example: () => , +}) + +figma.connect(UploadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-159', { + example: () => , +}) + +figma.connect(MoveToEndIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4548-129', { + example: () => , +}) + +figma.connect(MoveToStartIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4548-128', { + example: () => , +}) + +figma.connect(PinSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-115', { + example: () => , +}) + +figma.connect(SidebarCollapseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3757-108', { + example: () => , +}) + +figma.connect(MentionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-138', { + example: () => , +}) + +figma.connect(CacheIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5480-568', { + example: () => , +}) + +figma.connect(XCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-966', { + example: () => , +}) + +figma.connect(TriangleRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-22', { + example: () => , +}) + +figma.connect(HubotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-182', { + example: () => , +}) + +figma.connect(TableIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1914-7', { + example: () => , +}) + +figma.connect(HomeFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5448-177', { + example: () => , +}) + +figma.connect(StarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-54', { + example: () => , +}) + +figma.connect(AlertFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3971-109', { + example: () => , +}) + +figma.connect(AlertIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-333', { + example: () => , +}) + +figma.connect(HeartIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-981', { + example: () => , +}) + +figma.connect(PersonAddIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1910-79', { + example: () => , +}) + +figma.connect(HistoryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-186', { + example: () => , +}) + +figma.connect(MailIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-142', { + example: () => , +}) + +figma.connect(KeyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-160', { + example: () => , +}) + +figma.connect(TelescopeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-40', { + example: () => , +}) + +figma.connect(LocationIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-146', { + example: () => , +}) + +figma.connect(BrowserIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1917-85', { + example: () => , +}) + +figma.connect(SponsorTiersIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-126', { + example: () => , +}) + +figma.connect(DeviceCameraVideoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-262', { + example: () => , +}) + +figma.connect(PaintbrushIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-41', { + example: () => , +}) + +figma.connect(UnmuteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-12', { + example: () => , +}) + +figma.connect(ArchiveIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-331', { + example: () => , +}) + +figma.connect(PlugIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-108', { + example: () => , +}) + +figma.connect(TelescopeFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2510-81', { + example: () => , +}) + +figma.connect(RubyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-33', { + example: () => , +}) + +figma.connect(MeterIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-40', { + example: () => , +}) + +figma.connect(BookmarkSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-306', { + example: () => , +}) + +figma.connect(KeyAsteriskIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2176-4', { + example: () => , +}) + +figma.connect(GiftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-210', { + example: () => , +}) + +figma.connect(TagIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-44', { + example: () => , +}) + +figma.connect(IdBadgeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-233', { + example: () => , +}) + +figma.connect(GearIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-212', { + example: () => , +}) + +figma.connect(BriefcaseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-37', { + example: () => , +}) + +figma.connect(UnlockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-14', { + example: () => , +}) + +figma.connect(HourglassIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=72-2031', { + example: () => , +}) + +figma.connect(FiscalHostIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4525-108', { + example: () => , +}) + +figma.connect(BellSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-314', { + example: () => , +}) + +figma.connect(ImageIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-180', { + example: () => , +}) + +figma.connect(ClockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-282', { + example: () => , +}) + +figma.connect(BookIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-310', { + example: () => , +}) + +figma.connect(MortarBoardIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-134', { + example: () => , +}) + +figma.connect(DeviceMobileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-260', { + example: () => , +}) + +figma.connect(MegaphoneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=17-2', { + example: () => , +}) + +figma.connect(ProjectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-102', { + example: () => , +}) + +figma.connect(GraphIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-194', { + example: () => , +}) + +figma.connect(SquirrelIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=949-92', { + example: () => , +}) + +figma.connect(CalendarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-302', { + example: () => , +}) + +figma.connect(MuteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-132', { + example: () => , +}) + +figma.connect(BookmarkSlashFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5421-137', { + example: () => , +}) + +figma.connect(ProjectSymlinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-126', { + example: () => , +}) + +figma.connect(TrashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-28', { + example: () => , +}) + +figma.connect(ToolsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-30', { + example: () => , +}) + +figma.connect(GlobeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-198', { + example: () => , +}) + +figma.connect(TabExternalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-240', { + example: () => , +}) + +figma.connect(BeakerIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-319', { + example: () => , +}) + +figma.connect(VideoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1737-14', { + example: () => , +}) + +figma.connect(ClockFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-128', { + example: () => , +}) + +figma.connect(MultiSelectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1666-78', { + example: () => , +}) + +figma.connect(RocketIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-82', { + example: () => , +}) + +figma.connect(DownloadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-158', { + example: () => , +}) + +figma.connect(CheckboxIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3752-125', { + example: () => , +}) + +figma.connect(CheckboxIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3752-130', { + example: () => , +}) + +figma.connect(ShareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-70', { + example: () => , +}) + +figma.connect(RepoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-867', { + example: () => , +}) + +figma.connect(ArrowSwitchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3042-217', { + example: () => , +}) + +figma.connect(RepoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-92', { + example: () => , +}) + +figma.connect(GitCompareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-950', { + example: () => , +}) + +figma.connect(VersionsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-907', { + example: () => , +}) + +figma.connect(IssueReopenedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-945', { + example: () => , +}) + +figma.connect(AlertFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2621-75', { + example: () => , +}) + +figma.connect(GitPullRequestDraftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2059-95', { + example: () => , +}) + +figma.connect(ThreeBarsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-36', { + example: () => , +}) + +figma.connect(FileAddedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3480-124', { + example: () => , +}) + +figma.connect(FileDiffIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-232', { + example: () => , +}) + +figma.connect(SmileyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-56', { + example: () => , +}) + +figma.connect(VerifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1039', { + example: () => , +}) + +figma.connect(LinkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-154', { + example: () => , +}) + +figma.connect(ReadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-105', { + example: () => , +}) + +figma.connect(FileDirectoryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3162-228', { + example: () => , +}) + +figma.connect(FileDirectoryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-933', { + example: () => , +}) + +figma.connect(TagIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-894', { + example: () => , +}) + +figma.connect(CodeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=183-247', { + example: () => , +}) + +figma.connect(PeopleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-116', { + example: () => , +}) + +figma.connect(GitBranchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-208', { + example: () => , +}) + +figma.connect(HomeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-184', { + example: () => , +}) + +figma.connect(NoteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-130', { + example: () => , +}) + +figma.connect(ShieldLockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-62', { + example: () => , +}) + +figma.connect(CodespacesIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1946-77', { + example: () => , +}) + +figma.connect(VerifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-6', { + example: () => , +}) + +figma.connect(GitCommitIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-206', { + example: () => , +}) + +figma.connect(BookmarkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-308', { + example: () => , +}) + +figma.connect(DotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-246', { + example: () => , +}) + +figma.connect(MilestoneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-136', { + example: () => , +}) + +figma.connect(DeviceCameraIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5479-552', { + example: () => , +}) + +figma.connect(ChecklistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-296', { + example: () => , +}) + +figma.connect(PencilIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-976', { + example: () => , +}) + +figma.connect(RepoForkedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-876', { + example: () => , +}) + +figma.connect(QuestionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-98', { + example: () => , +}) + +figma.connect(CheckCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=29-0', { + example: () => , +}) + +figma.connect(StarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-982', { + example: () => , +}) + +figma.connect(PinIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-114', { + example: () => , +}) + +figma.connect(CommentDiscussionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-272', { + example: () => , +}) + +figma.connect(LockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-144', { + example: () => , +}) + +figma.connect(InfoIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-174', { + example: () => , +}) + +figma.connect(GitMergeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-202', { + example: () => , +}) + +figma.connect(WorkflowIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-2', { + example: () => , +}) + +figma.connect(TrophyIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4678-122', { + example: () => , +}) + +figma.connect(ShareAndroidIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-68', { + example: () => , +}) + +figma.connect(PulseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-100', { + example: () => , +}) + +figma.connect(CommentIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-274', { + example: () => , +}) + +figma.connect(AlertIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-913', { + example: () => , +}) + +figma.connect(FileZipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-224', { + example: () => , +}) + +figma.connect(LogIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2975-234', { + example: () => , +}) + +figma.connect(LawIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-929', { + example: () => , +}) + +figma.connect(LawIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-158', { + example: () => , +}) + +figma.connect(ThumbsupIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-32', { + example: () => , +}) + +figma.connect(StrikethroughIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1554-86', { + example: () => , +}) + +figma.connect(ThumbsupIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-969', { + example: () => , +}) + +figma.connect(BellFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2562-75', { + example: () => , +}) + +figma.connect(HeartFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-977', { + example: () => , +}) + +figma.connect(BugIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2314-131', { + example: () => , +}) + +figma.connect(ChecklistIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-920', { + example: () => , +}) + +figma.connect(CommentDiscussionIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-943', { + example: () => , +}) + +figma.connect(FileBadgeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5460-483', { + example: () => , +}) + +figma.connect(PencilIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-118', { + example: () => , +}) + +figma.connect(MarkdownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=23-72', { + example: () => , +}) + +figma.connect(FoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-218', { + example: () => , +}) + +figma.connect(PackageIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-126', { + example: () => , +}) + +figma.connect(MarkGithubIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-140', { + example: () => , +}) + +figma.connect(DeviceCameraIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5479-559', { + example: () => , +}) + +figma.connect(FileDirectoryOpenFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3161-214', { + example: () => , +}) + +figma.connect(RelFilePathIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4223-105', { + example: () => , +}) + +figma.connect(IssueClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-172', { + example: () => , +}) + +figma.connect(DuplicateIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2384-80', { + example: () => , +}) + +figma.connect(FileCodeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=32-99', { + example: () => , +}) + +figma.connect(ChevronRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-924', { + example: () => , +}) + +figma.connect(ReadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4297-111', { + example: () => , +}) + +figma.connect(ArrowDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1038', { + example: () => , +}) + +figma.connect(OrganizationIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-128', { + example: () => , +}) + +figma.connect(StopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-50', { + example: () => , +}) + +figma.connect(FileDirectoryFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-230', { + example: () => , +}) + +figma.connect(FileBadgeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1102-74', { + example: () => , +}) + +figma.connect(CheckIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-919', { + example: () => , +}) + +figma.connect(FileDirectoryFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1042', { + example: () => , +}) + +figma.connect(ChevronDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4445-119', { + example: () => , +}) + +figma.connect(NoEntryIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2594-82', { + example: () => , +}) + +figma.connect(CircleSlashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-286', { + example: () => , +}) + +figma.connect(ProjectRoadmapIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-127', { + example: () => , +}) + +figma.connect(GoalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4238-106', { + example: () => , +}) + +figma.connect(OrganizationIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-865', { + example: () => , +}) + +figma.connect(XCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=964-34', { + example: () => , +}) + +figma.connect(CheckCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-975', { + example: () => , +}) + +figma.connect(StackIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2500-98', { + example: () => , +}) + +figma.connect(DashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=186-7', { + example: () => , +}) + +figma.connect(IssueClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-956', { + example: () => , +}) + +figma.connect(LightBulbIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1037', { + example: () => , +}) + +figma.connect(CopilotErrorIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5199-124', { + example: () => , +}) + +figma.connect(IssueTracksIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4098-111', { + example: () => , +}) + +figma.connect(IssueTrackedByIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4098-112', { + example: () => , +}) + +figma.connect(CopilotWarningIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5199-122', { + example: () => , +}) + +figma.connect(IssueTracksIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4098-109', { + example: () => , +}) + +figma.connect(IssueTrackedByIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4098-110', { + example: () => , +}) + +figma.connect(EyeClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-965', { + example: () => , +}) + +figma.connect(BookmarkFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5421-130', { + example: () => , +}) + +figma.connect(ListUnorderedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-960', { + example: () => , +}) + +figma.connect(ListUnorderedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-148', { + example: () => , +}) + +figma.connect(SingleSelectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-16', { + example: () => , +}) + +figma.connect(XCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=210-7', { + example: () => , +}) + +figma.connect(DeviceDesktopIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=32-77', { + example: () => , +}) + +figma.connect(DiffIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-954', { + example: () => , +}) + +figma.connect(FlameIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1050', { + example: () => , +}) + +figma.connect(FileSymlinkFileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-872', { + example: () => , +}) + +figma.connect(ProjectIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1007', { + example: () => , +}) + +figma.connect(PasteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-898', { + example: () => , +}) + +figma.connect(FlameIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-220', { + example: () => , +}) + +figma.connect(TableIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1914-4', { + example: () => , +}) + +figma.connect(FileSymlinkFileIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-226', { + example: () => , +}) + +figma.connect(XCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2621-76', { + example: () => , +}) + +figma.connect(CheckCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2617-90', { + example: () => , +}) + +figma.connect(CpuIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-270', { + example: () => , +}) + +figma.connect(DesktopDownloadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=32-72', { + example: () => , +}) + +figma.connect(IssueOpenedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1043', { + example: () => , +}) + +figma.connect(DatabaseIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1029', { + example: () => , +}) + +figma.connect(HeartFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-188', { + example: () => , +}) + +figma.connect(CodeSquareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-951', { + example: () => , +}) + +figma.connect(PackageIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-934', { + example: () => , +}) + +figma.connect(ShieldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-66', { + example: () => , +}) + +figma.connect(UnfoldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-16', { + example: () => , +}) + +figma.connect(PlusCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-104', { + example: () => , +}) + +figma.connect(StackIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2500-91', { + example: () => , +}) + +figma.connect(DashIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-992', { + example: () => , +}) + +figma.connect(ThreeBarsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=5451-237', { + example: () => , +}) + +figma.connect(BookmarkIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-973', { + example: () => , +}) + +figma.connect(CheckCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1005', { + example: () => , +}) + +figma.connect(BookIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-983', { + example: () => , +}) + +figma.connect(GearIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1036', { + example: () => , +}) + +figma.connect(DotFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-935', { + example: () => , +}) + +figma.connect(DotFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-244', { + example: () => , +}) + +figma.connect(FoldDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-216', { + example: () => , +}) + +figma.connect(RepoPushIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-88', { + example: () => , +}) + +figma.connect(PlayIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-110', { + example: () => , +}) + +figma.connect(CodespacesIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=1946-76', { + example: () => , +}) + +figma.connect(PlusIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-917', { + example: () => , +}) + +figma.connect(TriangleDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-886', { + example: () => , +}) + +figma.connect(ShieldIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1026', { + example: () => , +}) + +figma.connect(GlobeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1021', { + example: () => , +}) + +figma.connect(PlusCircleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1004', { + example: () => , +}) + +figma.connect(FileSubmoduleIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-228', { + example: () => , +}) + +figma.connect(MilestoneIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-904', { + example: () => , +}) + +figma.connect(PinIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4986-124', { + example: () => , +}) + +figma.connect(HomeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-964', { + example: () => , +}) + +figma.connect(ZapIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=966-29', { + example: () => , +}) + +figma.connect(SearchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-955', { + example: () => , +}) + +figma.connect(GraphIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-875', { + example: () => , +}) + +figma.connect(StarFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-52', { + example: () => , +}) + +figma.connect(GrabberIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-196', { + example: () => , +}) + +figma.connect(FoldUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-214', { + example: () => , +}) + +figma.connect(RepoLockedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3161-219', { + example: () => , +}) + +figma.connect(CrossReferenceIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-266', { + example: () => , +}) + +figma.connect(LinkExternalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-152', { + example: () => , +}) + +figma.connect(ArrowRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-323', { + example: () => , +}) + +figma.connect(LogoGithubIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=181-78', { + example: () => , +}) + +figma.connect(TerminalIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-38', { + example: () => , +}) + +figma.connect(SparkleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4525-109', { + example: () => , +}) + +figma.connect(CheckCircleFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-298', { + example: () => , +}) + +figma.connect(EyeClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-236', { + example: () => , +}) + +figma.connect(CalendarIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-869', { + example: () => , +}) + +figma.connect(CodeSquareIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-276', { + example: () => , +}) + +figma.connect(DiffIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-84', { + example: () => , +}) + +figma.connect(DiffModifiedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-252', { + example: () => , +}) + +figma.connect(ChevronUpIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-288', { + example: () => , +}) + +figma.connect(CopilotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3567-115', { + example: () => , +}) + +figma.connect(CopilotIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4977-111', { + example: () => , +}) + +figma.connect(TriangleDownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-26', { + example: () => , +}) + +figma.connect(ColumnsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2062-9', { + example: () => , +}) + +figma.connect(ArrowUpRightIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=246-91', { + example: () => , +}) + +figma.connect(LightBulbIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-156', { + example: () => , +}) + +figma.connect(ClockFillIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4119-124', { + example: () => , +}) + +figma.connect(ClockIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-1022', { + example: () => , +}) + +figma.connect(CheckIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-300', { + example: () => , +}) + +figma.connect(SyncIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=179-949', { + example: () => , +}) + +figma.connect(UploadIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4549-152', { + example: () => , +}) + +figma.connect(PasteIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-284', { + example: () => , +}) + +figma.connect(FilterIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-222', { + example: () => , +}) + +figma.connect(PlusIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-106', { + example: () => , +}) + +figma.connect(AppsIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2976-223', { + example: () => , +}) + +figma.connect(BellIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-316', { + example: () => , +}) + +figma.connect(InboxIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-178', { + example: () => , +}) + +figma.connect(PaperclipIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=3751-104', { + example: () => , +}) + +figma.connect(ArrowLeftIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-325', { + example: () => , +}) + +figma.connect(XIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=4834-124', { + example: () => , +}) + +figma.connect(XIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-0', { + example: () => , +}) + +figma.connect(StopwatchIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-48', { + example: () => , +}) + +figma.connect(GitPullRequestIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-200', { + example: () => , +}) + +figma.connect(GitPullRequestClosedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=2059-88', { + example: () => , +}) + +figma.connect(ThumbsdownIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-34', { + example: () => , +}) + +figma.connect(CodeIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-280', { + example: () => , +}) + +figma.connect(IssueOpenedIcon, 'https://figma.com/file/1ljgTFkT5NKNRfq5hw07JQ/?node-id=13-170', { + example: () => , +}) diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx new file mode 100644 index 00000000000..453ca560411 --- /dev/null +++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx @@ -0,0 +1,95 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import {Button, IconButton, Box} from '..' +import Label from '../Label' +import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react' + +import {PageHeader} from './PageHeader' + +const meta: Meta = { + title: 'Drafts/Components/PageHeader/DevOnly', + parameters: { + layout: 'fullscreen', + controls: {expanded: true}, + }, +} + +export default meta + +export const LargeVariantWithMultilineTitle = () => ( + + + + + + + + + + + Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong + looong words here some extra loooong looong words here some extra loooong looong words here + + + + + + + + + + + + + +) + +export const ArrayTypeFontSizeOnTitle = () => ( + + + + + Issue Title + + + + +) + +export const ThemeBaseFontSizeOnTitle = () => ( + + + + + Issue Title + + + + +) + +export const StringTypeFontSizeOnTitle = () => ( + + + + + Issue Title + + + + +) diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx index 13f4fa2bbeb..03888a105d0 100644 --- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx +++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx @@ -1,6 +1,20 @@ import React from 'react' import type {Meta} from '@storybook/react' -import {Button, IconButton, Breadcrumbs, Link, Text, StateLabel, BranchName, Box, PageLayout} from '..' +import { + Button, + IconButton, + Breadcrumbs, + Link, + Text, + StateLabel, + BranchName, + Box, + PageLayout, + Timeline, + Octicon, + Heading, + Token, +} from '..' import { KebabHorizontalIcon, GitBranchIcon, @@ -9,9 +23,11 @@ import { CommitIcon, ChecklistIcon, FileDiffIcon, - ArrowRightIcon, TriangleDownIcon, CheckIcon, + CopyIcon, + CrossReferenceIcon, + PaperclipIcon, } from '@primer/octicons-react' import {PageHeader} from './PageHeader' @@ -19,7 +35,6 @@ import {Hidden} from '../Hidden' import {UnderlineNav} from '../UnderlineNav' import {ActionMenu} from '../ActionMenu' import {ActionList} from '../ActionList' -import VisuallyHidden from '../_VisuallyHidden' const meta: Meta = { title: 'Drafts/Components/PageHeader/Examples', @@ -38,22 +53,19 @@ const setViewportParamToNarrow = { export const Webhooks = () => ( - - Repository settings - Webhooks - - - - - - - - - - + + Repository settings + context bar + + + + + + + ) @@ -67,54 +79,44 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow export const PullRequestPage = () => ( - - Pull requests - PageHeader component initial layout explorations extra long pull request title - - - - - - - - - alert('Edit button action')}>Edit - alert('Code button action')}>Code - - - - - - - - - - - - - - Open - - - - broccolinisoup - {' '} - wants to merge 3 commits into main from{' '} - bs/pageheader-title - - + + Pull requests + + - - main - - page-header-initial - + + + + + + + alert('Edit button action')}>Edit + alert('Code button action')}>Code + + + + + + + + + + + + Open + + + broccolinisoup + {' '} + wants to merge 3 commits into main from{' '} + bs/pageheader-title + @@ -145,8 +147,15 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow export const FilesPage = () => ( + + / + + PageHeader.tsx + + + - Files + Files @@ -211,19 +220,23 @@ export const FilesPage = () => ( - + react - src - + src + PageHeader - - PageHeader.tsx - + {/* The last item of the breadcrumb is usually has "selected" prop and it renders as a plain text. We are not leveraging this here because the title + (last item of the breacdrumb component) is a heading and it is should be the first dom element in the page to avoid any interactive content before the heading (A11y feedback.) */} - PageHeader.tsx - + + + + + + @@ -265,9 +278,18 @@ export const FilesPage = () => ( - - + + + + This is where the content of the file will be displayed. + ) @@ -280,58 +302,47 @@ export const WithPageLayout = () => { - - Pull requests - PageHeader component initial layout explorations extra long pull request title   #1831 - - - {/* Pop up actions */} - - - - - - - alert('Edit button action')}>Edit - alert('Code button action')}>Code - - - - - - - - - - - - - - Open - - - - broccolinisoup - {' '} - wants to merge 3 commits into main from{' '} - - broccolinisoup/switch-to-new-underlineNav - - - + + Pull requests + + - - main - - page-header-initial - + {/* Pop up actions */} + + + + + + + alert('Edit button action')}>Edit + alert('Code button action')}>Code + + + + + + + + + + + + + Open + + + broccolinisoup + {' '} + wants to merge 3 commits into main from{' '} + broccolinisoup/switch-to-new-underlineNav + @@ -358,6 +369,7 @@ export const WithPageLayout = () => { Assignees + No one — + + + + { + alert('This button copies the permalink to the clipboard') + }} + /> + + + + + + + + { + alert('This button copies the permalink to the clipboard') + }} + /> + + + + + Open + + + + + +

Context

+ PageHeader will be responsible to determine the arrangement of the top-level headings, side actions, header + metadata, parent links, and how all these elements adapt to different devices, pointer types, and smaller, + mobile-friendly viewports. + +
    +
  • Primer documentation site: https://primer.style
    • +
  • Primer React storybook: https://primer.style/react/storybook/
    • +
+ + + + + + + + + + broccolinisoup + + mentioned this on Jul 20, 2022 + + + + + + + + + lesliecdubbs + + added react and accessibility labels on Jul 12, 2022 + + + + + + + + + + Assignees + + + No one — + + + + + + Labels + + + alert('react token is selected')} text="react" /> + alert('accessibility token is selected')} text="accessibility" /> + + + + + + ) +} + FilesPageOnNarrowViewport.parameters = setViewportParamToNarrow export default meta diff --git a/packages/react/src/PageHeader/PageHeader.features.stories.tsx b/packages/react/src/PageHeader/PageHeader.features.stories.tsx index be1ecb732d5..d5f22fb5fa7 100644 --- a/packages/react/src/PageHeader/PageHeader.features.stories.tsx +++ b/packages/react/src/PageHeader/PageHeader.features.stories.tsx @@ -16,7 +16,6 @@ import { GitBranchIcon, KebabHorizontalIcon, } from '@primer/octicons-react' -import VisuallyHidden from '../_VisuallyHidden' import {PageHeader} from './PageHeader' import {Hidden} from '../Hidden' @@ -66,26 +65,6 @@ export const WithLeadingAndTrailingVisuals = () => ( ) -export const WithComponentAsATitle = () => ( - - - - - react - src - - PageHeader - - - PageHeader.tsx - - - PageHeader.tsx - - - -) - export const WithLeadingVisualHiddenOnRegularViewport = () => ( @@ -113,32 +92,34 @@ export const WithActions = () => ( Title - - - - - - + + + + + + ) export const WithDescriptionSlot = () => ( - - add-pageheader-docs - - - - - broccolinisoup - {' '} - created this branch 5 days ago · 14 commits · updated today - - + + + add-pageheader-docs + + + + + broccolinisoup + {' '} + created this branch 5 days ago · 14 commits · updated today + + + ) @@ -194,14 +175,14 @@ export const WithLeadingAndTrailingActions = () => ( - - - Title - - - + + + + + + ) @@ -209,6 +190,9 @@ export const WithLeadingAndTrailingActions = () => ( export const WithParentLinkAndActionsOfContextArea = () => ( + + Title + Parent Link @@ -219,9 +203,6 @@ export const WithParentLinkAndActionsOfContextArea = () => ( - - Title - ) @@ -235,15 +216,18 @@ WithParentLinkAndActionsOfContextArea.parameters = { export const WithContextBarAndActionsOfContextArea = () => ( + + Title + react - src - + src + PageHeader - + PageHeader.tsx @@ -255,9 +239,6 @@ export const WithContextBarAndActionsOfContextArea = () => ( - - Title - ) @@ -272,15 +253,15 @@ export const WithActionsThatHaveResponsiveContent = () => ( Webhooks - - - - - - - - + + + + + + + + ) diff --git a/packages/react/src/PageHeader/PageHeader.stories.tsx b/packages/react/src/PageHeader/PageHeader.stories.tsx index adb5e74a31c..3025b65ecb0 100644 --- a/packages/react/src/PageHeader/PageHeader.stories.tsx +++ b/packages/react/src/PageHeader/PageHeader.stories.tsx @@ -22,13 +22,14 @@ import {OcticonArgType} from '../utils/story-helpers' import {PageHeader} from './PageHeader' import Hidden from '../Hidden' -export default { +const meta: Meta = { title: 'Drafts/Components/PageHeader', parameters: { layout: 'fullscreen', controls: {expanded: true}, }, args: { + // @ts-ignore custom type for story hasContextArea: false, hasParentLink: true, ParentLink: 'Previous page', @@ -48,6 +49,7 @@ export default { hasNavigation: false, }, argTypes: { + // @ts-ignore custom type for story hasContextArea: { type: 'boolean', table: { @@ -181,11 +183,28 @@ export default { description: 'Description region/slot', }, }, -} as Meta +} + +export default meta export const Playground: Story = args => ( + + + + + - - - - - - - + + + + +