@lumx/react 2.0.0-alpha.0 → 2.0.1

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -158,3 +158,32 @@ export const RichDescription = ({ theme }: any) => {
         </>
     );
 };
+
+export const WithForwardedProps = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                {...defaultProps}
+                title="With Forwarded Props"
+                isOpen={isOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                cancelProps={{
+                    label: 'Cancel',
+                    onClick: closeDialog,
+                    style: { color: 'blue' },
+                }}
+                confirmProps={{
+                    onClick: () => alert('confirm'),
+                    label: 'OK',
+                    style: { color: 'red' },
+                }}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};

package/src/components/alert-dialog/AlertDialog.tsx

@@ -2,7 +2,18 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { DialogProps, Dialog, Button, Emphasis, ColorPalette, Icon, Size, Kind, Toolbar } from '@lumx/react';
+import {
+    DialogProps,
+    Dialog,
+    Button,
+    Emphasis,
+    ColorPalette,
+    Icon,
+    Size,
+    Kind,
+    Toolbar,
+    ButtonProps,
+} from '@lumx/react';
 
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons/';
 import { uid } from 'uid';
@@ -13,16 +24,16 @@ export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'>
     kind?: Kind;
     /** Dialog title. */
     title?: string;
-    /** The props to the confirm button */
-    confirmProps: {
+    /** Props forwarded to the confirm button */
+    confirmProps: ButtonProps & {
         onClick(): void;
         label: string;
     };
     /**
-     * The props to the cancel button.
+     * Props forwarded to the cancel button.
      * Will not render a cancel button if undefined.
      */
-    cancelProps?: {
+    cancelProps?: ButtonProps & {
         onClick(): void;
         label: string;
     };
@@ -91,6 +102,9 @@ export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((p
     // If content is a string, set in a paragraph.
     const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
 
+    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;
+    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};
+
     return (
         <Dialog
             ref={ref}
@@ -139,17 +153,23 @@ export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((p
                     after={
                         <>
                             {cancelProps && (
-                                <Button ref={cancelButtonRef} emphasis={Emphasis.medium} onClick={cancelProps.onClick}>
-                                    {cancelProps.label}
+                                <Button
+                                    {...forwardedCancelProps}
+                                    ref={cancelButtonRef}
+                                    emphasis={Emphasis.medium}
+                                    onClick={cancelOnClick}
+                                >
+                                    {cancelLabel}
                                 </Button>
                             )}
                             <Button
+                                {...forwardedConfirmProps}
                                 ref={confirmationButtonRef}
                                 color={color}
                                 className="lumx-spacing-margin-left-regular"
-                                onClick={confirmProps.onClick}
+                                onClick={confirmOnClick}
                             >
-                                {confirmProps.label}
+                                {confirmLabel}
                             </Button>
                         </>
                     }

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

@@ -458,3 +458,94 @@ exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel'
   </footer>
 </Dialog>
 `;
+
+exports[`<AlertDialog> Snapshots and structure should render story 'WithForwardedProps' 1`] = `
+<Dialog
+  className="lumx-alert-dialog lumx-alert-dialog--kind-info"
+  dialogProps={
+    Object {
+      "aria-describedby": "alert-dialog-description",
+      "aria-labelledby": "alert-dialog-title",
+      "id": "alert-dialog",
+      "role": "alertdialog",
+    }
+  }
+  focusElement={
+    Object {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  parentElement={
+    Object {
+      "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={
+              Object {
+                "color": "blue",
+              }
+            }
+            theme="light"
+          >
+            Cancel
+          </Button>
+          <Button
+            className="lumx-spacing-margin-left-regular"
+            color="blue"
+            emphasis="high"
+            onClick={[Function]}
+            size="m"
+            style={
+              Object {
+                "color": "red",
+              }
+            }
+            theme="light"
+          >
+            OK
+          </Button>
+        </React.Fragment>
+      }
+      className="lumx-spacing-margin-horizontal"
+    />
+  </footer>
+</Dialog>
+`;

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -49,7 +49,9 @@ describe(`<${Autocomplete.displayName}>`, () => {
                         ))}
                     </List>
                 ),
+                label: 'Field label',
                 isOpen: true,
+                isRequired: true,
                 onChange: jest.fn(),
                 value: '',
             });

package/src/components/autocomplete/Autocomplete.tsx

@@ -74,6 +74,11 @@ export interface AutocompleteProps extends GenericProps {
      * @see {@link TextFieldProps#isDisabled}
      */
     isDisabled?: boolean;
+    /**
+     * Whether the component is required or not.
+     * @see {@link TextFieldProps#isRequired}
+     */
+    isRequired?: boolean;
     /**
      * Whether the text field is displayed with valid style or not.
      * @see {@link TextFieldProps#isValid}
@@ -200,6 +205,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         inputRef,
         clearButtonProps,
         isDisabled = disabled,
+        isRequired,
         isOpen,
         isValid,
         label,
@@ -241,6 +247,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
                 inputRef={mergeRefs(inputAnchorRef, inputRef) as any}
                 clearButtonProps={clearButtonProps}
                 isDisabled={isDisabled}
+                isRequired={isRequired}
                 isValid={isValid}
                 label={label}
                 name={name}

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -55,7 +55,9 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
                         text: 'Montevideo',
                     },
                 ],
+                label: 'Field label',
                 isOpen: true,
+                isRequired: true,
                 onChange: jest.fn(),
                 value: '',
             });

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -79,6 +79,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
         inputRef,
         clearButtonProps,
         isDisabled,
+        isRequired,
         isOpen,
         isValid,
         label,
@@ -126,6 +127,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
             inputRef={inputRef}
             chips={values && values.map((chip: any, index: number) => selectedChipRender(chip, index, onClear))}
             isDisabled={isDisabled}
+            isRequired={isRequired}
             clearButtonProps={clearButtonProps}
             isValid={isValid}
             label={label}

package/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -109,6 +109,8 @@ exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
 >
   <TextField
     inputRef={[Function]}
+    isRequired={true}
+    label="Field label"
     onChange={[MockFunction]}
     textFieldRef={
       Object {

package/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap

@@ -9,6 +9,8 @@ exports[`<AutocompleteMultiple> Snapshots and structure should render correctly
   closeOnClickAway={true}
   closeOnEscape={true}
   isOpen={true}
+  isRequired={true}
+  label="Field label"
   onChange={[MockFunction]}
   shouldFocusOnClose={false}
   value=""

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,6 @@
-import { mdiSend } from '@lumx/icons';
+import { mdiSend, mdiClose } from '@lumx/icons';
 
-import { Button, ColorPalette, Emphasis, Size } from '@lumx/react';
+import { Button, ColorPalette, Emphasis, IconButton, Size } from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
@@ -36,3 +36,9 @@ export const DisabledWithHref = () => (
         Disabled button with redirection
     </Button>
 );
+
+export const IconButtonLowEmphasis = () => <IconButton emphasis={Emphasis.low} icon={mdiClose} label="Close" />;
+
+export const IconButtonLowEmphasisHasBackground = () => (
+    <IconButton emphasis={Emphasis.low} hasBackground icon={mdiClose} label="Close" />
+);

package/src/components/button/ButtonRoot.tsx

@@ -122,7 +122,7 @@ export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorEle
         ColorPalette.dark;
 
     if (hasBackground) {
-        return renderButtonWrapper({ ...props, variant, color: adaptedColor });
+        return renderButtonWrapper({ ...props, ref, variant, color: adaptedColor });
     }
 
     const buttonClassName = classNames(

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
 import { Button, CommentBlock, Emphasis, Size } from '@lumx/react';
 import { IconButton } from '@lumx/react/components/button/IconButton';
-import React from 'react';
+import { avatarImageKnob } from '@lumx/react/stories/knobs';
 
 export default { title: 'LumX components/comment-block/CommentBlock' };
 
@@ -17,7 +18,7 @@ export const WithHeaderActions = ({ theme }: any) => (
             </Button>,
         ]}
         theme={theme}
-        avatarProps={{ image: 'https://i.pravatar.cc/40', alt: 'Avatar' }}
+        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
         date="4 hours ago"
         name="Emmitt O. Lum"
         text="All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation."

package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
     >
       <Avatar
         alt="Avatar"
-        image="https://i.pravatar.cc/40"
+        image="avatar1.jpg"
         onKeyPress={[Function]}
         size="m"
         tabIndex={-1}

package/src/components/dialog/Dialog.stories.tsx

@@ -2,7 +2,9 @@ import { mdiClose } from '@lumx/icons';
 import {
     Button,
     Checkbox,
+    DatePickerField,
     Emphasis,
+    FlexBox,
     IconButton,
     List,
     ListItem,
@@ -196,6 +198,28 @@ export const ScrollableDialog = ({ theme }: any) => {
     );
 };
 
+export const WithAnimationCallbacks = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    const handleVisibiltyCallback = (isVisible: boolean) => {
+        alert(isVisible ? 'OPEN' : 'CLOSE');
+    };
+
+    return (
+        <>
+            {button}
+            <Dialog
+                isOpen={isOpen}
+                onClose={closeDialog}
+                size={Size.regular}
+                parentElement={buttonRef}
+                onVisibilityChange={handleVisibiltyCallback}
+            >
+                {content}
+            </Dialog>
+        </>
+    );
+};
+
 export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     return (
@@ -217,7 +241,7 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
     const inputRef = useRef(null);
 
     const selectChoices = ['First item', 'Second item', 'Third item'];
-    const [value, setValue] = React.useState<string>('');
+    const [value, setValue] = React.useState<string>(selectChoices[0]);
     const [isSelectOpen, setSelectOpen] = useState(false);
     const toggleSelect = () => setSelectOpen(!isSelectOpen);
     const closeSelect = () => setSelectOpen(false);
@@ -225,6 +249,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
         closeSelect();
         setValue(item);
     };
+    const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
+
     return (
         <>
             {button}
@@ -258,27 +284,41 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                         label="Checkbox input"
                     />
 
-                    <Select
-                        className="lumx-spacing-margin-bottom-huge"
-                        isOpen={isSelectOpen}
-                        value={value}
-                        label="Select label"
-                        onInputClick={toggleSelect}
-                        onDropdownClose={closeSelect}
-                    >
-                        <List isClickable>
-                            {selectChoices.map((choice) => (
-                                <ListItem
-                                    key={choice}
-                                    isSelected={value === choice}
-                                    onItemSelected={selectItem(choice)}
-                                    size={Size.tiny}
-                                >
-                                    {choice}
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Select>
+                    <FlexBox orientation="horizontal">
+                        <DatePickerField
+                            locale="fr"
+                            label="Start date"
+                            placeholder="Pick a date"
+                            theme={theme}
+                            onChange={setDate}
+                            value={date}
+                            nextButtonProps={{ label: 'Next month' }}
+                            previousButtonProps={{ label: 'Previous month' }}
+                        />
+
+                        <Select
+                            className="lumx-spacing-margin-left-huge"
+                            isOpen={isSelectOpen}
+                            value={value}
+                            label="Select label"
+                            onInputClick={toggleSelect}
+                            onDropdownClose={closeSelect}
+                        >
+                            <List isClickable>
+                                {selectChoices.map((choice) => (
+                                    <ListItem
+                                        key={choice}
+                                        isSelected={value === choice}
+                                        onItemSelected={selectItem(choice)}
+                                        size={Size.tiny}
+                                    >
+                                        {choice}
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Select>
+                    </FlexBox>
+
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                     <div tabIndex={0}>Focus div</div>
                 </div>