@penskemediacorp/larva-css 1.5.0-alpha.0 → 1.5.0

package/src/02-algorithms/a-grid/README.md

@@ -1,20 +1,147 @@
-# Grid
+# a-grid
 
-Grids must be in order of media queries to maintain the cascade,
-e.g. desktop-xl grids are at the very end, breakpoint-less grids at
-the top.
+This utility generator is for creating simple grids. It uses a CSS Grid with a custom property to update the grid columns, and provides a flexbox fallback for older browsers. It supports flexible values for number of columns in the grid, grid items spanning multiple columns, and breakpoints for both.
 
-The `spans` entry will output a class to instruct a grid item to span
-a specific number of columns. By default, grid items will each span
-a single column. Apply a trailing comma to the list of spans.
+## Available Classes
 
-To apply a grid to an element, i.e. an element's children, add the `pmc-a-grid`
-class to initiate a single column grid, then additional utility classes to
-adjust the grid e.g.
+Reference the `$grids` list in packages/larva-css/src/02-algorithms/a-grid/a-grid.common.inline.scss to see which grids are available from Larva CSS. 
 
-`<section class="pmc-a-grid pmc-a-cols2 pmc-a-cols4@desktop">`
+## Algorithm Source
 
-Similarly, each grid item should have the class `pmc-a-grid-item`. Span utilities
-can be added in a similar fashion:
+Here is an example of the algorithm accommodating a two column grid that changes to four columns at desktop:
+```
+.lrv-a-grid {
+	--cols: 1;
 
-`<div class="pmc-a-grid-item pmc-a-span2@tablet">`.
+	display: grid;
+	grid-gap: 1.25rem;
+	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
+}
+
+.lrv-a-cols2 {
+	--cols: 2;
+}
+
+@media( min-width: $screen-desktop ) {
+
+	.lrv-a-cols4\@desktop {
+		--cols: 4;
+	}
+
+}
+```
+
+## Use in a project:
+
+To add new grids in a project, create a-grid.{chunk}.inline.scss and add the following:
+
+```langauge-scss
+$grids: (
+	(
+		columns: 4,
+		spans: ( 2, 3, ),
+		breakpoint: tablet,
+	),
+);
+
+@include a-grid( $grids );
+```
+
+This will output something like:
+
+```
+@media min-width( ${TABLET} ) {
+
+	.a-cols4\@tablet {
+		--cols: 4;
+	}
+
+	.a-span\@tablet {
+		grid-column: span 2;
+	}
+
+	.a-span3\@tablet {
+		grid-column: span 3;
+	}
+}
+```
+
+`.lrv-a-cols4@tablet` must be applied along with `.lrv-a-grid` to set up the main part of the grid. 
+
+A few important things to note:
+
+* In the mixin, **grids must be in order of media queries to maintain the cascade**, e.g. desktop-xl grids are at the very end, breakpoint-less grids at the top.
+* By default, grid items will each span
+a single column. 
+* Apply a trailing comma to the list of spans, and in general, use trailing commas in Sass lists.
+* It is best practice to apply `lrv-a-grid-item` to child elements of an `a-grid` for both readability and a few edge cases, but note that some code-bases have not done this.
+
+## Examples
+
+If mobile is two columns:
++----+----+
+|    |    |
+|    |    |
++---------+
+|    |    |
+|    |    |
++----+----+
+
+And desktop is four columns:
++------+------+------+------+
+|      |      |      |      |
+|      |      |      |      |
++------+------+------+------+
+
+The markup would be:
+
+```language-html
+<div class="lrv-a-grid lrv-a-cols2 lrv-a-cols4@desktop">
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+</div>
+```
+
+If mobile is one column:
++--------+
+|////////|
+|////////|
++--------+
+|        |
++--------+
+|        |
++--------+
+
+And desktop is a four column grid, with the first element spanning two columns:
++------+------+------+------+
+|/////////////|      |      |
+|/////////////|      |      |
++------+------+------+------+
+
+```language-html
+<div class="lrv-a-grid lrv-a-cols4@desktop">
+	<div class="lrv-a-grid-item lrv-a-span2@desktop"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+</div>
+```
+
+## Extendable?
+
+**Do not extend `a-grid`**. Use utilities or create a separate algorithm.
+
+The class name `a-grid` should _only_ be used for declarations that apply to this basic, equal column CSS grid, and that **does not include grid-gap**. Any adjustments in `grid-gap` or specific grid configurations beyond equal columns should be done with `u-grid` utilities.
+
+For example, to apply a larger grid-gap to an `a-grid`, you could add this to `03-utilities/u-grid.{chunk}.inline.scss`:
+
+```
+.u-grid-gap-2\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		grid-gap: $spacer-2;
+	}
+}
+```
+
+And apply `u-grid-gap-2@desktop` to the same element as `lrv-a-grid`.

package/src/02-algorithms/a-grid/a-grid.common.inline.scss

@@ -1,6 +1,6 @@
-@import '@penskemediacorp/larva-scss/dist/generators';
+@import 'setup';
 
-.pmc-a-grid {
+.lrv-a-grid {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: start;
@@ -14,8 +14,8 @@
 	}
 }
 
-.pmc-a-grid-item {
-	// Remove flex charactaristics to honor flex-basis value.
+.lrv-a-grid-item {
+	// Remove flex characteristics to honor flex-basis value.
 	flex: none;
 	padding: 0.625rem;
 
@@ -33,10 +33,62 @@ $grids: (
 		spans: ( 2 ),
 	),
 	(
-		columns: 4,
+		columns: 2,
+		breakpoint: tablet,
+	),
+	(
+		columns: 3,
 		spans: ( 2 ),
 		breakpoint: tablet,
 	),
+	(
+		columns: 4,
+		spans: ( 2, 3, ),
+		breakpoint: tablet,
+	),
+	(
+		columns: 3,
+		breakpoint: desktop,
+	),
+	(
+		columns: 2,
+		breakpoint: desktop,
+	),
+	(
+		columns: 2,
+		breakpoint: desktop-xl,
+	),
+	(
+		columns: 4,
+		spans: ( 2 ),
+		breakpoint: desktop,
+	),
+	(
+		columns: 4,
+		spans: ( 3 ),
+		breakpoint: desktop,
+	),
+	(
+		columns: 4,
+		spans: ( 3 ),
+		breakpoint: desktop-xl,
+	),
+	(
+		columns: 5,
+		breakpoint: desktop,
+	),
 );
 
-@include pmc-a-grid( $grids );
+@include a-grid( $grids, $NAMESPACE: 'lrv-' );
+
+.lrv-a-grid-first-child-span-all\@mobile-max {
+
+	@include pmc-breakpoint( mobile-max ) {
+
+		& > *:first-child {
+			@supports ( display: grid ) {
+				grid-column: 1 /  -1;
+			}
+		}
+	}
+}

package/src/02-algorithms/a-grid/a-grid.html

@@ -4,18 +4,18 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link rel="stylesheet" href="./a-grid.critical.css">
+	<link rel="stylesheet" href="../../../build/css/algorithms.common.inline.css">
 	<title>Document</title>
 </head>
 <body>
-	<div class="pmc-a-grid pmc-a-cols2">
+	<div class="lrv-a-grid lrv-a-cols2">
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 	</div>
 	<hr>
-	<div class="pmc-a-grid pmc-a-cols3">
+	<div class="lrv-a-grid lrv-a-cols3">
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
-		<div class="pmc-a-grid-item pmc-a-span2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
+		<div class="lrv-a-grid-item lrv-a-span2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 	</div>
 </body>
 </html>

package/src/02-algorithms/a-hidden/a-hidden.common.inline.scss

@@ -0,0 +1,43 @@
+@import 'setup';
+
+@mixin _a-hidden {
+	// stylelint-disable declaration-no-important
+	display: none !important;
+	// stylelint-enable declaration-no-important
+	height: 0;
+	width: 0;
+}
+
+.lrv-a-hidden {
+	@include _a-hidden;
+}
+
+.lrv-a-hidden\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop-max {
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		@include _a-hidden;
+	}
+}

package/src/02-algorithms/a-hover-dropup/a-hover-dropup.common.async.scss

@@ -2,16 +2,16 @@
 
 @include pmc-breakpoint( tablet ) {
 
-	.pmc-a-hover-dropup\@tablet {
+	.lrv-a-hover-dropup\@tablet {
 		position: relative;
 		min-width: 14rem;
 	}
 
-	.pmc-a-hover-dropup-trigger\@tablet {
+	.lrv-a-hover-dropup-trigger\@tablet {
 		cursor: pointer;
 	}
 
-	.pmc-a-hover-dropup-target\@tablet {
+	.lrv-a-hover-dropup-target\@tablet {
 		width: 100%;
 		visibility: hidden;
 		opacity: 0;
@@ -24,14 +24,15 @@
 		max-height: 8.438rem;
 	}
 
-	.pmc-a-hover-dropup\@tablet:hover .pmc-a-hover-dropup-target\@tablet,
-	.pmc-a-hover-dropup\@tablet:focus .pmc-a-hover-dropup-target\@tablet {
+	.lrv-a-hover-dropup\@tablet:hover .lrv-a-hover-dropup-target\@tablet,
+	.lrv-a-hover-dropup\@tablet:focus .lrv-a-hover-dropup-target\@tablet {
 		visibility: visible;
 		opacity: 1;
 	}
-
-	.pmc-a-hover-dropup\@tablet:hover .pmc-a-hover-dropup-trigger\@tablet::after,
-	.pmc-a-hover-dropup\@tablet:focus .pmc-a-hover-dropup-target\@tablet {
+	
+	// Transform a-icon
+	.lrv-a-hover-dropup\@tablet:hover .lrv-a-icon-arrow-down::after,
+	.lrv-a-hover-dropup\@tablet:focus .lrv-a-icon-arrow-down {
 		--a-icon-transform: rotate(180deg);
 	}
 }

package/src/02-algorithms/a-hover-dropup/a-hover-dropup.html

@@ -9,9 +9,9 @@
 </head>
 <body>
 	<div style="height:300px"></div>
-	<div class="pmc-a-hover-dropup@tablet">
-		<div class="pmc-a-hover-dropup-trigger@tablet">Hover me to show the list above</div>
-		<div class="pmc-a-hover-dropup-target@tablet">
+	<div class="lrv-a-hover-dropup@tablet">
+		<div class="lrv-a-hover-dropup-trigger@tablet">Hover me to show the list above</div>
+		<div class="lrv-a-hover-dropup-target@tablet">
 			<ul>
 				<li>List item 1</li>
 				<li>List item 2</li>

package/src/02-algorithms/a-hover-effect/a-hover-effect.common.async.scss

@@ -0,0 +1,25 @@
+@import 'setup';
+
+.lrv-a-hover-effect {
+	transition: var( --a-hover-effect-property, $transition-hover );
+}
+
+.lrv-a-hover-effect--fade {
+	transform: translate3d( 0px, 0px, 0px ); // stylelint-disable-line unit-disallowed-list
+}
+
+.lrv-a-hover-effect--fade:hover {
+	--a-hover-effect-property: opacity;
+
+	opacity: 0.5;
+}
+
+.lrv-a-hover-effect--underline {
+	transform: translate3d( 0px, 0px, 0px ); // stylelint-disable-line unit-disallowed-list
+}
+
+.lrv-a-hover-effect--underline:hover {
+	--a-hover-effect-property: border-bottom;
+
+	border-bottom: 1px solid currentColor;
+}

package/src/02-algorithms/a-hover-effect/a-hover-effect.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Document</title>
+	<link rel="stylesheet" href="../../../build/css/algorithms.common.async.css">
+	<link rel="stylesheet" href="../../../build/css/utilities.common.inline.css">
+</head>
+<body>
+	<div class="lrv-a-hover-effect lrv-a-hover-effect--fade lrv-u-display-inline-block">
+		<img src="http://placehold.it/300x300" alt="">
+	</div>
+</body>
+</html>

package/src/02-algorithms/a-icon/a-icon.common.async.scss

@@ -0,0 +1,36 @@
+@import 'setup';
+
+.lrv-a-icon-after-remove\@tablet::after {
+	@include pmc-breakpoint( tablet ) {
+		display: none;
+	}
+}
+
+.lrv-a-icon-invert {
+	--a-icon-filter: invert(1);
+}
+
+.lrv-a-icon-arrow-left,
+.lrv-a-icon-arrow-right,
+.lrv-a-icon-arrow-down,
+.lrv-a-icon-arrow-up {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13.7 1.7l-6 6c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-6-6C-.1 1.3-.1.7.3.3s1-.4 1.4 0L7 5.6 12.3.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4z'/%3E%3C/svg%3E" );
+	--a-icon-height: #{ $font-size-12 };
+}
+
+.lrv-a-icon-arrow-right {
+	--a-icon-transform: rotate(-90deg);
+}
+
+.lrv-a-icon-arrow-left {
+	--a-icon-transform: rotate(90deg);
+}
+
+.lrv-a-icon-envelope {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M.77.945C.636.875.406.752.356.605.269.357.362.258.731.258h12.723c.37 0 .462.096.376.349-.05.143-.28.27-.416.34-.366.192-5.45 2.964-5.64 3.064-.19.1-.382.146-.681.146-.3 0-.493-.047-.683-.146C6.22 3.91 1.137 1.138.77.945zm12.934.15c.296-.15.276.023.276.163v6.82c0 .307-.39.696-.716.696H.921c-.326 0-.782-.386-.782-.695V1.258c0-.136.016-.313.31-.163.272.14 2.747 1.883 4.368 2.931L2.085 7.104c-.066.066-.096.15-.056.186.04.04.13.02.196-.046l3.28-2.769c.496.32.842.54.905.573.257.13.436.146.683.146.246 0 .425-.017.682-.146.06-.034.409-.253.905-.573l3.28 2.769c.07.063.156.083.196.046.037-.04.007-.12-.06-.186L9.363 4.026c1.62-1.048 4.069-2.791 4.342-2.931z'/%3E%3C/svg%3E" );
+	--a-icon-height: #{ $font-size-10 };
+}
+
+.lrv-a-icon-search {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M5.228 11.335h.79l.28-.27a6.471 6.471 0 01-1.57-4.23 6.5 6.5 0 116.5 6.5c-1.61 0-3.09-.59-4.23-1.57l-.27.28v.79l-5 4.99-1.49-1.49 4.99-5zm6 0c2.49 0 4.5-2.01 4.5-4.5s-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5 2.01 4.5 4.5 4.5z' fill-rule='evenodd'/%3E%3C/svg%3E" );
+}

package/src/02-algorithms/a-icon/a-icon.common.inline.scss

@@ -1,16 +1,15 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/tools';
-
-$ICONS_BUILD_PATH: '/icons';
+@import 'setup';
 
 @mixin _a-icon-base {
 	content: var(--a-icon-content, '');
+	filter: var(--a-icon-filter, none);
 	background-image: var(--a-icon-url, '');
 	background-repeat: no-repeat;
 	background-size: contain;
 	height: var(--a-icon-height, #{ $spacer-1 });
 	width: var(--a-icon-width, #{ $spacer-1 });
 	transform: var( --a-icon-transform, none );
+	flex-shrink: 0;
 }
 
 @mixin _a-icon-base-pseudo( $pseudo-el ) {
@@ -30,7 +29,7 @@ $ICONS_BUILD_PATH: '/icons';
 		height: initial;
 		width: initial;
 		// background okay for reset.
-		background: initial; // stylelint-disable-line property-blacklist
+		background: initial; // stylelint-disable-line property-disallowed-list
 		font-size: inherit;
 		color: currentColor;
 		margin: 0;
@@ -39,97 +38,84 @@ $ICONS_BUILD_PATH: '/icons';
 	}
 }
 
-.a-icon {
+.lrv-a-icon {
 	@include _a-icon-base();
 }
 
-.a-icon-before {
+.lrv-a-icon-before {
 	@include _a-icon-base-pseudo( before ) {
 		margin-right: $spacer-050;
 	}
 }
 
-.a-icon-after {
+.lrv-a-icon-after {
 	@include _a-icon-base-pseudo( after ) {
 		margin-left: $spacer-050;
 	}
 }
 
-.a-icon-after\:margin-l-auto::after {
+.lrv-a-icon-after\:margin-l-auto::after {
 	margin-left: auto;
 }
 
 // Specific Icons
 
-.a-icon-arrow-left,
-.a-icon-arrow-right,
-.a-icon-arrow-down,
-.a-icon-arrow-up {
-	--a-icon-url: url( #{$ICONS_BUILD_PATH + '/stack/svg/sprite.stack.svg#arrow'} );
-	--a-icon-height: #{ $font-size-12 };
-}
+.lrv-a-icon-forward-slash,
+.lrv-a-icon-bullet,
+.lrv-a-icon-vertical-pipe {
+	@include _a-icon-reset( before ) {
+		padding-right: $spacer-050;
+	};
 
-.a-icon-arrow-right {
-	--a-icon-transform: rotate(-90deg);
+	@include _a-icon-reset( after ) {
+		padding-left: $spacer-025;
+	};
 }
 
-.a-icon-arrow-left {
-	--a-icon-transform: rotate(90deg);
+.lrv-a-icon-forward-slash {
+	--a-icon-content: '/';
 }
 
-.a-icon-envelope {
-	--a-icon-url: url( #{$ICONS_BUILD_PATH + '/stack/svg/sprite.stack.svg#envelope'} );
+.lrv-a-icon-bullet {
+	--a-icon-content: '\02022';
 }
 
-.a-icon-forward-slash {
-	--a-icon-content: '/';
+.lrv-a-icon-vertical-pipe {
+	--a-icon-content: '\007C';
+	padding-right: $spacer-025;
+}
 
-	@include _a-icon-reset( before ) {
-		padding-right: $spacer-050;
-	};
+.lrv-a-icon-after-arrow-top-left {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		left: 13%;
+		border: 2px solid map-get( $TOKENS-MAP, color-black );
+		border-right-color: transparent;
+		border-bottom-color: transparent;
+		transform: rotate( 45deg );
+		top: pmc-rem(-12);
+		background-color: $color-white;
+	}
+}
 
-	@include _a-icon-reset( after ) {
-		padding-left: $spacer-025;
-	};
+.lrv-a-icon-after-arrow-top-right {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		right: 13%;
+		border: 2px solid map-get( $TOKENS-MAP, color-black );
+		border-right-color: transparent;
+		border-bottom-color: transparent;
+		transform: rotate( 45deg );
+		top: pmc-rem(-12);
+		background-color: $color-white;
+	}
 }
 
-// // ----------
-// // Special Instance for Footer Dropdown Toggle Arrow
-// // ----------
-
-// // @TODO: Move a-icon-after-down to one-offs or an algorithm called a-border-icon / a-toggle-icon.
-// .a-icon-after-down {
-// 	position: relative;
-// 	display: flex;
-// 	align-items: center;
-// 	flex-wrap: nowrap;
-// 	padding-right: $spacer-025;
-
-// 	&::after {
-// 		content: '';
-// 		margin-left: auto;
-// 		width: 0.75rem;
-// 		height: 0.75rem;
-// 		transform: scaleY(0.85) translate(-50%,-50%) rotate(45deg);
-// 		border: 0.125rem solid;
-// 		border-left: none;
-// 		border-top: none;
-// 		transition: transform 225ms cubic-bezier(0.4,0,0.2,1);
-// 	}
-// }
-
-// .a-icon-after-down-hide\@mobile {
-// 	@include breakpoint( mobile ) {
-// 		display: block;
-
-// 		&::after {
-// 			display: none;
-// 		}
-// 	}
-// }
-
-// .a-icon-after-down--has-toggle {
-// 	&::after {
-// 		transform: scaleY(-0.85) translate(-50%,25%) rotate(45deg);
-// 	}
-// }

package/src/02-algorithms/a-screen-reader-only/a-screen-reader-only.common.inline.scss

@@ -0,0 +1,30 @@
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+@mixin _a-screen-reader-only-base {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px); // stylelint-disable-line unit-disallowed-list
+	clip-path: inset(50%);
+	height: 1px; // stylelint-disable-line unit-disallowed-list
+	margin: -1px; // stylelint-disable-line unit-disallowed-list
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px; // stylelint-disable-line unit-disallowed-list
+	word-wrap: normal;
+}
+
+.lrv-a-screen-reader-only {
+	@include _a-screen-reader-only-base;
+}
+
+.lrv-a-screen-reader-only\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-screen-reader-only-base();
+	}
+}
+
+.lrv-a-screen-reader-only\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-screen-reader-only-base();
+	}
+}