add a11y and figma addons

betterplace · Apr 28, 2022 · d3b9575 · d3b9575
1 parent bddce86
commit d3b9575
Show file tree

Hide file tree

Showing 6 changed files with 1,031 additions and 676 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 .history
+
+.env
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -6,7 +6,9 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y", // TODO: vite fix https://github.com/storybookjs/storybook/pull/17997
+    "storybook-addon-designs"
   ],
   "framework": "@storybook/react",
   "core": {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import { withDesign } from "storybook-addon-designs";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +8,8 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}
+
+export const decorators = [
+  withDesign
+];
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
+    "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.21",
     "@storybook/addon-essentials": "^6.4.21",
     "@storybook/addon-interactions": "^6.4.21",
@@ -43,6 +44,7 @@
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",
     "babel-loader": "^8.2.4",
+    "storybook-addon-designs": "^6.2.1",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.0.5"

diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -11,6 +11,13 @@ export default {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  parameters: {
+    design: {
+      type: 'figspec',
+      accessToken: process.env.STORYBOOK_FIGMA_ACCESS_TOKEN,
+      url: 'https://www.figma.com/file/PJ7OUutWRrSHW6qgaPNW1l/Design-System-betterplace-GENERAL?node-id=361%3A1874',
+    }
+  }
 } as ComponentMeta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,3 +23,5 @@ dist-ssr @@
     *.sln
     *.sw?
     .history
+    .env