@mmb-digital/ds-lilly 1.0.35 → 1.0.36

package/src/components/Components/ContentTable/Variants.stories.tsx

@@ -0,0 +1,456 @@
+import React from 'react'
+
+import rbLogo from '../../../../src/images/rb-logo.jpeg'
+import { Text } from '../../Typography'
+import { Avatar, Button } from '..'
+import { ContentTable, ContentTableRow } from '.'
+
+export default {
+  title: 'Components/🎉 ContentTable/Variants',
+  component: 'ContentTable'
+}
+
+export const Title = {
+  render: () => (
+    <ContentTable columns={[]} titleHeader="title header">
+      <ContentTableRow title="Main title of line" />
+    </ContentTable>
+  ),
+
+  name: 'Title'
+}
+
+export const Buttons = {
+  render: () => (
+    <ContentTable
+      columns={[
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Buttons'
+}
+
+export const Icon = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        iconBackgroundColor="bgBrandBold"
+        iconName="account"
+        iconSize="xLarge"
+        title="Any icon from DS"
+      />
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        title="Custom icon"
+        titleSize="h6"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Icon'
+}
+
+export const Subtitle = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Subtitle'
+}
+
+export const TagStory = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        title="Main title of line"
+      />
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Subtitle with tag']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Tag'
+}
+
+export const Parameters = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'text',
+          header: 'param1',
+          hideOnMobile: true,
+          hideOnExpand: true
+        },
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Parameters'
+}
+
+export const Parameters2 = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'text',
+          header: 'param1',
+          hideOnMobile: true,
+          hideOnExpand: true
+        },
+        {
+          type: 'text',
+          header: 'param2',
+          hideOnMobile: true,
+          hideOnExpand: true
+        },
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>
+          ],
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ],
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Parameters2'
+}
+
+export const Amount = {
+  render: () => (
+    <ContentTable
+      hasIcons
+      columns={[
+        {
+          type: 'text',
+          header: 'param1',
+          hideOnMobile: true,
+          hideOnExpand: true
+        },
+        {
+          type: 'amount',
+          header: 'amount',
+          hideOnMobile: true,
+          hideOnExpand: true
+        },
+        {
+          type: 'buttons',
+          header: 'buttons',
+          hideOnMobile: true,
+          hideOnExpand: true
+        }
+      ]}
+      titleHeader="title header"
+    >
+      <ContentTableRow
+        amount={12345}
+        amountCurrencyCode="CZK"
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        amount={12345}
+        amountCurrencyCode="CZK"
+        amountSubtitle="With long second line"
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        amount={12345}
+        amountCurrencyCode="CZK"
+        amountSubtitle="Red line"
+        amountSubtitleType="error"
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+      <ContentTableRow
+        amount={12345}
+        amountCurrencyCode="CZK"
+        amountSubtitle="Green line"
+        amountSubtitleType="success"
+        buttons={[
+          <Button key="1" ariaLabel="edit" onlyIconName="edit" theme="foo" type="transparent" />,
+          <Button key="2" ariaLabel="delete" color="error" onlyIconName="bin" type="transparent" />
+        ]}
+        columns={[
+          [
+            <Text key="p1" component="div" size="xSmall" type="secondary">
+              Param
+            </Text>,
+            <Text key="p2" component="div" size="xSmall" type="secondary">
+              Another param
+            </Text>
+          ]
+        ]}
+        customIcon={<Avatar imageUrl={rbLogo} size="xLarge" />}
+        subtitleTagIconBackgroundColor="bgInfoDefault"
+        subtitleTagIconName="airlineFill"
+        subtitleTagText="Aerolinky"
+        subtitles={['Second line', 'Second line 2']}
+        title="Main title of line"
+      />
+    </ContentTable>
+  ),
+
+  name: 'Amount'
+}

package/src/components/Components/ContentTable/index.ts

@@ -0,0 +1,2 @@
+export * from './ContentTable'
+export * from './ContentTableRow'

package/src/components/Components/Divider/Divider.stories.tsx

@@ -0,0 +1,34 @@
+import { ArgTypes, Stories, Title } from '@storybook/blocks'
+import React, { Fragment } from 'react'
+
+import { Divider } from './Divider'
+export default {
+  title: 'Components/🎉 Divider',
+  component: Divider,
+  parameters: {
+    docs: {
+      page: () => {
+        return (
+          <Fragment>
+            <Title />
+            <Stories />
+            <ArgTypes />
+          </Fragment>
+        )
+      }
+    }
+  }
+}
+
+export const Preview = {
+  render: () => (
+    <React.Fragment>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique pariatur accusamus ratione. Consequatur sed
+        quos cumque adipisci est dignissimos laudantium?
+      </div>
+      <Divider />
+    </React.Fragment>
+  ),
+  name: 'preview'
+}

package/src/components/Components/Divider/Divider.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { ComponentPropsType, cx } from '../../../utils'
+
+export interface DividerPropsType extends ComponentPropsType {}
+
+export const Divider = ({ testId, theme }: DividerPropsType): JSX.Element => (
+  <hr className={cx('c-divider', theme)} data-testid={testId} />
+)

package/src/components/Components/Divider/index.ts

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

package/src/components/Components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,50 @@
+import { config } from '@storybook/addon-designs'
+import { ArgTypes, Stories, Title } from '@storybook/blocks'
+import React, { Fragment } from 'react'
+
+import { Button, Dropdown, DropdownItem } from '../../..'
+
+export default {
+  title: 'Components/🎉 Dropdown',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      page: () => {
+        return (
+          <Fragment>
+            <Title />
+            <Stories />
+            <ArgTypes />
+          </Fragment>
+        )
+      }
+    }
+  }
+}
+
+export const Basic = {
+  render: () => (
+    <React.Fragment>
+      <Dropdown trigger="click" triggerComponent={<Button>Click me</Button>}>
+        <DropdownItem>Option 1</DropdownItem>
+        <DropdownItem isSelected>Option 2</DropdownItem>
+        <DropdownItem>Option 3</DropdownItem>
+        <DropdownItem isDisabled>Option 4</DropdownItem>
+        <DropdownItem>Option 5</DropdownItem>
+        <DropdownItem>Option 6</DropdownItem>
+        <DropdownItem isDisabled>Option 7</DropdownItem>
+        <DropdownItem onClick={() => alert('Option 8')}>Option 8</DropdownItem>
+      </Dropdown>
+      <div style={{ height: '80px' }}></div>
+    </React.Fragment>
+  ),
+
+  name: 'basic',
+
+  parameters: {
+    design: config({
+      type: 'figma',
+      url: 'https://www.figma.com/file/1IZRWhPZfUy1BAKb0v5xh4/Lilly-Petr-M?node-id=10078%3A0'
+    })
+  }
+}