fix(Text): add strike through on text

.changeset/dry-fishes-allow.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Add `strikethrough` prop on `<Text />` component

packages/plus/src/components/EstimateCost/Components/Item.tsx

@@ -218,6 +218,10 @@ type ItemProps = {
     | 'years'
     // Allow a string for unit but keep autocomplete for the above values
     | (string & NonNullable<unknown>)
+  /*
+   * To strike through the price
+   */
+  strikeThrough?: boolean
 }
 
 const StyleNoPriceItem = styled(Text)`
@@ -259,6 +263,7 @@ export const Item = memo(
     labelTextVariant, // To change left cell typography variant
     labelTextProminence, // To change left cell typography prominence
     notice, // To display a gray text below the label
+    strikeThrough, // To strike through the price
   }: ItemProps) => {
     const { locales, formatNumber } = useEstimateCost()
 
@@ -458,6 +463,7 @@ export const Item = memo(
               <>
                 <StyleNoPriceItem
                   as="p"
+                  strikeThrough={strikeThrough}
                   variant={noIterationText ? 'headingSmall' : 'bodyStrong'}
                   prominence={
                     computedItemPrice === 0 && computedMaxItemPrice === 0

packages/plus/src/components/EstimateCost/__stories__/NewPrice.stories.tsx

@@ -0,0 +1,30 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { EstimateCost } from '..'
+
+export const NewPrice: StoryFn<ComponentProps<typeof EstimateCost>> = props => (
+  <Stack gap={4}>
+    <EstimateCost {...props} hideOverlay>
+      <EstimateCost.Item label="New server" price={20} noBorder />
+    </EstimateCost>
+
+    <EstimateCost
+      {...props}
+      hideOverlay
+      hideTotal
+      description={false}
+      hideTimeUnit
+    >
+      <EstimateCost.Item strikeThrough label="Old server" price={10} noBorder />
+    </EstimateCost>
+  </Stack>
+)
+
+NewPrice.parameters = {
+  docs: {
+    description: {
+      story: '',
+    },
+  },
+}

packages/plus/src/components/EstimateCost/__stories__/index.stories.tsx

@@ -32,3 +32,4 @@ export { GlobalDiscount } from './GlobalDiscount.stories'
 export { LocalDiscount } from './LocalDiscount.stories'
 export { NegativeValues } from './NegativeValues.stories'
 export { Design } from './Design.stories'
+export { NewPrice } from './NewPrice.stories'

packages/ui/src/components/Text/index.tsx

@@ -35,6 +35,7 @@ const generateStyles = ({
   disabled,
   italic,
   underline,
+  strikeThrough,
 }: {
   placement?: PlacementProps
   prominence: ProminenceProps
@@ -45,6 +46,7 @@ const generateStyles = ({
   disabled: boolean
   italic: boolean
   underline: boolean
+  strikeThrough?: boolean
 }): string => {
   // stronger is available only for neutral sentiment
   const definedProminence =
@@ -87,6 +89,7 @@ const generateStyles = ({
     }
     ${italic ? `font-style: italic;` : ''}
     ${underline ? `text-decoration: underline;` : ''}
+    ${strikeThrough ? `text-decoration: line-through;` : ''}
   `
 }
 
@@ -110,6 +113,7 @@ type TextProps = {
   dir?: 'ltr' | 'rtl' | 'auto'
   htmlFor?: string
   'data-testid'?: string
+  strikeThrough?: boolean
 }
 
 const StyledText = styled('div', {
@@ -124,6 +128,7 @@ const StyledText = styled('div', {
       'disabled',
       'italic',
       'underline',
+      'strikeThrough',
     ].includes(prop),
 })<{
   placement?: PlacementProps
@@ -135,6 +140,7 @@ const StyledText = styled('div', {
   italic: boolean
   underline: boolean
   htmlFor?: string
+  strikeThrough?: boolean
 }>(generateStyles)
 
 /**
@@ -153,6 +159,7 @@ export const Text = ({
   disabled = false,
   italic = false,
   underline = false,
+  strikeThrough = false,
   id,
   dir,
   htmlFor,
@@ -178,6 +185,7 @@ export const Text = ({
         disabled={disabled}
         italic={italic}
         underline={underline}
+        strikeThrough={strikeThrough}
         id={id}
         dir={dir}
         htmlFor={htmlFor}