@stokr/components-library 0.5.4 → 0.5.6

package/dist/SvgIcons/VerifiedBadge.js

@@ -0,0 +1,13 @@
+import React from 'react';
+const VerifiedBadge = () => /*#__PURE__*/React.createElement("svg", {
+  width: "90",
+  height: "30",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M84.707 1H5.293A4.3 4.3 0 0 0 1 5.308v19.384A4.3 4.3 0 0 0 5.293 29h79.414A4.3 4.3 0 0 0 89 24.692V5.308A4.3 4.3 0 0 0 84.707 1zM87 24.818C87 26.023 86.036 27 84.846 27H5.154C3.964 27 3 26.023 3 24.818V5.182C3 3.977 3.964 3 5.154 3h79.692C86.036 3 87 3.977 87 5.182v19.636zM53 15c0 .552-.481 1-1.075 1h-40.85C10.481 16 10 15.552 10 15s.481-1 1.075-1h40.85c.594 0 1.075.448 1.075 1zm26.54-4.832c.473.316.602.953.29 1.428l-5.96 8.949c-.183.27-.482.439-.808.455-.307 0-.6-.136-.796-.372l-3.033-3.58a1.056 1.056 0 1 1 1.646-1.324l2.07 2.514 5.174-7.79a1.035 1.035 0 0 1 1.417-.28z",
+  fill: "#FFF",
+  fillRule: "nonzero",
+  stroke: "#EE220D",
+  strokeWidth: ".5"
+}));
+export default VerifiedBadge;

package/dist/SvgIcons/index.js

@@ -0,0 +1,32 @@
+import LogoSvg from './LogoSvg';
+import CapsLockSvg from './CapsLockSvg';
+import EthSvg from './EthSvg';
+import EurSvg from './EurSvg';
+import DocumentSvg from './DocumentSvg';
+import PassportSvg from './PassportSvg';
+import TwoSidedDocumentSvg from './TwoSidedDocumentSvg';
+import CameraSvg from './CameraSvg';
+import UploadSvg from './UploadSvg';
+import DocumentBackSvg from './DocumentBackSvg';
+import DocumentSmallSvg from './DocumentSmallSvg';
+import FaceScanIconSvg from './FaceScanIconSvg';
+import RefreshSvg from './RefreshSvg';
+import AdminBadgeSvg from './AdminBadgeSvg';
+import OneSvg from './OneSvg';
+import TwoSvg from './TwoSvg';
+import ThreeSvg from './ThreeSvg';
+import FourSvg from './FourSvg';
+import Glassess from './Glassess';
+import VerifiedBadge from './VerifiedBadge';
+import SocialFacebook from './SocialFacebook';
+import SocialInstagram from './SocialInstagram';
+import SocialLinkedIn from './SocialLinkedIn';
+import SocialMedium from './SocialMedium';
+import SocialReddit from './SocialReddit';
+import SocialTelegram from './SocialTelegram';
+import SocialTwitter from './SocialTwitter';
+import SocialYoutube from './SocialYoutube';
+import UpdateDefaultSvg from './UpdateDefaultSvg';
+import UpdateSoftSvg from './UpdateSoftSvg';
+import UpdateHardSvg from './UpdateHardSvg';
+export { LogoSvg, CapsLockSvg, EthSvg, EurSvg, DocumentSvg, PassportSvg, TwoSidedDocumentSvg, CameraSvg, UploadSvg, DocumentBackSvg, DocumentSmallSvg, FaceScanIconSvg, RefreshSvg, AdminBadgeSvg, OneSvg, TwoSvg, ThreeSvg, FourSvg, Glassess, VerifiedBadge, SocialFacebook, SocialInstagram, SocialLinkedIn, SocialMedium, SocialReddit, SocialTelegram, SocialTwitter, SocialYoutube, UpdateDefaultSvg, UpdateSoftSvg, UpdateHardSvg };

package/dist/Switch/Switch.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Value, Indicator } from './Switch.styles';
+export const Switch = props => {
+  const {
+    value1,
+    value2,
+    handleChange,
+    mobile,
+    dark
+  } = props;
+  const [value, setValue] = useState(props.value);
+  useEffect(() => {
+    handleChange(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Container, {
+    mobile: mobile
+  }, /*#__PURE__*/React.createElement(Value, {
+    active: value === value1,
+    onClick: () => setValue(value1),
+    dark: dark
+  }, value1), /*#__PURE__*/React.createElement(Indicator, {
+    value1: value === value1,
+    value2: value === value2,
+    onClick: () => setValue(value === value1 ? value2 : value1),
+    dark: dark
+  }), /*#__PURE__*/React.createElement(Value, {
+    active: value === value2,
+    onClick: () => setValue(value2),
+    dark: dark
+  }, value2));
+};
+Switch.propTypes = {
+  value: PropTypes.string.isRequired,
+  value1: PropTypes.string.isRequired,
+  value2: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  mobile: PropTypes.bool,
+  dark: PropTypes.bool
+};
+Switch.defaultProps = {
+  mobile: false,
+  dark: false
+};
+export default Switch;

package/dist/Switch/Switch.stories.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import Switch from './Switch';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+export default {
+  title: 'Components Library/Switch',
+  component: Switch,
+  argTypes: {
+    value: {
+      type: 'string',
+      required: true
+    },
+    value1: {
+      type: 'string',
+      required: true
+    },
+    value2: {
+      type: 'string',
+      required: true
+    },
+    handleChange: {
+      type: 'function',
+      required: true,
+      action: 'handleChange'
+    },
+    mobile: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    dark: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  },
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'reset viewport'
+    },
+    backgrounds: {
+      default: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Switch, args));
+export const SwitchDefault = Template.bind({});
+SwitchDefault.args = {};
+export const SwitchDark = Template.bind({});
+SwitchDark.args = {
+  value: 'Initial Value',
+  value1: 'Click on Value 1',
+  value2: 'Click on Value 2',
+  dark: true
+};
+SwitchDark.parameters = {
+  backgrounds: {
+    default: 'black'
+  }
+};
+export const SwitchMobile = Template.bind({});
+SwitchMobile.args = {
+  value: 'Initial Value',
+  value1: 'Click on Value 1',
+  value2: 'Click on Value 2',
+  mobile: true
+};
+SwitchMobile.parameters = {
+  viewport: {
+    defaultViewport: 'iphonexsmax'
+  }
+};
+
+//now stories automatically changing to dark and mobile situatons

package/dist/Switch/Switch.styles.js

@@ -0,0 +1,105 @@
+import styled from 'styled-components/macro';
+import theme from 'styles/theme';
+const switchWidth = 34;
+export const Container = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  font-size: 0;
+  text-align: center;
+
+  ${props => props.mobile && `
+    display: block;
+    margin: 0;
+    padding: 18px 0;
+  `}
+`;
+export const Value = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 2px 0;
+  opacity: 0.5;
+  color: ${props => theme.cBlack};
+  transition: opacity 0.2s, color 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    color: ${props => theme.cPrimary};
+  }
+
+  ${props => props.active && `
+    opacity: 1;
+  `}
+
+  ${props => props.dark && `
+    color: ${theme.cPrimary};
+
+    &:hover {
+      color: ${theme.cBlack};
+    }
+  `};
+`;
+export const Indicator = styled.button`
+  display: inline-block;
+  vertical-align: middle;
+  width: ${switchWidth}px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: ${props => theme.cGrey};
+  margin: 0 16px;
+  position: relative;
+  outline: 0;
+  cursor: pointer;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -9px;
+    margin-left: -9px;
+    border-radius: 9px;
+    background-color: ${props => theme.cBlack};
+    transform: translateX(0);
+    transition: transform .2s, background-color .2s;
+  }
+
+  &:hover {
+    &:before {
+      background-color: ${props => theme.cPrimary};
+    }
+  }
+
+  ${props => props.dark && `
+    background-color: ${theme.cGrey2};
+
+    &:before {
+      background-color: ${theme.cPrimary};
+    }
+
+    &:hover {
+      &:before {
+        background-color: ${theme.cBlack};
+      }
+    }
+  `}
+
+  ${props => props.value1 && `
+    &:before {
+      transform: translateX(-${switchWidth / 2 - 8}px);
+    }
+  `}
+
+  ${props => props.value2 && `
+    &:before {
+      transform: translateX(${switchWidth / 2 - 8}px);
+    }
+  `}
+`;

package/dist/Tabs/Tabs.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TransitionGroup, Transition } from 'react-transition-group';
+import { StyledTabs, Tab } from './Tabs.styles';
+export { Tab };
+const timeout = 300;
+const getTransitionStyles = {
+  entering: {
+    position: 'absolute',
+    opacity: 0
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0
+  }
+};
+export const Tabs = ({
+  children,
+  activeTab
+}) => /*#__PURE__*/React.createElement(TransitionGroup, {
+  component: StyledTabs
+}, React.Children.map(children, child => {
+  if (child.props.tabId !== activeTab || ! /*#__PURE__*/React.isValidElement(child)) return null;
+  return /*#__PURE__*/React.createElement(Transition, {
+    key: child.props.tabId,
+    timeout: {
+      enter: timeout,
+      exit: timeout
+    }
+  }, status => /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      ...getTransitionStyles[status]
+    }
+  }, child));
+}));
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+Tabs.defaultProps = {
+  activeTab: 0
+};
+export default Tabs;

package/dist/Tabs/Tabs.stories.js

@@ -0,0 +1,28 @@
+// import React from 'react'
+// import Tabs from './Tabs'
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+// import Number from 'components/Number/Number'
+
+// export default {
+//   title: 'Components Library/Tabs/Tabs',
+//   component: Tabs,
+//   argTypes: {
+//     children: { type: 'node', defaultValue: [], required: true },
+//     activeTab: { type: 'oneOf Number or String', defaultValue: 0 },
+//   },
+// }
+
+// const Template = args => (
+//   <ComponentWrapper>
+//     <Tabs {...args} />
+//   </ComponentWrapper>
+// )
+
+// export const TabsExample = Template.bind({})
+// TabsExample.args = {
+//   children: [<Number />, <Number />, <Number />],
+//   activeTab: 3,
+// }
+
+// //doublecheck:
+// // less visible than in TabNav ( activeTab not showing)

package/dist/Tabs/Tabs.styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components/macro';
+export const StyledTabs = styled.div`
+  position: relative;
+  width: 100%;
+`;
+export const Tab = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+`;

package/dist/TabsNav/TabNav.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledTab, LinkText } from './TabsNav.styles';
+export const TabNav = ({
+  children,
+  isActive,
+  onClick
+}) => /*#__PURE__*/React.createElement(StyledTab, {
+  onClick: onClick,
+  isActive: isActive
+}, /*#__PURE__*/React.createElement(LinkText, null, children));
+TabNav.propTypes = {
+  children: PropTypes.node.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
+};
+TabNav.defaultProps = {
+  isActive: false,
+  onClick: () => {}
+};
+export default TabNav;

package/dist/TabsNav/TabNav.stories.js

@@ -0,0 +1,32 @@
+import Number from 'components/Number/Number';
+import React from 'react';
+import { TabNav } from './TabNav';
+export default {
+  title: 'Components Library/Tabs/TabNav',
+  component: TabNav,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    isActive: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onClick: {
+      type: 'function',
+      action: 'onClick'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(TabNav, args);
+export const TabNavActive = Template.bind({});
+TabNavActive.args = {
+  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)],
+  isActive: true
+};
+export const TabNavInactive = Template.bind({});
+TabNavInactive.args = {
+  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)]
+};

package/dist/TabsNav/TabsNav.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledTabs, Scroll, TabsWrapper } from './TabsNav.styles';
+import TabNav from './TabNav';
+export { TabNav };
+export const TabsNav = ({
+  children,
+  activeTab
+}) => /*#__PURE__*/React.createElement(StyledTabs, null, /*#__PURE__*/React.createElement(Scroll, null, /*#__PURE__*/React.createElement(TabsWrapper, null, React.Children.map(children, child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) return null;
+  return /*#__PURE__*/React.cloneElement(child, {
+    ...child.props,
+    isActive: child.props.tabId === activeTab
+  });
+}))));
+TabsNav.propTypes = {
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+TabsNav.defaultProps = {
+  activeTab: 0
+};
+export default TabsNav;

package/dist/TabsNav/TabsNav.stories.js

@@ -0,0 +1,25 @@
+// import React from 'react'
+// import { TabsNav } from './TabsNav'
+// import Number from 'components/Number/Number'
+
+// export default {
+//   title: 'Components Library/Tabs/TabsNav',
+//   component: TabsNav,
+//   argTypes: {
+//     children: { type: 'node', defaultValue: [], required: true },
+//     activeTab: { type: 'array of numbers', defaultValue: [] },
+
+//     // handleItemClick: { type: 'function', action: 'handleItemClick' },
+//   },
+// }
+
+// const Template = args => <TabsNav {...args} />
+
+// export const TabsNavExample = Template.bind({})
+// TabsNavExample.args = {
+//   children: [<Number />, <Number />, <Number />],
+//   activeTab: [1],
+// }
+
+// //doublecheck:
+// // less visible than in TabNav ( activeTab not showing)

package/dist/TabsNav/TabsNav.styles.js

@@ -0,0 +1,80 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const StyledTabs = styled.div`
+  position: relative;
+  border-bottom: 1px solid ${props => theme.cLightGrey};
+`;
+export const Scroll = styled.div`
+  position: relative;
+  overflow: hidden;
+  overflow-x: auto;
+`;
+export const TabsWrapper = styled.div`
+  position: relative;
+  white-space: nowrap;
+  padding: 12px 0;
+
+  ${rwd.Medium`
+    padding: 24px;
+  `}
+`;
+export const LinkText = styled.span`
+  display: block;
+  position: relative;
+  font-family: 'Open Sans';
+  font-size: 11px;
+  letter-spacing: 2px;
+  line-height: 20px;
+  text-transform: uppercase;
+  padding: 8px 0;
+
+  &:before {
+    content: '';
+    width: 100%;
+    height: 8px;
+    background-color: transparent;
+    position: absolute;
+    top: 100%;
+    left: 0%;
+    transition: background-color 0.2s;
+  }
+`;
+export const StyledTab = styled.button`
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  visibility: visible;
+  padding: 12px;
+  color: ${props => theme.cBlack};
+  transition: opacity 0.2s;
+
+  ${rwd.Medium`
+    padding: 24px;
+  `}
+
+  ${rwd.Large`
+    padding: 32px 40px;
+  `}
+
+  &:focus ,
+  &:hover {
+    opacity: 0.6;
+  }
+
+  ${props => props.isActive && `
+    &:focus ,
+    &:hover {
+      opacity: 1;
+    }
+
+    ${LinkText} {
+      font-weight: bold;
+
+      &:before {
+        background-color: ${theme.cPrimary}!important;
+      }
+    }
+  `}
+`;

package/dist/TeamOverview/TeamOverview.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { AdminBadgeSvg } from 'components/SvgIcons';
+import { Container, ImageWrapper, ContentWrapper, Avatar, Name, ContentGroup, SmallHeader, ProjectStats, ProjectStat, PersonPosition, PersonEmail, StatLabel, StatValue } from './TeamOverview.styles';
+import avatarPlaceholder from 'static/images/avatar-placeholder.png';
+export const TeamOverview = ({
+  name,
+  memberRole,
+  avatar,
+  position,
+  email,
+  projectName,
+  stats
+}) => {
+  const [profilePicture, setProfilePicture] = useState(avatarPlaceholder);
+  useEffect(() => {
+    const getPicture = async () => {
+      const picture = await getProfilePicture();
+      setProfilePicture(picture);
+    };
+    getPicture();
+  }, []);
+  const getProfilePicture = () => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const http = new XMLHttpRequest();
+        http.open('HEAD', avatar, false);
+        http.send();
+        // console.log(http);
+
+        if (http.status !== 404) {
+          resolve(avatar);
+        } else {
+          resolve(avatarPlaceholder);
+        }
+      } catch (error) {
+        reject(avatarPlaceholder);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: profilePicture,
+    alt: "avatar"
+  })), /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(ContentGroup, null, /*#__PURE__*/React.createElement(SmallHeader, null, memberRole === 'company_sa' && /*#__PURE__*/React.createElement(AdminBadgeSvg, null), /*#__PURE__*/React.createElement("span", null, memberRole)), /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement(PersonPosition, null, position), /*#__PURE__*/React.createElement(PersonEmail, null, email)), /*#__PURE__*/React.createElement(ContentGroup, null, /*#__PURE__*/React.createElement(SmallHeader, null, /*#__PURE__*/React.createElement("span", null, "Project")), /*#__PURE__*/React.createElement(Name, null, projectName), stats && /*#__PURE__*/React.createElement(ProjectStats, null, stats.map(stat => /*#__PURE__*/React.createElement(ProjectStat, {
+    key: stat.name
+  }, /*#__PURE__*/React.createElement(StatLabel, null, stat.name), /*#__PURE__*/React.createElement(StatValue, null, stat.count)))))));
+};
+TeamOverview.propTypes = {
+  name: PropTypes.string,
+  memberRole: PropTypes.string,
+  avatar: PropTypes.string,
+  position: PropTypes.string,
+  email: PropTypes.string,
+  projectName: PropTypes.string,
+  stats: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    count: PropTypes.number
+  }))
+};
+TeamOverview.defaultProps = {
+  stats: [],
+  name: '',
+  memberRole: '',
+  avatar: '',
+  position: '',
+  email: '',
+  projectName: ''
+};
+export default TeamOverview;

package/dist/TeamOverview/TeamOverview.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { TeamOverview } from './TeamOverview';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Team Overview',
+  component: TeamOverview,
+  argTypes: {
+    name: {
+      type: 'string',
+      defaultValue: ''
+    },
+    memberrole: {
+      type: 'string'
+    },
+    avatar: {
+      type: 'string',
+      defaultValue: ''
+    },
+    email: {
+      type: 'string',
+      defaultValue: ''
+    },
+    position: {
+      type: 'string',
+      defaultValue: ''
+    },
+    projectName: {
+      type: 'string',
+      defaultValue: ''
+    },
+    stats: {
+      type: 'array of shape',
+      defaultValue: [{
+        name: ''
+      }, {
+        count: 0
+      }],
+      required: true
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(TeamOverview, args));
+export const TeamOverviewExample = Template.bind({});
+TeamOverviewExample.args = {
+  name: 'John Doe',
+  memberrole: 'Memberrole',
+  avatar: 'Avatar',
+  email: 'john@doe.com',
+  position: 'Chief',
+  projectName: 'Aquarius is Raising',
+  stats: [{
+    count: 15,
+    name: 'Stat Name'
+  }]
+};
+export const TeamOverviewOverview = Template.bind({});
+TeamOverviewOverview.args = {
+  name: 'Name',
+  memberrole: 'Memberrole ',
+  avatar: 'Avatar',
+  email: 'Email',
+  position: 'Position',
+  projectName: 'Project Name',
+  stats: [{
+    count: 1,
+    name: 'Stat Name'
+  }]
+};