[Text] Add optional decoration prop to Text for underline and line-th…

…rough styles (#9697)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

To avoid adding custom CSS in web for this common use-case. 

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

- Adds the optional prop `textDecorationLine` to the `Text` component to
allow passing the line-through style to the text which is a common
custom CSS case in the web repo (32 cases of line-through).

- Adds tests for these new style and the storybook story.
- Adds example to the style guide.


![Screenshot 2023-07-18 at 5 13 01
PM](https://github.com/Shopify/polaris/assets/22918527/11fa23ea-9cae-4d84-8c3c-da6ed875fa75)


![Screenshot 2023-07-19 at 1 28 05
PM](https://github.com/Shopify/polaris/assets/22918527/66f2d21c-d07d-409e-a912-90939a793626)


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {Page, LegacyStack, Text} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <LegacyStack vertical>
    <Text as="p" textDecorationLine="line-through">
      Sales this year
    </Text>
  </LegacyStack>
    </Page>
  );
}

```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Ananya Neogi <[email protected]>

.changeset/twelve-lizards-act.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added optional prop `TextDecorationLine` to `Text` to include a line-through decoration

polaris-react/src/components/Text/Text.scss

@@ -241,3 +241,7 @@
 .numeric {
   font-variant-numeric: tabular-nums lining-nums;
 }
+
+.line-through {
+  text-decoration-line: line-through;
+}

polaris-react/src/components/Text/Text.stories.tsx

@@ -146,3 +146,11 @@ export const InADefinitionList = () => (
     </Text>
   </dl>
 );
+
+export const WithTextDecoration = () => (
+  <LegacyStack vertical>
+    <Text as="p" textDecorationLine="line-through">
+      $100.00
+    </Text>
+  </LegacyStack>
+);

polaris-react/src/components/Text/Text.tsx

@@ -37,6 +37,8 @@ type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 type Color = 'success' | 'critical' | 'warning' | 'subdued' | 'text-inverse';
 
+type TextDecorationLine = 'line-through';
+
 export interface TextProps {
   /** Adjust horizontal alignment of text */
   alignment?: Alignment;
@@ -60,6 +62,8 @@ export interface TextProps {
   variant?: Variant;
   /** Visually hide the text */
   visuallyHidden?: boolean;
+  /** Add a line-through to the text */
+  textDecorationLine?: TextDecorationLine;
 }
 
 export const Text = ({
@@ -74,6 +78,7 @@ export const Text = ({
   truncate = false,
   variant,
   visuallyHidden = false,
+  textDecorationLine,
 }: TextProps) => {
   const Component = as || (visuallyHidden ? 'span' : 'p');
 
@@ -88,6 +93,7 @@ export const Text = ({
     numeric && styles.numeric,
     truncate && styles.truncate,
     visuallyHidden && styles.visuallyHidden,
+    textDecorationLine && styles[textDecorationLine],
   );
 
   return (

polaris-react/src/components/Text/tests/Text.test.tsx

@@ -112,4 +112,18 @@ describe('<Text />', () => {
       });
     });
   });
+
+  describe('textDecoration', () => {
+    it('adds text decoration line-through when passed', () => {
+      const headingText = mountWithApp(
+        <Text as="p" textDecorationLine="line-through">
+          {text}
+        </Text>,
+      );
+
+      expect(headingText).toContainReactComponent('p', {
+        className: expect.stringContaining('line-through'),
+      });
+    });
+  });
 });

polaris.shopify.com/content/components/typography/text.md

@@ -44,6 +44,10 @@ examples:
     title: Inheritance
     description: >-
       Inherits props from a parent Text container
+  - fileName: text-decoration.tsx
+    title: Decoration
+    description: >-
+      Use to define text decoration
 ---
 
 ## Variant tokens

polaris.shopify.com/pages/examples/text-decoration.tsx

@@ -0,0 +1,15 @@
+import {Text, LegacyStack} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function TextExample() {
+  return (
+    <LegacyStack vertical>
+      <Text as="p" textDecorationLine="line-through">
+        $100.00
+      </Text>
+    </LegacyStack>
+  );
+}
+
+export default withPolarisExample(TextExample);