@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/radio-button/__snapshots__/RadioButton.test.tsx.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RadioButton> Snapshots and structure should render checked, disabled & id 1`] = `
+<div
+  className="lumx-radio-button lumx-radio-button--is-checked lumx-radio-button--is-disabled lumx-radio-button--theme-light"
+>
+  <div
+    className="lumx-radio-button__input-wrapper"
+  >
+    <input
+      checked={true}
+      className="lumx-radio-button__input-native"
+      disabled={true}
+      id="inputID"
+      onChange={[Function]}
+      tabIndex={-1}
+      type="radio"
+    />
+    <div
+      className="lumx-radio-button__input-placeholder"
+    >
+      <div
+        className="lumx-radio-button__input-background"
+      />
+      <div
+        className="lumx-radio-button__input-indicator"
+      />
+    </div>
+  </div>
+  <div
+    className="lumx-radio-button__content"
+  />
+</div>
+`;
+
+exports[`<RadioButton> Snapshots and structure should render defaults 1`] = `
+<div
+  className="lumx-radio-button lumx-radio-button--is-unchecked lumx-radio-button--theme-light"
+>
+  <div
+    className="lumx-radio-button__input-wrapper"
+  >
+    <input
+      className="lumx-radio-button__input-native"
+      id="fixedId"
+      onChange={[Function]}
+      tabIndex={0}
+      type="radio"
+    />
+    <div
+      className="lumx-radio-button__input-placeholder"
+    >
+      <div
+        className="lumx-radio-button__input-background"
+      />
+      <div
+        className="lumx-radio-button__input-indicator"
+      />
+    </div>
+  </div>
+  <div
+    className="lumx-radio-button__content"
+  />
+</div>
+`;
+
+exports[`<RadioButton> Snapshots and structure should render label & helper 1`] = `
+<div
+  className="lumx-radio-button lumx-radio-button--is-unchecked lumx-radio-button--theme-light"
+>
+  <div
+    className="lumx-radio-button__input-wrapper"
+  >
+    <input
+      aria-describedby="fixedId-helper"
+      className="lumx-radio-button__input-native"
+      id="fixedId"
+      onChange={[Function]}
+      tabIndex={0}
+      type="radio"
+    />
+    <div
+      className="lumx-radio-button__input-placeholder"
+    >
+      <div
+        className="lumx-radio-button__input-background"
+      />
+      <div
+        className="lumx-radio-button__input-indicator"
+      />
+    </div>
+  </div>
+  <div
+    className="lumx-radio-button__content"
+  >
+    <InputLabel
+      className="lumx-radio-button__label"
+      htmlFor="fixedId"
+      theme="light"
+    >
+      Label
+    </InputLabel>
+    <InputHelper
+      className="lumx-radio-button__helper"
+      id="fixedId-helper"
+      kind="info"
+      theme="light"
+    >
+      Helper
+    </InputHelper>
+  </div>
+</div>
+`;

package/dist/src/components/radio-button/__snapshots__/RadioGroup.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RadioGroup> Snapshots and structure should render defaults 1`] = `
+<div
+  className="lumx-radio-group"
+/>
+`;
+
+exports[`<RadioGroup> Snapshots and structure should render with radio button children 1`] = `
+<div
+  className="lumx-radio-group"
+>
+  <RadioButton
+    isChecked={true}
+    key="0"
+    label="Label 1"
+    theme="light"
+  />
+  <RadioButton
+    isChecked={false}
+    key="1"
+    label="Label 2"
+    theme="light"
+  />
+</div>
+`;

package/dist/src/components/radio-button/index.ts

@@ -0,0 +1,2 @@
+export * from './RadioButton';
+export * from './RadioGroup';

package/dist/src/components/select/Select.stories.tsx

@@ -0,0 +1,399 @@
+import { mdiBullhornOutline } from '@lumx/icons/';
+import { List, ListItem, Select, Size, TextField } from '@lumx/react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { text } from '@storybook/addon-knobs';
+import noop from 'lodash/noop';
+import range from 'lodash/range';
+import React, { SyntheticEvent, useState } from 'react';
+import { SelectVariant } from './constants';
+
+export default { title: 'LumX components/select/Select' };
+
+const CHOICES = ['First item', 'Second item', 'Third item'];
+
+export const SimpleSelect = ({ theme }: any) => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            icon={mdiBullhornOutline}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const SimpleSelectWithInfiniteScroll = ({ theme }: any) => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+    const [items, setItems] = useState(CHOICES);
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onInfinite = () => {
+        setItems([...items, ...range(10).map((i) => `item ${items.length + i}`)]);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            onInfiniteScroll={onInfinite}
+        >
+            <List isClickable>
+                {items.length > 0
+                    ? items.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const DisabledSelect = ({ theme }: any) => {
+    return (
+        <Select
+            isOpen={false}
+            value=""
+            label={text('label', 'My select')}
+            placeholder={text('placeholder', 'Placeholder')}
+            theme={theme}
+            onInputClick={noop}
+            onDropdownClose={noop}
+            isDisabled
+        >
+            <List theme={theme} isClickable>
+                <ListItem key={0} size={Size.tiny}>
+                    No data
+                </ListItem>
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithClearButton = ({ theme }: any) => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, newValue: string) => {
+        event.stopPropagation();
+        setValue(newValue);
+    };
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            onClear={clearSelected}
+            clearButtonProps={{ label: 'Clear' }}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithAnotherField = ({ theme }: any) => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [blurred, setWasBlurred] = useState('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, newValue: string) => {
+        event.stopPropagation();
+        setValue(newValue);
+    };
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onBlur = () => {
+        setWasBlurred('was blurred');
+    };
+
+    return (
+        <>
+            <TextField
+                value={text('Value', 'myvalue')}
+                label={text('Label', 'I am the label')}
+                placeholder={text('Placeholder', 'ex: A value')}
+                theme={theme}
+                onChange={noop}
+            />
+            <Select
+                style={{ width: '100%' }}
+                isOpen={isOpen}
+                value={value}
+                onClear={clearSelected}
+                clearButtonProps={{ label: 'Clear' }}
+                label={LABEL}
+                placeholder={PLACEHOLDER}
+                theme={theme}
+                onInputClick={toggleSelect}
+                onDropdownClose={closeSelect}
+                onBlur={onBlur}
+            >
+                <List isClickable>
+                    {CHOICES.length > 0
+                        ? CHOICES.map((choice) => (
+                              <ListItem
+                                  isSelected={value === choice}
+                                  key={choice}
+                                  onItemSelected={selectItem(choice)}
+                                  size={Size.tiny}
+                              >
+                                  {choice}
+                              </ListItem>
+                          ))
+                        : [
+                              <ListItem key={0} size={Size.tiny}>
+                                  No data
+                              </ListItem>,
+                          ]}
+                </List>
+            </Select>
+            {blurred}
+        </>
+    );
+};
+
+export const SelectWithNoData = ({ theme }: any) => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(true);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label={text('label', 'My select')}
+            placeholder={text('placeholder', 'Placeholder')}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List theme={theme} isClickable>
+                <ListItem key={0} size={Size.tiny}>
+                    No data
+                </ListItem>
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithHelper = ({ theme }: any) => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label={text('label', 'Country')}
+            placeholder={text('placeholder', 'Your country')}
+            theme={theme}
+            helper={text('helper', 'This is used in analytics')}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List theme={theme} isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithError = ({ theme }: any) => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label={text('label', 'Country')}
+            placeholder={text('placeholder', 'Your country')}
+            theme={theme}
+            helper={text('helper', 'This is used in analytics')}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            hasError
+            error={text('Error', 'Please select something :)')}
+        >
+            <List theme={theme} isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectSuccess = ({ theme }: any) => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label={text('label', 'Country')}
+            placeholder={text('placeholder', 'Your country')}
+            theme={theme}
+            helper={text('helper', 'This is used in analytics')}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            isValid
+        >
+            <List theme={theme} isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithChipVariant = ({ theme }: any) => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onClear = () => setValue('');
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            variant={SelectVariant.chip}
+            onClear={onClear}
+            clearButtonProps={{ label: 'Clear' }}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};