@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/section/Section.js

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import bgChartTriangle from '../assets/images/bg-chart-triangle.png';
+import bgChartCircle from '../assets/images/bg-chart-circle.png';
+import bgMap from '../assets/images/map.png';
+
+const Section = styled.div`
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  ${({ backgroundReverse }) =>
+    backgroundReverse && 'background: var(--color-background2);'}
+
+  ${({ paddingS }) => paddingS && 'padding: var(--spacing-s);'}
+
+  ${({ paddingXS }) => paddingXS && 'padding: var(--spacing-xs);'}
+
+  ${({ noPadding }) => noPadding && 'padding: 0;'}
+
+  ${({ noPaddingX }) => noPaddingX && 'padding-left: 0; padding-right: 0;'}
+
+  ${({ noPaddingTop }) => noPaddingTop && 'padding-top: 0;'}
+
+  ${({ noPaddingBottom }) => noPaddingBottom && 'padding-bottom: 0;'}
+
+  ${({ marginBottomS }) => marginBottomS && 'margin-bottom: var(--spacing-s);'}
+
+  ${({ noMarginBottom }) => noMarginBottom && 'margin-bottom: 0;'}
+
+  ${({ fullHeight }) => fullHeight && 'height: calc(100% - var(--spacing));'}
+
+  ${({ backgroundMarker }) =>
+    backgroundMarker &&
+    `
+      background: var(--color-background2);
+      background-image: url(${bgChartCircle}), url(${bgChartTriangle});
+      background-repeat: no-repeat;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
+    `}
+
+  ${({ backgroundMap }) =>
+    backgroundMap &&
+    `
+      background: var(--color-background2);
+      background-image: url(${bgMap});
+      background-repeat: no-repeat;
+      background-size: cover;
+    `}
+
+  ${({ border }) =>
+    border && 'border: var(--border-width) solid var(--border-color);'}
+  
+  ${({ checkboxGroup }) =>
+    checkboxGroup &&
+    `
+      background: transparent;
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+    `}
+`;
+
+export default Section;

package/src/section/SectionBody.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import scrollbar from '../styles/mixin/scrollbar';
+import media from '../styles/mixin/media';
+
+const SectionBody = styled.div`
+  // fix: overflow element(relate to z-index problem)
+  // position: relative;
+  background: transparent;
+  padding: var(--spacing) 0 0 0;
+
+  ${({ noPadding }) => noPadding && 'padding: 0;'}
+
+  ${({ maxHeight }) =>
+    maxHeight &&
+    css`
+      max-height: ${maxHeight}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      ${scrollbar}
+    `}
+
+  ${({ maxHeightLaptop }) =>
+    maxHeightLaptop &&
+    css`
+      ${media.laptop`
+        max-height: ${maxHeightLaptop}px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        ${scrollbar}
+      `}
+    `}
+`;
+
+export default SectionBody;

package/src/section/SectionHeader.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+
+const SectionHeader = styled.div`
+  background: transparent;
+  padding: 0;
+  margin-bottom: calc(var(--spacing-s) * -1);
+
+  > * {
+    padding-bottom: var(--spacing-s);
+  }
+
+  ${({ inline }) =>
+    inline &&
+    css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    `}
+
+  ${({ flexStart }) => flexStart && 'justify-content: flex-start;'}
+
+  ${({ border }) =>
+    border && 'border-bottom: var(--border-width) solid var(--border-color);'}
+
+  ${({ backgroundFill }) =>
+    backgroundFill && 'background: var(--color-background1);'}
+
+  ${({ backgroundReverse }) => {
+    return backgroundReverse && 'background: var(--color-background2);';
+  }}
+
+  ${({ sticky }) =>
+    sticky &&
+    `position: sticky;
+    z-index:20;
+    top: ${headerStyle.height};
+  `}
+`;
+
+export default SectionHeader;

package/src/section/SectionToolbar.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const SectionToolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+
+export default SectionToolbar;

package/src/section/SectionToolbarItem.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const SectionToolbarItem = styled.div`
+  display: flex;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+
+export default SectionToolbarItem;

package/src/section/__stories__/Section.stories.js

@@ -0,0 +1,52 @@
+import Section from '../Section';
+
+const metadata = {
+  title: 'Section/Section',
+  component: Section,
+  decorators: [
+    (Story) => (
+      <div style={{ color: 'white' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    backgroundMarker: {
+      description: 'background insert image',
+    },
+    backgroundMap: {
+      description: 'background insert image',
+    },
+    checkboxGroup: {
+      description: 'for checkbox element, width=50%,center space ',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ border: '1px solid #000' }}>
+      <Section {...args}></Section>
+    </div>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  backgroundReverse: false,
+  paddingS: false,
+  noPadding: false,
+  noPaddingX: false,
+  noPaddingTop: false,
+  noPaddingBottom: false,
+  marginBottomS: false,
+  noMarginBottom: false,
+  fullHeight: false,
+  backgroundMarker: false,
+  backgroundMap: false,
+  border: false,
+  checkboxGroup: false,
+};
+
+export default metadata;
+export { Default };

package/src/section/__stories__/SectionBody.stories.js

@@ -0,0 +1,40 @@
+import SectionBody from '../SectionBody';
+
+const metadata = {
+  title: 'Section/SectionBody',
+  component: SectionBody,
+  decorators: [
+    (Story) => (
+      <div style={{ background: '#13142e', color: 'white' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    noPadding: {
+      description: 'no padding',
+    },
+    maxHeight: {
+      description: 'maxHeight',
+      control: 'text',
+    },
+    maxHeightLaptop: {
+      description: 'maxHeight in laptop device',
+      control: 'text',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <SectionBody {...args}>This is SectionBody</SectionBody>;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  noPadding: false,
+  maxHeight: '300',
+  maxHeightLaptop: '600',
+};
+
+export default metadata;
+export { Default };

package/src/section/__stories__/SectionHeader.stories.js

@@ -0,0 +1,67 @@
+import SectionHeader from '../SectionHeader';
+import SectionToolbar from '../SectionToolbar';
+import Heading1 from '../../heading/Heading1';
+import { FaPlus, FaFilter } from 'react-icons/fa';
+import { MdMessage } from 'react-icons/md';
+import Button from '../../button/Button';
+
+const metadata = {
+  title: 'Section/SectionHeader',
+  component: SectionHeader,
+  decorators: [
+    (Story) => (
+      <div style={{ background: '#2d2c4c', color: 'white' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    inline: {
+      description: 'element space between',
+    },
+    flexStart: {
+      description: 'element flex start',
+    },
+    backgroundFill: {
+      description: 'background reverse',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <SectionHeader {...args}>
+      <Heading1>Title</Heading1>
+      <SectionToolbar>
+        <div>
+          <Button>
+            <FaPlus />
+            Create
+          </Button>
+          <Button secondary>
+            <MdMessage />
+            Message
+          </Button>
+        </div>
+        <div>
+          <Button secondary>
+            <FaFilter />
+            Filter
+          </Button>
+        </div>
+      </SectionToolbar>
+    </SectionHeader>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  inline: false,
+  flexStart: false,
+  border: false,
+  backgroundFill: false,
+  sticky: false,
+};
+
+export default metadata;
+export { Default };

package/src/section/__stories__/SectionToolbar.stories.js

@@ -0,0 +1,43 @@
+import { FaPlus, FaFilter } from 'react-icons/fa';
+import { MdMessage } from 'react-icons/md';
+import SectionToolbar from '../SectionToolbar';
+import SectionToolbarItem from '../SectionToolbarItem';
+import Button from '../../button/Button';
+
+const metadata = {
+  title: 'Section/SectionToolbar',
+  component: SectionToolbar,
+  decorators: [
+    (Story) => (
+      <div style={{ border: '2px solid #000' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Default = () => {
+  return (
+    <SectionToolbar>
+      <SectionToolbarItem>
+        <Button>
+          <FaPlus />
+          Create
+        </Button>
+        <Button secondary>
+          <MdMessage />
+          Message
+        </Button>
+      </SectionToolbarItem>
+      <SectionToolbarItem>
+        <Button secondary>
+          <FaFilter />
+          Filter
+        </Button>
+      </SectionToolbarItem>
+    </SectionToolbar>
+  );
+};
+
+export default metadata;
+export { Default };

package/src/section/__test__/Section.test.js

@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react';
+import Section from '../Section';
+import bgChartTriangle from '../../assets/images/bg-chart-triangle.png';
+import bgChartCircle from '../../assets/images/bg-chart-circle.png';
+import bgMap from '../../assets/images/map.png';
+
+describe('Test Section Component', () => {
+  test('render section', () => {
+    render(<Section>Section content</Section>);
+
+    const section = screen.getByText('Section content');
+    expect(section).toBeInTheDocument();
+  });
+
+  test('render section parameters', () => {
+    const { rerender } = render(
+      <Section backgroundReverse paddingS>
+        Section content
+      </Section>
+    );
+
+    const section = screen.getByText('Section content');
+    expect(section).toHaveStyle({
+      background: 'var(--color-background2)',
+      padding: 'var(--spacing-s)',
+    });
+
+    rerender(
+      <Section noPadding noMarginBottom>
+        Section content
+      </Section>
+    );
+    expect(section).toHaveStyle({
+      padding: 0,
+      marginBottom: 0,
+    });
+
+    rerender(
+      <Section noPaddingX noPaddingTop noPaddingBottom marginBottomS>
+        Section content
+      </Section>
+    );
+    expect(section).toHaveStyle({
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      marginBottom: 'var(--spacing-s)',
+    });
+
+    rerender(
+      <Section fullHeight border>
+        Section content
+      </Section>
+    );
+
+    expect(section).toHaveStyle({
+      height: 'calc(100% - var(--spacing))',
+      border: 'var(--border-width) solid var(--border-color)',
+    });
+
+    rerender(<Section checkboxGroup>Section content</Section>);
+
+    expect(section).toHaveStyle({
+      background: 'transparent',
+      width: '50%',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    });
+  });
+
+  test('render section background', () => {
+    const { rerender } = render(
+      <Section backgroundMarker data-testid='background'>
+        Section content
+      </Section>
+    );
+
+    expect(screen.getByText('Section content')).toHaveStyle(
+      `background-color:#222143;
+      background-image: url(${bgChartCircle}), url(${bgChartTriangle});
+      background-repeat: no-repeat;
+      background-position: left top, right bottom;
+      background-size: 337px 312px,166px 225px;
+      `
+    );
+
+    rerender(<Section backgroundMap>Section content</Section>);
+
+    expect(screen.getByText('Section content')).toHaveStyle(
+      `background-color:#222143;
+      background-image: url(${bgMap});
+      background-repeat: no-repeat;
+      background-size: cover;
+      `
+    );
+  });
+});

package/src/section/__test__/SectionBody.test.js

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import SectionBody from '../SectionBody';
+
+describe('Test SectionBody Component', () => {
+  test('render SectionBody', () => {
+    const { rerender } = render(
+      <SectionBody noPadding>SectionBody content</SectionBody>
+    );
+    const sectionBody = screen.getByText('SectionBody content');
+    expect(sectionBody).toBeInTheDocument();
+    expect(sectionBody).toHaveStyle(`padding: 0;
+    `);
+
+    rerender(
+      <SectionBody maxHeight={300} maxHeightLaptop={600}>
+        SectionBody content
+      </SectionBody>
+    );
+    expect(sectionBody).toHaveStyle(`max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    `);
+
+    // scrollbar
+    expect(sectionBody).toHaveStyleRule('width', '12px', {
+      modifier: '&::-webkit-scrollbar',
+    });
+
+    expect(sectionBody).toHaveStyleRule(
+      'background-color',
+      'var(--color-scroll-bar)',
+      {
+        modifier: '&::-webkit-scrollbar-thumb',
+      }
+    );
+    expect(sectionBody).toHaveStyleRule('background-clip', 'padding-box', {
+      modifier: '&::-webkit-scrollbar-thumb',
+    });
+    expect(sectionBody).toHaveStyleRule('border', '4px solid transparent', {
+      modifier: '&::-webkit-scrollbar-thumb',
+    });
+    expect(sectionBody).toHaveStyleRule(
+      'border-radius',
+      'var(--border-radius)',
+      {
+        modifier: '&::-webkit-scrollbar-thumb',
+      }
+    );
+
+    // test for laptop
+    expect(sectionBody).toHaveStyleRule('max-height', '600px', {
+      media: '(max-width:1200px)',
+    });
+    expect(sectionBody).toHaveStyleRule('overflow-y', 'auto', {
+      media: '(max-width:1200px)',
+    });
+    expect(sectionBody).toHaveStyleRule('overflow-x', 'hidden', {
+      media: '(max-width:1200px)',
+    });
+    // scrollbar
+    expect(sectionBody).toHaveStyleRule('width', '12px', {
+      media: '(max-width:1200px)',
+      modifier: '&::-webkit-scrollbar',
+    });
+
+    expect(sectionBody).toHaveStyleRule(
+      'background-color',
+      'var(--color-scroll-bar)',
+      { media: '(max-width:1200px)', modifier: '&::-webkit-scrollbar-thumb' }
+    );
+    expect(sectionBody).toHaveStyleRule('background-clip', 'padding-box', {
+      media: '(max-width:1200px)',
+      modifier: '&::-webkit-scrollbar-thumb',
+    });
+    expect(sectionBody).toHaveStyleRule('border', '4px solid transparent', {
+      media: '(max-width:1200px)',
+      modifier: '&::-webkit-scrollbar-thumb',
+    });
+    expect(sectionBody).toHaveStyleRule(
+      'border-radius',
+      'var(--border-radius)',
+      {
+        media: '(max-width:1200px)',
+        modifier: '&::-webkit-scrollbar-thumb',
+      }
+    );
+  });
+});

package/src/section/__test__/SectionHeader.test.js

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import SectionHeader from '../SectionHeader';
+import headerStyle from '../../styles/config/header.style';
+
+describe('Test SectionHeader Component', () => {
+  test('render sectionHeader', () => {
+    const { rerender } = render(
+      <SectionHeader inline border backgroundFill sticky>
+        SectionHeader content
+      </SectionHeader>
+    );
+    const sectionHeader = screen.getByText('SectionHeader content');
+    expect(sectionHeader).toBeInTheDocument();
+    expect(sectionHeader).toHaveStyle(`display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: var(--border-width) solid var(--border-color);
+    background: var(--color-background1);
+    position: sticky;
+    z-index:30;
+    top: ${headerStyle.height};
+    `);
+
+    rerender(
+      <SectionHeader inline flexStart>
+        SectionHeader content
+      </SectionHeader>
+    );
+    expect(sectionHeader).toHaveStyle(`display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    
+    `);
+  });
+});

package/src/section/__test__/SectionToolbar.test.js

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import SectionToolbar from '../SectionToolbar';
+
+describe('Test SectionToolbar Component', () => {
+  test('render component', () => {
+    render(
+      <SectionToolbar>
+        <button>First Button</button>
+        <button>Second Button</button>
+      </SectionToolbar>,
+    );
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[1]).toHaveStyle('margin-left: var(--spacing-s)');
+  });
+});

package/src/section/index.js

@@ -0,0 +1,5 @@
+export { default as Section } from './Section';
+export { default as SectionBody } from './SectionBody';
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionToolbar } from './SectionToolbar';
+export { default as SectionToolbarItem } from './SectionToolbarItem';