@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-import { Button, Dropdown, ExpansionPanel, List, ListItem, Placement, Size } from '@lumx/react';
-
-export default { title: 'LumX components/expansion-panel/ExpansionPanel' };
-
-export const ExpansionPanelInADropdown = () => {
-    const anchorDropdownButton = React.useRef(null);
-
-    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
-    const closeDropdown = () => setIsDropdownOpen(false);
-
-    const [isExpansionPanelOpen, setIsExpansionPanelOpen] = React.useState(false);
-
-    const toggleExpansionPanel = (shouldOpen: boolean, evt: React.MouseEvent) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        setIsExpansionPanelOpen(shouldOpen);
-    };
-
-    const onItemSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeDropdown();
-    };
-
-    return (
-        <>
-            <Button ref={anchorDropdownButton} onClick={toggleDropdown}>
-                Open dropdown
-            </Button>
-            <Dropdown
-                closeOnClickAway
-                closeOnEscape
-                isOpen={isDropdownOpen}
-                onClose={closeDropdown}
-                placement={Placement.BOTTOM_START}
-                anchorRef={anchorDropdownButton}
-            >
-                <List>
-                    <ListItem onItemSelected={onItemSelected('paris')} size={Size.tiny}>
-                        Paris
-                    </ListItem>
-                    <ExpansionPanel
-                        label="Lorem ipsum"
-                        isOpen={isExpansionPanelOpen}
-                        onToggleOpen={(shouldOpen, event) => toggleExpansionPanel(shouldOpen, event)}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    >
-                        <header>
-                            <ListItem size={Size.tiny}>United States</ListItem>
-                        </header>
-                        <ListItem onItemSelected={onItemSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onItemSelected('newyork')} size={Size.tiny}>
-                            New York
-                        </ListItem>
-                    </ExpansionPanel>
-                </List>
-            </Dropdown>
-        </>
-    );
-};

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

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Flag /> Snapshots and structure should render story 'defaultProps' 1`] = `
-<div
-  className="lumx-flag lumx-flag--color-dark"
->
-  <span
-    className="lumx-flag__label"
-  >
-    hearing
-  </span>
-</div>
-`;
-
-exports[`<Flag /> Snapshots and structure should render story 'withColor' 1`] = `
-[
-  <div
-    className="lumx-flag lumx-flag--color-blue"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      blue
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-dark"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      dark
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-green"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      green
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-primary"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      primary
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-red"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      red
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-secondary"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      secondary
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-yellow"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      yellow
-    </span>
-  </div>,
-]
-`;
-
-exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
-<div
-  className="lumx-flag lumx-flag--color-dark"
->
-  <Icon
-    className="lumx-flag__icon"
-    icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-    size="xxs"
-  />
-  <span
-    className="lumx-flag__label"
-  >
-    hearing
-  </span>
-</div>
-`;

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -1,492 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FlexBox> Snapshots and structure should render story 'Align' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      style={
-        {
-          "height": 200,
-        }
-      }
-      theme="light"
-    >
-      Button
-    </Button>
-    <FlexBox
-      style={
-        {
-          "height": "fit-content",
-        }
-      }
-    >
-      Some text
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box"
-    style={
-      {
-        "height": "fit-content",
-      }
-    }
-  >
-    Some text
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
-<header
-  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
->
-  <div>
-    Element 1
-  </div>
-  <div>
-    Element 2
-  </div>
-  <div>
-    Element 2
-  </div>
-</header>
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
-<div
-  className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
-  style={
-    {
-      "border": "1px solid red",
-      "height": "300px",
-      "width": "720px",
-    }
-  }
->
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 1
-  </Button>
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 2
-  </Button>
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 3
-  </Button>
-</div>
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
-[
-  <div
-    className="lumx-flex-box"
-  >
-    <FlexBox>
-      <Icon
-        icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
-      />
-    </FlexBox>
-    <FlexBox>
-      Some text in a div
-    </FlexBox>
-    <FlexBox>
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        OK
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Icon
-      icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
-    />
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    Some text in a div
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      OK
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 1
-    </Button>
-    <FlexBox
-      vAlign="left"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 2
-      </Button>
-    </FlexBox>
-    <FlexBox>
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 3
-      </Button>
-    </FlexBox>
-    <FlexBox
-      vAlign="right"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 4
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 2
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 3
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 4
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal"
-    style={
-      {
-        "border": "1px solid red",
-        "height": "300px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Default
-    </Button>
-    <FlexBox
-      hAlign="top"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Top
-      </Button>
-    </FlexBox>
-    <FlexBox
-      fillSpace={true}
-      hAlign="center"
-      vAlign="center"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Center button
-      </Button>
-    </FlexBox>
-    <FlexBox
-      hAlign="bottom"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Bottom
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--h-align-top"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Top
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Center button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--h-align-bottom"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Bottom
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'NoShrinkFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal"
-    style={
-      {
-        "border": "1px solid red",
-        "width": "150px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-    <FlexBox
-      noShrink={true}
-    >
-      Some long text
-    </FlexBox>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--no-shrink"
-  >
-    Some long text
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'VerticalFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical"
-    style={
-      {
-        "border": "1px solid red",
-        "height": "300px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Default
-    </Button>
-    <FlexBox
-      vAlign="left"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Left
-      </Button>
-    </FlexBox>
-    <FlexBox
-      fillSpace={true}
-      hAlign="center"
-      vAlign="center"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Center button
-      </Button>
-    </FlexBox>
-    <FlexBox
-      vAlign="right"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Right
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Left
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Center button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Right
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'WrapFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--wrap"
-    style={
-      {
-        "border": "1px solid red",
-        "width": "150px",
-      }
-    }
-  >
-    <FlexBox
-      fillSpace={true}
-      orientation="vertical"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Button
-      </Button>
-    </FlexBox>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-]
-`;