@stokr/components-library 0.5.6 → 0.5.8

package/dist/LearnMorePage/LearnMore.js

@@ -1,199 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { navigate } from '@reach/router';
-import { Collapse } from 'react-collapse';
-import TabsNav from 'components/TabsNav/TabsNav';
-import { Row } from 'components/Grid/Grid.styles';
-import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
-import { getMedia } from 'styles/rwd';
-import BackButton from 'components/BackButton/BackButton';
-import LearnMoreItem from './LearnMoreItem';
-import { TabNav, TabArrow, Container, TitleContainer, SubTabNav, SidebarColumn, SidebarHeading, SidebarTitle, ContentColumn, MobileMenuToggler } from './LearnMore.styles';
-import { CompleteMarkTooltip, CompleteMark, CompleteMarkContainer } from './LearnMore.shared.styles';
-export class LearnMore extends PureComponent {
-  state = {
-    openedTab: '',
-    isMobile: false,
-    isSidebarExpanded: false
-  };
-  componentDidMount() {
-    this.setDefaultActiveTab();
-    window.addEventListener('resize', this.onResize);
-    this.onResizeTimeout();
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  }
-  getActiveTab = tabId => {
-    const {
-      categories
-    } = this.props;
-    let activeTabObject = {};
-    categories.find(category => {
-      const {
-        subcategories
-      } = category;
-      if (subcategories.length) {
-        activeTabObject = subcategories.find(subcategory => subcategory.id === tabId);
-        if (activeTabObject) {
-          return true;
-        }
-      }
-      if (category.id === tabId) {
-        activeTabObject = category;
-        return true;
-      }
-      return false;
-    });
-    return activeTabObject;
-  };
-  setDefaultActiveTab = () => {
-    const {
-      activeCategory
-    } = this.props;
-    this.toggleTab(activeCategory);
-  };
-  toggleTab = tabId => {
-    const {
-      openedTab
-    } = this.state;
-    if (openedTab === tabId) {
-      this.setState({
-        openedTab: ''
-      });
-      return;
-    }
-    this.setState({
-      openedTab: tabId
-    });
-  };
-  toggleSidebar = () => {
-    this.setState(prevState => ({
-      isSidebarExpanded: !prevState.isSidebarExpanded
-    }));
-  };
-  onResize = () => {
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(this.onResizeTimeout, 200);
-  };
-  onResizeTimeout = () => {
-    this.setState({
-      isMobile: this.checkIsMobile()
-    });
-  };
-  checkIsMobile = () => !window.matchMedia(getMedia('Medium')).matches;
-  navigateToSubcategory = subcategoryId => {
-    const {
-      categories,
-      items
-    } = this.props;
-    navigate(`/learn-more/${subcategoryId}`, {
-      state: {
-        learnMore: {
-          categories,
-          items
-        }
-      }
-    });
-  };
-  render() {
-    const {
-      activeItem,
-      items,
-      categories,
-      onMarkComplete
-    } = this.props;
-    const {
-      openedTab,
-      isMobile,
-      isSidebarExpanded
-    } = this.state;
-    const activeTabObject = this.getActiveTab(activeItem) || {};
-    const activeItemObject = items.find(post => post.id === activeItem);
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, {
-      nowrap: true
-    }, isMobile && /*#__PURE__*/React.createElement(MobileMenuToggler, {
-      isActive: isSidebarExpanded,
-      onClick: this.toggleSidebar
-    }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(SidebarColumn, {
-      part: 6,
-      isExpanded: isSidebarExpanded
-    }, /*#__PURE__*/React.createElement(ComponentScroll, {
-      autoHeight: true,
-      autoHeightMin: "100vh",
-      autoHeightMax: "100vh"
-    }, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(SidebarHeading, null, "INVESTING 101"), /*#__PURE__*/React.createElement(SidebarTitle, null, "LEARN MORE ABOUT INVESTING"), /*#__PURE__*/React.createElement(BackButton, {
-      to: "/"
-    }, "Back to previous page")), /*#__PURE__*/React.createElement(TabsNav, {
-      activeTab: activeItem
-    }, categories.map(category => /*#__PURE__*/React.createElement(Fragment, {
-      key: category.id
-    }, /*#__PURE__*/React.createElement(TabNav, {
-      borderTop: true,
-      tabId: category.id,
-      isActive: category.subcategories.some(subcategory => subcategory.id === activeItem),
-      complete: category.complete,
-      onClick: () => this.toggleTab(category.id)
-    }, /*#__PURE__*/React.createElement(TabArrow, {
-      isActive: openedTab === category.id
-    }), category.title, /*#__PURE__*/React.createElement(CompleteMarkTooltip, {
-      disabled: !category.tooltip,
-      position: "right center",
-      content: category.tooltip,
-      trigger: /*#__PURE__*/React.createElement(CompleteMarkContainer, {
-        inProgress: category.inProgress,
-        complete: category.complete
-      }, /*#__PURE__*/React.createElement(CompleteMark, null))
-    })), /*#__PURE__*/React.createElement(Collapse, {
-      isOpened: openedTab === category.id
-    }, category.subcategories.map(subcategory => /*#__PURE__*/React.createElement(SubTabNav, {
-      key: subcategory.id,
-      tabId: subcategory.id,
-      isActive: activeItem === subcategory.id,
-      onClick: () => this.navigateToSubcategory(subcategory.id)
-    }, subcategory.title, /*#__PURE__*/React.createElement(CompleteMarkTooltip, {
-      disabled: !subcategory.tooltip,
-      position: "right center",
-      content: subcategory.tooltip,
-      trigger: /*#__PURE__*/React.createElement(CompleteMarkContainer, {
-        inProgress: subcategory.inProgress,
-        complete: subcategory.complete
-      }, /*#__PURE__*/React.createElement(CompleteMark, null))
-    }))))))))), /*#__PURE__*/React.createElement(ContentColumn, {
-      part: 16
-    }, activeItemObject && /*#__PURE__*/React.createElement(LearnMoreItem, {
-      postItem: activeItemObject,
-      activeTabObject: activeTabObject,
-      onMarkComplete: onMarkComplete
-    }))));
-  }
-}
-export const learnMoreCategoryPropTypes = {
-  title: PropTypes.string.isRequired,
-  inProgress: PropTypes.bool,
-  complete: PropTypes.bool,
-  tooltip: PropTypes.node
-};
-export const learnMorePostPropTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  excerpt: PropTypes.string.isRequired,
-  content: PropTypes.string.isRequired,
-  postType: PropTypes.oneOf(['video', 'text']),
-  cover: PropTypes.string,
-  videoSrc: PropTypes.string
-};
-LearnMore.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape(learnMorePostPropTypes)).isRequired,
-  categories: PropTypes.arrayOf(PropTypes.shape({
-    ...learnMoreCategoryPropTypes,
-    subcategories: PropTypes.arrayOf(PropTypes.shape(learnMoreCategoryPropTypes))
-  })).isRequired,
-  onMarkComplete: PropTypes.func,
-  activeCategory: PropTypes.string.isRequired,
-  activeItem: PropTypes.string.isRequired
-};
-LearnMore.defaultProps = {
-  onMarkComplete: () => {}
-};
-export default LearnMore;

package/dist/LearnMorePage/LearnMore.shared.styles.js

@@ -1,49 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-import { Popup } from 'semantic-ui-react';
-import theme from 'styles/theme';
-export const CompleteMark = styled.i.attrs({
-  className: 'ion ion-md-checkmark'
-})`
-  margin: auto;
-`;
-export const CompleteMarkContainer = styled.div`
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  border: 1px dotted ${props => theme.cLightGrey};
-  margin-left: auto;
-
-  ${CompleteMark} {
-    display: none;
-  }
-
-  ${props => props.inProgress && `
-    border-style: solid;
-    border-color: ${theme.cLighterGreen};
-  `}
-
-  ${props => props.complete && css`
-      border-style: solid;
-      border-color: ${theme.cLighterGreen};
-      background: ${theme.cLighterGreen};
-
-      ${CompleteMark} {
-        display: block;
-        color: ${theme.cDarkGreen};
-      }
-    `}
-
-  ${props => props.large && css`
-      width: 40px;
-      height: 40px;
-
-      ${CompleteMark} {
-        font-size: 2em;
-      }
-    `}
-`;
-export const CompleteMarkTooltip = styled(Popup)`
-  margin-left: auto;
-  padding-left: 8px;
-`;

package/dist/LearnMorePage/LearnMore.stories.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { LearnMore } from './LearnMore';
-// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
-
-export default {
-  title: 'Components Library/LearnMorePage/LearnMore',
-  component: LearnMore,
-  argTypes: {
-    items: {
-      type: 'array of shape',
-      defaultValue: [],
-      required: true
-    },
-    categories: {
-      type: 'array of shape',
-      defaultValue: [],
-      required: true
-    },
-    subcategories: {
-      type: 'array of shape',
-      defaultValue: [],
-      required: true
-    },
-    onMarkComplete: {
-      type: 'function'
-    },
-    activeCategory: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    activeItem: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(LearnMore, args);
-export const LearnMoreDefault = Template.bind({});
-LearnMoreDefault.args = {};

package/dist/LearnMorePage/LearnMore.styles.js

@@ -1,250 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-import { TabsWrapper, StyledTabs } from 'components/TabsNav/TabsNav.styles';
-import rwd from 'styles/rwd';
-import { Column } from 'components/Grid/Grid.styles';
-import { StyledBackButton, BackButtonIcon } from 'components/BackButton/BackButton.styles';
-import theme from 'styles/theme';
-import spacing from 'styles/spacing';
-export const Container = styled.div`
-  width: 100%;
-  overflow: hidden;
-
-  ${TabsWrapper} {
-    padding: 0 !important;
-  }
-
-  ${StyledTabs} {
-    border-bottom: none;
-  }
-`;
-export const TabArrow = styled.i.attrs({
-  className: 'ion ion-ios-arrow-forward'
-})`
-  color: ${props => theme.cWarning};
-  margin-right: 6px;
-  transition: 0.3s transform;
-
-  ${props => props.isActive === true && `
-    transform: rotate(90deg);
-  `}
-`;
-export const TitleContainer = styled(ComponentWrapper)`
-  display: flex;
-  flex-direction: column;
-
-  ${rwd.Medium`
-    padding: 64px;
-  `}
-
-  ${rwd.Large`
-    padding-right: 96px;
-  `}
-
-  ${StyledBackButton} {
-    color: ${props => theme.cPrimary};
-    text-transform: uppercase;
-  }
-
-  ${BackButtonIcon} {
-    color: ${props => theme.cPrimary};
-  }
-`;
-export const TabTitle = styled.div`
-  padding: 42px 36px;
-  display: flex;
-  justify-content: space-between;
-  font-weight: 700;
-  text-transform: uppercase;
-  position: relative;
-  font-size: 11px;
-  line-height: 20px;
-  letter-spacing: 0.6px;
-`;
-export const Arrow = styled.i.attrs({
-  className: 'ion ion-ios-arrow-right'
-})`
-  &&& {
-    position: absolute;
-    top: 50%;
-    right: 32px;
-    transition: 0.3s transform;
-    transform: rotate(0);
-    text-align: center;
-    font-size: 16px;
-    line-height: 16px;
-    height: 16px;
-    margin-top: -8px;
-
-    ${props => props.isOpened && `
-      transform: rotate(-90deg);
-    `}
-  }
-`;
-export const SubTabNav = styled(ComponentWrapper)`
-  display: flex;
-  align-items: center;
-  font-size: 10px;
-  cursor: pointer;
-  transition: 0.3s background;
-  background: ${props => theme.cWhite};
-
-  &::before {
-    content: '';
-    display: none;
-    position: absolute;
-    top: 52px;
-    bottom: -32px;
-    right: 42px;
-    z-index: 1;
-    width: 0;
-    border-left: 1px dotted ${props => theme.cLightGrey};
-    transform: translateX(50%);
-
-    ${rwd.Medium`
-      display: block;
-    `}
-
-    ${rwd.Large`
-      right: 74px;
-    `}
-  }
-
-  &:last-child::before {
-    display: none;
-  }
-
-  ${props => props.isActive && css`
-      font-weight: 700;
-      background: ${theme.cGrey};
-    `}
-`;
-export const TabNav = styled(ComponentWrapper)`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  &:last-child {
-    border-bottom: 1px solid ${props => theme.cLightGrey};
-  }
-  
-  ${props => props.isActive && css`
-      &::before {
-        content: '';
-        width: 8px;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        background: ${theme.cWarning};
-      }
-    `}
-
-  + div ${SubTabNav}::before {
-    ${props => props.complete && css`
-        border-color: ${theme.cLighterGreen};
-        border-left-style: solid;
-      `}
-  }
-`;
-export const SidebarColumn = styled(Column)`
-  max-width: 300px;
-  position: fixed;
-  background: ${props => theme.cWhite};
-  z-index: 10000;
-  border-right: 1px solid ${props => theme.cLightGrey};
-  top: 0;
-  padding-top: 48px;
-  transition: 0.3s transform;
-  transform: translateX(-100%);
-  ${props => props.isExpanded && 'transform: translateX(0);'}
-
-  ${rwd.Medium`
-    transform: translateX(0);
-    max-width: 300px;
-    padding-top: ${props => spacing.headerHeight}px;
-  `}
-
-  ${rwd.Large`
-    max-width: 400px;
-  `}
-`;
-export const ContentColumn = styled(Column)`
-  ${rwd.Medium`
-    margin-left: 300px;
-  `}
-
-  ${rwd.Large`
-    margin-left: 400px;
-  `}
-`;
-export const SidebarTitle = styled.h3`
-  font-family: 'Open Sans';
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: 700;
-  margin-bottom: 20px;
-`;
-export const SidebarHeading = styled.div`
-  font-size: 12px;
-  letter-spacing: 0.4px;
-  font-weight: 600;
-  margin-bottom: 16px;
-`;
-export const MobileMenuToggler = styled.div`
-  display: block;
-  width: 48px;
-  height: 48px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: ${props => theme.cWhite};
-  z-index: 10001;
-
-  ${rwd.Medium`
-    display: none;
-  `}
-
-  span {
-    display: block;
-    width: 16px;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -1px;
-    margin-left: -8px;
-    background-color: ${props => theme.cText};
-    transition: background-color 0.4s, transform 0.4s;
-
-    &:nth-child(1) {
-      transform: translateY(-6px);
-    }
-
-    &:nth-child(3) {
-      transform: translateY(6px);
-    }
-  }
-
-  ${props => props.isActive && `
-    span {
-      background-color: ${theme.cPrimary};
-
-      &:nth-child(1) {
-        transform: translateY(0) rotate(135deg);
-      }
-
-      &:nth-child(2) {
-        transform: scaleX(0);
-      }
-
-      &:nth-child(3) {
-        transform: translateY(0) rotate(-135deg);
-      }
-    }
-  `}
-`;

package/dist/LearnMorePage/LearnMoreExampleObject.js

@@ -1,102 +0,0 @@
-import whalesImage from 'static/images/whales.png';
-export const LearnMoreExampleObject = {
-  categories: [{
-    id: 'category1',
-    title: 'Category 1',
-    inProgress: false,
-    complete: false,
-    tooltip: 'Example tooltip',
-    subcategories: [{
-      id: 'category11',
-      title: 'Category 1.1',
-      inProgress: false,
-      complete: false,
-      tooltip: 'Reading time: 2min'
-    }]
-  }, {
-    id: 'category2',
-    title: 'Category 2',
-    inProgress: true,
-    complete: false,
-    subcategories: [{
-      id: 'category21',
-      title: 'Category 2.1',
-      inProgress: true,
-      complete: false,
-      tooltip: 'Reading time: 2min'
-    }, {
-      id: 'category22',
-      title: 'Category 2.2',
-      inProgress: false,
-      complete: true
-    }]
-  }, {
-    id: 'category3',
-    title: 'Category 3',
-    inProgress: false,
-    complete: false,
-    subcategories: [{
-      id: 'category31',
-      title: 'Category 3.1',
-      inProgress: false,
-      complete: false,
-      tooltip: 'Reading time: 2min'
-    }]
-  }],
-  items: [{
-    id: 'category11',
-    title: 'Making invisible people visible again!',
-    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
-    postType: 'video',
-    videoSrc: '',
-    cover: whalesImage
-  }, {
-    id: 'category21',
-    title: 'Get a 21 tast of token investing',
-    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h4>Lorem ipsum dolor</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
-    postType: 'video',
-    videoSrc: '',
-    cover: whalesImage
-  }, {
-    id: 'category22',
-    title: 'Get a 22 tast of token investing',
-    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: `
-          <h5>Our vision</h5>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <h5>Our vision list</h5>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <ul>
-            <li>List item 1</li>
-            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>
-          </ul>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <img src="${whalesImage}" alt="" />
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        `,
-    postType: 'text',
-    cover: whalesImage
-  }, {
-    id: 'category31',
-    title: 'Get a 3 tast of token investing',
-    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: `
-          <h5>Our vision</h5>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <h5>Our vision list</h5>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <ul>
-            <li>List item 1</li>
-            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>
-          </ul>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <img src="${whalesImage}" alt="" />
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        `,
-    postType: 'text',
-    cover: whalesImage
-  }]
-};
-export default LearnMoreExampleObject;