@punch-in/buffet-modern-core 3.3.11

package/src/components/Picker/PickerButton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import Text from '../Text';
+import colors from '../../theme/colors';
+
+const PickerButton = styled(props => (
+  <Text
+    as="button"
+    fontWeight="semiBold"
+    color={props.isActive ? 'mediumBlue' : 'greyDark'}
+    {...props}
+  />
+))`
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+
+  > svg + span,
+  > span + svg {
+    margin-left: 10px;
+  }
+  > svg g {
+    stroke: ${({ theme }) => theme.main.colors.greyDark};
+  }
+
+  ${({ isActive, theme }) =>
+    isActive
+      ? `
+        background-color: ${theme.main.colors.lightBlue};
+        border: 1px solid ${theme.main.colors.darkBlue};
+        color: ${theme.main.colors.mediumBlue};
+        > svg g {
+          stroke: ${theme.main.colors.mediumBlue};
+        }
+      `
+      : `
+        &:hover {
+          background-color: ${theme.main.colors.lightestGrey};
+        }
+      `}
+`;
+
+PickerButton.defaultProps = {
+  isActive: false,
+  type: 'button',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors,
+      sizes: {
+        borderRadius: '2px',
+        fonts: {
+          xs: '11px',
+          sm: '12px',
+          md: '13px',
+          lg: '18px',
+        },
+      },
+      fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+        black: 900,
+      },
+    },
+  },
+};
+
+PickerButton.propTypes = {
+  isActive: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default PickerButton;

package/src/components/Picker/PickerSection.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const PickerSection = styled.div`
+  display: none;
+  position: absolute;
+  top: 38px;
+  left: ${({ position }) => (position === 'left' ? '0' : 'auto')};
+  right: ${({ position }) => (position === 'right' ? '0' : 'auto')};
+  z-index: 1046;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.greyAlpha};
+  ${({ isOpen }) => isOpen && 'display: block;'}
+`;
+
+PickerSection.defaultProps = {
+  isOpen: false,
+  position: 'left',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors: {
+        white: '#ffffff',
+        darkGrey: '#e3e9f3',
+        greyAlpha: 'rgba(227, 233, 243, 0.5)',
+      },
+      sizes: {
+        borderRadius: '2px',
+      },
+    },
+  },
+};
+
+PickerSection.propTypes = {
+  isOpen: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right']),
+};
+
+export default PickerSection;

package/src/components/Picker/PickerWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const PickerWrapper = styled.div`
+  position: relative;
+`;
+
+export default PickerWrapper;

package/src/components/Picker/index.js

@@ -0,0 +1,44 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { useClickAwayListener } from '@punch-in/buffet-modern-hooks';
+
+import PickerButton from './PickerButton';
+import PickerSection from './PickerSection';
+import PickerWrapper from './PickerWrapper';
+
+const Picker = ({ position, renderButtonContent, renderSectionContent }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef();
+
+  useClickAwayListener(dropdownRef, () => setIsOpen(false));
+
+  const handleToggle = () => {
+    setIsOpen(v => !v);
+  };
+
+  return (
+    <PickerWrapper ref={dropdownRef}>
+      <PickerButton onClick={handleToggle} isActive={isOpen}>
+        {renderButtonContent(isOpen)}
+      </PickerButton>
+      <PickerSection isOpen={isOpen} position={position}>
+        {renderSectionContent(handleToggle)}
+      </PickerSection>
+    </PickerWrapper>
+  );
+};
+
+Picker.defaultProps = {
+  position: 'left',
+  renderButtonContent: () => {},
+  renderSectionContent: () => {},
+};
+
+Picker.propTypes = {
+  position: PropTypes.oneOf(['left', 'right']),
+  renderButtonContent: PropTypes.func,
+  renderSectionContent: PropTypes.func,
+};
+
+export default Picker;

package/src/components/Picker/tests/__snapshots__/pickerButton.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PickerButton /> should match snapshot 1`] = `
+.c0 {
+  margin: 0;
+  line-height: normal;
+  color: #292b2c;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: none;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  background-color: #ffffff;
+  border: 1px solid #e3e9f3;
+  border-radius: 2px;
+}
+
+.c1:active,
+.c1:focus {
+  outline: 0;
+}
+
+.c1 > svg + span,
+.c1 > span + svg {
+  margin-left: 10px;
+}
+
+.c1 > svg g {
+  stroke: #292b2c;
+}
+
+.c1:hover {
+  background-color: #fbfbfb;
+}
+
+<button
+  className="c0 c1"
+  color="greyDark"
+  fontSize="md"
+  fontWeight="semiBold"
+  type="button"
+/>
+`;

package/src/components/Picker/tests/__snapshots__/pickerSection.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PickerSection /> should match snapshot 1`] = `
+.c0 {
+  display: none;
+  position: absolute;
+  top: 38px;
+  left: 0;
+  right: auto;
+  z-index: 1046;
+  background-color: #ffffff;
+  border-radius: 2px;
+  border: 1px solid #e3e9f3;
+  box-shadow: 0 2px 4px rgba(227,233,243,0.5);
+}
+
+<div
+  className="c0"
+/>
+`;

package/src/components/Picker/tests/pickerButton.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import PickerButton from '../PickerButton';
+
+describe('<PickerButton />', () => {
+  it('should match snapshot', () => {
+    const tree = renderer.create(<PickerButton />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/Picker/tests/pickerSection.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import PickerSection from '../PickerSection';
+
+describe('<PickerSection />', () => {
+  it('should match snapshot', () => {
+    const tree = renderer.create(<PickerSection />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/PrefixIcon/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { sizes } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+
+const PrefixIcon = styled(Icon)`
+  margin-right: ${sizes.margin}px;
+  font-size: 0.94em;
+`;
+
+export default PrefixIcon;

package/src/components/Select/index.js

@@ -0,0 +1,110 @@
+/**
+ *
+ * Select
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import invariant from 'invariant';
+import { Select as StyledSelect } from '@punch-in/buffet-modern';
+
+function Select({
+  autoFocus,
+  id,
+  name,
+  onChange,
+  options,
+  tabIndex,
+  value,
+  ...rest
+}) {
+  const lengthOfReactElementsInOptions = options.filter(option =>
+    React.isValidElement(option)
+  ).length;
+
+  const formatOptions = () =>
+    options.map(option => {
+      let optionValue = option;
+
+      // Type check
+      // Use option.value if it is defined (ie. even when it is an empty string)
+      if (option && typeof option.value !== 'undefined') {
+        optionValue = option.value;
+      }
+
+      return (
+        <option key={JSON.stringify(optionValue)} value={optionValue}>
+          {option.label || option}
+        </option>
+      );
+    });
+  const renderOptions = () => {
+    const areOptionsValidReactElements = options.every(option =>
+      React.isValidElement(option)
+    );
+
+    return areOptionsValidReactElements ? options : formatOptions();
+  };
+
+  if (lengthOfReactElementsInOptions > 0) {
+    invariant(
+      lengthOfReactElementsInOptions === options.length,
+      'You have mixed up React Elements and non React Elements in your options array '
+    );
+  }
+
+  return (
+    <StyledSelect
+      autoFocus={autoFocus}
+      id={id || name}
+      name={name}
+      onChange={onChange}
+      tabIndex={tabIndex}
+      value={value}
+      {...rest}
+    >
+      {renderOptions()}
+    </StyledSelect>
+  );
+}
+
+Select.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  id: null,
+  options: [],
+  placeholder: null,
+  tabIndex: '0',
+};
+
+Select.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number,
+          PropTypes.object,
+        ]),
+      }),
+      PropTypes.string,
+      PropTypes.node,
+    ])
+  ),
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]).isRequired,
+};
+
+export default Select;

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Select from '../index';
+
+const initProps = {
+  name: 'inputSelect',
+  onChange: jest.fn(),
+  value: '',
+};
+let renderedComponent;
+const renderComponent = (props = initProps) => mount(<Select {...props} />);
+
+describe('<Select />', () => {
+  afterEach(() => {
+    renderedComponent.unmount();
+  });
+
+  it('Should render the component with no errors', () => {
+    renderedComponent = renderComponent();
+    const wrapper = renderedComponent.find(Select);
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('Testing options prop with an array of string', () => {
+    const options = ['option 1', 'option 2'];
+
+    renderedComponent = renderComponent({ ...initProps, options });
+
+    const wrapper = renderedComponent.find(Select);
+    const optionsElements = wrapper.find('option');
+
+    expect(optionsElements).toHaveLength(2);
+    expect(optionsElements.first().text()).toBe('option 1');
+    expect(optionsElements.last().text()).toBe('option 2');
+  });
+
+  it('Testing options prop with an array of objects [{ label, value }]', () => {
+    const options = [
+      {
+        label: 'option 1',
+        value: 'option1',
+      },
+      {
+        label: 'option 2',
+        value: 'option2',
+      },
+    ];
+
+    renderedComponent = renderComponent({ ...initProps, options });
+
+    const wrapper = renderedComponent.find(Select);
+    const optionsElements = wrapper.find('option');
+
+    expect(optionsElements).toHaveLength(2);
+    expect(optionsElements.first().text()).toBe('option 1');
+    expect(optionsElements.last().text()).toBe('option 2');
+  });
+
+  it('Should render the options with an array of React Nodes', () => {
+    const first = (
+      <option key="first" value="first">
+        First
+      </option>
+    );
+    const second = (
+      <option key="second" value="second">
+        Second
+      </option>
+    );
+    const options = [first, second];
+
+    renderedComponent = renderComponent({ ...initProps, options });
+
+    const wrapper = renderedComponent.find(Select);
+    const optionsElements = wrapper.find('option');
+
+    expect(wrapper.find(first)).toBeDefined();
+    expect(wrapper.find(second)).toBeDefined();
+    expect(optionsElements).toHaveLength(2);
+    expect(optionsElements.first().text()).toBe('First');
+    expect(optionsElements.last().text()).toBe('Second');
+  });
+});

package/src/components/Separator/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Flex from '../Flex';
+import Padded from '../Padded';
+import Text from '../Text';
+import colors from '../../theme/colors';
+
+const BorderTop = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.main.colors.border};
+  width: 100%;
+`;
+
+BorderTop.defaultProps = {
+  theme: {
+    main: {
+      colors,
+    },
+  },
+};
+BorderTop.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object,
+};
+
+const Separator = ({ label }) => (
+  <Flex justifyContent="center" alignItems="center">
+    {label ? (
+      <>
+        <BorderTop />
+        <Padded left right size="sm">
+          <Text color="grey">{label}</Text>
+        </Padded>
+        <BorderTop />
+      </>
+    ) : (
+      <BorderTop />
+    )}
+  </Flex>
+);
+
+Separator.defaultProps = {
+  label: null,
+};
+Separator.propTypes = {
+  label: PropTypes.string,
+};
+
+export default Separator;

package/src/components/Table/ActionCollapse.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+
+function ActionCollapse({
+  colSpan,
+  translatedNumberOfEntry,
+  translatedNumberOfEntries,
+  translatedAction,
+  icon,
+  numberOfSelectedEntries,
+  onConfirm,
+}) {
+  return (
+    <tr className="deleteRow">
+      <td colSpan={colSpan}>
+        <p>
+          {numberOfSelectedEntries}
+          &nbsp;
+          {numberOfSelectedEntries > 1
+            ? translatedNumberOfEntries
+            : translatedNumberOfEntry}
+          &nbsp; selected&nbsp;-&nbsp;
+          <button onClick={onConfirm} type="button">
+            <p>{translatedAction}</p>
+            {icon && <Icon icon={icon} />}
+          </button>
+        </p>
+      </td>
+    </tr>
+  );
+}
+
+ActionCollapse.defaultProps = {
+  icon: 'trash',
+  translatedNumberOfEntry: 'entry',
+  translatedNumberOfEntries: 'entries',
+  translatedAction: 'Delete all',
+  numberOfSelectedEntries: 0,
+  onConfirm: () => {},
+};
+
+ActionCollapse.propTypes = {
+  colSpan: PropTypes.number.isRequired,
+  icon: PropTypes.string,
+  numberOfSelectedEntries: PropTypes.number,
+  onConfirm: PropTypes.func,
+  translatedAction: PropTypes.string,
+  translatedNumberOfEntries: PropTypes.string,
+  translatedNumberOfEntry: PropTypes.string,
+};
+
+export default ActionCollapse;