Feature/storybook resource cards

src/components/blocks/Menu/Menu.scss

@@ -69,6 +69,10 @@
     &:hover > &__icon {
       color: $primary;
     }
+
+    .resourceCards {
+      left: -272px;
+    }
   }
 
   &__menu {

src/components/blocks/ResourceCards/ResourceCards.js

@@ -0,0 +1,47 @@
+// @flow
+import React, { Component } from 'react';
+import { Mixpanel } from '../../../Mixpanel';
+import { ResourceCard } from '../../elements';
+
+import './ResourceCards.scss';
+
+type ResourceCardProps = Object; // TODO - define real props inside Object e.g. { title: string... }
+
+type Props = {
+  key: string,
+  categoryTitle: string,
+  onCardClick: Function,
+  resourceCards: Array<ResourceCardProps>, // TODO - define real props inside Object e.g. { title: string... }
+};
+
+export default class ResourceCards extends Component<Props> {
+  render() {
+    const { key, categoryTitle, resourceCards } = this.props;
+
+    return (
+      <div className="resourceCards">
+        <h4>{categoryTitle}</h4>
+        <div className="resourceCards__cards">
+          {resourceCards.map(resourceCard => {
+            return (
+              <ResourceCard
+                key={key}
+                onClick={this.onClick.bind(this, resourceCard)}
+                logo={resourceCard.logo}
+                logoAlt={resourceCard.logoAlt}
+                title={resourceCard.title}
+                description={resourceCard.description}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  onClick = (resourceCard: ResourceCardProps) => {
+    Mixpanel.track(`Onboarding: ${resourceCard.title}`);
+
+    this.props.onCardClick();
+  };
+}

src/components/blocks/ResourceCards/ResourceCards.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/main';
+
+.resourceCards {
+  @include col;
+  @include padding(left, 3);
+  @include padding(top, 4);
+
+  h4 {
+    @include row;
+    @include padding(top, 5);
+    @include padding(bottom, 3);
+    @include padding(left, 1);
+    text-align: left;
+  }
+
+  &__cards {
+    @include wrap;
+    @include padding(bottom, 5);
+
+    @media (min-width: $screen-sm-min) {
+      //
+    }
+  }
+}

src/components/blocks/ResourceMenu/ResourceMenu.js

@@ -0,0 +1,74 @@
+// @flow
+import React, { Component } from 'react';
+import { MenuItem } from '../../elements';
+
+import './ResourceMenu.scss';
+
+type Props = {
+  onMenuItemClick: Function,
+  menuItems: Object, // TODO - define real props inside Object e.g. { title: string... }
+};
+
+type State = {
+  activeItem: ?string,
+};
+
+type MenuItemProps = {
+  id: string,
+  title: string,
+  onMenuItemClick: Function,
+  menuItems: Object,
+};
+
+export default class ResourceMenu extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      activeItem: null,
+    };
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+  }
+
+  componentWillMount() {
+    // check writing prompts enabled or disabled
+    // const enableWritingPrompts = persistedStore.get(WRITING_PROMPTS_ENABLED)
+    // if (enableWritingPrompts) {
+    //  this.setState({ menuHidden: true, revealMenu: false  })
+    // }
+  }
+
+  render() {
+    const { menuItems } = this.props;
+    const { activeItem } = this.state;
+
+    return (
+      <div className="resourceMenu">
+        <div className="resourceMenu__menu">
+          <div className="resourceMenu__menu_list">
+            {menuItems.map(menuItem => {
+              const isActive = activeItem === menuItem.id;
+              return (
+                <MenuItem
+                  key={menuItem.id}
+                  title={menuItem.title}
+                  onClick={this.handleMenuItemClick.bind(this, menuItem)}
+                  itemActive={isActive}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // handleMenuItemClick = (id: string) => {
+  handleMenuItemClick = (menuItem: MenuItemProps) => {
+    this.setState({
+      activeItem: menuItem.id,
+    });
+
+    this.props.onMenuItemClick();
+  };
+}

src/components/blocks/ResourceMenu/ResourceMenu.scss

@@ -0,0 +1,30 @@
+@import '../../../styles/main';
+
+.resourceMenu {
+  @include background-very-light;
+  @include col;
+  @include fade-in;
+  @include padding(top, 7);
+  transition: box-shadow 0.3s ease-in-out;
+
+  &__menu {
+    @include flex;
+    @include padding(left, reset);
+    @include transition-in-out;
+    box-shadow: inset -4px 0 10px #e0e0e024;
+
+    @media (min-width: $screen-sm-min) {
+      @include padding(left, 2);
+    }
+
+    @media (min-width: $screen-md-min) {
+      @include padding(left, 5);
+    }
+
+    &_list {
+      @include col;
+      @include padding(top bottom, 2);
+      width: 100%;
+    }
+  }
+}

src/components/blocks/index.js

@@ -12,6 +12,8 @@ export { default as OnboardingCards } from './OnboardingCards/OnboardingCards.js
 export { default as ProductShowcase } from './ProductShowcase/ProductShowcase';
 export { default as ReferralBlock } from './ReferralBlock/ReferralBlock';
 export { default as RefereeInput } from './RefereeInput/RefereeInput';
+export { default as ResourceCards } from './ResourceCards/ResourceCards.js';
+export { default as ResourceMenu } from './ResourceMenu/ResourceMenu.js';
 export { default as Section } from './Section/Section.js';
 export { default as SectionSummary } from './SectionSummary/SectionSummary.js';
 export { default as Testimonials } from './Testimonials/Testimonials';

src/components/elements/MenuItem/MenuItem.scss

@@ -7,19 +7,16 @@
   @include margin(top bottom, 0);
   @include row;
   @include transition-in-out;
-  max-width: 288px;
 
   // Shared SCSS properties
   &__row {
     @include padding(top bottom, 1);
     @include padding(left, 1);
-    @include padding(right, 1);
     @include row;
 
     align-items: center;
     justify-content: space-between;
     max-height: 24px;
-    min-width: 248px;
     text-align: left;
 
     &:hover {
@@ -30,11 +27,12 @@
   // Shared SCSS properties
   &__title {
     @include cursor-pointer;
+    @include flex;
     @include padding(top bottom, 1);
     @include padding(left, 0);
     @include transition-in-out;
-    min-width: 220px;
     text-align: left;
+    width: 100%;
   }
 
   // Shared SCSS properties

src/components/elements/ResourceCard/ResourceCard.js

@@ -0,0 +1,47 @@
+// @flow
+import React, { Component } from 'react';
+import './ResourceCard.scss';
+
+import { Icon, Card } from '..';
+
+type Props = {
+  onClick: Function,
+  logo: string,
+  logoAlt: string,
+  title: string,
+  description: string,
+};
+
+export default class ResourceCard extends Component<Props> {
+  render() {
+    const { onClick, logo, logoAlt, title, description } = this.props;
+
+    return (
+      <div className="resourceCard">
+        <Card onClick={onClick}>
+          <div className="resourceCard__bg">
+            <div className="resourceCard__bg_container">
+              <img alt={logoAlt} src={logo} className="resourceCard__bg_logo" />
+            </div>
+          </div>
+          <h5 className="resourceCard__title">{title}</h5>
+          <p className="resourceCard__description">{description}</p>
+          <div className="resourceCard__share">
+            <Icon
+              icon="share" // "arrow_right_alt"
+              inactive24="inactive24"
+              classOverride="resourceCard__icon"
+            />
+          </div>
+          <div className="resourceCard__open">
+            <Icon
+              icon="open_in_new" // "arrow_right_alt"
+              inactive16="inactive16"
+              classOverride="resourceCard__icon"
+            />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+}

src/components/elements/ResourceCard/ResourceCard.scss

@@ -0,0 +1,111 @@
+@import '../../../styles/main';
+
+.resourceCard {
+  @include margin(all, 0);
+  max-width: 288px;
+  min-width: 240px;
+
+  &__bg {
+    @include background-dark;
+    @include card-image-corner-radius;
+    @include flex;
+    min-height: 96px;
+    width: 100%;
+
+    // Logo container
+    &_container {
+      @include background-light;
+      @include border-white;
+      @include circular-radius;
+      @include flex;
+      @include position-center;
+      height: 64px;
+      left: 10px;
+      position: relative;
+      top: 48px;
+      width: 64px;
+    }
+
+    // Logo image
+    &_logo {
+      width: 66%;
+    }
+  }
+
+  &__title,
+  &__description {
+    text-align: left;
+  }
+
+  &__title {
+    @include padding(top, 3);
+    @include padding(left right, 1);
+  }
+
+  &__description {
+    @include text;
+    @include small;
+    @include padding(left right, 1);
+    @include padding(bottom, 2);
+  }
+
+  &__open {
+    @include transition-in-out;
+    bottom: 4px;
+    left: 85%;
+    opacity: 0;
+    position: relative;
+  }
+
+  &__icon {
+    color: $primary;
+  }
+
+  &__share {
+    @include circular-radius;
+    @include transition-in-out;
+    border: solid 2px $white-transparent;
+    bottom: 204px;
+    left: 83%;
+    opacity: 0;
+    position: relative;
+  }
+
+  // On Hover
+
+  &:hover &__open {
+    @include transition-in;
+    bottom: 8px;
+    opacity: 100%;
+  }
+
+  &:hover &__share {
+    @include transition-in;
+    bottom: 200px;
+    opacity: 100%;
+
+    &:hover {
+      border: solid 2px $white-low-opacity;
+      opacity: 80%;
+    }
+  }
+
+  &:hover &__title {
+    color: $primary;
+  }
+}
+
+// Card Overrides
+
+.card {
+  @include margin(all, reset);
+}
+
+.cardDefault {
+  @include padding(all, reset);
+
+  &:hover {
+    border-color: $light-grey;
+    transform: translateY(-1px);
+  }
+}

src/components/elements/index.js

@@ -9,5 +9,6 @@ export { default as Loading } from './Loading/Loading';
 export { default as MenuItem } from './MenuItem/MenuItem.js';
 export { default as Modal } from './Modal/Modal.js';
 export { default as OnboardingCard } from './OnboardingCard/OnboardingCard.js';
+export { default as ResourceCard } from './ResourceCard/ResourceCard.js';
 export { default as Tag } from './Tag/Tag';
 export { default as Toggle } from './Toggle/Toggle';