MNT Support Storybook v7

silverstripe · May 30, 2023 · d61d5a6 · d61d5a6
1 parent 2906a86
commit d61d5a6
Show file tree

Hide file tree

Showing 5 changed files with 1,451 additions and 1,447 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/components/TagField.scss b/client/src/components/TagField.scss
@@ -39,7 +39,7 @@
 }
 
 .ss-tag-field__option-count-icon {
-  padding: 0 ($spacer / 2);
+  padding: 0 calc($spacer / 2);
   line-height: 0.8;
 }
 

diff --git a/client/src/components/tests/TagField-story.js b/client/src/components/tests/TagField-story.js
@@ -1,14 +1,19 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Component as TagField } from '../TagField';
+import TagField from 'components/TagField';
 
-storiesOf('TagField/TagField', module)
-  .addDecorator(storyFn => (
-    <div style={{ width: '250px' }} className="ss-tag-field">
-      {storyFn()}
-    </div>
-  ))
-  .add('Simple Example', () => (
+export default {
+    title: 'TagField/TagField',
+
+    decorators: [
+        (storyFn) => (
+            <div style={{ width: '250px' }} className="ss-tag-field">
+                {storyFn()}
+            </div>
+        ),
+    ],
+};
+
+export const SimpleExample = () => (
     <TagField
       name="test"
       options={[
@@ -19,8 +24,9 @@ storiesOf('TagField/TagField', module)
         { Title: 'Five', Value: 5 },
       ]}
     />
-  ))
-  .add('Multiple Selection', () => (
+);
+
+export const MultipleSelection = () => (
     <TagField
       name="test"
       multi
@@ -32,5 +38,4 @@ storiesOf('TagField/TagField', module)
         { Title: 'Five', Value: 5 },
       ]}
     />
-  ))
-;
+);
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.7.3",
     "url": "^0.11.0"
   },
   "devDependencies": {