@cashub/ui-elv 1.0.2 → 1.0.3

package/esm/billing/__stories__/Section.stories.js_bak

@@ -0,0 +1,115 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSection from '../Section';
+import BillingSectionHeader from '../SectionHeader';
+import BillingSectionBody from '../SectionBody';
+import BillingHeader3 from '../Header3';
+import BillingParagraph from '../Paragraph';
+import BillingParagraphGroup from '../ParagraphGroup';
+import BillingParagraphText from '../ParagraphText';
+import NanumGothicBold from '../../assets/font/nanumGothic/NanumGothic-Bold.ttf';
+import NanumGothicExtraBold from '../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf';
+import NanumGothicRegular from '../../assets/font/nanumGothic/NanumGothic-Regular.ttf';
+
+export default {
+  title: 'billing/BillingSection',
+  component: BillingSection,
+  subComponent: {
+    BillingSectionHeader,
+    BillingSectionBody,
+  },
+  argTypes: {
+    children: {
+      description:
+        'A BillingSectionHeader and BillingSectionBody component must be passed in.',
+    },
+    theme: { description: 'Provide theme styles for components to use' },
+    backgroundReverse: { description: 'Style variant' },
+    noPadding: { description: 'Style variant' },
+    noMarginBottom: { description: 'Style variant' },
+    paddingS: { description: 'Style variant' },
+    marginBottomS: { description: 'Style variant' },
+    flexGrow: { description: 'Style variant' },
+  },
+};
+
+export const Default = (args) => {
+  const theme = useContext(ThemeContext);
+  Font.register({
+    family: 'Nanum Gothic',
+    fonts: [
+      { src: NanumGothicBold },
+      { src: NanumGothicExtraBold },
+      { src: NanumGothicRegular },
+    ],
+  });
+
+  const styles = StyleSheet.create({
+    page: {
+      fontFamily: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer showToolbar={false} style={{ width: '100%', height: '500px' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingSection {...args} theme={theme}>
+              <BillingSectionHeader>
+                <BillingHeader3>BillingHeader3</BillingHeader3>
+              </BillingSectionHeader>
+              <BillingSectionBody>
+                <BillingParagraphGroup>
+                  <BillingParagraph>
+                    <BillingParagraphText>Used:</BillingParagraphText>
+                    <BillingParagraphText fontWeightBold>
+                      200
+                    </BillingParagraphText>
+                  </BillingParagraph>
+                </BillingParagraphGroup>
+              </BillingSectionBody>
+            </BillingSection>
+          </View>
+          <View>
+            <BillingSection {...args} theme={theme}>
+              <BillingSectionHeader>
+                <BillingHeader3>BillingHeader3</BillingHeader3>
+              </BillingSectionHeader>
+              <BillingSectionBody>
+                <BillingParagraphGroup>
+                  <BillingParagraph>
+                    <BillingParagraphText>Used:</BillingParagraphText>
+                    <BillingParagraphText fontWeightBold>
+                      200
+                    </BillingParagraphText>
+                  </BillingParagraph>
+                </BillingParagraphGroup>
+              </BillingSectionBody>
+            </BillingSection>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  backgroundReverse: false,
+  noPadding: false,
+  noMarginBottom: false,
+  paddingS: false,
+  marginBottomS: false,
+  flexGrow: false,
+};

package/esm/billing/__stories__/SectionBody.stories.js_bak

@@ -0,0 +1,62 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Text,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSectionBody from '../SectionBody';
+import NanumGothicBold from '../../assets/font/nanumGothic/NanumGothic-Bold.ttf';
+import NanumGothicExtraBold from '../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf';
+import NanumGothicRegular from '../../assets/font/nanumGothic/NanumGothic-Regular.ttf';
+
+export default {
+  title: 'billing/BillingSectionBody',
+  component: BillingSectionBody,
+  argTypes: {
+    children: {
+      description: 'BillingSectionBody content can have 0 to many children.',
+    },
+  },
+};
+
+export const Default = (args) => {
+  const theme = useContext(ThemeContext);
+  Font.register({
+    family: 'Nanum Gothic',
+    fonts: [
+      { src: NanumGothicBold },
+      { src: NanumGothicExtraBold },
+      { src: NanumGothicRegular },
+    ],
+  });
+  const styles = StyleSheet.create({
+    page: {
+      family: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingSectionBody {...args}>
+              <View>
+                <Text>text1</Text>
+              </View>
+              <Text>text2</Text>
+            </BillingSectionBody>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};

package/esm/billing/__stories__/SectionHeader.stories.js-bak

@@ -0,0 +1,68 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSectionHeader from '../SectionHeader';
+import BillingHeader3 from '../Header3';
+import NanumGothicBold from '../../assets/font/nanumGothic/NanumGothic-Bold.ttf';
+import NanumGothicExtraBold from '../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf';
+import NanumGothicRegular from '../../assets/font/nanumGothic/NanumGothic-Regular.ttf';
+
+export default {
+  title: 'billing/BillingSectionHeader',
+  component: BillingSectionHeader,
+  subComponent: {
+    BillingHeader3,
+  },
+  argTypes: {
+    children: {
+      description: 'A BillingHeader3 component must be passed in.',
+    },
+    inline: { description: 'Style variant' },
+  },
+};
+
+export const Default = (args) => {
+  const theme = useContext(ThemeContext);
+  Font.register({
+    family: 'Nanum Gothic',
+    fonts: [
+      { src: NanumGothicBold },
+      { src: NanumGothicExtraBold },
+      { src: NanumGothicRegular },
+    ],
+  });
+  const styles = StyleSheet.create({
+    page: {
+      family: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingSectionHeader {...args}>
+              <BillingHeader3>BillingHeader3</BillingHeader3>
+              <BillingHeader3>BillingHeader3</BillingHeader3>
+            </BillingSectionHeader>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  inline: false,
+};

package/esm/breadcrumb/Breadcrumb.js

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import media from '../styles/mixin/media';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Breadcrumb = _ref => {
+  let {
+    path = []
+  } = _ref;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: path.map((_ref2, index) => {
+      let {
+        name,
+        url
+      } = _ref2;
+      if (url) {
+        return /*#__PURE__*/_jsx(Link, {
+          to: url,
+          children: /*#__PURE__*/_jsx("p", {
+            children: name
+          })
+        }, index);
+      }
+      return /*#__PURE__*/_jsx("p", {
+        children: name
+      }, index);
+    })
+  });
+};
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: var(--font-body2);
+  line-height: var(--font-body1);
+  color: var(--font-on-background);
+  padding: var(--spacing-s) 0;
+
+  > *:not(:last-child) {
+    display: flex;
+    align-items: center;
+    color: var(--font-on-background);
+    overflow: hidden;
+
+    > p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &:after {
+      content: '/';
+      padding: 0 var(--spacing-xs);
+    }
+  }
+
+  > *:last-child {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--color-primary);
+  }
+
+  ${media.tablet`
+    padding-top: 0;
+  `}
+`;
+export default Breadcrumb;

package/esm/breadcrumb/index.js

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

package/esm/button/Button.js

@@ -0,0 +1,145 @@
+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: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return 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 {
+    ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return !disabled && css`
+          transition: 0.3s;
+          box-shadow: var(--box-shadow);
+          opacity: 0.9;
+        `;
+}}
+  }
+
+  ${backgroundColor}
+  ${colorOnBackground}
+
+  ${_ref3 => {
+  let {
+    secondary
+  } = _ref3;
+  return secondary && css`
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `;
+}}
+
+  ${_ref4 => {
+  let {
+    reverse
+  } = _ref4;
+  return reverse && css`
+      background: var(--color-background1);
+      color: var(--font-on-background);
+    `;
+}}
+
+  ${_ref5 => {
+  let {
+    disabled
+  } = _ref5;
+  return disabled && css`
+      opacity: 0.5;
+    `;
+}}
+
+  ${_ref6 => {
+  let {
+    iconOnly
+  } = _ref6;
+  return iconOnly && css`
+      padding: 10px;
+
+      > svg {
+        margin-right: 0;
+      }
+    `;
+}}
+
+  ${_ref7 => {
+  let {
+    fullWidth
+  } = _ref7;
+  return fullWidth && 'width: 100%;';
+}}
+
+  ${_ref8 => {
+  let {
+    alignCenter
+  } = _ref8;
+  return alignCenter && 'justify-content: center;';
+}}
+
+  ${_ref9 => {
+  let {
+    filterFocus
+  } = _ref9;
+  return filterFocus && css`
+      border: 2px solid var(--color-danger);
+    `;
+}}
+
+  ${_ref10 => {
+  let {
+    variant,
+    selected
+  } = _ref10;
+  return 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;
+      }
+    `;
+}}
+
+  ${_ref11 => {
+  let {
+    variant
+  } = _ref11;
+  return 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/esm/button/ButtonGroup.js

@@ -0,0 +1,54 @@
+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);
+  }
+
+  ${_ref => {
+  let {
+    alignCenter
+  } = _ref;
+  return alignCenter && 'justify-content: center;';
+}}
+
+  ${_ref2 => {
+  let {
+    alignRight
+  } = _ref2;
+  return alignRight && 'justify-content: flex-end;';
+}}
+
+  ${_ref3 => {
+  let {
+    marginBottom
+  } = _ref3;
+  return marginBottom && 'margin-bottom: var(--spacing);';
+}}
+
+  ${_ref4 => {
+  let {
+    vertical
+  } = _ref4;
+  return vertical && `
+    flex-direction: column;
+
+    > button,
+    > * {
+      margin-left: 0 !important;
+      margin-bottom: var(--spacing-s);
+    }
+  `;
+}}
+
+  ${_ref5 => {
+  let {
+    height100
+  } = _ref5;
+  return height100 && 'height: 100%;';
+}}
+`;
+export default ButtonGroup;

package/esm/button/IconButton.js

@@ -0,0 +1,64 @@
+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: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
+}};
+  cursor: ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'no-drop' : 'pointer';
+}};
+  margin: auto;
+
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
+  return size === 'small' && css`
+      width: 32px;
+      height: 32px;
+    `;
+}}
+
+  &:hover {
+    ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return !disabled && 'background: var(--color-hover)';
+}}
+  }
+
+  > svg {
+    font-size: 1.5rem;
+
+    ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  return size === 'small' && 'font-size: 1rem;';
+}}
+
+    ${_ref6 => {
+  let {
+    size
+  } = _ref6;
+  return size === 'large' && 'font-size: 2rem;';
+}}
+  }
+`;
+export default IconButton;

package/esm/button/ScrollToTopButton.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { MdOutlineArrowBackIosNew } from 'react-icons/md/index.esm';
+import Button from './Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx(StyledScrollToTopButton, {
+    onClick: scrollToTop,
+    $display: $display,
+    iconOnly: true,
+    children: /*#__PURE__*/_jsx(MdOutlineArrowBackIosNew, {})
+  });
+};
+const StyledScrollToTopButton = styled(Button)`
+  position: fixed;
+  bottom: var(--spacing);
+  right: var(--spacing);
+  display: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? 'flex' : 'none';
+}};
+  z-index: 30;
+
+  > svg {
+    transform: rotate(90deg);
+  }
+`;
+export default ScrollToTopButton;

package/esm/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/esm/callout/Callout.js

@@ -0,0 +1,45 @@
+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/esm/callout/index.js

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