@punch-in/buffet-modern 3.3.11

package/src/components/CheckboxWrapper/index.js

@@ -0,0 +1,100 @@
+/**
+ *
+ * CheckboxWrapper
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import sizes from '../../assets/styles/sizes';
+import colors from '../../assets/styles/colors';
+
+const CheckboxWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: ${sizes.margin}px;
+  padding: ${({ hasSpacing }) =>
+    hasSpacing ? `${sizes.spacing.sm}px 0` : '0'};
+  width: 100%;
+
+  .checkbox-container {
+    display: inline-flex;
+    align-items: flex-start;
+    min-height: ${sizes.checkbox.height};
+    position: relative;
+    flex: 1;
+  }
+
+  input[type='checkbox'] {
+    margin: 0;
+    flex-shrink: 0;
+  }
+
+  label {
+    display: inline-block;
+    width: fit-content;
+    max-width: calc(100% - ${sizes.checkbox.width} - ${sizes.margin}px);
+    margin: 0;
+    padding-top: 1px;
+    line-height: 1.4;
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    color: ${({ disabled }) => (disabled ? colors.brightGrey : colors.blueTxt)};
+    transition: color 0.2s ease;
+    word-break: break-word;
+    hyphens: auto;
+  }
+
+  ${({ error }) =>
+    error &&
+    `
+      input[type="checkbox"]:before {
+        border-color: ${colors.darkOrange} !important;
+      }
+
+      .error-message {
+        color: ${colors.darkOrange};
+        font-size: 1.2rem;
+        margin-top: ${sizes.spacing.xs}px;
+        display: block;
+        width: 100%;
+      }
+    `}
+
+  .helper-text {
+    color: ${colors.greySubtitle};
+    font-size: 1.2rem;
+    margin-top: ${sizes.spacing.xs}px;
+    display: block;
+    width: 100%;
+  }
+
+  &.checkbox-group {
+    flex-direction: column;
+    gap: ${sizes.spacing.sm}px;
+
+    .checkbox-container {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: ${sizes.tablet}) {
+    label {
+      max-width: calc(100% - ${sizes.checkbox.width} - ${sizes.margin / 2}px);
+    }
+  }
+`;
+
+CheckboxWrapper.defaultProps = {
+  disabled: false,
+  error: null,
+  hasSpacing: true,
+};
+
+CheckboxWrapper.propTypes = {
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  hasSpacing: PropTypes.bool,
+};
+
+export default CheckboxWrapper;

package/src/components/CustomRow/index.js

@@ -0,0 +1,21 @@
+/**
+ *
+ * CustomRow
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+
+const CustomRow = styled.tr`
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: ${colors.greyHover};
+  }
+`;
+
+export default CustomRow;

package/src/components/DatePicker/index.js

@@ -0,0 +1,280 @@
+/**
+ *
+ * DatePicker
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import 'react-dates/lib/css/_datepicker.css';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const DatePicker = styled.div`
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+
+  ${({ isOpen }) =>
+    isOpen &&
+    `
+    z-index: 999;
+  `}
+
+  * {
+    outline: 0;
+    box-sizing: border-box;
+  }
+
+  /* Input field styling */
+  .DateInput {
+    width: 100%;
+    position: relative;
+    transition: all 0.2s ease;
+  }
+
+  /* Calendar icon */
+  svg.fa-calendar-alt {
+    font-size: 16px;
+    color: ${colors.greyIconBkgd};
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    transition: color 0.2s ease;
+  }
+
+  /* Input styling */
+  input {
+    font-weight: ${sizes.fontWeight.regular};
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: ${sizes.input.height};
+    padding: 0 ${sizes.input.padding};
+    font-size: ${sizes.input.fontSize};
+    cursor: pointer;
+    border: 1px solid ${colors.lightGrey};
+    border-radius: 8px;
+    color: ${colors.black};
+    background-color: ${colors.white};
+    padding-left: 42px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: ${colors.blueBorder};
+    }
+
+    &::-webkit-input-placeholder {
+      color: ${colors.greyPlaceholder};
+    }
+
+    &:disabled {
+      background-color: ${colors.greyIconBkgd}20;
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    &:focus {
+      border-color: ${colors.blueBorder};
+      box-shadow: 0 0 0 3px ${colors.blueBorder}20;
+    }
+  }
+
+  /* Calendar container styling */
+  .SingleDatePicker,
+  .SingleDatePickerInput__withBorder {
+    width: 100%;
+  }
+
+  .SingleDatePickerInput__withBorder {
+    border: 0;
+  }
+
+  .DateInput_input__focused {
+    border-color: ${colors.blueBorder};
+  }
+
+  /* Calendar header styling */
+  .DayPicker_weekHeader {
+    color: ${colors.black};
+    border-top: 1px solid ${colors.lightGrey}40;
+    margin-top: -10px;
+    padding: 0 8px;
+
+    li {
+      padding: 12px 0;
+      small {
+        font-size: 1.3rem;
+        font-weight: 600;
+        color: ${colors.greyIconBkgd};
+      }
+    }
+  }
+
+  /* Calendar popup styling */
+  .DayPicker__withBorder {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid ${colors.lightGrey}20;
+    border-radius: 8px;
+    background: ${colors.white};
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .DateInput_fang {
+    display: none;
+  }
+
+  /* Month caption styling */
+  .CalendarMonth_caption {
+    font-size: 1.4rem;
+    font-weight: 600;
+    padding: 24px 0;
+    color: ${colors.black};
+  }
+
+  .DayPicker_transitionContainer {
+    padding: 4px;
+  }
+
+  .DayPickerKeyboardShortcuts_show {
+    display: none;
+  }
+
+  /* Navigation buttons styling */
+  .DayPickerNavigation {
+    div[role='button'] {
+      font-size: 24px;
+      width: 40px;
+      height: 40px;
+      color: ${colors.black};
+      border-radius: 50%;
+      text-align: center;
+      top: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+
+      &::before {
+        line-height: 1;
+      }
+
+      &.DayPickerNavigation_leftButton__horizontalDefault {
+        left: 22px;
+        &::before {
+          content: '‹';
+        }
+      }
+
+      &.DayPickerNavigation_rightButton__horizontalDefault {
+        right: 22px;
+        &::before {
+          content: '›';
+        }
+      }
+
+      svg {
+        display: none;
+      }
+
+      &:hover {
+        background: ${colors.lightGrey}20;
+        color: ${colors.blueBorder};
+      }
+    }
+  }
+
+  /* Date cells styling */
+  td {
+    position: relative;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    font-size: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+
+    &,
+    &.CalendarDay__selected,
+    &.CalendarDay__selected:active,
+    &.CalendarDay__selected:hover,
+    &.CalendarDay__default:hover {
+      border: 0;
+    }
+
+    &.CalendarDay__default:hover {
+      background: ${colors.lightGrey}20;
+      color: ${colors.black};
+    }
+
+    &.CalendarDay__today {
+      font-weight: 600;
+      color: ${colors.blueBorder};
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 4px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: ${colors.blueBorder};
+      }
+    }
+
+    &.CalendarDay__selected {
+      background-color: ${colors.blueBorder};
+      color: ${colors.white};
+      font-weight: 600;
+      transform: scale(0.9);
+
+      &:hover {
+        background-color: ${colors.blueBorder};
+      }
+
+      &.CalendarDay__today {
+        &::before {
+          background: ${colors.white};
+        }
+      }
+    }
+
+    &.CalendarDay__blocked_out_of_range {
+      color: ${colors.lightGrey};
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  /* Mobile optimization */
+  @media (max-width: ${sizes.tablet}) {
+    .DayPicker__withBorder {
+      left: 50% !important;
+      transform: translateX(-50%);
+      width: calc(100vw - 32px);
+    }
+
+    td {
+      height: 48px;
+    }
+  }
+`;
+
+DatePicker.defaultProps = {
+  isOpen: false,
+};
+
+DatePicker.propTypes = {
+  isOpen: PropTypes.bool,
+};
+
+export default DatePicker;

package/src/components/DatePicker/tests/Datepicker.test.js

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

package/src/components/Description/index.js

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

package/src/components/Enumeration/index.js

@@ -0,0 +1,40 @@
+/**
+ *
+ * Enumeration
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Enumeration = styled.input`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  margin: 0;
+  opacity: 0;
+  &:checked + span {
+    background-image: ${colors.blueGradient};
+    color: ${colors.white};
+    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
+    font-weight: ${sizes.fontWeight.bold};
+  }
+`;
+
+Enumeration.defaultProps = {
+  disabled: false,
+  type: 'radio',
+};
+
+Enumeration.propTypes = {
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default Enumeration;

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

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

package/src/components/EnumerationWrapper/index.js

@@ -0,0 +1,47 @@
+/**
+ *
+ * EnumerationWrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const EnumerationWrapper = styled.div`
+  display: flex;
+  width: fit-content;
+  height: 34px;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: ${sizes.borderRadiusSm};
+  background-color: ${colors.white};
+  overflow: hidden;
+
+  label {
+    position: relative;
+    display: inline-block;
+    height: 100%;
+    width: fit-content;
+    color: ${colors.brightGrey};
+
+    span {
+      display: inline-block;
+      padding: 0 1.5rem;
+      line-height: 32px;
+      margin: auto;
+      letter-spacing: 0.65px;
+      font-size: 1.2rem;
+      font-weight: ${sizes.fontWeight.semiBold};
+      text-transform: uppercase;
+    }
+
+    &:not(:last-of-type) {
+      span {
+        border-right: 1px solid ${colors.lightGrey};
+      }
+    }
+  }
+`;
+
+export default EnumerationWrapper;

package/src/components/ErrorMessage/index.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * ErrorMessage
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const ErrorMessage = styled.p`
+  font-size: ${sizes.input.fontSize};
+  color: ${colors.darkOrange};
+  margin-top: 0.25rem;
+`;
+
+export default ErrorMessage;

package/src/components/Fonts/index.js

@@ -0,0 +1,83 @@
+import { createGlobalStyle } from 'styled-components';
+import faBrandsLight from '@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff';
+import faBrandsLight2 from '@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2';
+import faRegularLight from '@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff';
+import faRegularLight2 from '@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2';
+import faSolidHeavy from '@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff';
+import faSolidHeavy2 from '@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2';
+
+/* Lato Regular */
+import latoRegular from '../../assets/fonts/lato/Lato-Regular.ttf';
+import latoRegularWoff from '../../assets/fonts/lato/Lato-Regular.woff';
+import latoRegularWoff2 from '../../assets/fonts/lato/Lato-Regular.woff2';
+
+/* Lato SemiBold */
+import latoSemiBold from '../../assets/fonts/lato/Lato-SemiBold.ttf';
+import latoSemiBoldWoff from '../../assets/fonts/lato/Lato-SemiBold.woff';
+import latoSemiBoldWoff2 from '../../assets/fonts/lato/Lato-SemiBold.woff2';
+
+/* Lato Bold */
+import latoBold from '../../assets/fonts/lato/Lato-Bold.ttf';
+import latoBoldWoff from '../../assets/fonts/lato/Lato-Bold.woff';
+import latoBoldWoff2 from '../../assets/fonts/lato/Lato-Bold.woff2';
+
+/* Lato Black */
+import latoBlack from '../../assets/fonts/lato/Lato-Black.ttf';
+import latoBlackWoff from '../../assets/fonts/lato/Lato-Black.woff';
+import latoBlackWoff2 from '../../assets/fonts/lato/Lato-Black.woff2';
+
+const Font = createGlobalStyle`
+@font-face {
+  font-family: 'FontAwesome';
+  src: url(${faBrandsLight2}) format("woff2"), url(${faBrandsLight}) format("woff");
+  font-weight: 400;
+  font-style: normal;
+};
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url(${faRegularLight2}) format("woff2"), url(${faRegularLight}) format("woff");
+  font-weight: 400;
+  font-style: normal;
+};
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url(${faSolidHeavy2}) format("woff2"), url(${faSolidHeavy}) format("woff");
+  font-weight: 400;
+  font-style: normal;
+};
+
+/* Lato Regular - 400 */
+@font-face {
+  font-family: 'Lato';
+  src: url(${latoRegularWoff2}) format('woff2'), url(${latoRegularWoff}) format('woff'), url(${latoRegular}) format('truetype');
+  font-weight: 400;
+  font-style: normal;
+};
+
+/* Lato Semi-Bold - 500 */
+@font-face {
+  font-family: 'Lato';
+  src: url(${latoSemiBoldWoff2}) format('woff2'), url(${latoSemiBoldWoff}) format('woff'), url(${latoSemiBold}) format('truetype');
+  font-weight: 500;
+  font-style: normal;
+};
+
+/* Lato Bold - 600 */
+@font-face {
+  font-family: 'Lato';
+  src: url(${latoBoldWoff2}) format('woff2'), url(${latoBoldWoff}) format('woff'), url(${latoBold}) format('truetype');
+  font-weight: 600;
+  font-style: normal;
+};
+
+/* Lato Black - 900 */
+@font-face {
+  font-family: 'Lato';
+  src:  url(${latoBlackWoff2}) format('woff2'), url(${latoBlackWoff}) format('woff'), url(${latoBlack}) format('truetype');
+  font-weight: 900;
+  font-style: normal;
+};`;
+
+export default Font;

package/src/components/GlobalStyle/index.js

@@ -0,0 +1,68 @@
+import { createGlobalStyle } from 'styled-components';
+
+import mixins from '../../assets/styles/mixins';
+import colors from '../../assets/styles/colors';
+
+const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    ${mixins().bbox}
+  }
+
+  html {
+    font-size: 62.5%;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  html, body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    background-color: ${colors.greyIconBkgd};
+    line-height: 1.5;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a, button {
+    cursor: pointer;
+    outline: 0;
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid ${colors.blue};
+    outline-offset: 2px;
+  }
+
+  h1, h2, h3, p, label, button, input, textarea {
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
+    transition-delay: 9999s;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+
+export default GlobalStyle;