@cashub/ui 0.22.7 → 0.22.9

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';