@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/breadcrumb/__test__/breadcrumb.test.js

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Breadcrumb from '../Breadcrumb';
+
+describe('test Breadcrumb', () => {
+  test('render Breadcrumb', () => {
+    const path = [
+      { name: 'Manufacturer' },
+      { name: 'ManufacturerList', url: '/manufacturers' },
+    ];
+
+    render(
+      <Router>
+        <Breadcrumb path={path} />
+      </Router>
+    );
+
+    const manufacturer = screen.getByText('Manufacturer');
+    const manufacturerList = screen.getByText('ManufacturerList');
+    const manufacturerListLink = screen.getAllByRole('link');
+
+    expect(manufacturer).toBeInTheDocument();
+    expect(manufacturerList).toBeInTheDocument();
+    expect(manufacturerListLink[0]).toHaveAttribute('href', '/manufacturers');
+    expect(manufacturerListLink.length).toBe(1);
+  });
+});

package/src/breadcrumb/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb';

package/src/button/Button.js

@@ -0,0 +1,110 @@
+import styled, { css } from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+
+const Button = styled.button.attrs(() => ({
+  primary: true,
+}))`
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: var(--font-button);
+  line-height: var(--font-body1);
+  cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')};
+  border-radius: var(--border-radius-l);
+  padding: 10px var(--spacing-s);
+  text-transform: uppercase;
+
+  > svg {
+    margin-right: calc(var(--spacing-s) - 0.25rem);
+    font-size: var(--font-body1);
+  }
+
+  &:hover {
+    ${({ disabled }) => {
+      return (
+        !disabled &&
+        css`
+          transition: 0.3s;
+          box-shadow: var(--box-shadow);
+          opacity: 0.9;
+        `
+      );
+    }}
+  }
+
+  ${backgroundColor}
+  ${colorOnBackground}
+
+  ${({ secondary }) =>
+    secondary &&
+    css`
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `}
+
+  ${({ reverse }) =>
+    reverse &&
+    css`
+      background: var(--color-background1);
+      color: var(--font-on-background);
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.5;
+    `}
+
+  ${({ iconOnly }) =>
+    iconOnly &&
+    css`
+      padding: 10px;
+
+      > svg {
+        margin-right: 0;
+      }
+    `}
+
+  ${({ fullWidth }) => fullWidth && 'width: 100%;'}
+
+  ${({ alignCenter }) => alignCenter && 'justify-content: center;'}
+
+  ${({ filterFocus }) =>
+    filterFocus &&
+    css`
+      border: 2px solid var(--color-danger);
+    `}
+
+  ${({ variant, selected }) =>
+    variant === 'outline' &&
+    css`
+      background: ${selected ? 'var(--color-primary)' : 'transparent'};
+      color: ${selected ? 'var(--font-on-primary)' : 'var(--color-primary)'};
+      border: 1px solid var(--color-primary);
+      padding: 4px var(--spacing-s);
+      text-transform: none;
+
+      &:hover {
+        box-shadow: none;
+      }
+    `}
+
+  ${({ variant }) =>
+    variant === 'link' &&
+    css`
+      font-size: var(--font-body1);
+      background: transparent;
+      color: var(--color-primary);
+      border: none;
+      padding: 0;
+      text-decoration: underline;
+      text-transform: none;
+      &:hover {
+        opacity: 0.8;
+        box-shadow: none;
+      }
+    `}
+`;
+
+export default Button;

package/src/button/ButtonGroup.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button:not(:first-child),
+  *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+
+  ${({ alignCenter }) => alignCenter && 'justify-content: center;'}
+
+  ${({ alignRight }) => alignRight && 'justify-content: flex-end;'}
+
+  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing);'}
+
+  ${({ vertical }) =>
+    vertical &&
+    `
+    flex-direction: column;
+
+    > button,
+    > * {
+      margin-left: 0 !important;
+      margin-bottom: var(--spacing-s);
+    }
+  `}
+
+  ${({ height100 }) => height100 && 'height: 100%;'}
+`;
+
+export default ButtonGroup;

package/src/button/IconButton.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+const IconButton = styled.div.attrs(() => ({
+  role: 'button',
+}))`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+  position: relative;
+  border-radius: var(--border-radius-l);
+  color: ${({ disabled, onHeader }) => {
+    if (disabled) return 'var(--color-grey)';
+    if (onHeader) return 'var(--color-icon-header)';
+    return 'var(--font-on-background)';
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')};
+  margin: auto;
+  ${({ size }) =>
+    size === 'small' &&
+    css`
+      width: 32px;
+      height: 32px;
+    `}
+  &:hover {
+    ${({ disabled }) => !disabled && 'background: var(--color-hover)'}
+  }
+  > svg {
+    font-size: 1.5rem;
+    ${({ size }) => size === 'small' && 'font-size: 1rem;'}
+    ${({ size }) => size === 'large' && 'font-size: 2rem;'}
+  }
+`;
+export default IconButton;

package/src/button/ScrollToTopButton.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { MdOutlineArrowBackIosNew } from 'react-icons/md';
+import Button from './Button';
+
+const ScrollToTopButton = () => {
+  const [$display, setDisplay] = useState(false);
+
+  const toggleVisible = () => {
+    const scrolled = window.pageYOffset;
+    scrolled === 0 ? setDisplay(false) : setDisplay(true);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisible);
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisible);
+    };
+  }, []);
+
+  return (
+    <StyledScrollToTopButton onClick={scrollToTop} $display={$display} iconOnly>
+      <MdOutlineArrowBackIosNew />
+    </StyledScrollToTopButton>
+  );
+};
+
+const StyledScrollToTopButton = styled(Button)`
+  position: fixed;
+  bottom: var(--spacing);
+  right: var(--spacing);
+  display: ${({ $display }) => ($display ? 'flex' : 'none')};
+  z-index: 30;
+
+  > svg {
+    transform: rotate(90deg);
+  }
+`;
+
+export default ScrollToTopButton;

package/src/button/__stories__/Button.stories.js

@@ -0,0 +1,104 @@
+import Button from '../Button';
+
+const metadata = {
+  title: 'Button/Button',
+  component: Button,
+  argTypes: {
+    children: {
+      description: 'Button contents',
+    },
+    secondary: {
+      description: 'Button background color',
+    },
+    reverse: {
+      description: 'Button background color',
+    },
+    success: {
+      description: 'Button background color',
+    },
+    warning: {
+      description: 'Button background color',
+    },
+    danger: {
+      description: 'Button background color',
+    },
+    variant: {
+      description: 'Button variant',
+    },
+    selected: {
+      description: 'Button selected style for outline variant',
+    },
+    onClick: {
+      action: 'Clicked button',
+      description: 'Handle event',
+    },
+    onFocus: {
+      action: 'onFocus button',
+      description: 'Handle event',
+    },
+    filterFocus: {
+      description: 'button focus style',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Button {...args} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'Button',
+  disabled: false,
+  secondary: false,
+  reverse: false,
+  success: false,
+  warning: false,
+  danger: false,
+  filterFocus: false,
+  // todo:按鈕所有可支援的事件監聽補在文件內
+};
+
+const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Button',
+  disabled: false,
+  secondary: true,
+  reverse: false,
+  success: false,
+  warning: false,
+  danger: false,
+  filterFocus: false,
+  // todo:按鈕所有可支援的事件監聽補在文件內
+};
+
+const Outline = Template.bind({});
+Outline.args = {
+  children: 'Outline Button',
+  disabled: false,
+  secondary: false,
+  reverse: false,
+  success: false,
+  warning: false,
+  danger: false,
+  filterFocus: false,
+  variant: 'outline',
+  selected: false,
+};
+
+const OutlineSelected = Template.bind({});
+OutlineSelected.args = {
+  children: 'Outline Selected Button',
+  disabled: false,
+  secondary: false,
+  reverse: false,
+  success: false,
+  warning: false,
+  danger: false,
+  filterFocus: false,
+  variant: 'outline',
+  selected: true,
+};
+
+export default metadata;
+export { Default, Secondary, Outline, OutlineSelected };

package/src/button/__stories__/ButtonGroup.stories.js

@@ -0,0 +1,48 @@
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+
+const metadata = {
+  title: 'Button/ButtonGroup',
+  component: ButtonGroup,
+  decorators: [
+    (Story) => (
+      <div style={{ border: '2px solid #000' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    alignCenter: {
+      description: '按鈕置中',
+    },
+    alignRight: {
+      description: '按鈕置右',
+    },
+    marginBottom: {
+      description: '按鈕底部間距',
+    },
+    vertical: {
+      description: '按鈕垂直',
+    },
+  },
+};
+
+// fix: Stories for multiple components(adjust import Button.stories.js)
+const Template = (args) => (
+  <ButtonGroup {...args}>
+    <Button danger>Previous</Button>
+    <Button secondary>Cancel</Button>
+    <Button warning>Submit</Button>
+  </ButtonGroup>
+);
+
+const Group = Template.bind({});
+Group.args = {
+  alignCenter: false,
+  alignRight: false,
+  marginBottom: false,
+  vertical: false,
+};
+
+export default metadata;
+export { Group };

package/src/button/__stories__/IconButton.stories.js

@@ -0,0 +1,30 @@
+import IconButton from '../IconButton';
+import { MdNotificationsNone } from 'react-icons/md';
+
+const metadata = {
+  title: 'Button/IconButton',
+  component: IconButton,
+  argTypes: {
+    size: {
+      description: 'IconButton 外容器大小',
+      control: 'radio',
+      options: ['small', 'normal', 'large'],
+    },
+  },
+};
+
+const Template = (args) => (
+  <IconButton {...args}>
+    <MdNotificationsNone />
+  </IconButton>
+);
+
+// fix: how to control children's props
+const Icon = Template.bind({});
+Icon.args = {
+  size: 'small',
+  disabled: false,
+};
+
+export default metadata;
+export { Icon };

package/src/button/__stories__/ScrollToTopButton.stories.js

@@ -0,0 +1,22 @@
+import ScrollToTopButton from '../ScrollToTopButton';
+
+const metadata = {
+  title: 'Button/ScrollToTopButton',
+  component: ScrollToTopButton,
+  decorators: [
+    (fn) => (
+      <>
+        <p style={{ color: '#13142E' }}>請下滑動卷軸後點擊按鈕</p>
+        <div>
+          <div style={{ height: '200vh' }} />
+          <div>{fn()}</div>
+        </div>
+      </>
+    ),
+  ],
+};
+
+const Default = () => <ScrollToTopButton />;
+
+export default metadata;
+export { Default };

package/src/button/__test__/Button.test.js

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import Button from '../Button';
+import userEvent from '@testing-library/user-event';
+import 'jest-styled-components';
+
+describe('Test Button Component', () => {
+  test('render button', () => {
+    render(<Button />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveStyle({
+      cursor: 'pointer',
+    });
+
+    userEvent.hover(button);
+    expect(button).toHaveStyleRule('transition', '0.3s', {
+      modifier: ':hover',
+    });
+    expect(button).toHaveStyleRule('background-color', 'var(--color-primary)');
+  });
+
+  test('parameters of the button component', () => {
+    render(<Button disabled reverse filterFocus />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle({
+      opacity: '0.5',
+      cursor: 'no-drop',
+    });
+    expect(button).toHaveStyleRule('background', 'var(--color-background1)');
+    expect(button).toHaveStyleRule('border', '2px solid var(--font-on-danger)');
+  });
+});

package/src/button/__test__/ButtonGroup.test.js

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import 'jest-styled-components';
+
+describe('test ButtonGroup', () => {
+  test('render ButtonGroup', () => {
+    render(
+      <ButtonGroup data-testid='buttonGroup' vertical alignCenter>
+        <Button>cancel</Button>
+        <Button>Next</Button>
+      </ButtonGroup>
+    );
+
+    expect(screen.getByTestId('buttonGroup')).toBeInTheDocument();
+    expect(screen.getByTestId('buttonGroup')).toHaveStyle({
+      justifyContent: 'center',
+    });
+    screen.getAllByRole('button').forEach((i) => {
+      expect(i).toHaveStyle({
+        marginLeft: '0 !important',
+      });
+    });
+  });
+});

package/src/button/__test__/IconButton.test.js

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import IconButton from '../IconButton';
+import 'jest-styled-components';
+import { MdMoreHoriz } from 'react-icons/md';
+import userEvent from '@testing-library/user-event';
+
+describe('test iconButton', () => {
+  test('render iconButton', () => {
+    const { rerender } = render(
+      <IconButton>
+        <MdMoreHoriz />
+      </IconButton>,
+    );
+
+    const iconButton = screen.getByRole('button');
+    expect(iconButton).toBeInTheDocument();
+    expect(iconButton).toHaveStyleRule('color', 'var(--color-white)');
+
+    userEvent.hover(iconButton);
+    expect(iconButton).toHaveStyleRule('background', 'var(--color-hover)', {
+      modifier: ':hover',
+    });
+
+    rerender(
+      <IconButton disabled>
+        <MdMoreHoriz />
+      </IconButton>,
+    );
+    expect(iconButton).toHaveStyleRule('color', 'var(--color-grey)');
+    expect(iconButton).not.toHaveStyleRule('background', 'var(--color-hover)', {
+      modifier: ':hover',
+    });
+  });
+});

package/src/button/__test__/ScrollToTopButton.test.js

@@ -0,0 +1,19 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import ScrollToTopButton from '../ScrollToTopButton';
+
+describe('test ScrollToTopButton', () => {
+  test('render ScrollToTopButton', () => {
+    render(<ScrollToTopButton />);
+
+    expect(screen.getByRole('button', { hidden: true })).not.toBeVisible();
+
+    fireEvent.scroll(window, {
+      target: { pageYOffset: 50 },
+    });
+
+    expect(screen.getByRole('button', { hidden: true })).toHaveStyle({
+      display: 'flex',
+    });
+    expect(screen.getByRole('button', { hidden: true })).toBeVisible();
+  });
+});

package/src/button/index.js

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as IconButton } from './IconButton';
+export { default as ScrollToTopButton } from './ScrollToTopButton';

package/src/callout/Callout.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const Callout = styled.div`
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background3);
+  margin-bottom: var(--spacing);
+`;
+
+const Body = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  flex: 2;
+`;
+
+const Title = styled.h3`
+  font-size: var(--font-h3);
+  font-weight: 500;
+  color: var(--font-on-background);
+  margin-bottom: var(--border-radius);
+`;
+
+const Description = styled.p`
+  font-size: var(--font-body1);
+  line-height: 1.5;
+  color: var(--font-on-mute);
+  padding-right: var(--spacing);
+  font-weight: 400;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Action = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`;
+
+export default Object.assign(Callout, {
+  Body,
+  Content,
+  Title,
+  Description,
+  Action,
+});

package/src/callout/__stories__/Callout.stories.js

@@ -0,0 +1,23 @@
+import Callout from '../Callout';
+
+const metadata = {
+  title: 'Callout/Callout',
+  component: Callout,
+};
+
+const Default = () => (
+  <Callout>
+    <Callout.Body>
+      <Callout.Content>
+        <Callout.Title>New User Account Activation</Callout.Title>
+        <Callout.Description>
+          New user account has been activated.
+        </Callout.Description>
+      </Callout.Content>
+      <Callout.Action></Callout.Action>
+    </Callout.Body>
+  </Callout>
+);
+
+export default metadata;
+export { Default };

package/src/callout/__test__/Callout.test.js

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import Callout from '../Callout';
+
+test('render Callout', () => {
+  const { container } = render(
+    <Callout>
+      <Callout.Body>
+        <Callout.Content>
+          <Callout.Title>Title</Callout.Title>
+          <Callout.Description>description</Callout.Description>
+        </Callout.Content>
+        <Callout.Action>action</Callout.Action>
+      </Callout.Body>
+    </Callout>
+  );
+  const callout = container.firstChild;
+  const calloutBody = container.firstChild.firstChild;
+  const calloutContent = container.firstChild.firstChild.firstChild;
+  const calloutTitle = screen.getByRole('heading');
+  const calloutDescription = screen.getByText('description');
+  const calloutAction = screen.getByText('action');
+
+  expect(callout).toBeInTheDocument();
+  expect(calloutBody).toBeInTheDocument();
+  expect(calloutTitle).toBeInTheDocument();
+  expect(calloutDescription).toBeInTheDocument();
+  expect(calloutContent).toBeInTheDocument();
+  expect(calloutAction).toBeInTheDocument();
+});