@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -1,492 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FlexBox> Snapshots and structure should render story 'Align' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      style={
-        {
-          "height": 200,
-        }
-      }
-      theme="light"
-    >
-      Button
-    </Button>
-    <FlexBox
-      style={
-        {
-          "height": "fit-content",
-        }
-      }
-    >
-      Some text
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box"
-    style={
-      {
-        "height": "fit-content",
-      }
-    }
-  >
-    Some text
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
-<header
-  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
->
-  <div>
-    Element 1
-  </div>
-  <div>
-    Element 2
-  </div>
-  <div>
-    Element 2
-  </div>
-</header>
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
-<div
-  className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
-  style={
-    {
-      "border": "1px solid red",
-      "height": "300px",
-      "width": "720px",
-    }
-  }
->
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 1
-  </Button>
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 2
-  </Button>
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Button 3
-  </Button>
-</div>
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
-[
-  <div
-    className="lumx-flex-box"
-  >
-    <FlexBox>
-      <Icon
-        icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
-      />
-    </FlexBox>
-    <FlexBox>
-      Some text in a div
-    </FlexBox>
-    <FlexBox>
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        OK
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Icon
-      icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
-    />
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    Some text in a div
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      OK
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 1
-    </Button>
-    <FlexBox
-      vAlign="left"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 2
-      </Button>
-    </FlexBox>
-    <FlexBox>
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 3
-      </Button>
-    </FlexBox>
-    <FlexBox
-      vAlign="right"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Item 4
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 2
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 3
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Item 4
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal"
-    style={
-      {
-        "border": "1px solid red",
-        "height": "300px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Default
-    </Button>
-    <FlexBox
-      hAlign="top"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Top
-      </Button>
-    </FlexBox>
-    <FlexBox
-      fillSpace={true}
-      hAlign="center"
-      vAlign="center"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Center button
-      </Button>
-    </FlexBox>
-    <FlexBox
-      hAlign="bottom"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Bottom
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--h-align-top"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Top
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Center button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--h-align-bottom"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Bottom
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'NoShrinkFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal"
-    style={
-      {
-        "border": "1px solid red",
-        "width": "150px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-    <FlexBox
-      noShrink={true}
-    >
-      Some long text
-    </FlexBox>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--no-shrink"
-  >
-    Some long text
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'VerticalFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical"
-    style={
-      {
-        "border": "1px solid red",
-        "height": "300px",
-      }
-    }
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Default
-    </Button>
-    <FlexBox
-      vAlign="left"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Left
-      </Button>
-    </FlexBox>
-    <FlexBox
-      fillSpace={true}
-      hAlign="center"
-      vAlign="center"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Center button
-      </Button>
-    </FlexBox>
-    <FlexBox
-      vAlign="right"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Right
-      </Button>
-    </FlexBox>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Left
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Center button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Right
-    </Button>
-  </div>,
-]
-`;
-
-exports[`<FlexBox> Snapshots and structure should render story 'WrapFlex' 1`] = `
-[
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--wrap"
-    style={
-      {
-        "border": "1px solid red",
-        "width": "150px",
-      }
-    }
-  >
-    <FlexBox
-      fillSpace={true}
-      orientation="vertical"
-    >
-      <Button
-        emphasis="high"
-        size="m"
-        theme="light"
-      >
-        Button
-      </Button>
-    </FlexBox>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-  <div
-    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"
-  >
-    <Button
-      emphasis="high"
-      size="m"
-      theme="light"
-    >
-      Button
-    </Button>
-  </div>,
-]
-`;

package/dist/src/components/flex-box/index.ts

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

package/dist/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,128 +0,0 @@
-import { IMAGES } from '@lumx/react/stories/knobs/image';
-import React from 'react';
-import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
-
-export default { title: 'LumX components/generic-block/GenericBlock' };
-
-const redBorderStyle = { border: '1px solid red' };
-
-export const SectionsInProps = ({ theme }) => (
-    <GenericBlock
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{ style: redBorderStyle }}
-        figureProps={{ style: redBorderStyle }}
-        contentProps={{ style: redBorderStyle }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const SectionsInChildren = ({ theme }) => (
-    <GenericBlock>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-const Template = ({ theme, ...props }) => (
-    <GenericBlock {...props}>
-        <GenericBlock.Figure style={redBorderStyle} {...props.figureProps}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle} {...props.contentProps}>
-            {props.content || 'Content'}
-        </GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle} {...props.actionsProps}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-    orientation: 'vertical',
-};
-
-export const VerticalAlignCenter = Template.bind({});
-VerticalAlignCenter.args = {
-    orientation: 'vertical',
-    vAlign: 'center',
-};
-
-export const VerticalOverflow = Template.bind({});
-VerticalOverflow.args = {
-    orientation: 'vertical',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-    orientation: 'horizontal',
-};
-
-export const HorizontalAlignRightBottom = Template.bind({});
-HorizontalAlignRightBottom.args = {
-    orientation: 'horizontal',
-    vAlign: 'right',
-    hAlign: 'bottom',
-};
-
-export const HorizontalOverflow = Template.bind({});
-HorizontalOverflow.args = {
-    orientation: 'horizontal',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const GapSizes = ({ theme }) =>
-    [Size.regular, Size.big, Size.huge].map((gap) => (
-        <GenericBlock key={gap} orientation="vertical" gap={gap} style={{ marginBottom: 40 }}>
-            <GenericBlock.Figure style={redBorderStyle}>
-                <Icon icon={mdiPencil} size={Size.m} />
-            </GenericBlock.Figure>
-            <GenericBlock.Content style={redBorderStyle}>
-                <h2>{gap} gap size</h2>
-                <p>block description</p>
-            </GenericBlock.Content>
-            <GenericBlock.Actions style={redBorderStyle}>
-                <Button theme={theme}>Button</Button>
-            </GenericBlock.Actions>
-        </GenericBlock>
-    ));
-
-export const AsAFigure = () => (
-    <GenericBlock as="figure" orientation="vertical" style={{ width: '150px' }}>
-        <GenericBlock.Figure>
-            <Thumbnail alt="" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
-        </GenericBlock.Figure>
-        <GenericBlock.Content as="figcaption">Rocky mountain landscape</GenericBlock.Content>
-    </GenericBlock>
-);
-
-export const AsAnArticle = () => (
-    <GenericBlock as="article" orientation="horizontal">
-        <GenericBlock.Figure>
-            <Thumbnail alt="" size="xl" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
-        </GenericBlock.Figure>
-        <GenericBlock.Content>
-            <h2>Article title</h2>
-            <p>Article description...</p>
-        </GenericBlock.Content>
-    </GenericBlock>
-);