@punch-in/buffet-modern 3.3.11

package/src/components/Button/index.js

@@ -0,0 +1,122 @@
+/**
+ *
+ * Button
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+import mixins from '../../assets/styles/mixins';
+
+const Button = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${sizes.button.height.large};
+  padding: 0 ${sizes.button.padding.leftRight};
+  font-weight: 600;
+  font-size: 1.4rem;
+  border-radius: ${sizes.borderRadiusLg};
+  cursor: pointer;
+  outline: 0;
+  background-color: ${colors.white};
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  border: 1px solid transparent;
+  position: relative;
+  overflow: hidden;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    ${mixins(colors.lightGreyAlpha).bshadow};
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${colors.blueFocusRing};
+  }
+
+  ${({ color }) =>
+    color !== 'none' &&
+    `
+      background-color: ${colors.button[color].backgroundColor};
+      border: 1px solid ${colors.button[color].borderColor};
+      color: ${colors.button[color].color};
+
+      &:hover:not(:disabled) {
+        background-color: ${colors.button[color].hoverBg ||
+          colors.button[color].backgroundColor};
+        border-color: ${colors.button[color].hoverBg ||
+          colors.button[color].borderColor};
+      }
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    `
+      background-color: ${colors.button.disabled.backgroundColor};
+      border-color: ${colors.button.disabled.borderColor};
+      color: ${colors.button.disabled.color};
+      cursor: not-allowed;
+      transform: none;
+
+      &:hover {
+        box-shadow: none;
+        transform: none;
+        background-color: ${colors.button.disabled.backgroundColor};
+        border-color: ${colors.button.disabled.borderColor};
+      }
+    `}
+
+  ${({ color }) =>
+    color === 'success' &&
+    `
+      min-width: ${sizes.button.minWidth};
+    `}
+
+  > span svg {
+    font-size: 1.2rem;
+    margin-right: 8px;
+    position: relative;
+    top: -1px;
+  }
+
+  > svg {
+    height: 1.2rem;
+    width: auto;
+    margin-right: 8px;
+    position: relative;
+    top: -1px;
+  }
+
+  &[aria-busy="true"] {
+    opacity: 0.7;
+    cursor: wait;
+  }
+`;
+
+Button.defaultProps = {
+  color: 'primary',
+  disabled: false,
+  type: 'button',
+};
+
+Button.propTypes = {
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'cancel',
+    'success',
+    'delete',
+    'none',
+  ]),
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default Button;

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> <Button /> icons should render a custom icon 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 15px;
+  font-weight: 600;
+  font-size: 1.3rem;
+  border-radius: 2px;
+  cursor: pointer;
+  outline: 0;
+  background-color: #ffffff;
+  background-color: #007EFF;
+  border: 1px solid #007EFF;
+  color: #ffffff;
+}
+
+.c0:hover,
+.c0:active {
+  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 30px [object Object];
+}
+
+.c0:focus {
+  outline: 0;
+}
+
+.c0 > span svg {
+  font-size: 10px;
+}
+
+.c0 > svg {
+  height: 10px;
+  width: auto;
+  margin-right: 10px;
+}
+
+<button
+  className="c0"
+  color="primary"
+  disabled={false}
+  type="button"
+/>
+`;
+
+exports[`<Button /> <Button /> icons should render the add icon 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 15px;
+  font-weight: 600;
+  font-size: 1.3rem;
+  border-radius: 2px;
+  cursor: pointer;
+  outline: 0;
+  background-color: #ffffff;
+  background-color: #007EFF;
+  border: 1px solid #007EFF;
+  color: #ffffff;
+}
+
+.c0:hover,
+.c0:active {
+  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 30px [object Object];
+}
+
+.c0:focus {
+  outline: 0;
+}
+
+.c0 > span svg {
+  font-size: 10px;
+}
+
+.c0 > svg {
+  height: 10px;
+  width: auto;
+  margin-right: 10px;
+}
+
+<button
+  className="c0"
+  color="primary"
+  disabled={false}
+  type="button"
+/>
+`;
+
+exports[`<Button /> <Button /> icons should render the add trash 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 15px;
+  font-weight: 600;
+  font-size: 1.3rem;
+  border-radius: 2px;
+  cursor: pointer;
+  outline: 0;
+  background-color: #ffffff;
+  background-color: #007EFF;
+  border: 1px solid #007EFF;
+  color: #ffffff;
+}
+
+.c0:hover,
+.c0:active {
+  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 30px [object Object];
+}
+
+.c0:focus {
+  outline: 0;
+}
+
+.c0 > span svg {
+  font-size: 10px;
+}
+
+.c0 > svg {
+  height: 10px;
+  width: auto;
+  margin-right: 10px;
+}
+
+<button
+  className="c0"
+  color="primary"
+  disabled={false}
+  type="button"
+/>
+`;

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { enzymeFind } from 'styled-components/test-utils';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Button from '../index';
+import colors from '../../../assets/styles/colors';
+
+describe('<Button />', () => {
+  describe('<Button /> attributes', () => {
+    it('should render an <button> tag', () => {
+      const wrapper = mount(<Button />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.type()).toEqual('button');
+    });
+
+    it('should have a className attribute', () => {
+      const wrapper = mount(<Button />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.prop('className')).toBeDefined();
+    });
+
+    it('should adopt a valid attribute', () => {
+      const id = 'test';
+      const wrapper = mount(<Button id={id} />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.prop('id')).toEqual(id);
+    });
+
+    it('should not adopt an invalid attribute', () => {
+      const wrapper = mount(<Button attribute="test" />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.prop('attribute')).toBeUndefined();
+    });
+
+    it('should adopt a default type button', () => {
+      const wrapper = mount(<Button />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.prop('type')).toEqual('button');
+    });
+
+    it('should adopt a type submit', () => {
+      const wrapper = mount(<Button type="submit" />);
+      const renderedComponent = enzymeFind(wrapper, Button);
+      expect(renderedComponent.prop('type')).toEqual('submit');
+    });
+  });
+
+  describe('<Button /> icons', () => {
+    it('should render the add icon', () => {
+      const tree = renderer.create(<Button icon="add" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render a custom icon', () => {
+      const tree = renderer.create(<Button icon={<p>Icon</p>} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render the add trash', () => {
+      const tree = renderer.create(<Button icon="trash" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render the primary style', () => {
+      const tree = renderer.create(<Button color="primary" />).toJSON();
+      expect(tree).toHaveStyleRule('color', colors.white);
+    });
+
+    it('should render the secondary style', () => {
+      const tree = renderer.create(<Button color="secondary" />).toJSON();
+      expect(tree).toHaveStyleRule('color', colors.blue);
+    });
+
+    it('should render the cancel style', () => {
+      const tree = renderer.create(<Button color="cancel" />).toJSON();
+      expect(tree).toHaveStyleRule('color', colors.brightGrey);
+    });
+
+    it('should render the success style', () => {
+      const tree = renderer.create(<Button color="success" />).toJSON();
+      expect(tree).toHaveStyleRule('color', colors.white);
+    });
+
+    it('should render the delete style', () => {
+      const tree = renderer.create(<Button color="delete" />).toJSON();
+      expect(tree).toHaveStyleRule('color', colors.white);
+    });
+  });
+});

package/src/components/Card/index.js

@@ -0,0 +1,73 @@
+/**
+ *
+ * Card
+ *
+ */
+
+import styled from 'styled-components';
+import sizes from '../../assets/styles/sizes';
+import colors from '../../assets/styles/colors';
+
+const Card = styled.div`
+  background: ${colors.white};
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  position: relative;
+  border-radius: ${({ radius }) => radius || sizes.borderRadiusLg};
+  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+
+  .table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.04);
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.25);
+      }
+    }
+  }
+
+  @media (min-width: ${sizes.tablet}) {
+    .table-wrapper {
+      overflow-x: visible;
+    }
+  }
+
+  padding: ${({ noPadding }) => (noPadding ? '0' : '1.5rem')};
+
+  &[aria-busy='true'] {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+`;
+
+Card.defaultProps = {
+  radius: undefined,
+  noPadding: false,
+};
+
+export default Card;

package/src/components/Checkbox/index.js

@@ -0,0 +1,141 @@
+/**
+ *
+ * Checkbox
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Checkbox = styled.input`
+  cursor: pointer;
+  margin: 0;
+  position: relative;
+  width: ${sizes.checkbox.width};
+  height: ${sizes.checkbox.height};
+  opacity: 0;
+  z-index: 2;
+
+  &:focus,
+  &:active {
+    outline: 0;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: calc(-${sizes.checkbox.width} / 2);
+    width: ${sizes.checkbox.width};
+    height: ${sizes.checkbox.height};
+    border: 2px solid ${colors.lightGrey};
+    background-color: ${colors.white};
+    border-radius: ${sizes.borderRadiusSm};
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, background-color 0.2s ease,
+      transform 0.2s ease;
+    z-index: 1;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: calc(-${sizes.checkbox.width} / 2);
+    width: ${sizes.checkbox.width};
+    height: ${sizes.checkbox.height};
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.23, 1);
+    opacity: 0;
+    z-index: 1;
+  }
+
+  &:checked {
+    &:before {
+      border-color: ${colors.darkBlue};
+      background-color: ${colors.darkBlue};
+    }
+
+    &:after {
+      opacity: 1;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+  }
+
+  ${({ someChecked }) =>
+    someChecked &&
+    `
+      &:before {
+        border-color: ${colors.darkBlue};
+        background-color: ${colors.darkBlue};
+      }
+
+      &:after {
+        opacity: 1;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+      }
+    `}
+
+  &:not(:disabled):hover:before {
+    border-color: ${colors.darkBlue};
+    transform: scale(1.05);
+  }
+
+  &:focus-visible:before {
+    box-shadow: 0 0 0 3px ${colors.blueFocusRing};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${colors.greyIconBkgd};
+      border-color: ${colors.greyIconBkgd};
+      opacity: 0.6;
+    }
+
+    &:after {
+      opacity: 0.5;
+    }
+  }
+
+  & + label {
+    display: inline-block;
+    margin-left: ${sizes.spacing.sm}px;
+    font-weight: ${sizes.fontWeight.semiBold};
+    font-size: ${sizes.input.fontSize};
+    line-height: ${sizes.checkbox.height};
+    vertical-align: top;
+    cursor: pointer;
+    user-select: none;
+    color: ${colors.blueTxt};
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  &:disabled + label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+
+Checkbox.defaultProps = {
+  someChecked: false,
+  type: 'checkbox',
+};
+
+Checkbox.propTypes = {
+  someChecked: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default Checkbox;

package/src/components/Checkbox/tests/Checkbox.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+
+import Checkbox from '../index';
+
+const renderComponent = () => shallow(<Checkbox />);
+
+describe('<Checkbox />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should match snapshot', () => {
+    const { asFragment } = render(<Checkbox />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Checkbox/tests/__snapshots__/Checkbox.test.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Checkbox /> should match snapshot 1`] = `
+<DocumentFragment>
+  .c0 {
+  cursor: pointer;
+  margin: 0;
+  position: relative;
+  width: 14px;
+}
+
+.c0:focus,
+.c0:active {
+  outline: 0;
+}
+
+.c0:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: calc(-14px / 2);
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgba(16,22,34,0.15);
+  background-color: #fdfdfd;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+.c0:after {
+  display: none;
+  content: '\\f00c';
+  font-family: 'FontAwesome';
+  position: absolute;
+  left: 0;
+  top: 55%;
+  margin-top: calc(-14px / 2);
+  width: 14px;
+  height: 14px;
+  text-align: center;
+  font-size: 9px;
+  color: #1C5DE7;
+  line-height: 14px;
+}
+
+.c0:checked:after {
+  display: block;
+}
+
+.c0:disabled {
+  background-color: #FAFAFB;
+  cursor: initial;
+}
+
+.c0:disabled:after {
+  color: #9ea7b8;
+}
+
+.c0 + label {
+  display: inline-block;
+  font-weight: 500;
+  font-size: 1.3rem;
+}
+
+<input
+    class="c0"
+    type="checkbox"
+  />
+</DocumentFragment>
+`;