@stokr/components-library 0.5.6 → 0.5.7

package/dist/Input/InputPassword.js

@@ -1,122 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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..