introduced ShwCarbonizationStylePreviewTypography to facilitate comparison of typographic styles

Author: didoo

showcase/app/components/page-carbonization/foundations/typography.gts

@@ -10,6 +10,7 @@ import ShwTextH1 from 'showcase/components/shw/text/h1';
 
 import ShwFlex from 'showcase/components/shw/flex';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+import ShwCarbonizationStylePreviewTypography from 'showcase/components/shw/carbonization/style-preview-typography';
 
 import { STYLES_COMBINATIONS } from 'showcase/components/page-foundations/typography/sub-sections/styles';
 
@@ -68,9 +69,10 @@ const TypographyCarbonization: TemplateOnlyComponent = <template>
           <ShwFlex @direction="column" as |SF|>
             {{#each weights as |weight|}}
               <SF.Item>
-                <p
-                  class="hds-typography-{{style}} hds-font-weight-{{weight}}"
-                >{{style}} / {{weight}}</p>
+                <ShwCarbonizationStylePreviewTypography
+                  @class="hds-typography-{{style}} hds-font-weight-{{weight}}"
+                  @label="{{style}} / {{weight}}"
+                />
               </SF.Item>
             {{/each}}
           </ShwFlex>
@@ -81,12 +83,12 @@ const TypographyCarbonization: TemplateOnlyComponent = <template>
               {{#each weights as |weight|}}
                 {{#let (get mappingItem.weights weight) as |mappedWeight|}}
                   <SF.Item>
-                    <p
-                      class="cds--type-{{mappingItem.mapsTo}}
-                        cds--type-{{mappedWeight}}"
-                    >{{mappingItem.mapsTo}}
+                    <ShwCarbonizationStylePreviewTypography
+                      @class="cds--type-{{mappingItem.mapsTo}} cds--type-{{mappedWeight}}"
+                      @label="{{mappingItem.mapsTo}}
                       /
-                      {{mappedWeight}}</p>
+                      {{mappedWeight}}"
+                    />
                   </SF.Item>
                 {{/let}}
               {{/each}}

showcase/app/components/shw/carbonization/style-preview-typography/index.gts

@@ -0,0 +1,20 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ShwLabel from 'showcase/components/shw/label';
+
+export interface ShwCarbonizationStylePreviewTypographySignature {
+  Args: {
+    class: string;
+    label: string;
+  };
+}
+
+const ShwCarbonizationStylePreviewTypography: TemplateOnlyComponent<ShwCarbonizationStylePreviewTypographySignature> =
+  <template>
+    <div class="shw-carbonization-style-preview-typography">
+      <ShwLabel>{{@label}}</ShwLabel>
+      <p class={{@class}}>Lorem ipsum 123 @&amp;%!?</p>
+    </div>
+  </template>;
+
+export default ShwCarbonizationStylePreviewTypography;

showcase/app/styles/app.scss

@@ -91,6 +91,7 @@
 
 @use "./showcase-components/carbonization/cds-theming";
 @use "./showcase-components/carbonization/comparison-grid";
+@use "./showcase-components/carbonization/style-preview-typography";
 @use "./showcase-components/carbonization/token-preview-color";
 @use "./showcase-pages/carbonization/segmented-group" as carbonization-segmented-group;
 @use "./showcase-pages/carbonization/typography" as carbonization-typography;

showcase/app/styles/showcase-components/carbonization/style-preview-typography.scss

@@ -0,0 +1,8 @@
+.shw-carbonization-style-preview-typography {
+  .shw-label {
+    margin-bottom: 4px;
+    color: var(--content-foreground-color);
+    font-size: 0.7rem;
+    opacity: 0.6;
+  }
+}