@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/iconbox/IconBoxV2.js

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+
+const IconBoxV2 = styled.div`
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  background: var(--color-background1);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  border: 2px solid transparent;
+
+  ${({ fullHeight }) => fullHeight && 'height: calc(100% - var(--spacing));'}
+
+  ${({ selected }) =>
+    selected &&
+    css`
+      border-color: var(--color-primary);
+      background: color-mix(
+        in srgb,
+        var(--color-primary) 10%,
+        var(--color-background1)
+      );
+    `}
+`;
+
+const Body = styled.div`
+  display: flex;
+`;
+
+const Description = styled.div`
+  flex: 1 1 auto;
+  font-size: var(--font-body1);
+`;
+
+const Info = styled.div`
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+
+const Tool = styled.div`
+  flex: 0 0 calc(var(--spacing-s) + 36px);
+  padding-left: var(--spacing-s);
+
+  > *:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+
+export default Object.assign(IconBoxV2, {
+  Body,
+  Description,
+  Info,
+  Tool,
+  Figure: IconBoxFigure,
+  Image: IconBoxImage,
+});

package/src/iconbox/__stories__/ApplicationIconBox.stories.js

@@ -0,0 +1,53 @@
+import ApplicationIconBox from '../ApplicationIconBox';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/ApplicationIconBox',
+  component: ApplicationIconBox,
+  argTypes: {
+    clickable: {
+      description: 'cursor: pointer',
+    },
+    horizontal: {
+      description: 'flex-direction: row',
+    },
+    alignCenter: {
+      description: 'text-align: center',
+    },
+    selected: {
+      description: 'border style',
+    },
+  },
+};
+
+const Template = (args) => (
+  <ApplicationIconBox {...args}>
+    <ApplicationIconBox.Body {...args}>
+      <ApplicationIconBox.Figure sizeS paddingRightS>
+        <ApplicationIconBox.Image
+          rounded
+          sizeS
+          src={defaultUserPic}
+          alt='pic'
+        />
+      </ApplicationIconBox.Figure>
+      <ApplicationIconBox.Description>
+        <ApplicationIconBox.Title>Application Title</ApplicationIconBox.Title>
+        <ApplicationIconBox.Content>
+          2022-04-29 10:19:58
+        </ApplicationIconBox.Content>
+      </ApplicationIconBox.Description>
+    </ApplicationIconBox.Body>
+  </ApplicationIconBox>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  clickable: true,
+  horizontal: true,
+  alignCenter: true,
+  selected: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBox.stories.js

@@ -0,0 +1,34 @@
+import IconBox from '../IconBox';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'Iconbox/IconBox',
+  component: IconBox,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    icon: {
+      description: 'icon image',
+      control: { type: 'file', accept: '.png,.jpg' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <IconBox {...args} src={args.icon[0]}></IconBox>;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  icon: [`${ApplicationIcon}`],
+  title: 'Application',
+  children: 'Content',
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxFigure.stories.js

@@ -0,0 +1,67 @@
+import IconBoxFigure from '../subComponent/IconBoxFigure';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'IconBox/IconBoxFigure',
+  component: IconBoxFigure,
+  argTypes: {
+    marginRight: {
+      description: 'margin-right:24px',
+    },
+    paddingRight: {
+      description: 'padding-right:24px',
+    },
+    paddingRightS: {
+      description: 'padding-right:16px',
+    },
+    paddingBottomS: {
+      description: 'padding-bottom:16px',
+    },
+    sizeS: {
+      description: 'flex-basis: 80px',
+    },
+    sizeXS: {
+      description: 'flex-basis: 40px',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        background: '#13142e',
+        width: 'auto',
+        height: 'auto',
+        borderRadius: '50px',
+        padding: '30px',
+        color: '#ffffff',
+      }}
+      {...args}
+    >
+      <IconBoxFigure {...args} style={{ border: '2px solid #ffffff' }}>
+        <img
+          src={ApplicationIcon}
+          alt='pic'
+          style={{ width: '120', height: '120px' }}
+        />
+      </IconBoxFigure>
+      <p style={{ border: '2px solid #ffffff', marginLeft: '50px' }}>element</p>
+    </div>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  marginRight: false,
+  paddingRight: false,
+  paddingRightS: false,
+  paddingBottomS: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxFigure.stories_V2.stories.js

@@ -0,0 +1,41 @@
+import ApplicationIconBox from '../ApplicationIconBox';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/IconBoxFigure_V2',
+  component: ApplicationIconBox,
+};
+
+const Template = (args) => (
+  <ApplicationIconBox>
+    <ApplicationIconBox.Body horizontal>
+      <ApplicationIconBox.Figure {...args}>
+        <ApplicationIconBox.Image
+          rounded
+          sizeS
+          src={defaultUserPic}
+          alt='pic'
+        />
+      </ApplicationIconBox.Figure>
+      <ApplicationIconBox.Description>
+        <ApplicationIconBox.Title>Application Title</ApplicationIconBox.Title>
+        <ApplicationIconBox.Content>
+          2022-04-29 10:19:58
+        </ApplicationIconBox.Content>
+      </ApplicationIconBox.Description>
+    </ApplicationIconBox.Body>
+  </ApplicationIconBox>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  marginRight: false,
+  paddingRight: false,
+  paddingRightS: false,
+  paddingBottomS: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxImage.stories.js

@@ -0,0 +1,32 @@
+import IconBoxImage from '../subComponent/IconBoxImage';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'IconBox/IconBoxImage',
+  component: IconBoxImage,
+  argTypes: {
+    rounded: {
+      description: 'border-radius',
+    },
+    sizeS: {
+      description: 'width: 80px,height: 80px',
+    },
+    sizeXS: {
+      description: 'width: 40px,height: 40px',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <IconBoxImage {...args} src={ApplicationIcon} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  rounded: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxV2.stories.js

@@ -0,0 +1,66 @@
+import IconBoxV2 from '../IconBoxV2';
+import Grid from '../../grid/Grid';
+import Column from '../../grid/Column';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/IconBoxV2',
+  component: IconBoxV2,
+  argTypes: {
+    selected: {
+      control: 'boolean',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <Grid columns={2}>
+      <Column desktop={1}>
+        <IconBoxV2 {...args}>
+          <IconBoxV2.Body>
+            <IconBoxV2.Figure paddingRight>
+              <IconBoxV2.Image rounded src={defaultUserPic} alt='pic' />
+            </IconBoxV2.Figure>
+            <IconBoxV2.Description>
+              <IconBoxV2.Info>application name</IconBoxV2.Info>
+              <IconBoxV2.Info>Version:&nbsp;3.9.3</IconBoxV2.Info>
+              <IconBoxV2.Info>Vendor:&nbsp;example</IconBoxV2.Info>
+              <IconBoxV2.Info>
+                Enterprise:&nbsp;shenny_Enterprise
+              </IconBoxV2.Info>
+            </IconBoxV2.Description>
+            <IconBoxV2.Tool></IconBoxV2.Tool>
+          </IconBoxV2.Body>
+        </IconBoxV2>
+      </Column>
+      <Column desktop={1}>
+        <IconBoxV2 {...args} selected>
+          <IconBoxV2.Body>
+            <IconBoxV2.Figure paddingRight>
+              <IconBoxV2.Image rounded src={defaultUserPic} alt='pic' />
+            </IconBoxV2.Figure>
+            <IconBoxV2.Description>
+              <IconBoxV2.Info>application name</IconBoxV2.Info>
+              <IconBoxV2.Info>Version:&nbsp;3.9.3</IconBoxV2.Info>
+              <IconBoxV2.Info>Vendor:&nbsp;example</IconBoxV2.Info>
+              <IconBoxV2.Info>
+                Enterprise:&nbsp;shenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterprise;shenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterprise
+              </IconBoxV2.Info>
+            </IconBoxV2.Description>
+            <IconBoxV2.Tool></IconBoxV2.Tool>
+          </IconBoxV2.Body>
+        </IconBoxV2>
+      </Column>
+    </Grid>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  fullHeight: true,
+  selected: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__test__/ApplicationIconBox.test.js

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import ApplicationIconBox from '../ApplicationIconBox';
+
+describe('Test ApplicationIconBox Component', () => {
+  test('render without props', () => {
+    render(
+      <ApplicationIconBox data-testid='wrapper'>
+        <ApplicationIconBox.Body data-testid='body'>
+          <ApplicationIconBox.Figure>
+            <ApplicationIconBox.Image src='fake.png' alt='fake image' />
+          </ApplicationIconBox.Figure>
+          <ApplicationIconBox.Description>
+            <ApplicationIconBox.Title>Title</ApplicationIconBox.Title>
+            <ApplicationIconBox.Content>Content</ApplicationIconBox.Content>
+          </ApplicationIconBox.Description>
+        </ApplicationIconBox.Body>
+      </ApplicationIconBox>
+    );
+
+    const wrapper = screen.getByTestId('wrapper');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).not.toHaveStyle('cursor: pointer');
+
+    const body = screen.getByTestId('body');
+    expect(body).toBeInTheDocument();
+    expect(body).not.toHaveStyle({
+      flexDirection: 'row',
+      textAlign: 'center',
+    });
+    expect(body).not.toHaveStyleRule('border-color', 'var(--border-color)');
+    expect(body).not.toHaveStyleRule('border-radius', 'var(--border-radius)');
+    expect(body).not.toHaveStyleRule('box-shadow', 'var(--box-shadow)');
+
+    const image = screen.getByRole('img');
+    expect(screen.getByRole('figure')).toBeInTheDocument();
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'fake.png');
+    expect(image).toHaveAttribute('alt', 'fake image');
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  test('render with props', () => {
+    render(
+      <ApplicationIconBox data-testid='wrapper' clickable>
+        <ApplicationIconBox.Body
+          data-testid='body'
+          horizontal
+          alignCenter
+          selected
+        >
+          <ApplicationIconBox.Figure>
+            <ApplicationIconBox.Image src='fake.png' alt='fake image' />
+          </ApplicationIconBox.Figure>
+          <ApplicationIconBox.Description>
+            <ApplicationIconBox.Title>Title</ApplicationIconBox.Title>
+            <ApplicationIconBox.Content>Content</ApplicationIconBox.Content>
+          </ApplicationIconBox.Description>
+        </ApplicationIconBox.Body>
+      </ApplicationIconBox>
+    );
+
+    const wrapper = screen.getByTestId('wrapper');
+    expect(wrapper).toHaveStyle('cursor: pointer');
+
+    const body = screen.getByTestId('body');
+    expect(body).toHaveStyle({
+      flexDirection: 'row',
+      textAlign: 'center',
+    });
+    expect(body).toHaveStyleRule('border-color', 'var(--border-color)');
+    expect(body).toHaveStyleRule('border-radius', 'var(--border-radius)');
+    expect(body).toHaveStyleRule('box-shadow', 'var(--box-shadow)');
+  });
+});

package/src/iconbox/__test__/IconBox.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import IconBox from '../IconBox';
+
+describe('Test IconBox Component', () => {
+  test('render', () => {
+    render(
+      <IconBox icon='fake.png' title='fake'>
+        <p>Fake children</p>
+      </IconBox>
+    );
+
+    const imageElement = screen.getByRole('img');
+    expect(imageElement).toHaveAttribute('src', 'fake.png');
+    expect(imageElement).toHaveAttribute('alt', "fake's icon");
+
+    const titleElement = screen.getByText('fake');
+    expect(titleElement).toBeInTheDocument();
+
+    const paragraphElement = screen.getByText('Fake children');
+    expect(paragraphElement).toBeInTheDocument();
+  });
+});

package/src/iconbox/__test__/IconBoxFigure.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import IconBoxFigure from '../subComponent/IconBoxFigure';
+
+describe('Test IconBoxFigure Component', () => {
+  test('margin', () => {
+    render(<IconBoxFigure marginRight />);
+    expect(screen.getByRole('figure')).toHaveStyle(
+      'margin-right: var(--spacing)'
+    );
+  });
+
+  test('padding', () => {
+    const { rerender } = render(<IconBoxFigure paddingRight />);
+
+    const element = screen.getByRole('figure');
+    expect(element).toHaveStyle('padding-right: var(--spacing)');
+
+    rerender(<IconBoxFigure paddingRightS />);
+    expect(element).toHaveStyle('padding-right: var(--spacing-s)');
+
+    rerender(<IconBoxFigure paddingBottomS />);
+    expect(element).toHaveStyle('padding-bottom: var(--spacing-s)');
+  });
+
+  test('size', () => {
+    const { rerender } = render(<IconBoxFigure />);
+
+    const element = screen.getByRole('figure');
+    expect(element).toHaveStyle('flex: 0 0 120px');
+
+    rerender(<IconBoxFigure sizeS />);
+    expect(element).toHaveStyle('flex-basis: 80px');
+
+    rerender(<IconBoxFigure sizeXS />);
+    expect(element).toHaveStyle('flex-basis: 40px');
+  });
+});

package/src/iconbox/__test__/IconBoxImage.test.js

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import IconBoxImage from '../subComponent/IconBoxImage';
+
+describe('Test IconBoxImage Component', () => {
+  test('default attributes', () => {
+    render(<IconBoxImage src='fake.png' alt={'fake icon'} />);
+    const element = screen.getByRole('img');
+    expect(element).toHaveAttribute('crossorigin');
+    expect(element).toHaveAttribute('src', 'fake.png');
+    expect(element).toHaveAttribute('alt', 'fake icon');
+  });
+
+  test('rounded', () => {
+    render(<IconBoxImage src='fake.png' alt={'fake icon'} rounded />);
+    const element = screen.getByRole('img');
+    expect(element).toHaveStyle('border-radius: var(--border-radius)');
+  });
+
+  test('size', () => {
+    const { rerender } = render(
+      <IconBoxImage src='fake.png' alt={'fake icon'} />
+    );
+    const element = screen.getByRole('img');
+    expect(element).toHaveStyle({ width: '120px', height: '120px' });
+
+    rerender(<IconBoxImage src='fake.png' alt={'fake icon'} sizeS />);
+    expect(element).toHaveStyle({ width: '80px', height: '80px' });
+
+    rerender(<IconBoxImage src='fake.png' alt={'fake icon'} sizeXS />);
+    expect(element).toHaveStyle({ width: '40px', height: '40px' });
+  });
+});

package/src/iconbox/__test__/IconBoxV2.test.js

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import IconBoxV2 from '../IconBoxV2';
+
+describe('Test IconBoxV2 Component', () => {
+  test('render', () => {
+    const { rerender, container } = render(
+      <IconBoxV2>
+        <IconBoxV2.Body>
+          <IconBoxV2.Figure>
+            <IconBoxV2.Image src='fake.png' alt='fake image' />
+          </IconBoxV2.Figure>
+          <IconBoxV2.Description>
+            <IconBoxV2.Info>Information</IconBoxV2.Info>
+          </IconBoxV2.Description>
+          <IconBoxV2.Tool>
+            <button type='button'>Button</button>
+          </IconBoxV2.Tool>
+        </IconBoxV2.Body>
+      </IconBoxV2>
+    );
+
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveStyleRule('height: calc(100% - var(--spacing))');
+
+    const imageElement = screen.getByRole('img');
+    expect(screen.getByRole('figure')).toBeInTheDocument();
+    expect(imageElement).toHaveAttribute('src', 'fake.png');
+    expect(imageElement).toHaveAttribute('alt', 'fake image');
+
+    expect(screen.getByText('Information')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(
+      <IconBoxV2 fullHeight>
+        <IconBoxV2.Body>
+          <IconBoxV2.Figure>
+            <IconBoxV2.Image src='fake.png' alt='fake image' />
+          </IconBoxV2.Figure>
+          <IconBoxV2.Description>
+            <IconBoxV2.Info>Information</IconBoxV2.Info>
+          </IconBoxV2.Description>
+          <IconBoxV2.Tool>
+            <button type='button'>Button</button>
+          </IconBoxV2.Tool>
+        </IconBoxV2.Body>
+      </IconBoxV2>
+    );
+    expect(wrapper).toHaveStyleRule('height: calc(100% - var(--spacing))');
+  });
+});

package/src/iconbox/bgImageRegistry.js

@@ -0,0 +1,13 @@
+import bgEnterprise from './assets/bg-enterprise.png';
+import bgMerchant from './assets/bg-merchant.png';
+import bgTerminal from './assets/bg-terminal.png';
+import bgUser from './assets/bg-user.png';
+
+const bgImageRegistry = {
+  enterprise: bgEnterprise,
+  merchant: bgMerchant,
+  terminal: bgTerminal,
+  user: bgUser,
+};
+
+export default bgImageRegistry;

package/src/iconbox/index.js

@@ -0,0 +1,3 @@
+export { default as ApplicationIconBox } from './ApplicationIconBox';
+export { default as IconBox } from './IconBox';
+export { default as IconBoxV2 } from './IconBoxV2';

package/src/iconbox/subComponent/IconBoxFigure.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const IconBoxFigure = styled.figure`
+  flex: 0 0 120px;
+
+  ${({ marginRight }) => marginRight && 'margin-right: var(--spacing);'}
+  ${({ paddingRight }) => paddingRight && 'padding-right: var(--spacing);'}
+  ${({ paddingRightS }) => paddingRightS && 'padding-right: var(--spacing-s);'}
+  ${({ paddingBottomS }) =>
+    paddingBottomS && 'padding-bottom: var(--spacing-s);'}
+
+  ${({ sizeS }) => sizeS && 'flex-basis: 80px;'}
+  ${({ sizeXS }) => sizeXS && 'flex-basis: 40px;'}
+`;
+
+export default IconBoxFigure;

package/src/iconbox/subComponent/IconBoxImage.js

@@ -0,0 +1,52 @@
+import { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import iconOverrides from '../../icon/registry';
+
+const Wrapper = styled.span`
+  display: inline-flex;
+  width: 120px;
+  height: 120px;
+  color: ${({ iconColor }) => iconColor || 'var(--color-primary)'};
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  ${({ rounded }) => rounded && 'border-radius: var(--border-radius); overflow: hidden;'}
+  ${({ sizeS }) =>
+    sizeS &&
+    `
+      width: 80px;
+      height: 80px;
+    `}
+  ${({ sizeXS }) =>
+    sizeXS &&
+    `
+      width: 40px;
+      height: 40px;
+    `}
+  ${({ size }) =>
+    size &&
+    `
+      width: ${size}px;
+      height: ${size}px;
+    `}
+`;
+
+const IconBoxImage = ({ src: icon, iconKey, iconColor, alt, ...rest }) => {
+  const theme = useContext(ThemeContext);
+  const override = theme?.useModernIcons && iconKey && iconOverrides[iconKey];
+  const IconComponent = override || icon;
+  const isComponent = typeof IconComponent === 'function';
+  return (
+    <Wrapper iconColor={iconColor} {...rest}>
+      {isComponent ? (
+        <IconComponent />
+      ) : (
+        <img crossOrigin='anonymous' src={IconComponent} alt={alt} />
+      )}
+    </Wrapper>
+  );
+};
+
+export default IconBoxImage;