@lumx/react 3.1.4 → 3.2.0

package/src/components/dropdown/Dropdown.stories.tsx

@@ -1,195 +1,10 @@
 import range from 'lodash/range';
 import React, { useRef, useState } from 'react';
 
-import { mdiHome } from '@lumx/icons';
-import {
-    Alignment,
-    Button,
-    Dropdown,
-    FlexBox,
-    IconButton,
-    List,
-    ListItem,
-    Orientation,
-    Placement,
-    Size,
-} from '@lumx/react';
+import { Button, Dropdown, List, ListItem } from '@lumx/react';
 
 export default { title: 'LumX components/dropdown/Dropdown' };
 
-export const MatchAnchorWithMinWidth = () => {
-    const buttonRef1 = useRef<any>(null);
-    const buttonRef2 = useRef<any>(null);
-    return (
-        <>
-            <div>Match anchor width only if the dropdown is smaller</div>
-            <FlexBox orientation={Orientation.horizontal}>
-                <IconButton label="Home" icon={mdiHome} ref={buttonRef1} />
-                <Dropdown anchorRef={buttonRef1} isOpen>
-                    Big dropdown
-                </Dropdown>
-
-                <FlexBox marginAuto={Alignment.left}>
-                    <Button ref={buttonRef2}>Big button with long text</Button>
-                </FlexBox>
-                <Dropdown anchorRef={buttonRef2} isOpen>
-                    Small Dropdown
-                </Dropdown>
-            </FlexBox>
-        </>
-    );
-};
-
-export const LongPagePlacement = () => {
-    const anchorFirstRef = React.useRef(null);
-    const [isFirstOpen, setFirstIsOpen] = React.useState(false);
-    const toggleFirstMenu = () => setFirstIsOpen(!isFirstOpen);
-    const closeFirstMenu = () => setFirstIsOpen(false);
-
-    const onFirstMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeFirstMenu();
-    };
-
-    const anchorSecondRef = React.useRef(null);
-    const [isSecondOpen, setSecondIsOpen] = React.useState(false);
-    const toggleSecondMenu = () => setSecondIsOpen(!isSecondOpen);
-    const closeSecondMenu = () => setSecondIsOpen(false);
-
-    const onSecondMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeSecondMenu();
-    };
-
-    const anchorThirdRef = React.useRef(null);
-    const [isThirdOpen, setThirdIsOpen] = React.useState(false);
-    const toggleThirdMenu = () => setThirdIsOpen(!isThirdOpen);
-    const closeThirdMenu = () => setThirdIsOpen(false);
-
-    const onThirdMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeThirdMenu();
-    };
-
-    return (
-        <div className="demo-grid">
-            Scroll down and open the dropdown.
-            <div style={{ marginTop: '100px' }}>
-                <Button ref={anchorFirstRef} onClick={toggleFirstMenu}>
-                    First Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isFirstOpen}
-                    onClose={closeFirstMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorFirstRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onFirstMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-            <div style={{ marginTop: '1000px' }}>
-                <Button ref={anchorSecondRef} onClick={toggleSecondMenu}>
-                    Second Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isSecondOpen}
-                    onClose={closeSecondMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorSecondRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onSecondMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-            <div style={{ marginTop: '2000px' }}>
-                <Button ref={anchorThirdRef} onClick={toggleThirdMenu}>
-                    Third Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isThirdOpen}
-                    onClose={closeThirdMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorThirdRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onThirdMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-        </div>
-    );
-};
-LongPagePlacement.parameters = {
-    // Disables Chromatic snapshot (not relevant for this story).
-    chromatic: { disable: true },
-};
-
 export const InfiniteScroll = () => {
     const buttonRef = useRef(null);
     const [items, setItems] = useState(range(10));

package/src/components/flag/Flag.stories.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import { text } from '@storybook/addon-knobs';
-
 import { mdiHeart } from '@lumx/icons';
 import { ColorPalette, Flag } from '@lumx/react';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+export default {
+    title: 'LumX components/flag/Flag',
+    component: Flag,
+    argTypes: { color: colorArgType, icon: iconArgType },
+    args: { ...Flag.defaultProps, label: 'Label' },
+};
+
+/**
+ * Default flag with label
+ */
+export const Default = {};
 
-export default { title: 'LumX components/flag/Flag' };
+/**
+ * With icon
+ */
+export const WithIcon = { args: { icon: mdiHeart } };
 
-export const defaultProps = ({ theme }: any) => <Flag label={text('Label', 'hearing')} theme={theme} />;
-export const withIcon = ({ theme }: any) => <Flag icon={mdiHeart} label={text('Label', 'hearing')} theme={theme} />;
-export const withColor = ({ theme }: any) => {
-    return (
-        <>
-            <Flag color={ColorPalette.blue} icon={mdiHeart} label="blue" theme={theme} />
-            <Flag color={ColorPalette.dark} icon={mdiHeart} label="dark" theme={theme} />
-            <Flag color={ColorPalette.green} icon={mdiHeart} label="green" theme={theme} />
-            <Flag color={ColorPalette.primary} icon={mdiHeart} label="primary" theme={theme} />
-            <Flag color={ColorPalette.red} icon={mdiHeart} label="red" theme={theme} />
-            <Flag color={ColorPalette.secondary} icon={mdiHeart} label="secondary" theme={theme} />
-            <Flag color={ColorPalette.yellow} icon={mdiHeart} label="yellow" theme={theme} />
-        </>
-    );
+/**
+ * All `color` variants
+ */
+export const AllColors = {
+    ...WithIcon,
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: { key: 'color', options: withUndefined(ColorPalette) },
+            },
+        }),
+    ],
 };

package/src/components/flag/Flag.test.tsx

@@ -4,11 +4,10 @@ import React, { ReactElement } from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
-import { itShouldRenderStories, commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Flag, FlagProps } from './Flag';
-import * as stories from './Flag.stories';
 
 const CLASSNAME = Flag.className as string;
 
@@ -31,12 +30,6 @@ const setup = (propOverrides: Partial<FlagProps> = {}, shallowRendering = true)
 };
 
 describe(`<${Flag.displayName} />`, () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Flag);
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
     describe('Conditions', () => {
         it('should use the icon', () => {
             const { iconEl } = setup({ icon: mdiAbTesting });