feat(design): create daffArticleEncapsulatedMixin to prevent article …

…styles from cascading down to nested @daffodil/design components (#1917)

libs/design/src/core/article-encapsulated/article-encapsulated-mixin.ts

@@ -0,0 +1,24 @@
+import {
+  ElementRef,
+  Renderer2,
+} from '@angular/core';
+
+import { Constructor } from '../constructor/constructor';
+
+export interface HasElementRef {
+	_elementRef: ElementRef;
+	_renderer: Renderer2;
+}
+
+/**
+ * A mixin for giving a component the ability to prevent article styles from cascading down.
+ */
+export function
+daffArticleEncapsulatedMixin<T extends Constructor<HasElementRef>>(Base: T) {
+  return class extends Base {
+    constructor(...args: any[]) {
+      super(...args);
+      this._renderer.addClass(this._elementRef.nativeElement, `daff-ae`);
+    }
+  };
+}

libs/design/src/core/article-encapsulated/article-encapsulated.spec.ts

@@ -0,0 +1,35 @@
+import { ElementRef } from '@angular/core';
+
+import {
+  daffArticleEncapsulatedMixin,
+  HasElementRef,
+} from './article-encapsulated-mixin';
+
+class TestingClass implements HasElementRef {
+  element: HTMLElement = document.createElement('div');
+
+  _elementRef = new ElementRef<HTMLElement>(this.element);
+  _renderer: any = {
+    addClass: (el: HTMLElement, className: string) => {
+      el.classList.add(className);
+    },
+    removeClass: (el: HTMLElement, className: string) => {
+      el.classList.remove(className);
+    },
+  };
+}
+
+describe('daffArticleEncapsulatedMixin', () => {
+  let instance;
+  let manageContainerLayoutClass;
+
+  beforeEach(() => {
+    manageContainerLayoutClass = daffArticleEncapsulatedMixin(TestingClass);
+    instance = new manageContainerLayoutClass();
+  });
+
+
+  it('should set a namespaced manage container layout class', () => {
+    expect(instance.element.classList).toContain('daff-ae');
+  });
+});

libs/design/src/core/article-encapsulated/public_api.ts

@@ -0,0 +1 @@
+export { daffArticleEncapsulatedMixin } from './article-encapsulated-mixin';

libs/design/src/core/public_api.ts

@@ -9,3 +9,4 @@ export * from './mutable/mutable';
 export * from './text-alignable/text-alignable';
 export * from './compactable/public_api';
 export * from './manage-container-layout/public_api';
+export * from './article-encapsulated/public_api';

libs/design/src/molecules/article/article/article-theme.scss

@@ -1,3 +1,5 @@
+@import './stops-article-cascade';
+
 @mixin daff-article-theme($theme) {
 	$primary: map-get($theme, primary);
 	$secondary: map-get($theme, secondary);
@@ -16,22 +18,15 @@
 			color: daff-illuminate($base-contrast, $gray, 3);
 		}
 
-		a {
+		@include stopsArticleCascade(a) {
 			color: daff-color($primary);
 		}
 
-		> {
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: $text-color;
-			}
+		@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+			color: $text-color;
 		}
 
-		> p {
+		@include stopsArticleCascade(p) {
 			color: $text-color;
 		}
 

libs/design/src/molecules/article/article/article.component.scss

@@ -1,66 +1,61 @@
 @import 'daff-util';
+@import './stops-article-cascade';
 
 .daff-article {
 	display: block;
 
-	> {
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin-bottom: 0.5rem;
-		}
+	@include stopsArticleCascade(a) {
+		font-weight: 600;
+		text-decoration: none;
 
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin-top: 2rem;
+		&:hover {
+			text-decoration: underline;
 		}
+	}
 
-		h1 {
-			@include headline-lg();
-		}
+	@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+		margin-bottom: 0.5rem;
+	}
 
-		h2 {
-			font-size: 2rem;
-			line-height: 2.5rem;
-		}
+	@include stopsArticleCascade(h2, h3, h4, h5, h6) {
+		margin-top: 2rem;
+	}
 
-		h3 {
-			font-size: 1.5rem;
-			line-height: 2rem;
-		}
+	@include stopsArticleCascade(h1) {
+		@include headline-lg();
+	}
 
-		h4 {
-			font-size: 1.25rem;
-			line-height: 1.5rem;
-		}
+	@include stopsArticleCascade(h2) {
+		font-size: 2rem;
+		line-height: 2.5rem;
+	}
 
-		h5 {
-			font-size: 1.125rem;
-			line-height: 1.5rem;
-		}
+	@include stopsArticleCascade(h3) {
+		font-size: 1.5rem;
+		line-height: 2rem;
+	}
 
-		h6 {
-			font-size: 1rem;
-			line-height: 1.5rem;
-		}
+	@include stopsArticleCascade(h4) {
+		font-size: 1.25rem;
+		line-height: 1.5rem;
+	}
 
-		p {
-			margin: 0 0 1rem;
-		}
+	@include stopsArticleCascade(h5) {
+		font-size: 1.125rem;
+		line-height: 1.5rem;
+	}
 
-		strong {
-			@include embolden();
-		}
+	@include stopsArticleCascade(h6) {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	@include stopsArticleCascade(p) {
+		margin: 0 0 1rem;
 	}
 
-	a {
-		font-weight: 500;
+	strong {
+		@include embolden();
 	}
 
 	pre {
@@ -142,7 +137,7 @@
 		}
 
 		td {
-			padding: 8px 16px;
+			padding: 0.5rem 1rem;
 			vertical-align: top;
 			box-sizing: border-box;
 		}

libs/design/src/molecules/article/article/stops-article-cascade.scss

@@ -0,0 +1,7 @@
+@mixin stopsArticleCascade($selector...) {
+	#{$selector} {
+		&:not(.daff-ae *, .daff-ae) {
+			@content;
+		}
+	}
+}