DS-629 Remove Code Snippet WC usage in PL

docs-site/src/pages/pattern-lab/_patterns/20-elements/article/05-article.twig

@@ -4,8 +4,8 @@
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li>Even though plain <bolt-code-snippet display="inline">&lt;table&gt;</bolt-code-snippet> elements are styled, they are not responsive. Please wrap all <bolt-code-snippet display="inline">&lt;table&gt;</bolt-code-snippet> elements with <bolt-code-snippet display="inline">&lt;bolt-table&gt;</bolt-code-snippet> web component to enable responsive styles (JavaScript required). <a href="{{ link['viewall-components-table'] }}" class="e-bolt-text-link">View Table Component<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li>
-    <bolt-li>As for <bolt-code-snippet display="inline">&lt;pre&gt;</bolt-code-snippet> and <bolt-code-snippet display="inline">&lt;code&gt;</bolt-code-snippet> elements, they do not have syntax highlighting. To enable syntax highlighting, please use <bolt-code-snippet display="inline">&lt;bolt-code-snippet&gt;</bolt-code-snippet> web component instead (JavaScript required). <a href="{{ link['viewall-components-code-snippet'] }}" class="e-bolt-text-link">View Code Snippet Component<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li>
+    <bolt-li>Even though plain <code>&lt;table&gt;</code> elements are styled, they are not responsive. Please wrap all <code>&lt;table&gt;</code> elements with <code>&lt;bolt-table&gt;</code> web component to enable responsive styles (JavaScript required). <a href="{{ link['viewall-components-table'] }}" class="e-bolt-text-link">View Table Component<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li>
+    <bolt-li>As for <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> elements, they do not have syntax highlighting. To enable syntax highlighting, please use <code>&lt;code&gt;</code> web component instead (JavaScript required). <a href="{{ link['viewall-components-code-snippet'] }}" class="e-bolt-text-link">View Code Snippet Component<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li>
     {# <bolt-li>Community Tech Doc is a great example of using Side Nav, Content Pagination, Holy Grail layout, and Article element together. <a href="{{ link['pages-community-tech-doc'] }}" class="e-bolt-text-link">View Example Tech Documentation<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li> #}
   </bolt-ol>
 {% endset %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/05-button.twig

@@ -1,10 +1,10 @@
 {% set description %}
-  A button is generally an inline interactive graphical element. Its main purpose is to help the user perform a function (sometimes navigate). <bolt-code-snippet display="inline" lang="html">&lt;button class="e-bolt-button"&gt;</bolt-code-snippet> is acceptable at rendering a button, though the Twig template is the recommended usage for Drupal.
+  A button is generally an inline interactive graphical element. Its main purpose is to help the user perform a function (sometimes navigate). <code>&lt;button class="e-bolt-button"&gt;</code> is acceptable at rendering a button, though the Twig template is the recommended usage for Drupal.
 {% endset %}
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li>Only text should be passed to the <bolt-code-snippet display="inline">content</bolt-code-snippet> prop. However, <bolt-code-snippet display="inline" lang="html">&lt;span&gt;</bolt-code-snippet>, <bolt-code-snippet display="inline" lang="html">&lt;em&gt;</bolt-code-snippet>, and <bolt-code-snippet display="inline" lang="html">&lt;strong&gt;</bolt-code-snippet> elements can be used.</bolt-li>
+    <bolt-li>Only text should be passed to the <code>content</code> prop. However, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code>, and <code>&lt;strong&gt;</code> elements can be used.</bolt-li>
     <bolt-li>Button element is a replacement for the <a href="{{ link['viewall-components-button-deprecated'] }}" class="e-bolt-text-link">Button component</a>.</bolt-li>
   </bolt-ol>
 {% endset %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/10-button-link.twig

@@ -1,9 +1,9 @@
 {% set description %}
-  When appropriate, an <bolt-code-snippet display="inline" lang="html">&lt;a&gt;</bolt-code-snippet> element can use the button style. For example, the button helps to navigate to another page.
+  When appropriate, an <code>&lt;a&gt;</code> element can use the button style. For example, the button helps to navigate to another page.
 {% endset %}
 
 {% set notes %}
-  If a button serves navigational purpose, the proper URL must be set with the <bolt-code-snippet display="inline">href</bolt-code-snippet> attribute.
+  If a button serves navigational purpose, the proper URL must be set with the <code>href</code> attribute.
 {% endset %}
 
 {% set demo %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/15-button-attributes.twig

@@ -1,5 +1,5 @@
 {% set description %}
-  Depending on if the <bolt-code-snippet display="inline" lang="html">&lt;a&gt;</bolt-code-snippet> element or the <bolt-code-snippet display="inline" lang="html">&lt;button&gt;</bolt-code-snippet> element is being used, the proper HTML attributes should be passed.
+  Depending on if the <code>&lt;a&gt;</code> element or the <code>&lt;button&gt;</code> element is being used, the proper HTML attributes should be passed.
 {% endset %}
 
 {% set demo %}
@@ -15,8 +15,8 @@
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li><bolt-code-snippet display="inline" lang="html">&lt;a&gt;</bolt-code-snippet> requires the <bolt-code-snippet display="inline">href</bolt-code-snippet> attribute.</bolt-li>
-    <bolt-li><bolt-code-snippet display="inline" lang="html">&lt;button&gt;</bolt-code-snippet> requires the <bolt-code-snippet display="inline">type</bolt-code-snippet> attribute.</bolt-li>
+    <bolt-li><code>&lt;a&gt;</code> requires the <code>href</code> attribute.</bolt-li>
+    <bolt-li><code>&lt;button&gt;</code> requires the <code>type</code> attribute.</bolt-li>
   </bolt-ol>
 {% endset %}
 

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/20-button-with-icon.twig

@@ -15,14 +15,14 @@
 {% endset %}
 
 {% set description %}
-  Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. <a href="{{ link['viewall-components-icon'] }}">The icon component</a> is recommended for appending icons. However, an <bolt-code-snippet display="inline" lang="html">&lt;img&gt;</bolt-code-snippet> element is also acceptable.
+  Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. <a href="{{ link['viewall-components-icon'] }}">The icon component</a> is recommended for appending icons. However, an <code>&lt;img&gt;</code> element is also acceptable.
 {% endset %}
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li>Icons are set inline with text so icon size will grow or shrink with text size. The <bolt-code-snippet display="inline">size</bolt-code-snippet> and <bolt-code-snippet display="inline">background</bolt-code-snippet> props for the icon component are not well supported in this scenario.</bolt-li>
+    <bolt-li>Icons are set inline with text so icon size will grow or shrink with text size. The <code>size</code> and <code>background</code> props for the icon component are not well supported in this scenario.</bolt-li>
     <bolt-li>When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed.</bolt-li>
-    <bolt-li>When writing in plain HTML, <bolt-code-snippet display="inline" lang="html">&lt;span class="e-bolt-button__icon-before"&gt;</bolt-code-snippet> and <bolt-code-snippet display="inline" lang="html">&lt;span class="e-bolt-button__icon-after"&gt;</bolt-code-snippet> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.</bolt-li>
+    <bolt-li>When writing in plain HTML, <code>&lt;span class="e-bolt-button__icon-before"&gt;</code> and <code>&lt;span class="e-bolt-button__icon-after"&gt;</code> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.</bolt-li>
   </bolt-ol>
 {% endset %}
 

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/25-button-with-icon-only.twig

@@ -44,8 +44,8 @@
 {% set notes %}
   <bolt-ol>
     <bolt-li>It is recommended that icon only buttons to be used in tandem with tooltip to give the user more context about the button&rsquo;s function.</bolt-li>
-    <bolt-li>When writing in plain HTML, <bolt-code-snippet display="inline">aria-label</bolt-code-snippet> is required to render the button text. For example: <bolt-code-snippet display="inline" lang="html">&lt;button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download"&gt;</bolt-code-snippet>. Text should not be used inside the button when using <bolt-code-snippet display="inline">aria-label</bolt-code-snippet>.</bolt-li>
-    <bolt-li>When writing in plain HTML, <bolt-code-snippet display="inline" lang="html">&lt;span class="e-bolt-button__icon-center"&gt;</bolt-code-snippet> is required to wrap around the icon markup. The wrapper ensures that the icon will always center within the button.</bolt-li>
+    <bolt-li>When writing in plain HTML, <code>aria-label</code> is required to render the button text. For example: <code>&lt;button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download"&gt;</code>. Text should not be used inside the button when using <code>aria-label</code>.</bolt-li>
+    <bolt-li>When writing in plain HTML, <code>&lt;span class="e-bolt-button__icon-center"&gt;</code> is required to wrap around the icon markup. The wrapper ensures that the icon will always center within the button.</bolt-li>
   </bolt-ol>
 {% endset %}
 

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/40-button-border-radius.twig

@@ -1,7 +1,7 @@
 {% set schema = bolt.data.components['@bolt-elements-button'].schema %}
 
 {% set description %}
-  Rounded buttons are possible with the <bolt-code-snippet display="inline">border_radius</bolt-code-snippet> prop.
+  Rounded buttons are possible with the <code>border_radius</code> prop.
 {% endset %}
 
 {% set demo %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/button/45-button-display.twig

@@ -5,7 +5,7 @@
 {% endset %}
 
 {% set notes %}
-  When <bolt-code-snippet display="inline">display</bolt-code-snippet> prop is set to <bolt-code-snippet display="inline">inline@from-small</bolt-code-snippet>, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below.
+  When <code>display</code> prop is set to <code>inline@from-small</code>, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below.
 {% endset %}
 
 {% set demo %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/05-icon.twig

@@ -1,13 +1,13 @@
 {% set schema = bolt.data.components['@bolt-elements-icon'].schema %}
 
 {% set description %}
-  An Icon is an inline SVG element. <bolt-code-snippet display="inline" lang="html">&lt;svg class="e-bolt-icon"&gt;</bolt-code-snippet> is acceptable at rendering an icon, though the Twig template is the recommended usage for Drupal.
+  An Icon is an inline SVG element. <code>&lt;svg class="e-bolt-icon"&gt;</code> is acceptable at rendering an icon, though the Twig template is the recommended usage for Drupal.
 {% endset %}
 
 {% set notes %}
   <bolt-ol>
     <bolt-li>Icon element is a replacement for the Icon component.</bolt-li>
-    <bolt-li>When writing inline SVG manually using <bolt-code-snippet display="inline" lang="html">&lt;svg&gt;</bolt-code-snippet> HTML element, be sure to minifiy the SVG, add the element class <bolt-code-snippet display="inline" lang="html">class="e-bolt-icon"</bolt-code-snippet>, and add the attribute <bolt-code-snippet display="inline" lang="html">aria-hidden="true"</bolt-code-snippet>.</bolt-li>
+    <bolt-li>When writing inline SVG manually using <code>&lt;svg&gt;</code> HTML element, be sure to minifiy the SVG, add the element class <code>class="e-bolt-icon"</code>, and add the attribute <code>aria-hidden="true"</code>.</bolt-li>
     <bolt-li>Icon element can be used in tandem with <a href="{{ link['viewall-elements-shape'] }}" class="e-bolt-text-link">Shape</a> element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.</bolt-li>
   </bolt-ol>
 {% endset %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/icon/20-icon-use-case-custom-svg.twig

@@ -17,12 +17,12 @@
     <bolt-ol>
       <bolt-li>If you choose a Twig usage:
         <bolt-ul>
-          <bolt-li>Add the element relevant attributes <bolt-code-snippet display="inline" lang="twig">{% verbatim %}{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true"{% endverbatim %}</bolt-code-snippet> to the <bolt-code-snippet display="inline" lang="html">&lt;svg&gt;</bolt-code-snippet> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the <bolt-code-snippet display="inline" lang="twig">custom_icon_path</bolt-code-snippet> prop.</bolt-li>
+          <bolt-li>Add the element relevant attributes <code>{% verbatim %}{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true"{% endverbatim %}</code> to the <code>&lt;svg&gt;</code> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the <code>custom_icon_path</code> prop.</bolt-li>
         </bolt-ul>
       </bolt-li>
       <bolt-li>If you choose a HTML usage:
         <bolt-ul>
-          <bolt-li>Add the element class <bolt-code-snippet display="inline" lang="html">class="e-bolt-icon"</bolt-code-snippet> and relevant modifier classes, and add the attribute <bolt-code-snippet display="inline" lang="html">aria-hidden="true"</bolt-code-snippet> to the <bolt-code-snippet display="inline" lang="html">&lt;svg&gt;</bolt-code-snippet> HTML element. Then you can display the icon using the modified <bolt-code-snippet display="inline" lang="html">&lt;svg&gt;</bolt-code-snippet> markup.</bolt-li>
+          <bolt-li>Add the element class <code>class="e-bolt-icon"</code> and relevant modifier classes, and add the attribute <code>aria-hidden="true"</code> to the <code>&lt;svg&gt;</code> HTML element. Then you can display the icon using the modified <code>&lt;svg&gt;</code> markup.</bolt-li>
         </bolt-ul>
       </bolt-li>
     </bolt-ol>

docs-site/src/pages/pattern-lab/_patterns/20-elements/image/05-image.twig

@@ -4,10 +4,10 @@
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li>To make an image accessible to screen readers and other assistive technology, make sure to include text description via the <bolt-code-snippet display="inline">alt</bolt-code-snippet> attribute.</bolt-li>
-    <bolt-li>To indicate an image as decoration, leave the <bolt-code-snippet display="inline">alt</bolt-code-snippet> attribute blank, do not remove it. For example: <bolt-code-snippet display="inline">alt=""</bolt-code-snippet>.</bolt-li>
-    <bolt-li>It is best practice to always define the <bolt-code-snippet display="inline">width</bolt-code-snippet> and <bolt-code-snippet display="inline">height</bolt-code-snippet> attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.</bolt-li>
-    <bolt-li>If responsiveness is not needed, please use a plain <bolt-code-snippet display="inline">&lt;img&gt;</bolt-code-snippet> element instead.</bolt-li>
+    <bolt-li>To make an image accessible to screen readers and other assistive technology, make sure to include text description via the <code>alt</code> attribute.</bolt-li>
+    <bolt-li>To indicate an image as decoration, leave the <code>alt</code> attribute blank, do not remove it. For example: <code>alt=""</code>.</bolt-li>
+    <bolt-li>It is best practice to always define the <code>width</code> and <code>height</code> attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.</bolt-li>
+    <bolt-li>If responsiveness is not needed, please use a plain <code>&lt;img&gt;</code> element instead.</bolt-li>
   </bolt-ol>
 {% endset %}
 

docs-site/src/pages/pattern-lab/_patterns/20-elements/image/10-image-srcset-and-sizes.twig

@@ -1,11 +1,11 @@
 {% set description %}
-  Use the <bolt-code-snippet display="inline">srcset</bolt-code-snippet> and <bolt-code-snippet display="inline">sizes</bolt-code-snippet> attributes to render various resolutions of the same image at specific breakpoints.
+  Use the <code>srcset</code> and <code>sizes</code> attributes to render various resolutions of the same image at specific breakpoints.
 {% endset %}
 
 {% set notes %}
   <bolt-ol>
-    <bolt-li>The <bolt-code-snippet display="inline">srcset</bolt-code-snippet> attribute accepts one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of a URL to an image and a width descriptor. For example, <bolt-code-snippet display="inline">srcset="image/400x300.jpg 400w, image/800x600.jpg 800w, image/1600x1200.jpg 1600w"</bolt-code-snippet>.</bolt-li>
-    <bolt-li>The <bolt-code-snippet display="inline">sizes</bolt-code-snippet> attribute should contain a number value with the  <bolt-code-snippet display="inline">vw</bolt-code-snippet> unit. The number should be determined by the largest size which the image could take up relative to screen size. For example, a large image taking up full width of a page should use something around <bolt-code-snippet display="inline">96vw</bolt-code-snippet> to <bolt-code-snippet display="inline">100vw</bolt-code-snippet>; a small image taking up 1 column of a 3-column layout should use <bolt-code-snippet display="inline">33vw</bolt-code-snippet>.</bolt-li>
+    <bolt-li>The <code>srcset</code> attribute accepts one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of a URL to an image and a width descriptor. For example, <code>srcset="image/400x300.jpg 400w, image/800x600.jpg 800w, image/1600x1200.jpg 1600w"</code>.</bolt-li>
+    <bolt-li>The <code>sizes</code> attribute should contain a number value with the  <code>vw</code> unit. The number should be determined by the largest size which the image could take up relative to screen size. For example, a large image taking up full width of a page should use something around <code>96vw</code> to <code>100vw</code>; a small image taking up 1 column of a 3-column layout should use <code>33vw</code>.</bolt-li>
     <bolt-li>For more advanced use cases, reference the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" class="e-bolt-text-link">MDN article on responsive images</a>.</bolt-li>
   </bolt-ol>
 {% endset %}

docs-site/src/pages/pattern-lab/_patterns/20-elements/image/15-image-fill.twig

@@ -1,9 +1,9 @@
 {% set description %}
-  The <bolt-code-snippet display="inline">fill</bolt-code-snippet> prop will stretch the image to fill up 100% width of its parent container, ignoring the image&rsquo;s true width and height.
+  The <code>fill</code> prop will stretch the image to fill up 100% width of its parent container, ignoring the image&rsquo;s true width and height.
 {% endset %}
 
 {% set notes %}
-  Even though they are ignored, it is best practice to always define the <bolt-code-snippet display="inline">width</bolt-code-snippet> and <bolt-code-snippet display="inline">height</bolt-code-snippet> attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.
+  Even though they are ignored, it is best practice to always define the <code>width</code> and <code>height</code> attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.
 {% endset %}
 
 {% set demo %}