@stokr/components-library 0.5.4 → 0.5.6

package/dist/Input/InputPassword.js

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { CapsLockSvg } from 'components/SvgIcons';
+import InfoIcon from 'components/InfoIcon/InfoIcon';
+import { Wrapper, Label, InputWrap } from './Input.styles';
+import { ShowPassword, BottomWrap, CapslockIndicator, PasswordStrengthIndicators, PasswordStrengthIndicator, PasswordStrengthWrap, PasswordStrengthText, InfoIconWrapper } from './InputPassword.styles';
+export const PasswordStrength = {
+  NONE: 'none',
+  WEAK: 'Weak',
+  MEDIUM: 'Average',
+  STRONG: 'Excellent'
+};
+export const InputPassword = props => {
+  const {
+    label,
+    id,
+    name,
+    value,
+    error,
+    touched,
+    info,
+    showStrength
+  } = props;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isCapslockOn, setIsCapslockOn] = useState(false);
+  const [labelUp, setLabelUp] = useState(!!value);
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    setLabelUp(hasFocus || !!value);
+  }, [hasFocus, value]);
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const handleCapslock = e => {
+    setIsCapslockOn(e.getModifierState('CapsLock'));
+  };
+  const onFocus = (e, field) => {
+    props.onFocus && props.onFocus(e, field);
+    setHasFocus(true);
+  };
+  const onBlur = (e, field) => {
+    if (props.onBlur) props.onBlur(e, field);
+    setHasFocus(false);
+  };
+  const onChange = (e, field) => {
+    props.onChange && props.onChange(e, field);
+  };
+  const passwordStrengthFunction = () => {
+    if (value.length === 0) {
+      return PasswordStrength.NONE;
+    }
+    if (value.length < 6) {
+      return PasswordStrength.WEAK;
+    }
+    if (value.length < 11) {
+      return PasswordStrength.MEDIUM;
+    }
+    return PasswordStrength.STRONG;
+  };
+  const passwordStrength = passwordStrengthFunction();
+  return /*#__PURE__*/React.createElement(Wrapper, null, label && /*#__PURE__*/React.createElement(Label, {
+    isUp: labelUp,
+    active: hasFocus,
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(InputWrap, {
+    error: error && touched
+  }, /*#__PURE__*/React.createElement("input", {
+    type: isPasswordVisible ? 'text' : 'password',
+    id: id,
+    name: name,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyUp: handleCapslock,
+    onKeyDown: handleCapslock
+  })), /*#__PURE__*/React.createElement(ShowPassword, {
+    onClick: togglePasswordVisibility
+  }, isPasswordVisible ? /*#__PURE__*/React.createElement("i", {
+    className: "ion ion-md-eye-off"
+  }) : /*#__PURE__*/React.createElement("i", {
+    className: "ion ion-md-eye"
+  })), /*#__PURE__*/React.createElement(BottomWrap, null, showStrength ? /*#__PURE__*/React.createElement(PasswordStrengthWrap, null, /*#__PURE__*/React.createElement(PasswordStrengthIndicators, {
+    passwordStrength: passwordStrength
+  }, /*#__PURE__*/React.createElement(PasswordStrengthIndicator, null), /*#__PURE__*/React.createElement(PasswordStrengthIndicator, null), /*#__PURE__*/React.createElement(PasswordStrengthIndicator, null)), info && /*#__PURE__*/React.createElement(InfoIconWrapper, null, /*#__PURE__*/React.createElement(InfoIcon, {
+    position: "bottom",
+    title: info,
+    noMarginLeft: true
+  })), /*#__PURE__*/React.createElement(PasswordStrengthText, {
+    passwordStrength: passwordStrength
+  }, passwordStrength !== PasswordStrength.NONE && passwordStrength)) : info && /*#__PURE__*/React.createElement(InfoIconWrapper, null, /*#__PURE__*/React.createElement(InfoIcon, {
+    position: "bottom",
+    title: info,
+    noMarginLeft: true
+  })), /*#__PURE__*/React.createElement(CapslockIndicator, null, isCapslockOn && /*#__PURE__*/React.createElement(CapsLockSvg, null))));
+};
+InputPassword.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  info: PropTypes.string,
+  showStrength: PropTypes.bool
+};
+InputPassword.defaultProps = {
+  label: '',
+  value: '',
+  error: false,
+  touched: false,
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {},
+  info: '',
+  showStrength: false
+};
+export default InputPassword;

package/dist/Input/InputPassword.stories.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { InputPassword } from './InputPassword';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Inputs/Input Password',
+  component: InputPassword,
+  argTypes: {
+    type: {
+      type: 'string'
+    },
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value: {
+      type: 'string',
+      defaultValue: ''
+    },
+    error: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    touched: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onChange: {
+      action: 'change',
+      type: 'function'
+    },
+    onBlur: {
+      action: 'blur',
+      type: 'function'
+    },
+    onFocus: {
+      action: 'hasFocus',
+      type: 'function'
+    },
+    info: {
+      type: 'string',
+      defaultValue: ''
+    },
+    showStrength: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(InputPassword, args));
+export const PasswordFilled = Template.bind({});
+PasswordFilled.args = {
+  label: 'input description (label) - PASSWORD',
+  value: 'your password (value)'
+};
+export const PasswordStrength = Template.bind({});
+PasswordStrength.args = {
+  label: 'input description (label) - PASSWORD',
+  value: 'your password (value)',
+  showStrength: true
+};
+export const InputPasswordEmpty = Template.bind({});
+InputPasswordEmpty.args = {
+  label: 'input description (label) - PASSWORD'
+};

package/dist/Input/InputPassword.styles.js

@@ -0,0 +1,139 @@
+import styled, { css } from 'styled-components/macro';
+import { PasswordStrength } from './InputPassword';
+import theme from 'styles/theme';
+export const BottomWrap = styled.div`
+  position: relative;
+  margin-top: 6px;
+`;
+export const ShowPassword = styled.div`
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 12px 0;
+  height: 40px;
+  width: 20px;
+  text-align: right;
+
+  &:hover {
+    color: ${props => theme.cPrimary};
+  }
+`;
+export const CapslockIndicator = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 2px;
+
+  & > svg {
+    fill: ${props => theme.cBlack};
+  }
+`;
+export const PasswordStrengthWrap = styled.div`
+  padding: 3px 0;
+  display: block;
+  width: 100%;
+  padding-right: 20px;
+  font-size: 0;
+`;
+export const PasswordStrengthIndicators = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 -4px;
+  padding-right: 12px;
+
+  ${props => props.passwordStrength === PasswordStrength.WEAK && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1) {
+          background-color: ${theme.cWarning};
+        }
+      }
+    `}
+
+  ${props => props.passwordStrength === PasswordStrength.MEDIUM && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1),
+        &:nth-child(2) {
+          background-color: ${theme.cYellow};
+        }
+      }
+    `}
+
+  ${props => props.passwordStrength === PasswordStrength.STRONG && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3) {
+          background-color: ${theme.cLighterGreen};
+        }
+      }
+    `}
+`;
+export const PasswordStrengthIndicator = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  width: 32px;
+  height: 6px;
+  border-radius: 3px;
+  margin: 3px 4px;
+  background-color: ${props => theme.cGrey};
+`;
+export const PasswordStrengthText = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 9px;
+  line-height: 12px;
+  letter-spacing: 0.4px;
+  font-style: italic;
+  color: ${props => theme.cText};
+`;
+export const DatePickerOverlay = styled.div`
+  &&& > .DayPickerInput {
+    z-index: 100;
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
+  &&& > .DayPickerInput > input {
+    font-family: 'Open sans';
+    display: block;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 13px 0;
+    padding-bottom: 7px;
+    border-radius: 0;
+    box-shadow: none;
+    outline: 0;
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid ${props => theme.cGrey};
+    color: ${props => theme.cBlack};
+    background-color: transparent;
+    transition: border-color 0.2s;
+
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      border-top-color: transparent;
+      border-bottom-color: ${props => theme.cPrimary};
+    }
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+`;
+export const InfoIconWrapper = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  margin: -2px 0;
+`;

package/dist/Input/RangeInput.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FieldRange from '@atlaskit/field-range';
+import RangeWrapper from './RangeInput.styles';
+export const RangeInput = ({
+  disabled,
+  max,
+  min,
+  step,
+  onChange,
+  value,
+  id,
+  name
+}) => {
+  const valuePercent = ((value - min) / (max - min) * 100).toFixed(2);
+  return /*#__PURE__*/React.createElement(RangeWrapper, {
+    valuePercent: valuePercent
+  }, /*#__PURE__*/React.createElement(FieldRange, {
+    id: id,
+    name: name,
+    disabled: disabled,
+    max: max,
+    min: min,
+    step: step,
+    value: value,
+    onChange: onChange
+  }));
+};
+RangeInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func,
+  value: PropTypes.number.isRequired
+};
+RangeInput.defaultProps = {
+  disabled: false,
+  max: 100,
+  min: 0,
+  step: 1,
+  onChange: () => {}
+};
+export default RangeInput;

package/dist/Input/RangeInput.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { RangeInput } from './RangeInput';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Inputs/Range Input',
+  component: RangeInput,
+  argTypes: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      required: true
+    },
+    disabled: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    max: {
+      type: 'number',
+      defaultValue: 100
+    },
+    min: {
+      type: 'number',
+      defaultValue: 0
+    },
+    step: {
+      type: 'number',
+      defaultValue: 1
+    },
+    onChange: {
+      action: 'change',
+      type: 'function'
+    },
+    value: {
+      type: 'number',
+      required: true
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RangeInput, args));
+export const RangeInputDefault = Template.bind({});
+RangeInputDefault.args = {};
+
+//doublecheck:
+
+// any other functions to take into args?

package/dist/Input/RangeInput.styles.js

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components/macro';
+import theme from 'styles/theme';
+const sliderThumbSize = 26;
+const sliderLineThickness = 8;
+const sliderThumbStyle = css`
+  background: ${props => theme.cPrimary};
+  border: 4px solid ${props => theme.cWhite};
+  height: ${sliderThumbSize}px;
+  width: ${sliderThumbSize}px;
+`;
+const sliderDefaultBackground = css`
+  background: ${props => `linear-gradient(${theme.cPrimary}, ${theme.cPrimary}) 0/ ${props.valuePercent}% 100% no-repeat ${theme.cLightGrey}`};
+`;
+const sliderTrackFocusedStyle = css`
+  background: ${props => `linear-gradient(${theme.cPrimaryDark}, ${theme.cPrimaryDark}) 0/ ${props.valuePercent}% 100% no-repeat ${theme.cLightGrey}`};
+`;
+const sliderTrackStyle = css`
+  /* background: ${props => theme.cLightGrey}; */
+  border-radius: ${sliderLineThickness / 2}px;
+  height: ${sliderLineThickness}px;
+  ${sliderDefaultBackground};
+`;
+const sliderThumbFocusedStyle = css`
+  border-color: ${props => theme.cLightGrey};
+`;
+const sliderThumbHoverStyle = css`
+  background: ${props => theme.cPrimaryDark};
+`;
+const chromeRangeInputStyle = css`
+  &::-webkit-slider-thumb {
+    margin-top: -${sliderThumbSize / 2 - sliderLineThickness / 2}px;
+    ${sliderThumbStyle};
+  }
+
+  &:focus::-webkit-slider-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-webkit-slider-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-webkit-slider-runnable-track {
+    ${sliderTrackStyle};
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    ${sliderDefaultBackground};
+  }
+
+  &:active::-webkit-slider-runnable-track,
+  &:hover::-webkit-slider-runnable-track {
+    ${sliderTrackFocusedStyle};
+  }
+`;
+const firefoxRangeInputStyle = css`
+  &::-moz-range-thumb {
+    ${sliderThumbStyle};
+  }
+
+  &:focus::-moz-range-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-moz-range-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-moz-range-track {
+    ${sliderTrackStyle};
+  }
+
+  &:focus::-moz-range-track {
+    ${sliderDefaultBackground};
+  }
+
+  &:active::-moz-range-track,
+  &:hover::-moz-range-track {
+    ${sliderTrackFocusedStyle};
+  }
+`;
+const IERangeInputStyle = css`
+  &::-ms-thumb {
+    ${sliderThumbStyle};
+    margin-top: -${sliderThumbSize / 2 - sliderLineThickness / 2}px;
+  }
+
+  &:focus::-ms-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-ms-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-ms-track {
+    height: ${sliderLineThickness}px;
+  }
+
+  &::-ms-fill-lower {
+    background: ${props => theme.cPrimary};
+    border-radius: ${sliderLineThickness / 2}px;
+  }
+
+  &::-ms-fill-upper {
+    background: ${props => theme.cLightGrey};
+    border-radius: ${sliderLineThickness / 2}px;
+  }
+
+  &:active::-ms-fill-lower,
+  &:hover::-ms-fill-lower {
+    background: ${props => theme.cPrimaryDark};
+  }
+
+  &:active::-ms-fill-upper,
+  &:hover::-ms-fill-upper {
+    background: ${props => theme.cLightGrey};
+  }
+`;
+const RangeWrapper = styled.div`
+  input {
+    ${chromeRangeInputStyle} ${firefoxRangeInputStyle} ${IERangeInputStyle};
+  }
+`;
+export default RangeWrapper;

package/dist/Input/Select.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactSelect, { components } from 'react-select';
+import { Wrapper, Label } from './Input.styles';
+import { SelectControl, SelectMenu, SelectMenuList, SelectOption, SelectContainer, SelectValueContainer, SelectIcon } from './Select.styles';
+const DropdownIndicator = props => {
+  const {
+    selectProps
+  } = props;
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(SelectIcon, {
+    isMenuOpen: selectProps.menuIsOpen
+  }));
+};
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.instanceOf(Object).isRequired
+};
+const SelectMenuListWithScroll = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(SelectMenuList, {
+    autoHeight: true,
+    autoHeightMax: 300
+  }, children);
+};
+SelectMenuListWithScroll.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export const Select = props => {
+  const {
+    id,
+    name,
+    label,
+    options,
+    search,
+    error,
+    touched,
+    value,
+    disabled
+  } = props;
+  const [labelUp, setLabelUp] = useState(!!value);
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    setLabelUp(hasFocus || !!value);
+  }, [hasFocus, value]);
+  const onFocus = e => {
+    props.onFocus && props.onFocus({
+      name,
+      value
+    });
+    if (search) {
+      setHasFocus(true);
+    }
+  };
+  const onBlur = e => {
+    props.onBlur && props.onBlur({
+      name,
+      value
+    });
+    setTimeout(() => {
+      setHasFocus(false);
+    }, 1);
+  };
+  const onChange = selectedOption => {
+    props.onChange && props.onChange({
+      name,
+      value: selectedOption.value
+    });
+    setTimeout(() => {
+      setHasFocus(true);
+    }, 1);
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, null, label && /*#__PURE__*/React.createElement(Label, {
+    isUp: labelUp,
+    active: hasFocus,
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(ReactSelect, {
+    id: id,
+    name: name,
+    options: options,
+    isDisabled: disabled,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    value: options.find(option => option.value === value),
+    placeholder: "",
+    isSearchable: search,
+    components: {
+      Control: SelectControl,
+      DropdownIndicator,
+      IndicatorSeparator: null,
+      Menu: SelectMenu,
+      MenuList: SelectMenuListWithScroll,
+      Option: SelectOption,
+      SelectContainer,
+      ValueContainer: SelectValueContainer
+    }
+  }));
+};
+Select.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  value: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+  })).isRequired,
+  search: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func
+};
+Select.defaultProps = {
+  label: '',
+  value: '',
+  search: false,
+  error: false,
+  touched: false,
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {}
+};
+export default Select;
+
+//doublecheck: label down on blur, even if field is filled..