PGF-531: fix Dropdown props

.storybook/preview-head.html

@@ -1,7 +1,3 @@
 <style>
     @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
-
-    body {
-        font-family: 'Open Sans', sans-serif;
-    }
 </style>

src/lib/Dropdown/Dropdown.js

@@ -4,43 +4,43 @@ import DaInput from '../DaInput/DaInput';
 import Popin from '../Popin/Popin';
 import { DropdownBase, InvisibleCloseButton } from './style';
 
-const Dropdown = props => {
-    const [isActive, setActive] = useState(props.isActive || false);
+const Dropdown = ({ isActive, children, ...rest }) => {
+    const [isOpen, setOpen] = useState(isActive);
 
     useEffect(() => {
-        setActive(props.isActive);
-    }, [props.isActive]);
+        setOpen(isActive);
+    }, [isActive]);
 
     return (
-        <DropdownBase {...props}>
-            {isActive && !props.isActive ? (
-                <InvisibleCloseButton onClick={() => setActive(!isActive)} />
+        <DropdownBase {...rest}>
+            {isOpen && !isActive ? (
+                <InvisibleCloseButton onClick={() => setOpen(!isOpen)} />
             ) : null}
 
-            {React.Children.map(props.children, (child, index) => {
-                if (!child) {
-                    return null;
+            {React.Children.map(children, (child, index) => {
+                switch (child && child.type) {
+                    case null:
+                        return null;
+
+                    case DaInput:
+                        return React.cloneElement(child, {
+                            onClick: () => setOpen(!isOpen),
+                            key: index,
+                        });
+
+                    case Popin:
+                        return React.cloneElement(child, {
+                            isActive: isOpen,
+                            key: index,
+                        });
+
+                    default:
+                        return React.cloneElement(child, {
+                            onClick: () => setOpen(!isOpen),
+                            isActive: isOpen,
+                            key: index,
+                        });
                 }
-
-                if (child.type === DaInput) {
-                    return React.cloneElement(child, {
-                        onClick: () => setActive(!isActive),
-                        key: index,
-                    });
-                }
-
-                if (child.type === Popin) {
-                    return React.cloneElement(child, {
-                        isActive: isActive,
-                        key: index,
-                    });
-                }
-
-                return React.cloneElement(child, {
-                    onClick: () => setActive(!isActive),
-                    isActive: isActive,
-                    key: index,
-                });
             })}
         </DropdownBase>
     );

src/lib/Dropdown/__snapshots__/Dropdown.test.js.snap

@@ -17,7 +17,7 @@ exports[`renders without crashing 1`] = `
     </svg>
   </span>
   <div
-    className="style__PopinBase-sc-1ky0zqo-0 jPbMBY"
+    className="style__PopinBase-sc-1ky0zqo-0 kIQbUy"
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

src/lib/FormControl/FormControl.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import {
     folder,
-    arrowBlockOptions,
+    blockPositionOptions,
     buttonSizeOptions,
     fontSizeOptions,
     formStatusOptions,
@@ -122,7 +122,7 @@ storiesOf(folder.form + 'FormControl', module)
 
             {boolean('Is DaHelp clicked', true) ? (
                 <Message
-                    arrowBlock={arrowBlockOptions.topRight}
+                    arrowBlock={blockPositionOptions.topRight}
                     blockWidth={inputWidthOptions.sm}
                 >
                     {MessageContent}
@@ -149,7 +149,7 @@ storiesOf(folder.form + 'FormControl', module)
             />
 
             <Message
-                arrowBlock={arrowBlockOptions.topLeft}
+                arrowBlock={blockPositionOptions.topLeft}
                 fieldSize={buttonSizeOptions.sm}
                 blockWidth={inputWidthOptions.xs}
             >

src/lib/HistogramBar/HistogramBar.js

@@ -6,7 +6,7 @@ import {
     colorThemeOptions,
     colorThemeDefault,
     spaceOptions,
-    arrowBlockOptions,
+    blockPositionOptions,
     fontSizeOptions,
     inputWidthOptions,
     inputWidthDefault,
@@ -35,7 +35,7 @@ const HistogramBar = ({ value, maxValue, label, legend, ...rest }) => {
                     colorType={colorTypeOptions.reverse}
                     colorPallet={colorPalletDefault}
                     colorTheme={rest.colorTheme}
-                    arrowBlock={arrowBlockOptions.bottomCenter}
+                    arrowBlock={blockPositionOptions.bottomCenter}
                     blockWidth={inputWidthOptions.xs}
                     fieldSize={buttonSizeOptions.sm}
                 >

src/lib/Message/Message.js

@@ -12,15 +12,24 @@ import {
     formStatusDefault,
     inputWidthOptions,
     inputWidthDefault,
-    arrowBlockOptions,
-    arrowBlockDefault,
+    blockPositionOptions,
+    blockPositionDefault,
     spaceOptions,
     spaceDefault,
 } from '../../shared/constants';
 import { MessageBase } from './style';
 
-const Message = props => {
-    return <MessageBase {...props}>{props.children}</MessageBase>;
+const Message = ({ arrowBlock, children, ...rest }) => {
+    const arrow =
+        arrowBlock === blockPositionOptions.center
+            ? blockPositionOptions.topCenter
+            : arrowBlock;
+
+    return (
+        <MessageBase {...rest} arrowBlock={arrow}>
+            {children}
+        </MessageBase>
+    );
 };
 
 Message.propTypes = {
@@ -33,7 +42,7 @@ Message.propTypes = {
     colorStatus: PropTypes.oneOf(Object.values(formStatusOptions)),
     blockWidth: PropTypes.oneOf(Object.values(inputWidthOptions)),
     fieldSize: PropTypes.oneOf(Object.values(buttonSizeOptions)),
-    arrowBlock: PropTypes.oneOf(Object.values(arrowBlockOptions)),
+    arrowBlock: PropTypes.oneOf(Object.values(blockPositionOptions)),
     marginTop: PropTypes.oneOf(Object.values(spaceOptions)),
     marginBottom: PropTypes.oneOf(Object.values(spaceOptions)),
 };
@@ -45,7 +54,7 @@ Message.defaultProps = {
     colorStatus: formStatusDefault,
     blockWidth: inputWidthDefault,
     fieldSize: buttonSizeDefault,
-    arrowBlock: arrowBlockDefault,
+    arrowBlock: blockPositionDefault,
     marginTop: spaceDefault,
     marginBottom: spaceDefault,
 };

src/lib/Message/Message.stories.js

@@ -14,8 +14,8 @@ import {
     formStatusDefault,
     inputWidthOptions,
     inputWidthDefault,
-    arrowBlockOptions,
-    arrowBlockDefault,
+    blockPositionOptions,
+    blockPositionDefault,
     iconSizeOptions,
     fontSizeOptions,
     spaceOptions,
@@ -38,8 +38,8 @@ storiesOf(folder.popup + 'Message', module)
         <Message
             arrowBlock={select(
                 arrowBlockLabel,
-                arrowBlockOptions,
-                arrowBlockDefault,
+                blockPositionOptions,
+                blockPositionDefault,
             )}
             colorType={radios(
                 'Color type',
@@ -86,8 +86,8 @@ storiesOf(folder.popup + 'Message', module)
         <Message
             arrowBlock={radios(
                 arrowBlockLabel,
-                arrowBlockOptions,
-                arrowBlockDefault,
+                blockPositionOptions,
+                blockPositionDefault,
             )}
             colorStatus={select(
                 colorStatusLabel,

src/lib/Popin/Popin.js

@@ -6,31 +6,53 @@ import {
     radiusDefault,
     spaceOptions,
     spaceDefault,
-    alignOptions,
-    alignDefault,
+    blockPositionOptions,
 } from '../../shared/constants';
 import { PopinBase } from './style';
 
-const Popin = props => {
-    return <PopinBase {...props}>{props.children}</PopinBase>;
+const Popin = ({ align, children, ...rest }) => {
+    let blockPosition = align;
+
+    switch (blockPosition) {
+        case blockPositionOptions.left:
+        case blockPositionOptions.none:
+            blockPosition = blockPositionOptions.bottomLeft;
+            break;
+
+        case blockPositionOptions.center:
+            blockPosition = blockPositionOptions.bottomCenter;
+            break;
+
+        case blockPositionOptions.right:
+            blockPosition = blockPositionOptions.bottomRight;
+            break;
+    }
+
+    return (
+        <PopinBase {...rest} align={blockPosition}>
+            {children}
+        </PopinBase>
+    );
 };
 
 Popin.propTypes = {
     isActive: PropTypes.bool,
     marginTop: PropTypes.oneOf(Object.values(spaceOptions)),
+    marginBottom: PropTypes.oneOf(Object.values(spaceOptions)),
     blockWidth: PropTypes.oneOf(Object.values(spaceOptions)),
     radiusSize: PropTypes.oneOf(Object.values(radiusOptions)),
     shadowSize: PropTypes.oneOf(Object.values(shadowSizeOptions)),
-    align: PropTypes.oneOf(Object.values(alignOptions)),
+    align: PropTypes.oneOf(Object.values(blockPositionOptions)),
 };
 
 Popin.defaultProps = {
     isActive: false,
     marginTop: spaceDefault,
+    marginBottom: spaceDefault,
     blockWidth: spaceOptions.md,
     radiusSize: radiusDefault,
     shadowSize: shadowSizeOptions.sm,
-    align: alignDefault,
+    align: blockPositionOptions.bottomLeft,
 };
 
 export default Popin;

src/lib/Popin/Popin.stories.js

@@ -10,8 +10,7 @@ import {
     greyOptions,
     spaceOptions,
     spaceDefault,
-    alignOptions,
-    alignDefault,
+    blockPositionOptions,
     fontSizeOptions,
 } from '../../shared/constants';
 import Title from '../Title/Title';
@@ -21,40 +20,48 @@ import Popin from './Popin';
 storiesOf(folder.popup + 'Popin', module)
     .addDecorator(withKnobs)
     .add('Popin', () => (
-        <Popin
-            isActive={boolean('Is active', true)}
-            blockWidth={select(
-                'Width',
-                spaceOptions,
-                spaceOptions.sm,
-            )}
-            radiusSize={select('Radius size', radiusOptions, radiusDefault)}
-            shadowSize={select(
-                'Shadow size',
-                shadowSizeOptions,
-                shadowSizeOptions.sm,
-            )}
-            marginTop={select('Margin top', spaceOptions, spaceDefault)}
-            align={select('Alignment', alignOptions, alignDefault)}
-        >
-            <Title
-                marginTop={spaceOptions.xs}
-                marginLateral={spaceOptions.xs}
-                colorPallet={colorPalletOptions.wab}
-                colorWab={greyOptions.grey60}
-                textSize={fontSizeOptions.sm}
+        <div style={{ position: 'relative', marginTop: '100px' }}>
+            <Popin
+                isActive={boolean('Is active', true)}
+                align={select(
+                    'Align',
+                    blockPositionOptions,
+                    blockPositionOptions.left,
+                )}
+                blockWidth={select('Width', spaceOptions, spaceOptions.sm)}
+                radiusSize={select('Radius size', radiusOptions, radiusDefault)}
+                shadowSize={select(
+                    'Shadow size',
+                    shadowSizeOptions,
+                    shadowSizeOptions.sm,
+                )}
+                marginTop={select('Margin top', spaceOptions, spaceDefault)}
+                marginBottom={select(
+                    'Margin bottom',
+                    spaceOptions,
+                    spaceDefault,
+                )}
             >
-                Demo
-            </Title>
+                <Title
+                    marginTop={spaceOptions.xs}
+                    marginLateral={spaceOptions.xs}
+                    colorPallet={colorPalletOptions.wab}
+                    colorWab={greyOptions.grey60}
+                    textSize={fontSizeOptions.sm}
+                >
+                    Demo
+                </Title>
 
-            <Text
-                marginTop={spaceOptions.sm}
-                marginLateral={spaceOptions.xs}
-                marginBottom={spaceOptions.xs}
-                textSize={fontSizeOptions.sm}
-            >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </Text>
-        </Popin>
+                <Text
+                    marginTop={spaceOptions.sm}
+                    marginLateral={spaceOptions.xs}
+                    marginBottom={spaceOptions.xs}
+                    textSize={fontSizeOptions.sm}
+                >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                </Text>
+            </Popin>
+        </div>
     ));

src/lib/Popin/__snapshots__/Popin.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders without crashing 1`] = `
 <div
-  className="style__PopinBase-sc-1ky0zqo-0 jPbMBY"
+  className="style__PopinBase-sc-1ky0zqo-0 kIQbUy"
 >
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </div>