Add ButtonListDirectionEnum

BouyguesTelecom · Nov 13, 2024 · 57add51 · 57add51
1 parent d2e9318
commit 57add51
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 46 deletions.
diff --git a/examples/react-template/screens/Button.tsx b/examples/react-template/screens/Button.tsx
@@ -8,18 +8,20 @@ import {
   Spacer,
   Title,
   TitleLevels,
-} from "@trilogy-ds/react/components";
-import React from "react";
+} from '@trilogy-ds/react/components'
+import * as React from 'react'
+import { ButtonListDirectionEnum } from '@trilogy-ds/react/lib/components/button/list/ButtonListEnum'
+import { Alignable } from '@trilogy-ds/react'
 
 const Separator = () => {
   return (
     <>
-      <Spacer size={10}/>
-      <Divider/>
-      <Spacer size={50}/>
+      <Spacer size={10} />
+      <Divider />
+      <Spacer size={50} />
     </>
-  );
-};
+  )
+}
 
 export const ButtonScreen = (): JSX.Element => {
   return (
@@ -33,6 +35,15 @@ export const ButtonScreen = (): JSX.Element => {
         })}
       </ButtonList>
       <Separator/>
+      {/*  ======== list column ======== */}
+      <Title level={TitleLevels.TWO}>List column</Title>
+      <Spacer size={10}/>
+      <ButtonList direction={ButtonListDirectionEnum.COLUMN} align={Alignable.ALIGNED_START}>
+        {Object.values(ButtonVariant).map((variant, index) => {
+          return <Button variant={variant} key={index}>{variant}</Button>;
+        })}
+      </ButtonList>
+      <Separator/>
 
       {/*  ======== loading & variant ======== */}
       <Title level={TitleLevels.TWO}>loading + variant </Title>

diff --git a/packages/react/components/button/list/ButtonListEnum.ts b/packages/react/components/button/list/ButtonListEnum.ts
@@ -0,0 +1,6 @@
+export enum ButtonListDirectionEnum {
+  ROW = 'row',
+  COLUMN = 'column',
+}
+
+export type ButtonListDirectionEnumValues = `${ButtonListDirectionEnum}`
diff --git a/packages/react/components/button/list/ButtonListProps.ts b/packages/react/components/button/list/ButtonListProps.ts
@@ -2,6 +2,7 @@ import { Alignable, AlignableValues } from '../../../objects'
 import type { DividerProps } from '../../../components/divider/DividerProps'
 import type { ButtonProps } from '../../../components/button/ButtonProps'
 import { CommonProps } from '../../../objects/facets/CommonProps'
+import { ButtonListDirectionEnum, ButtonListDirectionEnumValues } from '@/components/button/list/ButtonListEnum'
 
 type ButtonListChildrenTypes = React.ReactElement<ButtonProps | DividerProps> | undefined
 
@@ -16,6 +17,6 @@ export interface ButtonListProps {
  * Button List Web Interface
  */
 export interface ButtonListWebProps extends ButtonListProps, CommonProps {
-  direction?: 'row' | 'column'
+  direction?: ButtonListDirectionEnum | ButtonListDirectionEnumValues
   align?: Alignable | AlignableValues
 }
diff --git a/packages/react/components/price/Price.native.tsx b/packages/react/components/price/Price.native.tsx
@@ -40,7 +40,6 @@ const Price = ({
   level,
   inverted,
   align,
-  inline,
   testId,
   accessibilityLabel,
   oldAmount,
@@ -156,11 +155,7 @@ const Price = ({
     priceContainer: {
       padding: 0,
       paddingLeft:
-        (inline && 0) ||
-        (level == PriceLevel.FIVE && 2) ||
-        (level == PriceLevel.SIX && 2) ||
-        (level == PriceLevel.SEVEN && 2) ||
-        4,
+        (level == PriceLevel.FIVE && 2) || (level == PriceLevel.SIX && 2) || (level == PriceLevel.SEVEN && 2) || 4,
       flexDirection: 'column',
       justifyContent: 'center',
       width: 'auto',
@@ -213,7 +208,7 @@ const Price = ({
       height: 1,
       backgroundColor: (inverted && invertedColor) || primaryColor,
       width: period ? '96%' : '100%',
-      transform: [{ rotate: inline ? '-10deg' : strikedRotateByLevel() }],
+      transform: [{ rotate: strikedRotateByLevel() }],
       bottom: strikedBottomByLevel(),
       left: 1,
       zIndex: 20,
@@ -281,18 +276,7 @@ const Price = ({
           testID={priceTestId}
           {...others}
         >
-          {inline ? (
-            <View style={[styles.priceContainer, { flexDirection: 'row' }]}>
-              {oldAmount && <Text style={[styles.striked]}></Text>}
-              <Text style={[styles.price, styles.priceFontSize, styles.priceColor]}>
-                {whole}€{hideCents && cents}
-              </Text>
-              <Text style={[styles.inlinePeriod, styles.priceColor]}>
-                {mention}
-                {period && ` / ${period}`}
-              </Text>
-            </View>
-          ) : (
+          {
             <>
               {oldAmount && (
                 <View style={[{ flexDirection: 'row' }]}>
@@ -331,7 +315,7 @@ const Price = ({
                 </View>
               )}
             </>
-          )}
+          }
         </View>
         {tagValue && (
           <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 5 }}>

diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -36,7 +36,6 @@ const Price = ({
   level,
   inverted,
   align,
-  inline,
   accessibilityLabel,
   oldAmount,
   overline,
@@ -46,21 +45,11 @@ const Price = ({
 }: PriceProps): JSX.Element => {
   const { styled } = useTrilogyContext()
 
-  const classes = hashClass(
-    styled,
-    clsx('price', inverted && is('inverted'), inline && is('inlined'), overline && has('suptitle'), className),
-  )
+  const classes = hashClass(styled, clsx('price', inverted && is('inverted'), overline && has('suptitle'), className))
 
   const classesStrike = hashClass(
     styled,
-    clsx(
-      'price',
-      inverted && is('inverted'),
-      inline && is('inlined'),
-      oldAmount && 'strike',
-      overline && has('suptitle'),
-      className,
-    ),
+    clsx('price', inverted && is('inverted'), oldAmount && 'strike', overline && has('suptitle'), className),
   )
 
   let amountComponent = null
@@ -75,14 +64,14 @@ const Price = ({
 
     let cents = checkCents(absoluteAmountStrike.toString().split(/[.,]/)[1]?.substring(0, 2) || '')
     cents = (cents && cents.length === 1 && `${cents}0`) || cents
-    const centsDisplayed = (inline && !hideCents && `,${cents || '00'} €`) || (!hideCents && `€${cents || '00'}`) || '€'
+    const centsDisplayed = (!hideCents && `,${cents || '00'} €`) || (!hideCents && `€${cents || '00'}`) || '€'
 
     oldAmountComponent = (
       <span aria-hidden='true' className={classesStrike} {...others}>
         <Text markup={TextMarkup.SPAN}>{`${wholeStrike}`}</Text>
         <span className={hashClass(styled, clsx('price-details'))}>
           <span className={hashClass(styled, clsx('cents'))}>
-            {inline && centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
+            {centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
             {mention && <sup>{mention}</sup>}
           </span>
           {period && <span className={hashClass(styled, clsx('period'))}>/{period}</span>}
@@ -99,14 +88,14 @@ const Price = ({
 
     let cents = checkCents(absoluteAmount.toString().split(/[.,]/)[1]?.substring(0, 2) || '')
     cents = (cents && cents.length === 1 && `${cents}0`) || cents
-    const centsDisplayed = (inline && !hideCents && `,${cents || '00'} €`) || (!hideCents && `€${cents || '00'}`) || '€'
+    const centsDisplayed = (!hideCents && `,${cents || '00'} €`) || (!hideCents && `€${cents || '00'}`) || '€'
 
     amountComponent = (
       <span aria-hidden='true' aria-label={accessibilityLabel} className={classes} {...others}>
         <Text markup={TextMarkup.SPAN}>{`${whole}`}</Text>
         <span className={hashClass(styled, clsx('price-details'))}>
           <span className={hashClass(styled, clsx('cents'))}>
-            {inline && centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
+            {centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
             {mention && <sup>{mention}</sup>}
           </span>
           {period && <span className={hashClass(styled, clsx('period'))}>/{period}</span>}

diff --git a/packages/react/components/price/PriceProps.ts b/packages/react/components/price/PriceProps.ts
@@ -12,7 +12,6 @@ export interface PriceProps extends Invertable, Accessibility, AlignableProps, D
   mention?: string
   period?: string
   hideCents?: boolean
-  inline?: boolean
   level?: PriceLevel | PriceLevelValues
   oldAmount?: number
   overline?: string