From 377c983f0a7dac4718b16d85d8ab7479b39bca9a Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Fri, 1 Mar 2024 04:40:13 +0800
Subject: [PATCH] feat(design): add code block style to article headings
 (#2766)

---
 .../component/code-preview.component.ts       | 18 +-----------
 .../article-headings.component.html           | 14 ++++-----
 .../src/article/article.component.scss        | 29 ++++++++++---------
 3 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/apps/design-land/src/app/core/code-preview/component/code-preview.component.ts b/apps/design-land/src/app/core/code-preview/component/code-preview.component.ts
index 2af6a4b2fe..690f62d104 100644
--- a/apps/design-land/src/app/core/code-preview/component/code-preview.component.ts
+++ b/apps/design-land/src/app/core/code-preview/component/code-preview.component.ts
@@ -6,32 +6,20 @@ import {
   ChangeDetectionStrategy,
   OnChanges,
   HostBinding,
-  Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '@daffodil/design';
-
 import {
   DesignLandCodeExample,
   DesignLandCodeExampleFile,
 } from '../model/code-example';
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the code preview mixins
- */
-class CodePreviewBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _codePreviewBase = daffArticleEncapsulatedMixin((CodePreviewBase));
-
 @Component({
   selector: 'design-land-code-preview',
   templateUrl: './code-preview.component.html',
   styleUrls: ['./code-preview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CodePreviewComponent extends _codePreviewBase implements OnChanges {
+export class CodePreviewComponent implements OnChanges {
   @HostBinding('class.design-land-code-preview') class = true;
 
   /**
@@ -62,8 +50,4 @@ export class CodePreviewComponent extends _codePreviewBase implements OnChanges
       this.exampleFile = this.example.files[0];
     }
   }
-
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
 }
diff --git a/libs/design/article/examples/src/article-headings/article-headings.component.html b/libs/design/article/examples/src/article-headings/article-headings.component.html
index f34d2cb79b..e9b948aec8 100644
--- a/libs/design/article/examples/src/article-headings/article-headings.component.html
+++ b/libs/design/article/examples/src/article-headings/article-headings.component.html
@@ -1,8 +1,6 @@
-<daff-article>
-  <h1>This is a h1 heading.</h1>
-  <h2>This is a h2 heading.</h2>
-  <h3>This is a h3 heading.</h3>
-  <h4>This is a h4 heading.</h4>
-  <h5>This is a h5 heading.</h5>
-  <h6>This is a h6 heading.</h6>
-</daff-article>
\ No newline at end of file
+<h1>This is a h1 heading with <code>code</code></h1>
+<h2>This is a h2 heading with <code>code</code></h2>
+<h3>This is a h3 heading with <code>code</code></h3>
+<h4>This is a h4 heading with <code>code</code></h4>
+<h5>This is a h5 heading with <code>code</code></h5>
+<h6>This is a h6 heading with <code>code</code></h6>
\ No newline at end of file
diff --git a/libs/design/article/src/article/article.component.scss b/libs/design/article/src/article/article.component.scss
index d1803f975e..1fcd944d22 100644
--- a/libs/design/article/src/article/article.component.scss
+++ b/libs/design/article/src/article/article.component.scss
@@ -1,4 +1,5 @@
 @use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 @use 'stops-article-cascade' as *;
 
 .daff-article {
@@ -17,6 +18,12 @@
 	@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
 		margin-bottom: 1.5rem;
 		word-wrap: break-word;
+
+		code {
+			font-size: 0.875em;
+			font-weight: 600;
+			line-height: 0.875em;
+		}
 	}
 
 	@include stopsArticleCascade(h2, h3, h4, h5, h6) {
@@ -60,23 +67,20 @@
 		@include t.embolden;
 	}
 
-	@include stopsArticleCascade(pre) {
-		margin: 1.5rem 0;
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
 	pre {
 		display: block;
-		border-radius: 4px;
+		border-radius: 0.25em;
 		font-size: t.$small-font-size;
 		line-height: 1.5rem;
+		margin: 1.5rem 0;
 		padding: 1.5rem;
 		overflow: auto;
 		white-space: pre-wrap;
 
+		&:last-child {
+			margin-bottom: 0;
+		}
+
 		code {
 			display: block;
 			padding: 0;
@@ -84,11 +88,10 @@
 	}
 
 	code {
-		display: inline-block;
-		border-radius: 4px;
+		border-radius: 0.25em;
 		font-size: t.$small-font-size;
 		line-height: 1rem;
-		padding: 0.25rem;
+		padding: 0.25em;
 	}
 
 	&__title {
@@ -118,7 +121,7 @@
 	}
 
 	blockquote {
-		border-radius: 4px;
+		border-radius: 0.25em;
 		margin: 1.5rem 0;
 		padding: 1rem 1.5rem;