@lumx/react 2.2.21 → 2.2.22-alpha-fix-generic-block.2

package/src/components/generic-block/GenericBlock.stories.tsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size, Orientation, Alignment } from '@lumx/react';
-
-export default { title: 'LumX components/generic-block/GenericBlock' };
-
-export const Horizontal = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.horizontal}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const HorizontalWithAlignment = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.horizontal}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            fillSpace: true,
-            style: { border: '1px solid red' },
-            vAlign: 'center',
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Centered button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const HorizontalTop = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.horizontal}
-        hAlign={Alignment.top}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Centered button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const Vertical = ({ theme }: any) => (
-    <GenericBlock
-        orientation={Orientation.vertical}
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{
-            fillSpace: true,
-            style: { border: '1px solid red' },
-        }}
-        figureProps={{
-            style: { border: '1px solid red' },
-        }}
-        contentProps={{
-            style: { border: '1px solid red' },
-        }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const GapSizes = ({ theme }: any) => (
-    <>
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.regular}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Small gap size</h2>
-            <p>For small blocks</p>
-        </GenericBlock>
-
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.big}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Medium gap size</h2>
-            <p>For medium blocks</p>
-        </GenericBlock>
-
-        <GenericBlock
-            orientation={Orientation.vertical}
-            figure={<Icon icon={mdiPencil} size={Size.m} />}
-            gap={Size.huge}
-            style={{ marginBottom: 40 }}
-            actionsProps={{
-                style: { border: '1px solid red' },
-            }}
-            figureProps={{
-                style: { border: '1px solid red' },
-            }}
-            contentProps={{
-                style: { border: '1px solid red' },
-            }}
-            actions={<Button theme={theme}>Button</Button>}
-        >
-            <h2>Big gap size</h2>
-            <p>For large blocks</p>
-        </GenericBlock>
-    </>
-);

package/src/components/generic-block/__snapshots__/GenericBlock.test.tsx.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<GenericBlock> Snapshots and structure should render story 'Default' 1`] = `
-Array [
-  <FlexBox
-    className="lumx-generic-block"
-    gap="regular"
-    hAlign="center"
-    orientation="vertical"
-    vAlign="center"
-  >
-    <FlexBox
-      className="lumx-generic-block__figure"
-    >
-      <Avatar
-        alt=""
-        image="/demo-assets/persona.png"
-        size="m"
-        theme="light"
-      />
-    </FlexBox>
-    <FlexBox
-      className="lumx-generic-block__content"
-      fillSpace={true}
-      orientation="vertical"
-      vAlign="center"
-    >
-      <h2>
-        Content title
-      </h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
-      </p>
-    </FlexBox>
-    <FlexBox
-      className="lumx-generic-block__actions"
-      vAlign="center"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Actions
-      </Button>
-    </FlexBox>
-  </FlexBox>,
-  <FlexBox
-    className="lumx-generic-block"
-    gap="regular"
-    hAlign="center"
-    orientation="horizontal"
-    vAlign="center"
-  >
-    <FlexBox
-      className="lumx-generic-block__figure"
-    >
-      <Avatar
-        alt=""
-        image="/demo-assets/persona.png"
-        size="m"
-        theme="light"
-      />
-    </FlexBox>
-    <FlexBox
-      className="lumx-generic-block__content"
-      fillSpace={true}
-      orientation="vertical"
-      vAlign="left"
-    >
-      <h2>
-        Content title
-      </h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
-      </p>
-    </FlexBox>
-    <FlexBox
-      className="lumx-generic-block__actions"
-      vAlign="right"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Actions
-      </Button>
-    </FlexBox>
-  </FlexBox>,
-]
-`;

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.tsx

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import { Button } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import React, { useCallback, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export default {
-    title: 'LumX components/ClickAwayProvider',
-    parameters: {
-        // Disables Chromatic snapshot (not relevant for this story).
-        chromatic: { disable: true },
-    },
-};
-
-// eslint-disable-next-line react/display-name
-const Card = React.forwardRef<any, any>(({ children, close }, ref) => (
-    <ClickAwayProvider callback={close} refs={[ref as any]}>
-        {createPortal(
-            <div className="lumx-spacing-padding" ref={ref} style={{ border: '1px solid red' }}>
-                {children}
-            </div>,
-            document.body,
-        )}
-    </ClickAwayProvider>
-));
-
-/**
- * This story showcases the detection of click away inside a nested React portal tree.
- *
- * @return Component story.
- */
-export const NestedClickAway = () => {
-    const ref1 = useRef<HTMLDivElement>();
-    const [isOpen1, setOpen1] = useState(false);
-    const open1 = useCallback(() => setOpen1(true), []);
-    const close1 = useCallback(() => {
-        setOpen1(false);
-        setOpen2(false);
-        setOpen3(false);
-    }, []);
-
-    const ref2 = useRef<HTMLDivElement>();
-    const [isOpen2, setOpen2] = useState(false);
-    const open2 = useCallback(() => setOpen2(true), []);
-    const close2 = useCallback(() => {
-        setOpen2(false);
-        setOpen3(false);
-    }, []);
-
-    const ref3 = useRef<HTMLDivElement>();
-    const [isOpen3, setOpen3] = useState(false);
-    const open3 = useCallback(() => setOpen3(true), []);
-    const close3 = useCallback(() => setOpen3(false), []);
-
-    return (
-        <>
-            Level 0 - <Button onClick={open1}>Open level 1</Button>
-            {isOpen1 && (
-                <Card ref={ref1} close={close1}>
-                    Level 1 - <Button onClick={open2}>Open level 2</Button>
-                    {isOpen2 && (
-                        <Card ref={ref2} close={close2}>
-                            Level 2 - <Button onClick={open3}>Open level 3</Button>
-                            {isOpen3 && (
-                                <Card ref={ref3} close={close3}>
-                                    Level 3
-                                </Card>
-                            )}
-                        </Card>
-                    )}
-                </Card>
-            )}
-        </>
-    );
-};