feat: dsw-3748-typespacing integration (#407)

Co-authored-by: Ashley Watson-Nolan <nolly00@gmail.com>

Author: pie-design-system-bot

nextjs-app-v14/src/app/integrations/typography-classes/typography-classes.tsx

@@ -31,6 +31,10 @@ export default function TypographyClasses() {
             <a href="#" className="u-font-body-l-link">This is a link within the body text.</a>
         </p>
 
+        <p className="u-font-body-l u-typographySpacing">This is a main paragraph of body text (L) with opt-in paragraph spacing.
+          <a href="#" className="u-font-body-l-link u-typographySpacing">This is a link within the body text with opt-in spacing.</a>
+        </p>
+
         <p className="u-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
             <a href="#" className="u-font-body-s-link">This is a small link in the secondary body text.</a>
         </p>
@@ -57,6 +61,10 @@ export default function TypographyClasses() {
             <a href="#" className="u-font-caption-link">Caption link example.</a>
         </p>
 
+    <p className="u-font-caption u-typographySpacing">This is a standard caption with opt-in paragraph spacing.
+      <a href="#" className="u-font-caption-link u-typographySpacing">Caption link example with opt-in spacing.</a>
+    </p>
+
         <p className="u-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
             <a href="#" className="u-font-caption-strong-link">Strong caption link.</a>
         </p>

nextjs-app-v14/src/app/integrations/typography-mixins/typography-mixins.tsx

@@ -32,6 +32,10 @@ export default function TypographyDemo() {
             <a href="#" className="test-font-body-l-link">This is a link within the body text.</a>
         </p>
 
+        <p className="test-font-body-l test-font-spacing-body-l">This is a main paragraph of body text (L) with typography-spacing mixin applied.
+          <a href="#" className="test-font-body-l-link">This is a link within the body text.</a>
+        </p>
+
         <p className="test-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
             <a href="#" className="test-font-body-s-link">This is a small link in the secondary body text.</a>
         </p>
@@ -58,6 +62,10 @@ export default function TypographyDemo() {
             <a href="#" className="test-font-caption-link">Caption link example.</a>
         </p>
 
+        <p className="test-font-caption test-font-spacing-caption">This is a standard caption with typography-spacing mixin applied.
+          <a href="#" className="test-font-caption-link">Caption link example.</a>
+        </p>
+
         <p className="test-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
             <a href="#" className="test-font-caption-strong-link">Strong caption link.</a>
         </p>

nextjs-app-v14/src/styles/typography-mixins.scss

@@ -102,3 +102,12 @@
 .test-font-caption-strong-link {
     @include font-theme('font-caption-strong-link');
 }
+
+// Typography spacing classes
+.test-font-spacing-body-l {
+    @include typography-spacing('font-body-l');
+}
+
+.test-font-spacing-caption {
+    @include typography-spacing('font-caption');
+}

nextjs-app-v15/src/app/integrations/typography-classes/typography-classes.tsx

@@ -31,6 +31,10 @@ export default function TypographyDemo() {
             <a href="#" className="u-font-body-l-link">This is a link within the body text.</a>
         </p>
 
+        <p className="u-font-body-l u-typographySpacing">This is a main paragraph of body text (L) with opt-in paragraph spacing.
+          <a href="#" className="u-font-body-l-link u-typographySpacing">This is a link within the body text with opt-in spacing.</a>
+        </p>
+
         <p className="u-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
             <a href="#" className="u-font-body-s-link">This is a small link in the secondary body text.</a>
         </p>
@@ -57,6 +61,10 @@ export default function TypographyDemo() {
             <a href="#" className="u-font-caption-link">Caption link example.</a>
         </p>
 
+    <p className="u-font-caption u-typographySpacing">This is a standard caption with opt-in paragraph spacing.
+      <a href="#" className="u-font-caption-link u-typographySpacing">Caption link example with opt-in spacing.</a>
+    </p>
+
         <p className="u-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
             <a href="#" className="u-font-caption-strong-link">Strong caption link.</a>
         </p>

nextjs-app-v15/src/app/integrations/typography-mixins/typography-mixins.tsx

@@ -32,6 +32,10 @@ export default function TypographyDemo() {
             <a href="#" className="test-font-body-l-link">This is a link within the body text.</a>
         </p>
 
+        <p className="test-font-body-l test-font-spacing-body-l">This is a main paragraph of body text (L) with typography-spacing mixin applied.
+          <a href="#" className="test-font-body-l-link">This is a link within the body text.</a>
+        </p>
+
         <p className="test-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
             <a href="#" className="test-font-body-s-link">This is a small link in the secondary body text.</a>
         </p>
@@ -58,6 +62,10 @@ export default function TypographyDemo() {
             <a href="#" className="test-font-caption-link">Caption link example.</a>
         </p>
 
+        <p className="test-font-caption test-font-spacing-caption">This is a standard caption with typography-spacing mixin applied.
+          <a href="#" className="test-font-caption-link">Caption link example.</a>
+        </p>
+
         <p className="test-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
             <a href="#" className="test-font-caption-strong-link">Strong caption link.</a>
         </p>

nextjs-app-v15/src/styles/typography-mixins.scss

@@ -102,3 +102,12 @@
 .test-font-caption-strong-link {
     @include font-theme('font-caption-strong-link');
 }
+
+// Typography spacing classes
+.test-font-spacing-body-l {
+    @include typography-spacing('font-body-l');
+}
+
+.test-font-spacing-caption {
+    @include typography-spacing('font-caption');
+}

nuxt-app/pages/integrations/typography-classes.vue

@@ -26,6 +26,10 @@
                 <a href="#" class="u-font-body-l-link">This is a link within the body text.</a>
             </p>
 
+            <p class="u-font-body-l u-typographySpacing">This is a main paragraph of body text (L) with opt-in paragraph spacing.
+                <a href="#" class="u-font-body-l-link u-typographySpacing">This is a link within the body text with opt-in spacing.</a>
+            </p>
+
             <p class="u-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
                 <a href="#" class="u-font-body-s-link">This is a small link in the secondary body text.</a>
             </p>
@@ -52,6 +56,10 @@
                 <a href="#" class="u-font-caption-link">Caption link example.</a>
             </p>
 
+            <p class="u-font-caption u-typographySpacing">This is a standard caption with opt-in paragraph spacing.
+                <a href="#" class="u-font-caption-link u-typographySpacing">Caption link example with opt-in spacing.</a>
+            </p>
+
             <p class="u-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
                 <a href="#" class="u-font-caption-strong-link">Strong caption link.</a>
             </p>

nuxt-app/pages/integrations/typography-mixins.vue

@@ -26,6 +26,10 @@
                 <a href="#" class="test-font-body-l-link">This is a link within the body text.</a>
             </p>
 
+            <p class="test-font-body-l test-font-spacing-body-l">This is a main paragraph of body text (L) with typography-spacing mixin applied.
+                <a href="#" class="test-font-body-l-link">This is a link within the body text.</a>
+            </p>
+
             <p class="test-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
                 <a href="#" class="test-font-body-s-link">This is a small link in the secondary body text.</a>
             </p>
@@ -52,6 +56,10 @@
                 <a href="#" class="test-font-caption-link">Caption link example.</a>
             </p>
 
+            <p class="test-font-caption test-font-spacing-caption">This is a standard caption with typography-spacing mixin applied.
+                <a href="#" class="test-font-caption-link">Caption link example.</a>
+            </p>
+
             <p class="test-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
                 <a href="#" class="test-font-caption-strong-link">Strong caption link.</a>
             </p>
@@ -172,4 +180,13 @@ definePageMeta({
 .test-font-caption-strong-link {
     @include font-theme('font-caption-strong-link');
 }
+
+// Typography spacing classes
+.test-font-spacing-body-l {
+    @include typography-spacing('font-body-l');
+}
+
+.test-font-spacing-caption {
+    @include typography-spacing('font-caption');
+}
 </style>

vanilla-app/css/typography-mixins.scss

@@ -102,3 +102,12 @@
 .test-font-caption-strong-link {
     @include font-theme('font-caption-strong-link');
 }
+
+/* Typography spacing classes */
+.test-font-spacing-body-l {
+    @include typography-spacing('font-body-l');
+}
+
+.test-font-spacing-caption {
+    @include typography-spacing('font-caption');
+}

vanilla-app/integrations/typography-classes.html

@@ -46,6 +46,10 @@ <h6 class="u-font-heading-xs-italic">Tiny Header Italic (XS)</h6>
             <a href="#" class="u-font-body-l-link">This is a link within the body text.</a>
         </p>
 
+        <p class="u-font-body-l u-typographySpacing">This is a main paragraph of body text (L) with opt-in paragraph spacing.
+            <a href="#" class="u-font-body-l-link u-typographySpacing">This is a link within the body text with opt-in spacing.</a>
+        </p>
+
         <p class="u-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact
             information.
             <a href="#" class="u-font-body-s-link">This is a small link in the secondary body text.</a>
@@ -74,6 +78,10 @@ <h6 class="u-font-heading-xs-italic">Tiny Header Italic (XS)</h6>
             <a href="#" class="u-font-caption-link">Caption link example.</a>
         </p>
 
+        <p class="u-font-caption u-typographySpacing">This is a standard caption with opt-in paragraph spacing.
+            <a href="#" class="u-font-caption-link u-typographySpacing">Caption link example with opt-in spacing.</a>
+        </p>
+
         <p class="u-font-caption-strong">This is a strong caption, useful for crucial metadata or brief
             labels.
             <a href="#" class="u-font-caption-strong-link">Strong caption link.</a>