@punch-in/buffet-modern 3.3.11

package/src/components/TimePickerWrapper/index.js

@@ -0,0 +1,57 @@
+/**
+ *
+ * TimePickerWrapper
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const TimePickerWrapper = styled.div`
+  max-width: 95px;
+  position: relative;
+  background-color: ${colors.white};
+  border-radius: ${sizes.borderRadius};
+
+  span {
+    z-index: 0;
+    border-top-left-radius: ${sizes.borderRadius};
+    border-bottom-left-radius: ${sizes.borderRadius};
+  }
+
+  input {
+    position: relative;
+    z-index: 1;
+
+    &:focus + span {
+      background-color: ${colors.blueIconBkgd};
+
+      &:before {
+        color: ${colors.blueIconTxt};
+      }
+    }
+
+    &:focus {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  ul {
+    position: absolute;
+    background-color: transparent;
+    border-top: 1px solid transparent;
+    top: calc(${sizes.input.height} - ${sizes.margin * 0.1}px);
+    left: 0;
+    z-index: 99;
+    pointer-events: all;
+
+    &.displayed {
+      background-color: ${colors.white};
+      border-top: 1px solid ${colors.blueBorder};
+    }
+  }
+`;
+
+export default TimePickerWrapper;

package/src/components/Toggle/index.js

@@ -0,0 +1,82 @@
+/**
+ *
+ * Toggle
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Toggle = styled.input`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  margin: 0;
+  opacity: 0;
+
+  & + span {
+    border-top-left-radius: ${sizes.borderRadiusSm};
+    border-bottom-left-radius: ${sizes.borderRadiusSm};
+    color: ${colors.greyToggle};
+    background: ${colors.white};
+    font-weight: ${sizes.fontWeight.bold};
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    & + span {
+      border-top-right-radius: ${sizes.borderRadiusSm};
+      border-bottom-right-radius: ${sizes.borderRadiusSm};
+      color: ${colors.greyToggle};
+      background: ${colors.white};
+      font-weight: ${sizes.fontWeight.bold};
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+  }
+
+  &:not(:checked):not(:indeterminate) + span {
+    background-color: ${colors.darkOrange};
+    color: ${colors.white};
+    font-weight: ${sizes.fontWeight.black};
+  }
+
+  &:checked + span {
+    & + span {
+      background-color: ${colors.blue};
+      color: ${colors.white};
+      font-weight: ${sizes.fontWeight.black};
+    }
+  }
+
+  &:disabled {
+    &:not(:checked):not(:indeterminate) + span {
+      background-color: ${colors.greyIconBkgd};
+      color: ${colors.brightGrey};
+      box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    &:checked + span {
+      & + span {
+        background-color: ${colors.greyIconBkgd};
+        color: ${colors.brightGrey};
+        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08);
+      }
+    }
+  }
+`;
+
+Toggle.defaultProps = {
+  disabled: false,
+  type: 'checkbox',
+};
+
+Toggle.propTypes = {
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default Toggle;

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

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

package/src/components/ToggleWrapper/index.js

@@ -0,0 +1,36 @@
+/**
+ *
+ * ToggleWrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const ToggleWrapper = styled.div`
+  width: fit-content;
+  height: 34px;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: ${sizes.borderRadiusSm};
+
+  label {
+    display: inline-block;
+    width: fit-content;
+    height: 100%;
+    position: relative;
+    text-align: center;
+    color: ${colors.blueTxt};
+  }
+
+  span {
+    display: inline-block;
+    width: 53px;
+    height: 100%;
+    line-height: 32px;
+    letter-spacing: 0.1rem;
+  }
+`;
+
+export default ToggleWrapper;

package/src/components/Tooltip/index.js

@@ -0,0 +1,34 @@
+/* stylelint-disable declaration-no-important */
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ReactTooltip from 'react-tooltip';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const Tooltip = styled(ReactTooltip).attrs(({ place, delayShow }) => ({
+  effect: 'solid',
+  place,
+  delayShow,
+  arrowColor: 'transparent',
+  backgroundColor: colors.blueTxt,
+}))`
+  padding: 0.5rem 0.75rem !important;
+  opacity: 1 !important;
+  border-radius: ${sizes.borderRadius} !important;
+  max-width: 400px;
+  max-height: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+Tooltip.defaultProps = {
+  delayShow: 500,
+  place: 'bottom',
+};
+
+Tooltip.propTypes = {
+  delayShow: PropTypes.number,
+  place: PropTypes.string,
+};
+
+export default Tooltip;

package/src/index.js

@@ -0,0 +1,47 @@
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as Checkbox } from './components/Checkbox';
+export { default as CheckboxWrapper } from './components/CheckboxWrapper';
+export { default as CustomRow } from './components/CustomRow';
+export { default as DatePicker } from './components/DatePicker';
+export { default as Description } from './components/Description';
+export { default as Enumeration } from './components/Enumeration';
+export { default as EnumerationWrapper } from './components/EnumerationWrapper';
+export { default as ErrorMessage } from './components/ErrorMessage';
+export { default as Fonts } from './components/Fonts';
+export { default as GlobalStyle } from './components/GlobalStyle';
+export { default as Icon } from './components/Icon';
+export { default as IconText } from './components/IconText';
+export { default as IconWrapper } from './components/IconWrapper';
+export { default as InputNumber } from './components/InputNumber';
+export { default as InputText } from './components/InputText';
+export { default as InputWrapper } from './components/InputWrapper';
+export { default as Header } from './components/Header';
+export { default as HeaderActions } from './components/HeaderActions';
+export { default as HeaderTitle } from './components/HeaderTitle';
+export { default as Label } from './components/Label';
+export { default as Links } from './components/Links';
+export { default as List } from './components/List';
+export { default as ListHeader } from './components/ListHeader';
+export { default as ListRow } from './components/ListRow';
+export { default as ListSubtitle } from './components/ListSubtitle';
+export { default as ListTitle } from './components/ListTitle';
+export { default as LoadingBar } from './components/LoadingBar';
+export { default as LoadingIndicator } from './components/LoadingIndicator';
+export { default as Option } from './components/Option';
+export { default as Paging } from './components/Paging';
+export { default as Select } from './components/Select';
+export { default as Tab } from './components/Tab';
+export { default as Table } from './components/Table';
+export { default as TableRowEmpty } from './components/TableRowEmpty';
+export { default as Textarea } from './components/Textarea';
+export { default as TimeList } from './components/TimeList';
+export { default as TimePicker } from './components/TimePicker';
+export { default as TimePickerWrapper } from './components/TimePickerWrapper';
+export { default as Toggle } from './components/Toggle';
+export { default as ToggleWrapper } from './components/ToggleWrapper';
+export { default as Tooltip } from './components/Tooltip';
+
+export { default as colors } from './assets/styles/colors';
+export { default as mixins } from './assets/styles/mixins';
+export { default as sizes } from './assets/styles/sizes';