@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/section/Section.js

@@ -1,66 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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';