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

@@ -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;
+}

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);

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;

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);
+	}
+}

src/assets/styles/pinecone.scss

@@ -40,3 +40,4 @@
 @import "layouts/footer";
 @import "layouts/archive";
 @import "layouts/resource";
+@import "layouts/favorites";

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',

src/components/01-atoms/09-button/button.njk

@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
-<button {% if id %}id="{{ id }}" {% endif %}type="button" class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% endif %}">
+<button {% if id %}id="{{ id }}" {% endif %}type="button" class="button{% if modifiers %}{% for modifier in modifiers %} button--{{ modifier }}{% endfor %}{% endif %}{% if className %} {{ className }}{% endif %}">
 	{% if icon and iconPosition === 'start' %}{% render '@svg', {svg:icon}, true %}{% endif %}<span class="button__label{{ ' screen-reader-text' if labelVisuallyHidden }}">{{ label | safe }}</span>{% if icon and iconPosition === 'end' %}{% render '@svg', {svg:icon}, true %}{% endif %}
 </button>

src/components/02-molecules/01-card/card--resource.njk

@@ -50,6 +50,11 @@
 				{% endif %}
 			</aside>
 		</article>
+		{% if showRemoveButton %}
+		<div class="align-right">
+			{% render '@button--destructive-borderless', {label: 'Remove', icon: 'delete', standAlone: true, className: 'remove-favorite'}, true %}
+		</div>
+		{% endif %}
 	</li>
 	{% if not standAlone %}
 	</ul>

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
 			}
 		},
 		{

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
+	}
+};

src/components/03-layouts/05-favorites/favorites.njk

@@ -0,0 +1,14 @@
+<div class="page-header">
+	<p>{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}</p>
+	<h1>{{ title }}</h1>
+</div>
+<div class="align-right">
+	{% render '@button--destructive-borderless', {label: 'Remove all', icon: 'delete', standAlone: true, className: 'remove-all-favorites'}, true %}
+</div>
+<div class="resource-list">
+	<ul class="cards">
+	{% for card in cards %}
+	{% render '@card--resource', card %}
+	{% endfor %}
+	</ul>
+</div>