feat(ReactSelect): example updated

wfp · Mar 6, 2019 · e3e2636 · e3e2636
1 parent cb0e025
commit e3e2636
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 54 deletions.
diff --git a/src/components/Modal/Modal-story.js b/src/components/Modal/Modal-story.js
@@ -87,6 +87,47 @@ storiesOf('Modal', module)
       </p>
     </Modal>
   ))
+  .add('Long Content (Draft)', () => (
+    <Modal {...props.default()}>
+      <p className="wfp--modal-content__text">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
+        est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+        amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+        ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+        elitr, sed diam nonumy eirmod tempor.
+      </p>
+    </Modal>
+  ))
   .add('Dialog Page (draft)', () => (
     <Modal {...props.dialog()}>
       <p className="wfp--modal-content__text">

diff --git a/src/components/Modal/_modal.scss b/src/components/Modal/_modal.scss
@@ -78,7 +78,7 @@
 
     @media (min-width: 1024px) {
       max-width: 50%;
-      max-height: 80%;
+      max-height: 100%;
       .#{$prefix}--modal--wide & {
         max-width: 80%;
       }

diff --git a/src/components/ReactSelect/ReactSelectWrapper.js b/src/components/ReactSelect/ReactSelectWrapper.js
diff --git a/src/components/ReactSelect/_react-select.scss b/src/components/ReactSelect/_react-select.scss
@@ -10,6 +10,7 @@
 @include exports('react-select') {
   .#{$prefix}--react-select-container {
     width: 100%;
+    order: 2;
     .#{$prefix}--react-select__control {
       border-radius: 0;
       background-color: $field-01;

diff --git a/src/components/ReduxFormWrapper/ReduxFormWrapper-story.js b/src/components/ReduxFormWrapper/ReduxFormWrapper-story.js
@@ -69,6 +69,7 @@ const props = {
       ],
     onClick: action('onClick'),
     labelText: text('Label (labelText)', 'Label Text'),
+    helperText: text('Helper text (helperText)', 'This is a helper text'),
     name: text('Name', 'input'),
     placeholder: text('Placeholder', 'Placeholder content here'),
     required: boolean('Required (required)', true),

diff --git a/src/components/ReduxFormWrapper/ReduxFormWrapperReactSelect-story.js b/src/components/ReduxFormWrapper/ReduxFormWrapperReactSelect-story.js
@@ -30,17 +30,22 @@ storiesOf('ReduxFormWrapper', module)
         <label htmlFor={props.id} className="wfp--label">
           {props.labelText}
         </label>
-        <ReactSelect {...props} />
+        {props.helperText && (
+          <div className="wfp--form__helper-text">{props.helperText}</div>
+        )}
+        <ReactSelect
+          {...props}
+          className="wfp--react-select-container"
+          classNamePrefix="wfp--react-select"
+        />
       </div>
     );
 
     return (
       <Field
         component={ReduxFormWrapper}
         InputComponent={ReactSelectHelper}
-        className="wfp--react-select-container"
-        classNamePrefix="wfp--react-select"
-        isMulti
+        helperText="This is a helper text"
         labelText="The label"
         options={options}
       />