@punch-in/buffet-modern 3.3.11

package/src/components/Paging/index.js

@@ -0,0 +1,68 @@
+/**
+ *
+ * Paging
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Paging = styled.div`
+  ul.pagination {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: ${sizes.spacing.sm}px;
+    margin: 0;
+    padding: 0;
+    font-size: 1.2rem;
+    list-style: none;
+
+    .page-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .page-link {
+        box-shadow: none;
+        font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+        font-size: 1.2rem;
+        background-color: transparent;
+        color: ${colors.blueTxt};
+        padding: ${sizes.spacing.sm}px ${sizes.spacing.md}px;
+        border-radius: ${sizes.borderRadiusSm};
+        transition: background-color 0.2s ease, color 0.2s ease;
+
+        &:hover {
+          background-color: ${colors.greyHover};
+        }
+
+        &:focus-visible {
+          outline: 2px solid ${colors.blue};
+          outline-offset: 2px;
+        }
+      }
+
+      &.selected {
+        .page-link {
+          font-weight: ${sizes.fontWeight.bold};
+          color: ${colors.blue};
+        }
+      }
+
+      &:first-of-type,
+      &:last-of-type {
+        .page-link {
+          min-width: 24px;
+          min-height: 24px;
+        }
+      }
+    }
+  }
+`;
+
+export default Paging;

package/src/components/Select/index.js

@@ -0,0 +1,54 @@
+/**
+ *
+ * Select
+ *
+ */
+
+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 Select = styled.select`
+  width: 100%;
+  height: ${sizes.input.height};
+  padding: 0 ${sizes.input.padding};
+  padding-right: 30px;
+  font-weight: ${sizes.fontWeight.regular};
+  font-size: ${sizes.input.fontSize};
+  cursor: pointer;
+  outline: 0;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: ${sizes.borderRadius};
+  color: ${colors.blueTxt};
+  background-color: ${colors.white};
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url(${img});
+  background-repeat: no-repeat;
+  background-position: right center;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &::-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};
+    opacity: 1;
+  }
+`;
+
+export default Select;

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

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

package/src/components/Tab/index.js

@@ -0,0 +1,78 @@
+/**
+ *
+ * Tab
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import sizes from '../../assets/styles/sizes';
+import colors from '../../assets/styles/colors';
+
+const Tab = styled.li`
+  display: inline-block;
+  width: calc(100% / ${props => props.count});
+  height: 3.6rem;
+
+  &:first-of-type a {
+    border-top-left-radius: ${sizes.borderRadiusSm};
+  }
+
+  &:last-of-type a {
+    border-top-right-radius: ${sizes.borderRadiusSm};
+  }
+
+  button {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+  }
+
+  a {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 0 ${sizes.margin * 2}px;
+    color: ${colors.blueTxt};
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 1.3rem;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: ${props => props.background};
+    border-top: 3px solid ${props => props.background};
+    border-bottom: 3px solid ${props => props.background};
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    p,
+    span {
+      margin: auto;
+    }
+
+    &.active {
+      border-top: 3px solid ${colors.blueTabBorder};
+      border-bottom: 3px solid ${colors.white};
+      background-color: ${colors.white};
+      font-weight: ${sizes.fontWeight.bold};
+    }
+  }
+`;
+
+Tab.defaultProps = {
+  index: 1,
+  background: colors.greyTabBkgd,
+};
+
+Tab.propTypes = {
+  background: PropTypes.string,
+  index: PropTypes.number,
+};
+
+export default Tab;

package/src/components/Table/index.js

@@ -0,0 +1,147 @@
+/**
+ *
+ * Table
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Table = styled.div`
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+  border-radius: ${sizes.borderRadiusLg};
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  background: ${colors.white};
+
+  table {
+    width: 100%;
+    min-width: 500px;
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    border-collapse: collapse;
+
+    &.rowsSelected {
+      tbody::before {
+        content: '-';
+        height: ${sizes.table.deleteRow.height};
+        display: block;
+      }
+    }
+  }
+
+  .deleteRow {
+    height: ${sizes.table.deleteRow.height};
+    padding: 0 ${sizes.spacing.xl}px;
+    font-size: 1.3rem;
+    line-height: ${sizes.table.deleteRow.height};
+    background-color: ${colors.greyHover};
+    font-weight: ${sizes.fontWeight.bold};
+
+    button {
+      border: none;
+      background: transparent;
+      color: ${colors.darkOrange};
+      outline: 0;
+      transition: color 0.2s ease;
+
+      &:focus-visible {
+        outline: 2px solid ${colors.blue};
+        outline-offset: 2px;
+      }
+
+      svg {
+        margin-left: ${sizes.margin}px;
+      }
+    }
+  }
+
+  th,
+  td {
+    font-size: 1.3rem;
+    padding: 0 ${sizes.spacing.xl}px;
+    text-align: left;
+
+    &.checkCell {
+      width: 50px;
+    }
+  }
+
+  thead {
+    tr {
+      font-weight: ${sizes.fontWeight.bold};
+      text-transform: capitalize;
+
+      th {
+        background-color: ${colors.greyHeader};
+        height: ${sizes.table.header.height};
+
+        p {
+          padding-right: ${sizes.margin * 1.4}px;
+          color: ${colors.blueTxt};
+
+          &.clickable {
+            cursor: pointer;
+          }
+        }
+
+        svg {
+          position: absolute;
+          right: 0;
+          top: 0;
+
+          &.fa-sort-up {
+            top: 4px;
+          }
+
+          &.fa-sort-down {
+            top: -${sizes.margin * 0.2}px;
+          }
+        }
+      }
+    }
+  }
+
+  tbody {
+    background-color: ${colors.greyHover};
+    color: ${colors.blueTxt};
+
+    tr {
+      border-bottom: 1px solid ${colors.greySeparator};
+      background-color: ${colors.white};
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+
+      &:hover {
+        background-color: ${colors.greyHover};
+      }
+
+      &:not(.deleteRow) {
+        td {
+          height: ${sizes.table.row.height};
+        }
+      }
+    }
+
+    td {
+      p {
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  span.link-icon svg {
+    color: ${colors.blueTxt};
+  }
+
+  @media (min-width: ${sizes.tablet}) {
+    overflow-x: auto;
+  }
+`;
+
+export default Table;

package/src/components/TableRowEmpty/index.js

@@ -0,0 +1,28 @@
+/**
+ *
+ * TableRowEmpty
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const TableRowEmpty = styled.tr`
+  width: 100%;
+  height: 108px;
+  background: ${colors.white};
+
+  td {
+    height: 106px;
+    line-height: 106px;
+    font-size: 1.3rem;
+    font-weight: ${sizes.fontWeight.regular};
+    color: ${colors.blueTxt};
+    text-align: center;
+    border-collapse: collapse;
+    border-top: 1px solid ${colors.greySeparator};
+  }
+`;
+
+export default TableRowEmpty;

package/src/components/Textarea/index.js

@@ -0,0 +1,50 @@
+/**
+ *
+ * Textarea
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const StyledTextarea = styled.textarea`
+  width: 100%;
+  min-height: 12rem;
+  padding: ${sizes.textarea.padding} ${sizes.input.padding};
+  font-weight: ${sizes.fontWeight.regular};
+  font-size: ${sizes.input.fontSize};
+  outline: 0;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: ${sizes.borderRadius};
+  color: ${colors.blueTxt};
+  background-color: ${colors.white};
+  line-height: 1.5;
+  resize: vertical;
+  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};
+  }
+`;
+
+export default StyledTextarea;

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Textarea /> should match the snapshot when empty 1`] = `
+.c0 {
+  width: 100%;
+  height: 19.1rem;
+  padding: 0.6rem 1rem;
+  font-weight: 400;
+  font-size: 1.3rem;
+  outline: 0;
+  border: 1px solid #E3E9F3;
+  border-radius: 2px;
+  color: #333740;
+  background-color: #ffffff;
+  line-height: 18px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #919BAE;
+}
+
+.c0:focus {
+  border-color: #78caff;
+}
+
+.c0:disabled {
+  background-color: #FAFAFB;
+  cursor: not-allowed;
+  color: #9ea7b8;
+}
+
+<textarea
+  className="c0"
+  placeholder="Write a short description"
+/>
+`;
+
+exports[`<Textarea /> should match the snapshot when not empty 1`] = `
+.c0 {
+  width: 100%;
+  height: 19.1rem;
+  padding: 0.6rem 1rem;
+  font-weight: 400;
+  font-size: 1.3rem;
+  outline: 0;
+  border: 1px solid #E3E9F3;
+  border-radius: 2px;
+  color: #333740;
+  background-color: #ffffff;
+  line-height: 18px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #919BAE;
+}
+
+.c0:focus {
+  border-color: #78caff;
+}
+
+.c0:disabled {
+  background-color: #FAFAFB;
+  cursor: not-allowed;
+  color: #9ea7b8;
+}
+
+<textarea
+  className="c0"
+  value="Short description"
+/>
+`;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
+
+import Textarea from '../index';
+
+const renderComponent = () => {
+  const wrapper = shallow(<Textarea />);
+
+  return wrapper;
+};
+
+describe('<Textarea />', () => {
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should match the snapshot when empty', () => {
+    const tree = renderer
+      .create(<Textarea placeholder="Write a short description" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match the snapshot when not empty', () => {
+    const tree = renderer
+      .create(<Textarea value="Short description" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/TimeList/index.js

@@ -0,0 +1,78 @@
+/**
+ *
+ * TimeList
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const TimeList = styled.ul`
+  width: 100%;
+  height: 0;
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: ${sizes.fontWeight.bold};
+  font-size: ${sizes.input.fontSize};
+  color: ${colors.greyIconColor};
+  border: 1px solid transparent;
+  border-bottom-left-radius: ${sizes.borderRadiusSm};
+  border-bottom-right-radius: ${sizes.borderRadiusSm};
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transition: height 0.2s ease-out, visibility 0.2s ease-out,
+    border-color 0.2s ease-out;
+  visibility: hidden;
+
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &.displayed {
+    height: ${sizes.timepicker.list.height};
+    visibility: visible;
+    border-color: ${colors.lightGrey};
+  }
+
+  li {
+    position: relative;
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      opacity: 0;
+      z-index: 1;
+      cursor: pointer;
+
+      &:checked + label,
+      &:hover + label {
+        background-color: ${colors.greyIconBkgd};
+      }
+    }
+
+    label {
+      display: block;
+      position: relative;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      padding: ${sizes.margin * 0.4}px 0 ${sizes.margin * 0.2}px
+        calc(${sizes.input.height} + ${sizes.input.padding});
+      font-size: 1.3rem;
+      line-height: 30px;
+      margin-bottom: 0;
+    }
+  }
+`;
+
+export default TimeList;

package/src/components/TimePicker/index.js

@@ -0,0 +1,59 @@
+/**
+ *
+ * TimePicker
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const TimePicker = styled.input`
+  width: 100%;
+  height: ${sizes.input.height};
+  padding: 0 ${sizes.input.padding};
+  padding-left: calc(${sizes.input.height} + ${sizes.input.padding});
+  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: ${sizes.fontWeight.regular};
+  font-size: ${sizes.input.fontSize};
+  cursor: pointer;
+  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 {
+    cursor: not-allowed;
+    color: ${colors.brightGrey};
+  }
+`;
+
+TimePicker.defaultProps = {
+  type: 'text',
+};
+
+TimePicker.propTypes = {
+  type: PropTypes.string,
+};
+
+export default TimePicker;