@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap

@@ -0,0 +1,551 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AlertDialog> Snapshots and structure should render story 'Default' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-info"
+  dialogProps={
+    {
+      "aria-describedby": "uid-description",
+      "aria-labelledby": "uid-title",
+      "id": "uid",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="blue"
+          icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="uid-title"
+        >
+          Default (info)
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="uid-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="blue"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Confirm
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'Error' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-error"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="red"
+          icon="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          Error
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="red"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'RichDescription' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-info"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="blue"
+          icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          With Rich Description
+        </h2>
+      }
+    />
+  </header>
+  <div
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Amet ut elit dolore irure mollit 
+    <strong>
+      sunt culpa esse
+    </strong>
+    .
+    <br />
+    Ea ut Lorem.
+    <br />
+    <Link
+      href="https://example.com"
+      target="_blank"
+    >
+      Link
+    </Link>
+  </div>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="blue"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'Success' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-success"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="green"
+          icon="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          Success
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="green"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'Warning' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-warning"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="yellow"
+          icon="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          Warning
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="yellow"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-info"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="blue"
+          icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          With Cancel
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            emphasis="medium"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Cancel
+          </Button>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="blue"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'WithForwardedProps' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-info"
+  dialogProps={
+    {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    {
+      "current": undefined,
+    }
+  }
+  size="tiny"
+>
+  <header>
+    <Toolbar
+      before={
+        <Icon
+          color="blue"
+          icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          size="s"
+        />
+      }
+      className="lumx-spacing-margin-horizontal"
+      label={
+        <h2
+          className="lumx-typography-title"
+          id="alert-dialog-title"
+        >
+          With Forwarded Props
+        </h2>
+      }
+    />
+  </header>
+  <p
+    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+    id="alert-dialog-description"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </p>
+  <footer>
+    <Toolbar
+      after={
+        <React.Fragment>
+          <Button
+            emphasis="medium"
+            onClick={[Function]}
+            size="m"
+            style={
+              {
+                "color": "blue",
+              }
+            }
+            theme="light"
+          >
+            Cancel
+          </Button>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="blue"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            style={
+              {
+                "color": "red",
+              }
+            }
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;

package/dist/src/components/alert-dialog/index.ts

@@ -0,0 +1 @@
+export * from './AlertDialog';

package/dist/src/components/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo, useRef, useState } from 'react';
+
+import { Autocomplete, List, ListItem, Size } from '@lumx/react';
+
+import { CITIES } from './__mockData__';
+
+export default { title: 'LumX components/autocomplete/Autocomplete' };
+
+const cityNames = CITIES.map((city) => city.text);
+
+export const Simple = ({ theme }: any) => {
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [value, setValue] = useState('');
+    const inputRef = useRef(null);
+
+    const filteredCities = useMemo(
+        () =>
+            cityNames.filter((city) => {
+                const noSpacesCity = city.replace(' ', '').toLowerCase();
+                return noSpacesCity.includes(value.replace(' ', '').toLowerCase());
+            }),
+        [value],
+    );
+
+    const close = () => setShowSuggestions(false);
+
+    const setSelectedCity = (city: string) => {
+        setValue(city);
+        setShowSuggestions(false);
+    };
+    const selectItem = (city: string) => () => setSelectedCity(city);
+
+    const onChange = (newValue: string) => {
+        setValue(newValue);
+        setShowSuggestions(newValue.length > 0);
+    };
+
+    const { activeItemIndex } = List.useKeyboardListNavigation(filteredCities, inputRef, setSelectedCity);
+
+    const onFocus = () => setShowSuggestions(value.length > 0);
+
+    const hasSuggestions = filteredCities.length > 0;
+
+    return (
+        <Autocomplete
+            theme={theme}
+            isOpen={showSuggestions && hasSuggestions}
+            onClose={close}
+            value={value}
+            onChange={onChange}
+            onFocus={onFocus}
+            inputRef={inputRef}
+        >
+            {hasSuggestions && (
+                <List isClickable>
+                    {filteredCities.map((city, index) => (
+                        <ListItem
+                            size={Size.tiny}
+                            key={city}
+                            isHighlighted={index === activeItemIndex}
+                            onItemSelected={selectItem(city)}
+                        >
+                            <div>{city}</div>
+                        </ListItem>
+                    ))}
+                </List>
+            )}
+        </Autocomplete>
+    );
+};