From 56978165b5191e93c32088619a1c4ce381329f92 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Thu, 13 Feb 2020 09:34:16 -0700 Subject: [PATCH] feat: add component and styling for favorites page (#242) * feat: add component and styles for favorites page (resolves #205) * feat: add align-right and align-left classes * feat: make notifications sticky (resolves #241) * feat: add destructive borderless button variant --- src/assets/styles/common/_global.scss | 13 +++ src/assets/styles/components/_button.scss | 18 ++++ .../styles/components/_notification.scss | 5 +- src/assets/styles/layouts/_favorites.scss | 77 +++++++++++++++++ src/assets/styles/pinecone.scss | 1 + .../01-atoms/09-button/button.config.js | 14 ++++ src/components/01-atoms/09-button/button.njk | 2 +- .../02-molecules/01-card/card--resource.njk | 5 ++ .../02-molecules/01-card/card.config.js | 5 +- .../05-favorites/favorites.config.js | 84 +++++++++++++++++++ .../03-layouts/05-favorites/favorites.njk | 14 ++++ 11 files changed, 234 insertions(+), 4 deletions(-) create mode 100644 src/assets/styles/layouts/_favorites.scss create mode 100644 src/components/03-layouts/05-favorites/favorites.config.js create mode 100644 src/components/03-layouts/05-favorites/favorites.njk diff --git a/src/assets/styles/common/_global.scss b/src/assets/styles/common/_global.scss index 23dccae0..51111e12 100644 --- a/src/assets/styles/common/_global.scss +++ b/src/assets/styles/common/_global.scss @@ -37,6 +37,7 @@ body { main { margin: 0 auto; padding-bottom: rem(100); + position: relative; @include grid-column-span(4, 4, 1); } @@ -87,3 +88,15 @@ main { @include grid-column-span(16, 16, 1); } } + +.align-right { + text-align: right; +} + +.align-left { + text-align: left; +} + +.align-center { + text-align: center; +} diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss index 41e0228d..b1628681 100644 --- a/src/assets/styles/components/_button.scss +++ b/src/assets/styles/components/_button.scss @@ -90,6 +90,11 @@ button:-moz-focusring { width: auto; } +.align-right .button--borderless { + display: inline-block; + margin: rem(6) rem(-8) rem(6) rem(24); +} + .button--borderless.button--inverse { --color: var(--off-white); --outline-color: var(--off-white); @@ -103,6 +108,19 @@ button:-moz-focusring { --focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color); } +.button--borderless.button--destructive { + --color: var(--red-500); + --outline-color: var(--red-500); + --hover-color: var(--dark-mint-500); + --focus-color: var(--red-500); + --active-color: var(--white); + --active-background-color: var(--red-500); +} + +.button--borderless.button--destructive.button--inverse { + // TODO. +} + .button--tag-button { --outline-color: var(--white); --active-background-color: var(--blue-400); diff --git a/src/assets/styles/components/_notification.scss b/src/assets/styles/components/_notification.scss index 2913bdf5..6cf4158a 100644 --- a/src/assets/styles/components/_notification.scss +++ b/src/assets/styles/components/_notification.scss @@ -7,9 +7,12 @@ box-shadow: 0 0 rem(10) rgba(0, 0, 0, 0.16); font-family: $font-family-serif; font-size: rem(16); + margin-bottom: $gutter; padding: rem(28); - position: relative; + position: sticky; + top: $gutter; width: 100%; + z-index: 1; button { position: absolute; diff --git a/src/assets/styles/layouts/_favorites.scss b/src/assets/styles/layouts/_favorites.scss new file mode 100644 index 00000000..30117990 --- /dev/null +++ b/src/assets/styles/layouts/_favorites.scss @@ -0,0 +1,77 @@ +.page.page-template-page-favorites .cards .card__wrapper { + display: grid; + gap: rem(20); + grid-template-columns: 100%; + grid-template-rows: 1fr 3rem; +} + +@include breakpoint-up(sm) { + .page.page-template-page-favorites { + .cards { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + @supports (display: $grid) { + display: grid; + gap: rem(30); + grid-template-columns: 100%; + } + } + + .cards .card__wrapper { + margin-bottom: rem(30); + width: 100%; + + @supports (display: $grid) { + margin-bottom: 0; + } + } + + .card:nth-child(even) { + margin-left: 0; + } + } +} + +@include breakpoint-up(md) { + .page.page-template-page-favorites { + .cards { + @supports (display: $grid) { + grid-template-columns: repeat(2, 1fr); + } + } + + .cards .card__wrapper { + width: calc(50% - #{rem(30)} / 2); + + @supports (display: $grid) { + width: 100%; + } + } + + .card:nth-child(even) { + margin-left: rem(30); + + @supports (display: $grid) { + margin-left: 0; + } + } + + .cards .card__wrapper + .card__wrapper { + margin-top: 0; + } + } +} + +@include breakpoint-up(lg) { + .page.page-template-page-favorites main { + @include grid-column-span(8, 12, 3); + } +} + +@include breakpoint-up(xl) { + .page.page-template-page-favorites main { + @include grid-column-span(8, 16, 4); + } +} diff --git a/src/assets/styles/pinecone.scss b/src/assets/styles/pinecone.scss index aee9f6d8..f78eca99 100644 --- a/src/assets/styles/pinecone.scss +++ b/src/assets/styles/pinecone.scss @@ -40,3 +40,4 @@ @import "layouts/footer"; @import "layouts/archive"; @import "layouts/resource"; +@import "layouts/favorites"; diff --git a/src/components/01-atoms/09-button/button.config.js b/src/components/01-atoms/09-button/button.config.js index f91e6f0b..14b2c150 100644 --- a/src/components/01-atoms/09-button/button.config.js +++ b/src/components/01-atoms/09-button/button.config.js @@ -48,6 +48,20 @@ module.exports = { bodyClass: 'has-blue-500-background-color' } }, + { + name: 'Destructive Borderless', + context: { + modifiers: ['borderless', 'destructive'] + } + }, + { + name: 'Destructive Borderless Inverse', + label: 'Destructive Borderless (Inverse)', + context: { + modifiers: ['borderless', 'destructive', 'inverse'], + bodyClass: 'has-blue-500-background-color' + } + }, { name: 'Disc', label: 'Disc', diff --git a/src/components/01-atoms/09-button/button.njk b/src/components/01-atoms/09-button/button.njk index 241404c9..e0b163c7 100644 --- a/src/components/01-atoms/09-button/button.njk +++ b/src/components/01-atoms/09-button/button.njk @@ -1,4 +1,4 @@ {% if not standAlone %}
{% endif %} - diff --git a/src/components/02-molecules/01-card/card--resource.njk b/src/components/02-molecules/01-card/card--resource.njk index 0bd9e9cb..63dc4242 100644 --- a/src/components/02-molecules/01-card/card--resource.njk +++ b/src/components/02-molecules/01-card/card--resource.njk @@ -50,6 +50,11 @@ {% endif %} + {% if showRemoveButton %} +
+ {% render '@button--destructive-borderless', {label: 'Remove', icon: 'delete', standAlone: true, className: 'remove-favorite'}, true %} +
+ {% endif %} {% if not standAlone %} diff --git a/src/components/02-molecules/01-card/card.config.js b/src/components/02-molecules/01-card/card.config.js index d0373df5..d82132c9 100644 --- a/src/components/02-molecules/01-card/card.config.js +++ b/src/components/02-molecules/01-card/card.config.js @@ -6,7 +6,7 @@ module.exports = { format: 'Card', name: 'Generic Card', href: 'https://example.com', - standAlone: false + standAlone: false, }, variants: [ { @@ -26,7 +26,8 @@ module.exports = { topicCount: 4, href: 'resource', favorite: true, - language: 'English' + language: 'English', + showRemoveButton: false } }, { diff --git a/src/components/03-layouts/05-favorites/favorites.config.js b/src/components/03-layouts/05-favorites/favorites.config.js new file mode 100644 index 00000000..9cab981b --- /dev/null +++ b/src/components/03-layouts/05-favorites/favorites.config.js @@ -0,0 +1,84 @@ +const faker = require( 'faker' ); +const title = require( 'title' ); + +const formats = [ + { + label: 'Audio', + svg: 'audio', + }, + { + label: 'Case Study', + svg: 'case-study', + }, + { + label: 'Toolkit', + svg: 'toolkit', + }, + { + label: 'Educational Curriculum', + svg: 'educational-curriculum', + }, + { + label: 'Video', + svg: 'video', + }, + { + label: 'Article', + svg: 'article', + }, + { + label: 'Book', + svg: 'book', + }, + { + label: 'Academic Paper', + svg: 'academic-paper', + }, + { + label: 'Report', + svg: 'report', + }, + { + label: 'Presentation Slides', + svg: 'presentation', + }, + { + label: 'Online Training', + svg: 'online-training', + }, +]; + +const resourceCount = 8; +const resourceData = []; + +for ( let i = 0; i < resourceCount; i++ ) { + const thisFormat = formats[i]; + + resourceData.push( { + id: i, + modifier: 'resource', + format: thisFormat.label, + formatIcon: thisFormat.svg, + name: 'Resource', + title: title( faker.lorem.words( faker.random.number( { min: 4, max: 12 } ) ) ), + byline: title( faker.lorem.words( faker.random.number( { min: 2, max: 4 } ) ) ), + locality: faker.address.country(), + topics: [title( faker.company.catchPhraseNoun() ), title( faker.company.catchPhraseNoun() )], + topicCount: faker.random.number( { min: 3, max: 7 } ), + href: 'resource', + standAlone: true, + showRemoveButton: true + } ); +} + +module.exports = { + title: 'Favorites', + status: 'wip', + context: { + bodyClass: 'page page-template-page-favorites', + hasMenu: true, + hasFooter: true, + title: 'Favorites', + cards: resourceData + } +}; diff --git a/src/components/03-layouts/05-favorites/favorites.njk b/src/components/03-layouts/05-favorites/favorites.njk new file mode 100644 index 00000000..8c4eef86 --- /dev/null +++ b/src/components/03-layouts/05-favorites/favorites.njk @@ -0,0 +1,14 @@ +
+

{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}

+

{{ title }}

+
+
+ {% render '@button--destructive-borderless', {label: 'Remove all', icon: 'delete', standAlone: true, className: 'remove-all-favorites'}, true %} +
+
+ +