@lumx/react 3.1.1 → 3.1.3-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.1",
-        "@lumx/icons": "^3.1.1",
+        "@lumx/core": "^3.1.3-alpha.0",
+        "@lumx/icons": "^3.1.3-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.1.1"
+    "version": "3.1.3-alpha.0"
 }

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

@@ -0,0 +1,65 @@
+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/expansion-panel/ExpansionPanel.test.tsx

@@ -94,7 +94,7 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             await userEvent.click(query.toggleButton() as any);
             expect(onOpen).toHaveBeenCalled();
             expect(onClose).not.toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(true);
+            expect(onToggleOpen).toHaveBeenCalledWith(true, expect.anything());
         });
 
         it('should close on click', async () => {
@@ -107,7 +107,7 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             await userEvent.click(query.header() as any);
             expect(onOpen).not.toHaveBeenCalled();
             expect(onClose).toHaveBeenCalled();
-            expect(onToggleOpen).toHaveBeenCalledWith(false);
+            expect(onToggleOpen).toHaveBeenCalledWith(false, expect.anything());
         });
     });
 

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

@@ -9,7 +9,7 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 
@@ -26,14 +26,14 @@ export interface ExpansionPanelProps extends GenericProps, HasTheme {
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
     /** On open callback. */
-    onOpen?: Callback;
+    onOpen?: (event: React.MouseEvent) => void;
     /** On close callback. */
-    onClose?: Callback;
+    onClose?: (event: React.MouseEvent) => void;
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
-    onToggleOpen?(shouldOpen: boolean): void;
+    onToggleOpen?(shouldOpen: boolean, event: React.MouseEvent): void;
 }
 
 /**
@@ -93,16 +93,16 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         <span className={`${CLASSNAME}__label`}>{label}</span>
     );
 
-    const toggleOpen = () => {
+    const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
         if (isFunction(onOpen) && shouldOpen) {
-            onOpen();
+            onOpen(event);
         }
         if (isFunction(onClose) && !shouldOpen) {
-            onClose();
+            onClose(event);
         }
         if (isFunction(onToggleOpen)) {
-            onToggleOpen(shouldOpen);
+            onToggleOpen(shouldOpen, event);
         }
     };
 

package/dist/README.md

@@ -1,38 +0,0 @@
-# LumApps Design System (LumX)
-
-The first official LumApps Design System for [React][react] applications.
-_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material].
-
-## Quick start
-
-To start to use LumX, you can either:
-
--   Install with Yarn/NPM:
-
-```bash
-yarn add @lumx/react
-# Or
-npm install @lumx/react
-```
-
--   Download the latest release for [React][react-release]
--   Clone the repository: `git clone https://github.com/lumapps/design-system.git`
-
-## Documentation
-
-You can find an online version of the demo and documentation site at https://design.lumapps.com.
-
-## How to get help, contribute, or provide feedback
-
-Please refer to our [contributing guidelines](CONTRIBUTING.md).
-
-## Copyright and license
-
-Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).
-
-[angularjs]: https://angularjs.org/
-[react]: https://react.org/
-[material]: http://www.google.com/design/spec/material-design/introduction.html
-[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs
-[react-release]: https://www.npmjs.com/package/@lumx/react
-[webpack]: https://webpack.js.org/

package/dist/package.json

@@ -1,117 +0,0 @@
-{
-    "author": {
-        "name": "LumApps"
-    },
-    "bugs": {
-        "url": "https://github.com/lumapps/design-system/issues"
-    },
-    "dependencies": {
-        "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.1",
-        "@lumx/icons": "^3.1.1",
-        "@popperjs/core": "^2.5.4",
-        "body-scroll-lock": "^3.1.5",
-        "classnames": "^2.2.6",
-        "react-is": "^16.13.0",
-        "react-popper": "^2.2.4",
-        "uid": "^2.0.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.20.2",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-export-default-from": "^7.18.10",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
-        "@rollup/plugin-commonjs": "^15.0.0",
-        "@rollup/plugin-node-resolve": "9.0.0",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/body-scroll-lock": "^2.6.1",
-        "@types/classnames": "^2.2.9",
-        "@types/enzyme": "^3.10.12",
-        "@types/jest": "^29.2.1",
-        "@types/lodash": "^4.14.149",
-        "@types/react": "^16.9.11",
-        "@types/react-dom": "^16.9.4",
-        "@types/react-is": "^16.7.1",
-        "autoprefixer": "^9.7.4",
-        "babel-jest": "29.1.2",
-        "babel-loader": "^8.0.6",
-        "chromatic": "^6.0.6",
-        "core-js": "^3.6.4",
-        "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.4",
-        "enzyme-to-json": "^3.5.0",
-        "focus-visible": "^5.0.2",
-        "glob": "^7.1.6",
-        "install-peers-cli": "^2.2.0",
-        "is-ci": "^2.0.0",
-        "jest": "29.1.2",
-        "jest-environment-jsdom": "29.1.2",
-        "jest-enzyme": "^7.1.2",
-        "react-dom": "16.13.0",
-        "rollup": "2.26.10",
-        "rollup-plugin-analyzer": "^3.3.0",
-        "rollup-plugin-babel": "^4.4.0",
-        "rollup-plugin-cleaner": "^1.0.0",
-        "rollup-plugin-copy": "^3.3.0",
-        "rollup-plugin-dts": "^4.2.2",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-ts-paths-resolve": "^1.3.0",
-        "rollup-plugin-typescript-paths": "^1.2.2",
-        "test-data-bot": "^0.8.0",
-        "tsconfig-paths-webpack-plugin": "^3.3.0",
-        "typescript": "^4.1.2",
-        "yargs": "^15.4.1",
-        "yarn": "^1.19.1"
-    },
-    "peerDependencies": {
-        "lodash": "4.17.21",
-        "moment": "^2.24.0",
-        "moment-range": "^4.0.2",
-        "react": "^16.13.0",
-        "react-dom": "^16.13.0"
-    },
-    "description": "The official LumApps Design System (LumX) for React applications",
-    "engines": {
-        "node": ">= 12.0.0",
-        "npm": ">= 4.0.0",
-        "yarn": ">= 1.3.0"
-    },
-    "homepage": "https://github.com/lumapps/design-system",
-    "keywords": [
-        "Design System",
-        "LumApps",
-        "LumX",
-        "React"
-    ],
-    "license": "MIT",
-    "module": "index.js",
-    "main": "index.js",
-    "types": "index.d.ts",
-    "name": "@lumx/react",
-    "publishConfig": {
-        "directory": "dist"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/lumapps/design-system.git"
-    },
-    "scripts": {
-        "build": "rollup -c",
-        "prepare": "install-peers || exit 0",
-        "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
-        "storybook": "yarn start:storybook",
-        "start:storybook": "cd storybook && ./start",
-        "build:storybook": "cd storybook && ./build"
-    },
-    "sideEffects": false,
-    "version": "3.1.1"
-}

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

@@ -1,196 +0,0 @@
-import React, { RefObject, useRef, useState } from 'react';
-import { Button, Theme, Link } from '@lumx/react';
-import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
-import { AlertDialog } from './AlertDialog';
-
-export default {
-    title: 'LumX components/alert-dialog/AlertDialog',
-    parameters: {
-        // Delay Chromatic snapshot to wait for dialog to open.
-        chromatic: {
-            pauseAnimationAtEnd: true,
-            delay: DIALOG_TRANSITION_DURATION,
-        },
-    },
-    // Force minimum chromatic screen size to make sure the dialog appears in view.
-    decorators: [chromaticForceScreenSize],
-};
-
-const defaultProps = {
-    id: 'alert-dialog',
-    confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
-};
-
-function useOpenButton(theme: Theme) {
-    const buttonRef = useRef() as RefObject<HTMLButtonElement>;
-    const [isOpen, setOpen] = useState(true);
-    const openDialog = () => setOpen(true);
-    const closeDialog = () => setOpen(false);
-
-    return {
-        button: (
-            <Button ref={buttonRef} onClick={openDialog} theme={theme}>
-                Open dialog
-            </Button>
-        ),
-        buttonRef,
-        closeDialog,
-        isOpen,
-    };
-}
-
-export const Default = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                title="Default (info)"
-                confirmProps={{ onClick: () => console.log('confirm'), label: 'Confirm' }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const Warning = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Warning"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="warning"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const Success = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Success"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="success"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const Error = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Error"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="error"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const WithCancel = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                {...defaultProps}
-                title="With Cancel"
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                cancelProps={{
-                    label: 'Cancel',
-                    onClick: closeDialog,
-                }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const RichDescription = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                {...defaultProps}
-                title="With Rich Description"
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-            >
-                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>
-            </AlertDialog>
-        </>
-    );
-};
-
-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/dist/src/components/alert-dialog/AlertDialog.test.tsx

@@ -1,43 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
-import { AlertDialog, AlertDialogProps } from './AlertDialog';
-import * as stories from './AlertDialog.stories';
-
-jest.mock('uid', () => ({ uid: () => 'uid' }));
-
-const CLASSNAME = AlertDialog.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: Partial<AlertDialogProps> = {}, shallowRendering = true) => {
-    const props: AlertDialogProps = {
-        title: 'Alert',
-        description: 'Deserunt et sunt qui consequat sint sit.',
-        // eslint-disable-next-line no-alert
-        confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<AlertDialog {...props} />);
-
-    return {
-        AlertDialog: wrapper.find(`Dialog`),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${AlertDialog.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, AlertDialog);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'AlertDialog', prop: 'AlertDialog' }, { className: CLASSNAME });
-});