@punch-in/buffet-modern 3.3.11

package/src/components/InputText/index.js

@@ -0,0 +1,70 @@
+/**
+ *
+ * InputText
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const InputText = styled.input`
+  width: 100%;
+  height: ${sizes.input.height};
+  padding: 0 ${sizes.input.padding};
+  font-weight: ${sizes.fontWeight.regular};
+  font-size: ${sizes.input.fontSize};
+  cursor: text;
+  outline: 0;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: ${sizes.borderRadius};
+  color: ${colors.blueTxt};
+  background-color: transparent;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: ${colors.greyPlaceholder};
+  }
+
+  &::-webkit-input-placeholder {
+    color: ${colors.greyPlaceholder};
+  }
+
+  &:focus {
+    border-color: ${colors.blueBorder};
+    box-shadow: 0 0 0 3px ${colors.blueFocusRing};
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: ${colors.greyIconBkgd};
+    cursor: not-allowed;
+    color: ${colors.brightGrey};
+  }
+
+  ${props =>
+    (props.type === 'search' || props.type === 'email' || props.icon) &&
+    `
+      padding-left: calc(${sizes.input.height} + ${sizes.input.padding});
+    `}
+
+  ${props =>
+    props.type === 'password' &&
+    `
+      padding-right: calc(${sizes.input.height} + ${sizes.input.padding});
+    `}
+`;
+
+InputText.defaultProps = {
+  type: 'text',
+};
+
+InputText.propTypes = {
+  type: PropTypes.string,
+};
+
+export default InputText;

package/src/components/InputText/tests/index.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
+
+import InputText from '../index';
+
+import sizes from '../../../assets/styles/sizes';
+
+const renderComponent = () => shallow(<InputText />);
+
+describe('<InputText />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  describe('<InputText /> style', () => {
+    it('should render left icon space if type is search', () => {
+      const tree = renderer.create(<InputText type="search" />).toJSON();
+      expect(tree).toHaveStyleRule(
+        'padding-left',
+        `calc(${sizes.input.height} + ${sizes.input.padding})`
+      );
+    });
+    it('should render left icon space if type is email', () => {
+      const tree = renderer.create(<InputText type="email" />).toJSON();
+      expect(tree).toHaveStyleRule(
+        'padding-left',
+        `calc(${sizes.input.height} + ${sizes.input.padding})`
+      );
+    });
+    it('should render right icon space if type is password', () => {
+      const tree = renderer.create(<InputText type="password" />).toJSON();
+      expect(tree).toHaveStyleRule(
+        'padding-right',
+        `calc(${sizes.input.height} + ${sizes.input.padding})`
+      );
+    });
+  });
+});

package/src/components/InputWrapper/index.js

@@ -0,0 +1,57 @@
+/**
+ *
+ * InputWrapper
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const InputWrapper = styled.div`
+  position: relative;
+  background-color: ${colors.white};
+  border-radius: ${sizes.borderRadius};
+
+  button[type='button'] {
+    width: ${sizes.input.height};
+    height: ${sizes.input.height};
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    cursor: pointer;
+    outline: 0;
+    border: 0;
+    background: transparent;
+    transition: color 0.2s ease;
+
+    &:hover {
+      span::before {
+        color: ${colors.blueTxt};
+      }
+    }
+
+    &.shown {
+      span::before {
+        color: ${colors.blueTxt};
+      }
+
+      & + input[type='text'] {
+        padding-right: calc(${sizes.input.height} + ${sizes.input.padding});
+      }
+    }
+  }
+
+  span {
+    border-top-left-radius: ${sizes.borderRadius};
+    border-bottom-left-radius: ${sizes.borderRadius};
+  }
+
+  input {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+export default InputWrapper;

package/src/components/Label/index.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * Label
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Label = styled.label`
+  width: 100%;
+  font-weight: ${sizes.fontWeight.semiBold};
+  font-size: ${sizes.input.fontSize};
+  color: ${colors.blueTxt};
+`;
+
+export default Label;

package/src/components/Label/tests/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Label from '../index';
+
+const renderComponent = () => shallow(<Label />);
+
+describe('<Label />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/Links/index.js

@@ -0,0 +1,35 @@
+/**
+ *
+ * Links
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Links = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${sizes.spacing.sm}px;
+
+  button {
+    background: transparent;
+    border: 0;
+    outline: 0;
+    color: ${colors.blueTxt};
+    transition: color 0.2s ease, opacity 0.2s ease;
+
+    &:focus-visible {
+      outline: 2px solid ${colors.blue};
+      outline-offset: 2px;
+    }
+
+    svg {
+      font-size: 1rem;
+      color: ${colors.blueTxt};
+    }
+  }
+`;
+
+export default Links;

package/src/components/List/index.js

@@ -0,0 +1,85 @@
+/**
+ *
+ * List
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const List = styled.div`
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+  border-radius: ${sizes.borderRadius};
+  background: ${colors.white};
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 500px;
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+
+  thead {
+    tr {
+      height: 3rem;
+      line-height: 0.1rem;
+      font-weight: ${sizes.fontWeight.bold};
+      text-transform: capitalize;
+
+      td {
+        background-color: ${colors.greyHeader};
+      }
+    }
+  }
+
+  tbody {
+    color: ${colors.blueTxt};
+
+    tr {
+      height: 5.4rem;
+      transition: background-color 0.15s ease;
+
+      &::before {
+        content: '-';
+        display: inline-block;
+        line-height: 1.1em;
+        color: transparent;
+        background-color: transparent;
+        position: absolute;
+        left: 3rem;
+        width: calc(100% - 6rem);
+        height: 1px;
+        margin-top: -${sizes.margin * 0.1}px;
+      }
+
+      &:not(:first-of-type)::before {
+        background-color: rgba(14, 22, 34, 0.04);
+      }
+    }
+
+    td {
+      padding: 0.75em;
+      vertical-align: middle;
+      font-size: 1.3rem;
+      line-height: 1.8rem;
+
+      &:first-of-type:not(:last-of-type) {
+        padding-left: 3rem;
+      }
+
+      &:last-of-type:not(:first-of-type) {
+        padding-right: 3rem;
+      }
+    }
+  }
+
+  @media (min-width: ${sizes.tablet}) {
+    width: 100%;
+    overflow-x: auto;
+  }
+`;
+
+export default List;

package/src/components/ListHeader/index.js

@@ -0,0 +1,13 @@
+/**
+ *
+ * ListHeader
+ *
+ */
+
+import styled from 'styled-components';
+
+const ListHeader = styled.div`
+  position: relative;
+`;
+
+export default ListHeader;

package/src/components/ListHeader/tests/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ListHeader from '../index';
+
+const renderComponent = () => shallow(<ListHeader />);
+
+describe('<ListHeader />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/ListRow/index.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * ListRow
+ *
+ */
+
+import styled from 'styled-components';
+
+const ListRow = styled.tr`
+  td {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    text-align: left;
+  }
+`;
+
+export default ListRow;

package/src/components/ListRow/tests/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ListRow from '../index';
+
+const renderComponent = () => shallow(<ListRow />);
+
+describe('<ListRow />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/ListSubtitle/index.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * ListSubtitle
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+
+const ListSubtitle = styled.p`
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  color: ${colors.greySubtitle};
+  font-size: 1.3rem;
+  line-height: 1.5;
+`;
+
+export default ListSubtitle;

package/src/components/ListSubtitle/tests/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ListSubtitle from '../index';
+
+const renderComponent = () => shallow(<ListSubtitle />);
+
+describe('<ListSubtitle />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/ListTitle/index.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * ListTitle
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const ListTitle = styled.p`
+  color: ${colors.blueTxt};
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 1.8rem;
+  font-weight: ${sizes.fontWeight.bold};
+  line-height: 1.4;
+`;
+
+export default ListTitle;

package/src/components/ListTitle/tests/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ListTitle from '../index';
+
+const renderComponent = () => shallow(<ListTitle />);
+
+describe('<ListTitle />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/LoadingBar/index.js

@@ -0,0 +1,41 @@
+/**
+ *
+ * LoadingBar
+ *
+ */
+
+import styled, { keyframes } from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const loading = keyframes`
+  from { left: -200px; width: 30%; }
+  50% { width: 30%; }
+  70% { width: 70%; }
+  80% { left: 50%; }
+  95% { left: 120%; }
+  to { left: 100%; }
+`;
+
+const LoadingBar = styled.div`
+  height: 6px;
+  width: 20%;
+  margin-top: ${sizes.spacing.lg}px;
+  position: relative;
+  overflow: hidden;
+  background-color: ${colors.greyHeader};
+  border-radius: ${sizes.borderRadius};
+
+  &:before {
+    display: block;
+    position: absolute;
+    content: '';
+    left: -200px;
+    width: 200px;
+    height: 6px;
+    background-color: ${colors.lightGrey};
+    animation: ${loading} 2s linear infinite;
+  }
+`;
+
+export default LoadingBar;

package/src/components/LoadingBar/tests/index.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+// import renderer from 'react-test-renderer';
+
+import LoadingBar from '../index';
+
+const renderComponent = () => shallow(<LoadingBar />);
+
+describe('<LoadingBar />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  // Commenting it ATM
+  // it('should match snapshot', () => {
+  //   const tree = renderer.create(<LoadingBar />).toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+});

package/src/components/LoadingIndicator/index.js

@@ -0,0 +1,81 @@
+/**
+ *
+ * LoadingIndicator
+ *
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, keyframes } from 'styled-components';
+import colors from '../../assets/styles/colors';
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const getSize = (size, small) => {
+  if (size) return size;
+  if (small) return '11px';
+  
+  return '26px';
+};
+
+const Loader = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  > div {
+    width: ${({ size, small }) => getSize(size, small)};
+    height: ${({ size, small }) => getSize(size, small)};
+    border: ${({ borderWidth, borderColor }) =>
+    `${borderWidth} solid ${borderColor}`};
+    border-top-color: ${({ borderTopColor }) => borderTopColor};
+    border-radius: 50%;
+    animation: ${({ animationTime }) =>
+    css`
+        ${spin} ${animationTime} linear infinite
+      `};
+  }
+`;
+
+const LoadingIndicator = ({
+  animationTime,
+  borderColor,
+  borderTopColor,
+  borderWidth,
+  small,
+  size,
+}) => (
+  <Loader
+    animationTime={animationTime}
+    borderColor={borderColor}
+    borderTopColor={borderTopColor}
+    borderWidth={borderWidth}
+    small={small}
+    size={size}
+  >
+    <div />
+  </Loader>
+);
+
+LoadingIndicator.defaultProps = {
+  animationTime: '1s',
+  borderColor: colors.greyIconBkgd,
+  borderTopColor: colors.blue,
+  borderWidth: '4px',
+  size: null,
+  small: false,
+};
+
+LoadingIndicator.propTypes = {
+  animationTime: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderTopColor: PropTypes.string,
+  borderWidth: PropTypes.string,
+  size: PropTypes.string,
+  small: PropTypes.bool,
+};
+
+export default LoadingIndicator;

package/src/components/Option/index.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Option = styled.div`
+  display: flex;
+  height: ${({ height }) => height};
+  margin: ${({ margin }) => margin};
+  align-items: center;
+  padding-left: ${sizes.spacing.lg}px;
+  background: rgba(0, 126, 255, 0.08);
+  border: 1px solid rgba(0, 126, 255, 0.24);
+  border-radius: ${sizes.borderRadiusSm};
+  line-height: ${({ lineHeight }) => lineHeight};
+  color: ${colors.blue};
+  font-size: ${({ theme }) =>
+    theme?.main?.sizes?.fonts?.md || sizes.input.fontSize};
+  -webkit-font-smoothing: antialiased;
+`;
+
+Option.defaultProps = {
+  height: '30px',
+  lineHeight: '28px',
+  margin: '0',
+  theme: {
+    main: {
+      sizes: {
+        fonts: {
+          xs: '11px',
+          sm: '12px',
+          md: '13px',
+          lg: '18px',
+        },
+      },
+    },
+  },
+};
+
+export default Option;

package/src/components/Option/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Option /> should match the snapshot 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 30px;
+  margin: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-left: 10px;
+  background: rgba(0,126,255,0.08);
+  border: 1px solid rgba(0,126,255,0.24);
+  border-radius: 2px;
+  line-height: 28px;
+  color: #007eff;
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+}
+
+<div
+  className="c0"
+  height="30px"
+/>
+`;

package/src/components/Option/tests/index.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import Option from '../index';
+
+describe('<Option />', () => {
+  it('should not crash', () => {
+    shallow(<Option />);
+  });
+
+  it('should match the snapshot', () => {
+    const tree = renderer.create(<Option />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});