From 70ee78757b35966f1c891c5c307a9ae9e29d0cff Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Wed, 26 Apr 2023 12:46:03 -0700
Subject: [PATCH] Strong tag support in Text component (#18816)

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 .../component-library/text/README.mdx         | 19 +++++++++++++++++++
 .../component-library/text/text.scss          |  4 ++++
 .../component-library/text/text.stories.tsx   | 11 +++++++++++
 3 files changed, 34 insertions(+)

diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index 0aa0499a3..3ca145b4d 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -335,6 +335,25 @@ import { Text, TextDirection } from '../../component-library';
 </Text>
 ```
 
+### Strong
+
+Using the `as` prop with the value of `strong` will render the `Text` component as a `strong` element and any `strong` emlements used within a `Text` component will be supported with bold styles.
+
+<Canvas>
+  <Story id="components-componentlibrary-text--strong" />
+</Canvas>
+
+```jsx
+import { Text } from '../../component-library';
+
+<Text as="strong">
+  This is an as="strong" demo.
+</Text>
+<Text>
+  This is a <strong>strong element</strong> demo.
+</Text>
+```
+
 ### Box Props
 
 Use any valid box props [Box](/?path=/story/components-ui-box--default-story) component props to the Text component.
diff --git a/ui/components/component-library/text/text.scss b/ui/components/component-library/text/text.scss
index da77a1f19..b6331d7e3 100644
--- a/ui/components/component-library/text/text.scss
+++ b/ui/components/component-library/text/text.scss
@@ -33,6 +33,10 @@ $text-variants: (
   color: var(--color-text-default);
   font-family: var(--font-family-sans);
 
+  > strong {
+    font-weight: var(--font-weight-bold);
+  }
+
   @each $type, $size-options in $text-variants {
     &--#{$type} {
       // Sets a default
diff --git a/ui/components/component-library/text/text.stories.tsx b/ui/components/component-library/text/text.stories.tsx
index be82bdb2a..a12965c56 100644
--- a/ui/components/component-library/text/text.stories.tsx
+++ b/ui/components/component-library/text/text.stories.tsx
@@ -226,3 +226,14 @@ export const TextDirectionStory: ComponentStory<typeof Text> = (args) => (
     </Text>
   </Box>
 );
+
+export const Strong: ComponentStory<typeof Text> = (args) => (
+  <>
+    <Text {...args} as="strong">
+      This is an as="strong" demo.
+    </Text>
+    <Text {...args}>
+      This is a <strong>strong element</strong> demo.
+    </Text>
+  </>
+);