feat: strike through text and estimated cost ordersummary

Author: lisalupi

.changeset/itchy-taxes-jam.md

@@ -0,0 +1,8 @@
+---
+"@ultraviolet/plus": patch
+---
+
+`OrderSummary`: 
+- new prop `totalPriceInfoPlacement` for the placement of `totalPriceInfo` 
+- new prop `hideBeforePrice` to only show discounted price
+- `discount = 1` interpreted as 100% instead of 1€ for the total price

.changeset/wet-dingos-clean.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Text`: fix prop strikeThrough by removing useless `textDecoration` in variant definition

packages/plus/src/components/OrderSummary/NonScrollableContent.tsx

@@ -12,29 +12,33 @@ type NonScrollableContentProps = {
   footer: ReactNode
   children: ReactNode
   totalPriceInfo?: ReactNode
+  totalPriceInfoPlacement?: 'left' | 'right'
   totalPriceDescription?: ReactNode
   additionalInfo?: string
   hideDetails: boolean
   unit: TimeUnit
+  hideBeforePrice?: boolean
 }
 
 export const NonScrollableContent = ({
   totalPrice,
   footer,
   children,
   totalPriceInfo,
+  totalPriceInfoPlacement,
   hideDetails,
   unit,
   totalPriceDescription,
   additionalInfo,
+  hideBeforePrice,
 }: NonScrollableContentProps) => {
   const { locales } = useContext(OrderSummaryContext)
 
   return (
     <Stack className={orderSummaryNonScrollableContainer} gap={3}>
       {children}
       <Stack alignItems="center" direction="row" justifyContent="space-between">
-        {totalPriceInfo ? (
+        {totalPriceInfo && totalPriceInfoPlacement === 'left' ? (
           <Stack>
             <Stack alignItems="center" direction="row" gap={1}>
               <Text
@@ -63,28 +67,9 @@ export const NonScrollableContent = ({
             {totalPriceDescription}
           </Stack>
         )}
-        {totalPrice.totalPrice === totalPrice.totalPriceWithDiscount ? (
-          <Text
-            as="span"
-            data-testid="total-price"
-            prominence="strong"
-            sentiment="neutral"
-            variant="headingSmallStrong"
-          >
-            <DisplayPrice beforeOrAfter="after" price={totalPrice} />
-            {hideDetails ? `/${unit}` : null}
-          </Text>
-        ) : (
-          <Stack alignItems="center" direction="row" gap={1}>
-            <Text
-              as="span"
-              prominence="weak"
-              sentiment="neutral"
-              strikeThrough
-              variant="bodySmallStrong"
-            >
-              <DisplayPrice beforeOrAfter="before" price={totalPrice} />
-            </Text>
+        <Stack alignItems="end" direction="column">
+          {totalPrice.totalPrice === totalPrice.totalPriceWithDiscount ||
+          hideBeforePrice ? (
             <Text
               as="span"
               data-testid="total-price"
@@ -95,8 +80,33 @@ export const NonScrollableContent = ({
               <DisplayPrice beforeOrAfter="after" price={totalPrice} />
               {hideDetails ? `/${unit}` : null}
             </Text>
-          </Stack>
-        )}
+          ) : (
+            <Stack alignItems="center" direction="row" gap={1}>
+              <Text
+                as="span"
+                prominence="weak"
+                sentiment="neutral"
+                strikeThrough
+                variant="bodySmallStrong"
+              >
+                <DisplayPrice beforeOrAfter="before" price={totalPrice} />
+              </Text>
+              <Text
+                as="span"
+                data-testid="total-price"
+                prominence="strong"
+                sentiment="neutral"
+                variant="headingSmallStrong"
+              >
+                <DisplayPrice beforeOrAfter="after" price={totalPrice} />
+                {hideDetails ? `/${unit}` : null}
+              </Text>
+            </Stack>
+          )}
+          {totalPriceInfo && totalPriceInfoPlacement === 'right'
+            ? totalPriceInfo
+            : null}
+        </Stack>
       </Stack>
       {footer}
     </Stack>

packages/plus/src/components/OrderSummary/__stories__/TotalPriceInfo.stories.tsx

@@ -6,18 +6,21 @@ export const TotalPriceInfo = Template.bind({})
 TotalPriceInfo.args = {
   ...Template.args,
   discount: 0.5,
+  hideBeforePrice: false,
   hideTimeUnit: false,
   totalPriceInfo: (
     <Badge prominence="strong" sentiment="warning" size="small">
       50% OFF DURING BETA
     </Badge>
   ),
+  totalPriceInfoPlacement: 'left',
 }
 
 TotalPriceInfo.parameters = {
   docs: {
     description: {
-      story: 'Add information right beneath the total price.',
+      story:
+        'Add information right beneath the total price. You can place it on the left or the right using prop `totalPriceInfoPlacement`. You can also hide the undiscounted price using prop `hideBeforePrice`.',
     },
   },
 }