From 5ef64caeb722f14eff7096922215efa60350fede Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Tue, 17 Dec 2024 15:20:49 +0100
Subject: [PATCH] fix(Text): add strike through on text
---
.changeset/dry-fishes-allow.md | 5 ++++
.../EstimateCost/Components/Item.tsx | 6 ++++
.../__stories__/NewPrice.stories.tsx | 30 +++++++++++++++++++
.../__stories__/index.stories.tsx | 1 +
packages/ui/src/components/Text/index.tsx | 9 +++++-
5 files changed, 50 insertions(+), 1 deletion(-)
create mode 100644 .changeset/dry-fishes-allow.md
create mode 100644 packages/plus/src/components/EstimateCost/__stories__/NewPrice.stories.tsx
diff --git a/.changeset/dry-fishes-allow.md b/.changeset/dry-fishes-allow.md
new file mode 100644
index 0000000000..3aaff6445e
--- /dev/null
+++ b/.changeset/dry-fishes-allow.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Add `strikethrough` prop on `<Text />` component
diff --git a/packages/plus/src/components/EstimateCost/Components/Item.tsx b/packages/plus/src/components/EstimateCost/Components/Item.tsx
index 981ce7d458..62a3e213fa 100644
--- a/packages/plus/src/components/EstimateCost/Components/Item.tsx
+++ b/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
diff --git a/packages/plus/src/components/EstimateCost/__stories__/NewPrice.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/NewPrice.stories.tsx
new file mode 100644
index 0000000000..5d3544152d
--- /dev/null
+++ b/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: '',
+ },
+ },
+}
diff --git a/packages/plus/src/components/EstimateCost/__stories__/index.stories.tsx b/packages/plus/src/components/EstimateCost/__stories__/index.stories.tsx
index 6cb3f0228f..cf91926e46 100644
--- a/packages/plus/src/components/EstimateCost/__stories__/index.stories.tsx
+++ b/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'
diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx
index cd43d1d670..473ed9af3e 100644
--- a/packages/ui/src/components/Text/index.tsx
+++ b/packages/ui/src/components/Text/index.tsx
@@ -36,6 +36,7 @@ const generateStyles = ({
italic,
underline,
whiteSpace,
+ strikeThrough,
}: {
placement?: PlacementProps
prominence: ProminenceProps
@@ -47,6 +48,7 @@ const generateStyles = ({
italic: boolean
underline: boolean
whiteSpace?: WhiteSpaceProps
+ strikeThrough?: boolean
}): string => {
// stronger is available only for neutral sentiment
const definedProminence =
@@ -90,7 +92,7 @@ const generateStyles = ({
}
${italic ? `font-style: italic;` : ''}
${underline ? `text-decoration: underline;` : ''}
-
+ ${strikeThrough ? `text-decoration: line-through;` : ''}
`
}
@@ -114,6 +116,7 @@ type TextProps = {
dir?: 'ltr' | 'rtl' | 'auto'
htmlFor?: string
'data-testid'?: string
+ strikeThrough?: boolean
whiteSpace?: WhiteSpaceProps
}
@@ -129,6 +132,7 @@ const StyledText = styled('div', {
'disabled',
'italic',
'underline',
+ 'strikeThrough',
'whiteSpace',
].includes(prop),
})<{
@@ -141,6 +145,7 @@ const StyledText = styled('div', {
italic: boolean
underline: boolean
htmlFor?: string
+ strikeThrough?: boolean
whiteSpace?: WhiteSpaceProps
}>(generateStyles)
@@ -160,6 +165,7 @@ export const Text = ({
disabled = false,
italic = false,
underline = false,
+ strikeThrough = false,
id,
dir,
whiteSpace,
@@ -186,6 +192,7 @@ export const Text = ({
disabled={disabled}
italic={italic}
underline={underline}
+ strikeThrough={strikeThrough}
id={id}
dir={dir}
htmlFor={htmlFor}