From 98bf2dfefc6920a6d9e6cf0bc013bd81b1016364 Mon Sep 17 00:00:00 2001 From: Henry Latham Date: Tue, 3 Mar 2020 17:16:00 +0100 Subject: [PATCH 1/3] STORIES: Resource Card, Resources Menu, Resources View --- src/assets/images/resources/logoPM.png | Bin 0 -> 17387 bytes src/components/blocks/Menu/Menu.scss | 4 + .../blocks/ResourceCards/ResourceCards.js | 47 ++++++++ .../blocks/ResourceCards/ResourceCards.scss | 24 ++++ .../blocks/ResourceMenu/ResourceMenu.js | 74 ++++++++++++ .../blocks/ResourceMenu/ResourceMenu.scss | 30 +++++ src/components/blocks/index.js | 2 + .../elements/MenuItem/MenuItem.scss | 6 +- .../elements/ResourceCard/ResourceCard.js | 47 ++++++++ .../elements/ResourceCard/ResourceCard.scss | 111 +++++++++++++++++ src/components/elements/index.js | 1 + src/components/views/Resources/Resources.js | 114 ++++++++++++++++++ src/components/views/Resources/Resources.scss | 22 ++++ src/components/views/index.js | 1 + src/styles/atoms/_colors.scss | 4 + src/styles/atoms/_flex.scss | 7 ++ src/styles/atoms/_text.scss | 1 + stories/resourceCard.stories.js | 73 +++++++++++ stories/resources.stories.js | 12 ++ 19 files changed, 576 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/resources/logoPM.png create mode 100644 src/components/blocks/ResourceCards/ResourceCards.js create mode 100644 src/components/blocks/ResourceCards/ResourceCards.scss create mode 100644 src/components/blocks/ResourceMenu/ResourceMenu.js create mode 100644 src/components/blocks/ResourceMenu/ResourceMenu.scss create mode 100644 src/components/elements/ResourceCard/ResourceCard.js create mode 100644 src/components/elements/ResourceCard/ResourceCard.scss create mode 100644 src/components/views/Resources/Resources.js create mode 100644 src/components/views/Resources/Resources.scss create mode 100644 stories/resourceCard.stories.js create mode 100644 stories/resources.stories.js diff --git a/src/assets/images/resources/logoPM.png b/src/assets/images/resources/logoPM.png new file mode 100644 index 0000000000000000000000000000000000000000..7824140c221a99c5a9c262ba8691f8b00b2116ed GIT binary patch literal 17387 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 &__icon { color: $primary; } + + .resourceCards { + left: -272px; + } } &__menu { diff --git a/src/components/blocks/ResourceCards/ResourceCards.js b/src/components/blocks/ResourceCards/ResourceCards.js new file mode 100644 index 0000000..a399bea --- /dev/null +++ b/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, // TODO - define real props inside Object e.g. { title: string... } +}; + +export default class ResourceCards extends Component { + render() { + const { key, categoryTitle, resourceCards } = this.props; + + return ( +
+

{categoryTitle}

+
+ {resourceCards.map(resourceCard => { + return ( + + ); + })} +
+
+ ); + } + + onClick = (resourceCard: resourceCardProps) => { + Mixpanel.track(`Onboarding: ${resourceCard.title}`); + + this.props.onCardClick(); + }; +} diff --git a/src/components/blocks/ResourceCards/ResourceCards.scss b/src/components/blocks/ResourceCards/ResourceCards.scss new file mode 100644 index 0000000..adb7770 --- /dev/null +++ b/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) { + // + } + } +} diff --git a/src/components/blocks/ResourceMenu/ResourceMenu.js b/src/components/blocks/ResourceMenu/ResourceMenu.js new file mode 100644 index 0000000..f1660d4 --- /dev/null +++ b/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 { + 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 ( +
+
+
+ {menuItems.map(menuItem => { + const isActive = activeItem === menuItem.id; + return ( + + ); + })} +
+
+
+ ); + } + + // handleMenuItemClick = (id: string) => { + handleMenuItemClick = (menuItem: MenuItemProps) => { + this.setState({ + activeItem: menuItem.id, + }); + + this.props.onMenuItemClick(); + }; +} diff --git a/src/components/blocks/ResourceMenu/ResourceMenu.scss b/src/components/blocks/ResourceMenu/ResourceMenu.scss new file mode 100644 index 0000000..4233acc --- /dev/null +++ b/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%; + } + } +} diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js index bf4e3ec..b69201c 100644 --- a/src/components/blocks/index.js +++ b/src/components/blocks/index.js @@ -11,6 +11,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'; diff --git a/src/components/elements/MenuItem/MenuItem.scss b/src/components/elements/MenuItem/MenuItem.scss index 3ecea95..9720f04 100644 --- a/src/components/elements/MenuItem/MenuItem.scss +++ b/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 diff --git a/src/components/elements/ResourceCard/ResourceCard.js b/src/components/elements/ResourceCard/ResourceCard.js new file mode 100644 index 0000000..eed57f0 --- /dev/null +++ b/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 { + render() { + const { onClick, logo, logoAlt, title, description } = this.props; + + return ( +
+ +
+
+ {logoAlt} +
+
+
{title}
+

{description}

+
+ +
+
+ +
+ +
+ ); + } +} diff --git a/src/components/elements/ResourceCard/ResourceCard.scss b/src/components/elements/ResourceCard/ResourceCard.scss new file mode 100644 index 0000000..82c25a5 --- /dev/null +++ b/src/components/elements/ResourceCard/ResourceCard.scss @@ -0,0 +1,111 @@ +@import '../../../styles/main'; + +.resourceCard { + @include margin(all, 0); + min-width: 240px; + max-width: 288px; + + &__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); + } +} diff --git a/src/components/elements/index.js b/src/components/elements/index.js index 4cb126d..5149511 100644 --- a/src/components/elements/index.js +++ b/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'; diff --git a/src/components/views/Resources/Resources.js b/src/components/views/Resources/Resources.js new file mode 100644 index 0000000..e0ffffc --- /dev/null +++ b/src/components/views/Resources/Resources.js @@ -0,0 +1,114 @@ +// @flow +import React, { Component } from 'react'; + +import { ResourceMenu, ResourceCards } from '../../blocks'; + +import { Button } from '../../elements'; + +import './Resources.scss'; + +import logoPM from '../../../assets/images/resources/logoPM.png'; + +// Menu Items +const menuItems = [ + { + id: '1', + title: 'Vision', + icon: 'keyboard_arrow_right', + }, + { + id: '2', + title: 'Strategy', + icon: 'keyboard_arrow_right', + }, + { + id: '3', + title: 'Roadmap', + icon: 'add', + }, +]; + +// Resources Card Content +const resourceCards = [ + { + id: '1', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '2', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '3', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '4', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '5', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '6', + title: 'Article Title', + description: + 'A long description about this article. And here is some more text.', + logo: logoPM, + logoAlt: 'Article Title', + }, +]; + +export default class Resources extends Component { + render() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); + } + + handleMenuSelect = () => { + // console.log("click menu item"); + }; + + handleCardClick = () => { + // console.log("card click"); + }; +} diff --git a/src/components/views/Resources/Resources.scss b/src/components/views/Resources/Resources.scss new file mode 100644 index 0000000..8480fb2 --- /dev/null +++ b/src/components/views/Resources/Resources.scss @@ -0,0 +1,22 @@ +@import '../../../styles/main'; + +.resources { + @include row; + + &__btn { + position: absolute; + right: 24px; + top: 16px; + } + + &__menuwrap { + min-width: 27%; + position: fixed; + } + + &__cardswrap { + left: 27%; + position: relative; + width: 70%; + } +} diff --git a/src/components/views/index.js b/src/components/views/index.js index bed674f..9e716d6 100644 --- a/src/components/views/index.js +++ b/src/components/views/index.js @@ -7,3 +7,4 @@ export { default as Privacy } from './Privacy/Privacy'; export { default as Register } from './Register/Register'; export { default as Referee } from './Referee/Referee'; export { default as Referral } from './Referral/Referral'; +export { default as Resources } from './Resources/Resources'; diff --git a/src/styles/atoms/_colors.scss b/src/styles/atoms/_colors.scss index 5e266fa..034f1ef 100644 --- a/src/styles/atoms/_colors.scss +++ b/src/styles/atoms/_colors.scss @@ -16,3 +16,7 @@ $modal-background: rgba(0, 0, 0, 0.54); // State $error: #ff7979; $success: #a2ffd4; + +// Share Circle +$white-transparent: #fff0; +$white-low-opacity: #ffffff15; diff --git a/src/styles/atoms/_flex.scss b/src/styles/atoms/_flex.scss index f5ad550..3791c87 100644 --- a/src/styles/atoms/_flex.scss +++ b/src/styles/atoms/_flex.scss @@ -38,6 +38,12 @@ $column: $col; flex-direction: row; } +// Used for grids +@mixin wrap { + flex-wrap: wrap; + overflow: scroll; +} + @mixin position-center { align-items: center; justify-content: center; @@ -57,6 +63,7 @@ $column: $col; } @mixin wrap { + @extend %flex; flex-wrap: wrap; overflow: auto; } diff --git a/src/styles/atoms/_text.scss b/src/styles/atoms/_text.scss index 7f60b28..80c0dd2 100644 --- a/src/styles/atoms/_text.scss +++ b/src/styles/atoms/_text.scss @@ -78,6 +78,7 @@ h4 { @extend %header-text; font-family: 'Karla', sans-serif; font-size: 17px; + letter-spacing: 1px; } h5 { diff --git a/stories/resourceCard.stories.js b/stories/resourceCard.stories.js new file mode 100644 index 0000000..f2ec4b5 --- /dev/null +++ b/stories/resourceCard.stories.js @@ -0,0 +1,73 @@ +import React from "react"; + +import { storiesOf } from "@storybook/react"; +import { action } from "@storybook/addon-actions"; +import { ResourceCard } from '../src/components/elements' +import { ResourceCards } from '../src/components/blocks' + +import logoPM from '../src/assets/images/resources/logoPM.png'; + +// Onboarding Card Content +const resourceCards = [ + { + id: '1', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '2', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '3', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '4', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '5', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, + { + id: '6', + title: 'Article Title', + description: "A long description about this article. And here is some more text.", + logo: logoPM, + logoAlt: 'Article Title', + }, +]; + +storiesOf("Elements/Resources", module) + .add("Resource Card", () => ( + + )) + .add("Resource Cards", () => ( + + )) +; diff --git a/stories/resources.stories.js b/stories/resources.stories.js new file mode 100644 index 0000000..2d04733 --- /dev/null +++ b/stories/resources.stories.js @@ -0,0 +1,12 @@ +import React from "react"; + +import { storiesOf } from "@storybook/react"; +// import { action } from "@storybook/addon-actions"; +import { Resources } from '../src/components/views' + +storiesOf("Views/Resources", module) + .add("Resources", () => ( + + )) +; From 6072f85b8cf5d0a914cc5baf361f3cca5668a41f Mon Sep 17 00:00:00 2001 From: Henry Latham Date: Wed, 4 Mar 2020 11:14:20 +0100 Subject: [PATCH 2/3] STORIES: Resource Card, Resources Menu, Resources View --- src/components/blocks/ResourceCards/ResourceCards.js | 2 +- src/components/views/Resources/Resources.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/blocks/ResourceCards/ResourceCards.js b/src/components/blocks/ResourceCards/ResourceCards.js index a399bea..fac3543 100644 --- a/src/components/blocks/ResourceCards/ResourceCards.js +++ b/src/components/blocks/ResourceCards/ResourceCards.js @@ -39,7 +39,7 @@ export default class ResourceCards extends Component { ); } - onClick = (resourceCard: resourceCardProps) => { + onClick = (resourceCard: ResourceCardProps) => { Mixpanel.track(`Onboarding: ${resourceCard.title}`); this.props.onCardClick(); diff --git a/src/components/views/Resources/Resources.scss b/src/components/views/Resources/Resources.scss index 8480fb2..b1f51e1 100644 --- a/src/components/views/Resources/Resources.scss +++ b/src/components/views/Resources/Resources.scss @@ -7,6 +7,7 @@ position: absolute; right: 24px; top: 16px; + z-index: 100; } &__menuwrap { From 57e40e37ea18959d86f9fd2b22c649a9780396a6 Mon Sep 17 00:00:00 2001 From: Henry Latham Date: Wed, 4 Mar 2020 11:14:56 +0100 Subject: [PATCH 3/3] STORIES: Resource Card, Resources Menu, Resources View --- src/components/elements/ResourceCard/ResourceCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/elements/ResourceCard/ResourceCard.scss b/src/components/elements/ResourceCard/ResourceCard.scss index 82c25a5..fda5c7f 100644 --- a/src/components/elements/ResourceCard/ResourceCard.scss +++ b/src/components/elements/ResourceCard/ResourceCard.scss @@ -2,8 +2,8 @@ .resourceCard { @include margin(all, 0); - min-width: 240px; max-width: 288px; + min-width: 240px; &__bg { @include background-dark;