[showcase] Normalize code snippets headings level (#536)

* `[showcase][checkbox]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][combo-box]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][dialog]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][icon]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][input]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][label]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][radio-group]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][search]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][slider]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][tabular-grid]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][tree-view]` Apply `headingLevel="3"` to code-snippet's

* `[showcase][elevation]` Apply `headingLevel="3"` to code-snippet's

Author: bsastregx

packages/showcase/src/app/components/checkbox/checkbox.component.html

@@ -6,31 +6,35 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 
 <p class="body-regular-l">{{ metadata.description }}</p>
 
-<code-snippet [codeSnippet]="codeSnippets.checked">
+<code-snippet [codeSnippet]="codeSnippets.checked" [headingLevel]="3">
   <ch-checkbox class="checkbox" caption="The caption"></ch-checkbox>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.unchecked">
+<code-snippet [codeSnippet]="codeSnippets.unchecked" [headingLevel]="3">
   <ch-checkbox
     class="checkbox"
     caption="The caption"
     checked-value="true"
   ></ch-checkbox>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.indeterminate">
+<code-snippet [codeSnippet]="codeSnippets.indeterminate" [headingLevel]="3">
   <ch-checkbox
     class="checkbox"
     caption="The caption"
     indeterminate
   ></ch-checkbox>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.disabled">
+<code-snippet [codeSnippet]="codeSnippets.disabled" [headingLevel]="3">
   <ch-checkbox class="checkbox" caption="The caption" disabled></ch-checkbox>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.withIcon" language="ts">
+<code-snippet
+  [codeSnippet]="codeSnippets.withIcon"
+  language="ts"
+  [headingLevel]="3"
+>
   <ch-checkbox
     class="checkbox"
     caption="The caption"
@@ -39,7 +43,10 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   ></ch-checkbox>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.groupingCheckboxesBlock">
+<code-snippet
+  [codeSnippet]="codeSnippets.groupingCheckboxesBlock"
+  [headingLevel]="3"
+>
   <div class="field-group">
     <ch-checkbox
       class="checkbox"
@@ -59,7 +66,10 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   </div>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.groupingCheckboxesInline">
+<code-snippet
+  [codeSnippet]="codeSnippets.groupingCheckboxesInline"
+  [headingLevel]="3"
+>
   <div class="field-group-inline">
     <ch-checkbox
       class="checkbox"

packages/showcase/src/app/components/combo-box/combo-box.component.html

@@ -6,7 +6,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 
 <p class="body-regular-l">{{ metadata.description }}</p>
 
-<code-snippet [codeSnippet]="codeSnippets.default">
+<code-snippet [codeSnippet]="codeSnippets.default" [headingLevel]="3">
   <p class="body-regular-m">
     To display a combo box with a label, you will have to do the same as working
     with native HTML, adding a <code>for</code> attribute for the label with the
@@ -35,30 +35,30 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   </div>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.noLabel">
+<code-snippet [codeSnippet]="codeSnippets.noLabel" [headingLevel]="3">
   <ch-combo-box-render
     class="combo-box"
     [model]="comboBoxModel"
   ></ch-combo-box-render>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.disabled">
+<code-snippet [codeSnippet]="codeSnippets.disabled" [headingLevel]="3">
   <ch-combo-box-render
     class="combo-box"
     disabled
     [model]="comboBoxModel"
   ></ch-combo-box-render>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.placeholder">
+<code-snippet [codeSnippet]="codeSnippets.placeholder" [headingLevel]="3">
   <ch-combo-box-render
     class="combo-box"
     [model]="comboBoxModel"
     [placeholder]="codeSnippets.placeholder.template.properties[1].value"
   ></ch-combo-box-render>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.withIcons">
+<code-snippet [codeSnippet]="codeSnippets.withIcons" [headingLevel]="3">
   <ch-combo-box-render
     class="combo-box"
     [model]="comboBoxIconsModel"

packages/showcase/src/app/components/dialog/dialog.component.html

@@ -31,7 +31,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 </ol>
 
 @if (showDefault()) {
-  <code-snippet [codeSnippet]="codeSnippets.default" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.default"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <common-snippets
       [type]="'spacing-body-description-extended'"
       [componentName]="metadata.title"
@@ -80,7 +84,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showWithoutPadding()) {
-  <code-snippet [codeSnippet]="codeSnippets.withoutPadding" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.withoutPadding"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <button
       class="button-primary"
       type="button"
@@ -127,7 +135,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showWithHeader()) {
-  <code-snippet [codeSnippet]="codeSnippets.withHeader" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.withHeader"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <button
       class="button-primary"
       type="button"
@@ -175,7 +187,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showWithFooter()) {
-  <code-snippet [codeSnippet]="codeSnippets.withFooter" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.withFooter"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <button
       class="button-primary"
       type="button"
@@ -225,7 +241,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showResizable()) {
-  <code-snippet [codeSnippet]="codeSnippets.resizable" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.resizable"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <p class="body-regular-s">
       <code>resizable</code> allows you to resize the dialog by dragging from
       the edges. You might want in this case to set maximum and minimum block
@@ -295,7 +315,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showAdjustPosition()) {
-  <code-snippet [codeSnippet]="codeSnippets.adjustPosition" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.adjustPosition"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <p class="body-regular-s">
       <code>adjustPositionAfterResize</code> will reposition the dialog after
       being resized. This property goes hand in hand with <code>resizable</code>
@@ -350,7 +374,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showNonModal()) {
-  <code-snippet [codeSnippet]="codeSnippets.nonModal" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.nonModal"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <p class="body-regular-s">
       By default, the <code>ch-dialog</code> component functions as a modal,
       meaning it prevents interaction with the rest of the page's content when
@@ -402,7 +430,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showAllowDrag()) {
-  <code-snippet [codeSnippet]="codeSnippets.allowDrag" [language]="'ts'">
+  <code-snippet
+    [codeSnippet]="codeSnippets.allowDrag"
+    [language]="'ts'"
+    [headingLevel]="3"
+  >
     <p class="body-regular-s">
       By default, the <code>ch-dialog</code> component does not support
       dragging. You can enable dragging by setting the

packages/showcase/src/app/components/icon/icon.component.html

@@ -6,7 +6,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 
 <p class="body-regular-l">{{ metadata.description }}</p>
 
-<code-snippet [codeSnippet]="codeSnippets.iconSource" [language]="'ts'">
+<code-snippet
+  [codeSnippet]="codeSnippets.iconSource"
+  [language]="'ts'"
+  [headingLevel]="3"
+>
   <p class="body-regular-s">
     Mercury provides an utility function to get
     <a class="hyperlink" [routerLink]="commonLinks.icons()"
@@ -35,19 +39,19 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   </button>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.sizeSmall">
+<code-snippet [codeSnippet]="codeSnippets.sizeSmall" [headingLevel]="3">
   <button aria-label="Assistant" type="button">
     <ch-image class="icon-sm" [src]="ASSISTANT_ICON"></ch-image>
   </button>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.sizeMedium">
+<code-snippet [codeSnippet]="codeSnippets.sizeMedium" [headingLevel]="3">
   <button aria-label="Assistant" type="button">
     <ch-image class="icon-md" [src]="ASSISTANT_ICON"></ch-image>
   </button>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.mask">
+<code-snippet [codeSnippet]="codeSnippets.mask" [headingLevel]="3">
   <button aria-label="Assistant" type="button">
     <ch-image class="icon-md" [src]="ASSISTANT_ICON" [type]="'mask'"></ch-image>
   </button>

packages/showcase/src/app/components/input/input.component.html

@@ -28,7 +28,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 </ol>
 
 @if (showDefault()) {
-  <code-snippet [codeSnippet]="codeSnippets.default">
+  <code-snippet [codeSnippet]="codeSnippets.default" [headingLevel]="3">
     <p class="body-regular-m">
       To display an input with a label, you will have to do the same as working
       with native HTML, adding a <code>for</code> attribute for the label with
@@ -55,19 +55,19 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showNoLabel()) {
-  <code-snippet [codeSnippet]="codeSnippets.noLabel">
+  <code-snippet [codeSnippet]="codeSnippets.noLabel" [headingLevel]="3">
     <ch-edit accessibleName="Name" class="input"></ch-edit>
   </code-snippet>
 }
 
 @if (showWithValue()) {
-  <code-snippet [codeSnippet]="codeSnippets.withValue">
+  <code-snippet [codeSnippet]="codeSnippets.withValue" [headingLevel]="3">
     <ch-edit accessibleName="Name" class="input" value="Pat Taylor"></ch-edit>
   </code-snippet>
 }
 
 @if (showWithPlaceholder()) {
-  <code-snippet [codeSnippet]="codeSnippets.withPlaceholder">
+  <code-snippet [codeSnippet]="codeSnippets.withPlaceholder" [headingLevel]="3">
     <ch-edit
       accessibleName="Name"
       class="input"
@@ -77,7 +77,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showDisabled()) {
-  <code-snippet [codeSnippet]="codeSnippets.disabled">
+  <code-snippet [codeSnippet]="codeSnippets.disabled" [headingLevel]="3">
     <ch-edit
       accessibleName="Name"
       class="input"
@@ -88,7 +88,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 }
 
 @if (showWithIcon()) {
-  <code-snippet [codeSnippet]="codeSnippets.withIcon">
+  <code-snippet [codeSnippet]="codeSnippets.withIcon" [headingLevel]="3">
     <ch-edit
       accessibleName="Name"
       class="input"

packages/showcase/src/app/components/label/label.component.html

@@ -6,13 +6,13 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 
 <p class="body-regular-l">{{ metadata.description }}</p>
 
-<code-snippet [codeSnippet]="codeSnippets.default">
+<code-snippet [codeSnippet]="codeSnippets.default" [headingLevel]="3">
   <label class="label" for="element-1">{{
     codeSnippets.default.template.children
   }}</label>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.blockStart">
+<code-snippet [codeSnippet]="codeSnippets.blockStart" [headingLevel]="3">
   <div class="field field-block">
     <label class="label" for="element-2">{{
       codeSnippets.blockStart.template.children[0].children
@@ -22,7 +22,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   </div>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.inlineStart">
+<code-snippet [codeSnippet]="codeSnippets.inlineStart" [headingLevel]="3">
   <div class="field field-inline">
     <label class="label" for="element-3">{{
       codeSnippets.inlineStart.template.children[0].children

packages/showcase/src/app/components/radio-group/radio-group.component.html

@@ -6,14 +6,18 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
 
 <p class="body-regular-l">{{ metadata.description }}</p>
 
-<code-snippet [codeSnippet]="codeSnippets.default" [language]="'ts'">
+<code-snippet
+  [codeSnippet]="codeSnippets.default"
+  [language]="'ts'"
+  [headingLevel]="3"
+>
   <ch-radio-group-render
     class="radio-group"
     [model]="radioGroupModel"
   ></ch-radio-group-render>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.vertical">
+<code-snippet [codeSnippet]="codeSnippets.vertical" [headingLevel]="3">
   <ch-radio-group-render
     class="radio-group"
     direction="vertical"

packages/showcase/src/app/components/search/search.component.html

@@ -8,7 +8,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   {{ metadata.description }}
 </p>
 
-<code-snippet [codeSnippet]="codeSnippets.default">
+<code-snippet [codeSnippet]="codeSnippets.default" [headingLevel]="3">
   <p class="body-regular-m">
     To display an input with a label, you will have to do the same as working
     with native HTML, adding a <code>for</code> attribute for the label with the
@@ -31,11 +31,11 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   </div>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.noLabel">
+<code-snippet [codeSnippet]="codeSnippets.noLabel" [headingLevel]="3">
   <ch-edit accessibleName="Search" class="input" [type]="'search'"></ch-edit>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.value">
+<code-snippet [codeSnippet]="codeSnippets.value" [headingLevel]="3">
   <ch-edit
     accessibleName="Search"
     class="input"
@@ -44,7 +44,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   ></ch-edit>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.placeholder">
+<code-snippet [codeSnippet]="codeSnippets.placeholder" [headingLevel]="3">
   <ch-edit
     accessibleName="Search"
     class="input"
@@ -53,7 +53,7 @@ <h1 class="heading-1">{{ metadata.title }}</h1>
   ></ch-edit>
 </code-snippet>
 
-<code-snippet [codeSnippet]="codeSnippets.disabled">
+<code-snippet [codeSnippet]="codeSnippets.disabled" [headingLevel]="3">
   <ch-edit
     accessibleName="Search"
     class="input"