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

package/src/button/ButtonGroup.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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();
-});

package/src/callout/index.js

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