feat: context supplements a (#569)

* adding context enhancements scoping and new elements * adding some of context styling * fixing the tests now failing due to the scoped contexts * fixing the note to most recent design * fixing CR remarks
Vonage · Jan 13, 2021 · a3f4a2c · a3f4a2c
1 parent 1af6d9d
commit a3f4a2c
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 62 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -7,6 +7,7 @@ import vvdContext from '@vonage/vvd-context';
 vvdContext.mount()
 	.then(() => console.info('init Vivid core done (preview frame)'))
 	.catch(e => console.error(e));
+document.body.classList.add('vivid-scope-tmp');
 
 async function run() {
 	setCustomElements(customElements);

diff --git a/common/context/src/partials/_layout.scss b/common/context/src/partials/_layout.scss
@@ -4,17 +4,42 @@
     padding: 0;
 	}
 
-	pre,
-	code {
-		padding: 3px 4px;
-		border-radius: 6px;
-	}
+	.vivid-scope-tmp {
+		pre,
+		code,
+		kbd,
+		samp,
+		var {
+			padding: 3px 4px;
+			border-radius: 6px;
+		}
+
+		pre {
+			overflow: auto;
+
+			code,
+			kbd,
+			samp,
+			var {
+				padding: initial;
+			}
+		}
+
+		blockquote {
+			margin-left: 0;
+			margin-right: 0;
+			padding: 20px 22px;
+			border-radius: 6px;
 
-	pre {
-		overflow: auto;
+			:first-child {
+				margin-block-start: 0;
+				padding-block-start: 0;
+			}
 
-		code {
-			padding: initial;
+			:last-child {
+				margin-block-end: 0;
+				padding-block-end: 0;
+			}
 		}
 	}
 }
diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
@@ -1,22 +1,40 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
+@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
+	$connotations: success alert warning info announcement
+);
 
 @mixin scheme-variables-coupling {
   body {
     background-color: var(#{scheme-variables.$vvd-color-base});
     color: var(#{scheme-variables.$vvd-color-on-base});
 	}
 
-	a {
-		color: color-base.$purple-600;
-	}
+	.vivid-scope-tmp {
+		a {
+			color: color-base.$purple-600;
+		}
 
-	code {
-		background-color:var(#{scheme-variables.$vvd-color-surface});
-		color: color-base.$orange-600;
-	}
+		code,
+		kbd,
+		samp,
+		var {
+			background-color:var(#{scheme-variables.$vvd-color-surface});
+			color: color-base.$orange-600;
+		}
+
+		pre {
+			background-color:var(#{scheme-variables.$vvd-color-surface});
+		}
 
-	pre {
-		background-color:var(#{scheme-variables.$vvd-color-surface});
+		blockquote {
+			border-inline-start: 8px solid var(#{color-semantic.$vvd-color-connotation});
+			box-shadow: inset 0 1px 0 0 #b3b3b3, inset 0 -1px 0 0 #b3b3b3, inset -1px 0 0 0 #b3b3b3;
+		}
+		@include color-connotation-mixins.connotations-context(
+			'blockquote#{color-connotation-mixins.$connotation-placeholder}',
+			'info'
+		);
 	}
 }
diff --git a/common/context/src/partials/_typography.scss b/common/context/src/partials/_typography.scss
@@ -8,48 +8,53 @@
     @include typography.typography-cat-shorthand('body-1');
   }
 
-  h1 {
-    @include typography.typography-cat-shorthand('headline-1');
-  }
-
-  h2 {
-    @include typography.typography-cat-shorthand('headline-2');
-  }
-
-  h3 {
-		@include typography.typography-cat-shorthand('title-1');
-  }
-
-	h4 {
-    @include typography.typography-cat-shorthand('title-2');
-  }
-
-  h5 {
-		@include typography.typography-cat-shorthand('subtitle-1');
-  }
-
-  h6 {
-    @include typography.typography-cat-shorthand('subtitle-2');
-  }
-
-	code,
-	kbd,
-	samp {
-		font-family: 'SpeziaMonoWebVariable', monospace;
-	}
-
-	b,
-	strong {
-		font-weight: 600;
+	.vivid-scope-tmp {
+		h1 {
+			@include typography.typography-cat-shorthand('headline-1');
+		}
+
+		h2 {
+			@include typography.typography-cat-shorthand('headline-2');
+		}
+
+		h3 {
+			@include typography.typography-cat-shorthand('title-1');
+		}
+
+		h4 {
+			@include typography.typography-cat-shorthand('title-2');
+		}
+
+		h5 {
+			@include typography.typography-cat-shorthand('subtitle-1');
+		}
+
+		h6 {
+			@include typography.typography-cat-shorthand('subtitle-2');
+		}
+
+		code,
+		kbd,
+		samp,
+		var {
+			font-family: 'SpeziaMonoWebVariable', monospace;
+		}
+
+		b,
+		strong {
+			font-weight: 600;
+		}
+
+		small {
+			@include typography.typography-cat-shorthand('body-2');
+		}
+
+		a {
+			text-decoration: underline;
+		}
+
+		blockquote {
+			@include typography.typography-cat-shorthand('body-2');
+		}
 	}
-
-	a {
-		text-decoration: underline;
-	}
-
-  var {
-		font-family: 'SpeziaMonoWebVariable', monospace;
-    display: block;
-    border-radius: 4px;
-  }
 }
diff --git a/common/context/test/context-typography.test.js b/common/context/test/context-typography.test.js
@@ -18,6 +18,9 @@ describe('vvd-context typography', () => {
 					it(`should have '${deviatingElement}' element styled withing '${contextElement}'`, async () => {
 						const iframe = await setupLocalIframe();
 						const d = iframe.contentWindow.document;
+
+						d.body.classList.add('vivid-scope-tmp');
+
 						await vvdContext.mount(d);
 
 						const ce = d.createElement(contextElement);

diff --git a/common/foundation/scss/mixins/_color-connotation-mixins.scss b/common/foundation/scss/mixins/_color-connotation-mixins.scss
@@ -19,7 +19,7 @@ $allConnotations: (
 );
 
 // selector can be altered by relevance
-@mixin connotations-context($selector: ':host(#{$connotation-placeholder})') {
+@mixin connotations-context($selector: ':host(#{$connotation-placeholder})', $default-fallback: null) {
 	@each $connotation in functions.pick($connotations, $allConnotations) {
 		$attr: '[connotation="#{$connotation}" i]';
 
@@ -38,4 +38,20 @@ $allConnotations: (
 			);
 		}
 	}
+
+	// add default fallback if/when required
+	@if ($default-fallback) {
+		$processed-selector: selector.replace(
+			#{$selector},
+			#{$connotation-placeholder},
+			':not([connotation])'
+		);
+
+		#{$processed-selector} {
+			#{color-semantic.$vvd-color-connotation}: var(--vvd-color-#{$default-fallback});
+			#{color-semantic.$vvd-color-on-connotation}: var(
+				--vvd-color-on-#{$default-fallback}
+			);
+		}
+	}
 }