@punch-in/buffet-modern 3.3.11

package/src/components/Header/index.js

@@ -0,0 +1,73 @@
+/**
+ *
+ * Header
+ *
+ */
+
+import styled from 'styled-components';
+import sizes from '../../assets/styles/sizes';
+import colors from '../../assets/styles/colors';
+
+const Header = styled.div`
+  margin-bottom: ${sizes.spacing.xxl}px;
+  position: relative;
+  width: 100%;
+  height: 50px;
+
+  .justify-content-end {
+    display: flex;
+  }
+
+  .header-title p {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.3rem;
+    font-weight: ${sizes.fontWeight.regular};
+    line-height: normal;
+    color: ${colors.greySubtitle};
+  }
+
+  .sticky {
+    position: fixed;
+    top: 0;
+    left: 30.6rem;
+    z-index: 1050;
+    background-color: ${colors.white};
+    width: calc(100vw - 30.6rem);
+    padding-right: ${sizes.spacing.lg}px;
+    height: 60px;
+    display: flex;
+
+    .row {
+      width: 100%;
+      margin: auto;
+      margin-top: ${sizes.spacing.lg}px;
+
+      .header-title p {
+        display: none;
+      }
+
+      > div > div {
+        padding-top: 0;
+
+        h1 {
+          font-size: 2rem;
+
+          svg {
+            margin-top: ${sizes.spacing.sm}px;
+          }
+        }
+
+        button {
+          margin-top: auto;
+          margin-bottom: auto;
+        }
+      }
+    }
+  }
+`;
+
+export default Header;

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

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> snapshot 1`] = `
+.c0 {
+  margin-bottom: 30px;
+  position: relative;
+  width: 100%;
+  height: 50px;
+}
+
+.c0 .justify-content-end {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 .header-title p {
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: normal;
+  color: #787e8f;
+}
+
+.c0 .sticky {
+  position: fixed;
+  top: 0;
+  left: 30.6rem;
+  z-index: 1050;
+  background-color: white;
+  width: calc(100vw - 30.6rem);
+  padding-right: 15px;
+  height: 60px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 .sticky .row {
+  width: 100%;
+  margin: auto;
+  margin-top: 16px;
+}
+
+.c0 .sticky .row .header-title p {
+  display: none;
+}
+
+.c0 .sticky .row > div > div {
+  padding-top: 0;
+}
+
+.c0 .sticky .row > div > div h1 {
+  font-size: 2rem;
+}
+
+.c0 .sticky .row > div > div h1 svg {
+  margin-top: 8px;
+}
+
+.c0 .sticky .row > div > div button {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+<div
+  className="c0"
+/>
+`;

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

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

package/src/components/HeaderActions/index.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * HeaderActions
+ *
+ */
+
+import styled from 'styled-components';
+import sizes from '../../assets/styles/sizes';
+
+const HeaderActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: ${sizes.spacing.lg}px;
+  width: fit-content;
+  max-width: 100%;
+  padding-top: 1rem;
+
+  > button {
+    margin: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    outline: 0;
+  }
+`;
+
+export default HeaderActions;

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HeaderActions /> snapshot 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  padding-top: 1rem;
+}
+
+.c0 > button {
+  margin-right: 0;
+  margin-left: 1rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  outline: 0;
+}
+
+<div
+  className="c0"
+/>
+`;

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

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

package/src/components/HeaderTitle/index.js

@@ -0,0 +1,47 @@
+/**
+ *
+ * HeaderTitle
+ *
+ */
+
+import styled from 'styled-components';
+import sizes from '../../assets/styles/sizes';
+import colors from '../../assets/styles/colors';
+
+const HeaderTitle = styled.div`
+  position: relative;
+  padding-top: 0.5rem;
+
+  h1 {
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+    margin-bottom: 0;
+    padding-right: 18px;
+    font-size: 2.4rem;
+    line-height: normal;
+    font-weight: ${sizes.fontWeight.bold};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  svg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin-top: 12px;
+    font-size: 1.2rem;
+    color: ${colors.greySubtitle};
+    cursor: pointer;
+    outline: 0;
+    transition: color 0.2s ease;
+
+    &:focus-visible {
+      outline: 2px solid ${colors.blue};
+      outline-offset: 2px;
+    }
+  }
+`;
+
+export default HeaderTitle;

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HeaderTitle /> snapshot 1`] = `
+.c0 {
+  position: relative;
+  padding-top: 0.5rem;
+}
+
+.c0 h1 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  margin-bottom: 0;
+  padding-right: 18px;
+  font-size: 2.4rem;
+  line-height: normal;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c0 svg {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-top: 12px;
+  font-size: 12px;
+  color: rgba(16,22,34,0.35);
+  cursor: pointer;
+  outline: 0;
+}
+
+<div
+  className="c0"
+/>
+`;

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

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

package/src/components/Icon/index.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * Icon
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Icon = styled(FontAwesomeIcon)``;
+
+Icon.propTypes = {
+  icon: PropTypes.any.isRequired,
+};
+
+export default Icon;

package/src/components/IconText/index.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import sizes from '../../assets/styles/sizes';
+
+import IconWrapper from '../IconWrapper';
+
+const IconText = styled(IconWrapper)`
+  z-index: 3;
+  transform: translateY(0);
+
+  ::before {
+    content: '${props => props.text}';
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 1.6rem;
+    font-weight: ${sizes.fontWeight.bold};
+  }
+`;
+
+export default IconText;

package/src/components/IconWrapper/index.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const IconWrapper = styled.span`
+  width: calc(${sizes.input.height} - 2px);
+  height: calc(${sizes.input.height} - 2px);
+  color: ${colors.greyIconColor};
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  background-color: ${props =>
+    props.background ? colors.greyIconBkgd : 'transparent'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3rem;
+`;
+
+IconWrapper.defaultProps = {
+  background: true,
+};
+
+IconWrapper.propTypes = {
+  background: PropTypes.bool,
+};
+
+export default IconWrapper;

package/src/components/InputNumber/index.js

@@ -0,0 +1,209 @@
+/**
+ *
+ * InputNumber
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+import img from '../../assets/icons/icon_select.svg';
+
+const InputNumber = styled.div`
+  .rc-input-number {
+    margin: 0;
+    padding: 0;
+    line-height: 26px;
+    font-size: 1.2rem;
+    height: 26px;
+    display: inline-block;
+    vertical-align: middle;
+    border: 1px solid ${colors.lightGrey};
+    border-radius: ${sizes.borderRadiusSm};
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .rc-input-number-focused {
+    border-color: ${colors.blueBorder};
+    box-shadow: 0 0 0 3px ${colors.blueFocusRing};
+  }
+
+  .rc-input-number-handler {
+    text-align: center;
+    line-height: 12px;
+    height: 12px;
+    overflow: hidden;
+    display: block;
+    touch-action: none;
+  }
+
+  .rc-input-number-handler-up-inner,
+  .rc-input-number-handler-down-inner {
+    color: ${colors.greySubtitle};
+    user-select: none;
+  }
+
+  .rc-input-number:hover {
+    border-color: ${colors.blueBorder};
+  }
+
+  .rc-input-number:hover .rc-input-number-handler-up,
+  .rc-input-number:hover .rc-input-number-handler-wrap {
+    border-color: ${colors.blueBorder};
+  }
+
+  .rc-input-number-disabled:hover {
+    border-color: ${colors.lightGrey};
+  }
+
+  .rc-input-number-disabled:hover .rc-input-number-handler-up,
+  .rc-input-number-disabled:hover .rc-input-number-handler-wrap {
+    border-color: ${colors.lightGrey};
+  }
+
+  .rc-input-number-input-wrap {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .rc-input-number-input {
+    width: 100%;
+    text-align: center;
+    outline: 0;
+    -moz-appearance: textfield;
+    line-height: 26px;
+    height: 100%;
+    transition: color 0.2s ease;
+    color: ${colors.blueTxt};
+    border: 0;
+    border-radius: ${sizes.borderRadiusSm};
+    padding: 0;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  .rc-input-number-handler-wrap {
+    float: right;
+    border-left: 1px solid ${colors.lightGrey};
+    width: 20px;
+    height: 100%;
+    transition: border-color 0.2s ease;
+  }
+
+  .rc-input-number-handler-up {
+    border-bottom: 1px solid ${colors.lightGrey};
+    padding-top: 1px;
+  }
+
+  .rc-input-number-handler-up-inner:after {
+    content: '+';
+  }
+
+  .rc-input-number-handler-down-inner:after {
+    content: '-';
+  }
+
+  .rc-input-number-handler-down-disabled,
+  .rc-input-number-handler-up-disabled {
+    opacity: 0.6;
+  }
+
+  .rc-input-number-handler-down-disabled:hover,
+  .rc-input-number-handler-up-disabled:hover {
+    color: ${colors.brightGrey};
+    border-color: ${colors.lightGrey};
+  }
+
+  .rc-input-number-disabled .rc-input-number-input {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: ${colors.greyIconBkgd};
+  }
+
+  .rc-input-number-disabled .rc-input-number-handler {
+    opacity: 0.6;
+  }
+
+  .rc-input-number-disabled .rc-input-number-handler:hover {
+    color: ${colors.brightGrey};
+    border-color: ${colors.lightGrey};
+  }
+
+  .rc-input-number.inputNumber {
+    width: 100%;
+    height: ${sizes.input.height};
+    background-color: ${colors.white};
+    border: 0;
+    box-shadow: none;
+    position: relative;
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: 1px solid ${colors.lightGrey};
+      padding: 0 ${sizes.input.padding};
+      cursor: pointer;
+      outline: 0;
+      padding-right: calc(${sizes.input.height} + ${sizes.input.padding});
+      border-radius: ${sizes.borderRadius};
+      text-align: left;
+      font-weight: ${sizes.fontWeight.regular};
+      font-size: 1.3rem;
+      color: ${colors.blueTxt};
+      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};
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        background-color: ${colors.greyIconBkgd};
+        color: ${colors.brightGrey};
+        opacity: 1;
+      }
+    }
+
+    .rc-input-number-handler-wrap {
+      width: 24px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      background-image: url(${img});
+      background-repeat: no-repeat;
+      background-position: right center;
+      border: none;
+      cursor: pointer;
+
+      span {
+        height: 50%;
+        border: 0;
+
+        span {
+          color: transparent;
+        }
+      }
+    }
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;
+
+export default InputNumber;

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

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