Merge pull request #43 from BouyguesTelecom/add/style-price-props

💅 Add style price props
BouyguesTelecom · May 15, 2024 · 988ac58 · 988ac58
2 parents 6816076 + 3728897
commit 988ac58
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/assets",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.22",
   "description": "Trilogy assets include all Open Source Fonts & Icons",
   "author": "Bouygues Telecom",
   "type": "module",

diff --git a/packages/react/components/price/Price.native.tsx b/packages/react/components/price/Price.native.tsx
@@ -14,6 +14,7 @@ import { StatesContext } from "../../context/providerStates"
  * @param period {string} Period for Price (mois)
  * @param showCents {boolean} Display cents
  * @param level {PriceLevel} Price custom size
+ * @param style {Object} Additional style
  * @param inverted {boolean} Inverted Price Color
  * @param children {React.ReactNode}
  * @param align {Alignable} Price alignement
@@ -37,6 +38,7 @@ const Price = ({
   accessibilityLabel,
   striked,
   suptitle,
+  style,
   ...others
 }: PriceProps): JSX.Element => {
   const statesContext = useContext(StatesContext)
@@ -150,19 +152,23 @@ const Price = ({
         (level == PriceLevel.LEVEL7 && "normal") ||
         "bold",
       color: color,
+      fontFamily: "poppins-semibold"
     },
     cents: {
       fontWeight: "bold",
       color: color,
       fontSize: centsLevel,
+      fontFamily: "poppins-semibold"
     },
     period: {
       color: color,
       fontSize: centsLevel,
+      fontFamily: "poppins-semibold"
     },
     inlinePeriod: {
       color: color,
       fontSize: priceLevel,
+      fontFamily: "poppins-semibold"
     },
     striked: {
       position: "absolute",
@@ -198,37 +204,37 @@ const Price = ({
 
   return (
     <>
-      {suptitle && <Text style={styles.suptitle}>{suptitle}</Text>}
+      {suptitle && <Text style={[styles.suptitle, style?.suptitle]}>{suptitle}</Text>}
       <View
-        style={styles.container}
+        style={[styles.container, style?.container]}
         accessible={!!priceAccessibilityLabel}
         accessibilityLabel={priceAccessibilityLabel}
         testID={priceTestId}
         {...others}
       >
         {inline ? (
           <View style={[styles.priceContainer, { flexDirection: "row" }]}>
-            {striked && <Text style={styles.striked}></Text>}
-            <Text style={styles.price}>
+            {striked && <Text style={[styles.striked, style?.striked]}></Text>}
+            <Text style={[styles.price, style?.price]}>
               {whole}€{showCents && cents}
             </Text>
-            <Text style={styles.inlinePeriod}>
+            <Text style={[styles.inlinePeriod, style?.inlinePeriod]}>
               {mention}
               {period && ` / ${period}`}
             </Text>
           </View>
         ) : (
           <View style={[{ flexDirection: "row" }]}>
-            {striked && <Text style={styles.striked}></Text>}
-            <View style={styles.priceContainer}>
-              <Text style={styles.price}>{`${whole}`}</Text>
+            {striked && <Text style={[styles.striked, style?.striked]}></Text>}
+            <View style={[styles.priceContainer, style?.priceContainer]}>
+              <Text style={[styles.price, style?.price]}>{`${whole}`}</Text>
             </View>
-            <View style={styles.priceContainer}>
-              <Text style={styles.cents}>
+            <View style={[styles.priceContainer, style?.priceContainer]}>
+              <Text style={[styles.cents, style?.cents]}>
                 €{showCents && (cents || "00")}
                 {mention && mention}
               </Text>
-              <Text style={styles.period}>{period && `/${period}`}</Text>
+              <Text style={[styles.period, style?.period]}>{period && `/${period}`}</Text>
             </View>
           </View>
         )}

diff --git a/packages/react/components/price/PriceProps.ts b/packages/react/components/price/PriceProps.ts
@@ -2,6 +2,9 @@ import { PriceLevel, PriceLevelValues } from "./PriceEnum"
 import { Invertable } from "../../objects/facets/Invertable"
 import { Accessibility, AlertProps, AlignableProps } from "../../objects"
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Styles = { [key: string]: any }
+
 /**
  * Price Interface
  */
@@ -20,4 +23,5 @@ export interface PriceProps
   className?: string;
   striked?: boolean;
   suptitle?: string;
+  style?: Styles
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/react",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.22",
   "type": "module",
   "author": "Bouygues Telecom",
   "files": [

diff --git a/packages/react/version.ts b/packages/react/version.ts
@@ -1 +1 @@
-export const version = "0.0.1-beta.21"
+export const version = "0.0.1-beta.22"
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.22"
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [

diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/vanilla",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.22",
   "author": "Bouygues Telecom",
   "main": "lib/trilogy-ds-vanilla.js",
   "scripts": {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const version = "0.0.1-beta.21"
		export const version = "0.0.1-beta.22"