implemented figma. added few widgets. (#710)

iberdinsky-skilld · dawehner · commit 3876b96bae2e · 2019-04-19T07:31:59.000+01:00
* implemented figma. added few widgets.

* added figma to components workspace, added test
diff --git a/packages/admin-ui/.storybook/addons.js b/packages/admin-ui/.storybook/addons.js
@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import 'storybook-addon-jsx/register';
 import '@storybook/addon-knobs/register'
+import 'storybook-addon-figma/register'
diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
@@ -80,6 +80,7 @@
     "react-test-renderer": "^16.6.3",
     "redux-saga-test-plan": "^3.6.0",
     "storybook": "^1.0.0",
+    "storybook-addon-figma": "^0.1.0",
     "storybook-addon-jsx": "^5.3.0",
     "typescript-eslint-parser": "^21.0.1"
   },
diff --git a/packages/admin-ui/src/components/02_atoms/Widgets/Widgets.stories.js b/packages/admin-ui/src/components/02_atoms/Widgets/Widgets.stories.js
@@ -2,6 +2,8 @@ import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { storiesOf } from '@storybook/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
+import figmaDecorator from 'storybook-addon-figma';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { boolean, number, object, text } from '@storybook/addon-knobs/react';
@@ -41,13 +43,20 @@ const item = i => {
   };
 };
 
-storiesOf('Widgets/BooleanCheckbox', module).addWithJSX('Default', () => (
-  <BooleanCheckbox
-    fieldName="ControlOne"
-    label={text('BooleanCheckbox: label', 'CheckBox')}
-    onChange={onChangeAction}
-  />
-));
+storiesOf('Widgets/BooleanCheckbox', module)
+  .addDecorator(
+    figmaDecorator({
+      url:
+        'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=2061%3A2386',
+    }),
+  )
+  .addWithJSX('Default', () => (
+    <BooleanCheckbox
+      fieldName="ControlOne"
+      label={text('BooleanCheckbox: label', 'CheckBox')}
+      onChange={onChangeAction}
+    />
+  ));
 
 storiesOf('Widgets/DatetimeTimestamp', module).addWithJSX('Default', () => (
   <DatetimeTimestamp
@@ -190,46 +199,68 @@ storiesOf('Widgets/NumberTextfield', module).addWithJSX('Default', () => (
   />
 ));
 
-storiesOf('Widgets/OptionsSelect', module).addWithJSX('Default', () => (
-  <OptionsSelect
-    helpText={text('OptionsSelect:helpText', 'Help text.')}
-    fieldName="option"
-    inputProps={object('OptionsSelect:inputProps', {
-      allowed_values: {
-        one: 'One',
-        two: 'Two',
-        three: 'Three',
-        four: 'Four',
-      },
-      allowed_values_function: '',
-    })}
-    label={text('OptionsSelect:label', 'A Simple Label')}
-    onChange={onChangeAction}
-    schema={object('OptionsSelect: schema', {
-      enum: ['One', 'Two', 'Three', 'Four'],
-      default: 'Two',
-    })}
-    value={text('OptionsSelect: value', 'Entered text.')}
-  />
-));
-storiesOf('Widgets/StringTextfield', module).addWithJSX('Default', () => (
-  <StringTextfield
-    fieldName="userBio"
-    label={text('StringTextfield: label', 'A Simple Label')}
-    onChange={onChangeAction}
-    value={text('StringTextfield: value', 'Entered text.')}
-  />
-));
+storiesOf('Widgets/OptionsSelect', module)
+  .addDecorator(
+    figmaDecorator({
+      url:
+        'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=2061%3A1971',
+    }),
+  )
+  .addWithJSX('Default', () => (
+    <OptionsSelect
+      helpText={text('OptionsSelect:helpText', 'Help text.')}
+      fieldName="option"
+      inputProps={object('OptionsSelect:inputProps', {
+        allowed_values: {
+          one: 'One',
+          two: 'Two',
+          three: 'Three',
+          four: 'Four',
+        },
+        allowed_values_function: '',
+      })}
+      label={text('OptionsSelect:label', 'A Simple Label')}
+      onChange={onChangeAction}
+      schema={object('OptionsSelect: schema', {
+        enum: ['One', 'Two', 'Three', 'Four'],
+        default: 'Two',
+      })}
+      value={text('OptionsSelect: value', 'Entered text.')}
+    />
+  ));
 
-storiesOf('Widgets/TextTextarea', module).addWithJSX('Default', () => (
-  <TextTextarea
-    fieldName="SummaryText"
-    label={text('TextTextarea: label', 'A Simple wysiwyg editor')}
-    name="summaryText"
-    onChange={onChangeAction}
-    value={object('TextTextarea: value', {
-      value:
-        'Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    })}
-  />
-));
+storiesOf('Widgets/StringTextfield', module)
+  .addDecorator(
+    figmaDecorator({
+      url:
+        'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=2057%3A1349',
+    }),
+  )
+  .addWithJSX('Default', () => (
+    <StringTextfield
+      fieldName="userBio"
+      label={text('StringTextfield: label', 'A Simple Label')}
+      onChange={onChangeAction}
+      value={text('StringTextfield: value', 'Entered text.')}
+    />
+  ));
+
+storiesOf('Widgets/TextTextarea', module)
+  .addDecorator(
+    figmaDecorator({
+      url:
+        'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=2061%3A1805',
+    }),
+  )
+  .addWithJSX('Default', () => (
+    <TextTextarea
+      fieldName="SummaryText"
+      label={text('TextTextarea: label', 'A Simple wysiwyg editor')}
+      name="summaryText"
+      onChange={onChangeAction}
+      value={object('TextTextarea: value', {
+        value:
+          'Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      })}
+    />
+  ));
diff --git a/packages/components/.storybook/addons.js b/packages/components/.storybook/addons.js
@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import 'storybook-addon-jsx/register';
 import '@storybook/addon-knobs/register'
+import 'storybook-addon-figma/register'
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -22,6 +22,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "^5.0.0",
+    "storybook-addon-figma": "^0.1.0",
     "@storybook/addon-knobs": "^5.0.0",
     "@storybook/addons": "^5.0.0",
     "@storybook/react": "^5.0.0",
diff --git a/packages/components/src/Components/Button/Button.stories.js b/packages/components/src/Components/Button/Button.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/react';
+import figmaDecorator from 'storybook-addon-figma';
+import { text } from '@storybook/addon-knobs/react';
+/* eslint-enable import/no-extraneous-dependencies */
+import AdminUIButton from './Button';
+
+const buttonText = 'Button';
+
+storiesOf('AdminUIButton', module)
+  .addDecorator(
+    figmaDecorator({
+      url:
+        'https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=656%3A491',
+    }),
+  )
+  .addWithJSX('Default', () => (
+    <AdminUIButton variant="contained">
+      {text('Button Text', buttonText)}
+    </AdminUIButton>
+  ));
diff --git a/yarn.lock b/yarn.lock
@@ -1053,7 +1053,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
   integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
@@ -8100,7 +8100,7 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -13079,7 +13079,7 @@ react-inspector@^2.3.0, react-inspector@^2.3.1:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.5.2, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.5.2, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@@ -13138,17 +13138,18 @@ react-redux-loading-bar@^4.1.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.2"
 
-react-redux@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.0.2.tgz#34b280a3482aaf60e7d4a504b1295165cbe6b86a"
-  integrity sha512-uKRuMgQt8dWbcz0U75oFK5tDo3boyAKrqvf/j94vpqRFFZfyDDy4kofUgloFIGyuKTq2Zz51zgK9RzOTFXk5ew==
+react-redux@^5.0.7:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f"
+  integrity sha512-LE7Ned+cv5qe7tMV5BPYkGQ5Lpg8gzgItK07c67yHvJ8t0iaD9kPFPAli/mYkiyJYrs2pJgExR2ZgsGqlrOApg==
   dependencies:
-    "@babel/runtime" "^7.4.3"
-    hoist-non-react-statics "^3.3.0"
+    "@babel/runtime" "^7.1.2"
+    hoist-non-react-statics "^3.1.0"
     invariant "^2.2.4"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^16.8.6"
+    loose-envify "^1.1.0"
+    prop-types "^15.6.1"
+    react-is "^16.6.0"
+    react-lifecycles-compat "^3.0.0"
 
 react-resize-detector@^3.2.1:
   version "3.4.0"
@@ -14708,6 +14709,11 @@ stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
+storybook-addon-figma@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/storybook-addon-figma/-/storybook-addon-figma-0.1.0.tgz#4c1e1af62e822aebd43332c43b7c3b63dc6ba4e8"
+  integrity sha512-OQztazEB8h12DUjRCRW/g40OfiJsek1nBQXx5PIy9jXl+1kfQyVOmXIj3NuECzjCwLagnlKubZybRVHoTkusdA==
+
 storybook-addon-jsx@^5.3.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/storybook-addon-jsx/-/storybook-addon-jsx-5.4.0.tgz#3e703bdecf54621269f2aa394004265cf1e9bda9"
