@lumx/react 3.1.0 → 3.1.2

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

@@ -1,551 +0,0 @@
-// 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

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

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

@@ -1,70 +0,0 @@
-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>
-    );
-};