Merge pull request #16 from BouyguesTelecom/clean/bgColor

🧹 Clean colors into components
BouyguesTelecom · Apr 22, 2024 · 5fa70ca · 5fa70ca
2 parents 0598192 + 7298e42
commit 5fa70ca
Show file tree

Hide file tree

Showing 59 changed files with 363 additions and 984 deletions.
diff --git a/examples/react-template/screens/Menu.tsx b/examples/react-template/screens/Menu.tsx
@@ -3,6 +3,7 @@ import {
   Divider,
   IconName,
   Input,
+  Link,
   Menu,
   MenuItem,
   MenuScrolling,
@@ -20,23 +21,23 @@ export const MenuScreen = (): JSX.Element => {
       <Section>
         <Menu>
           <MenuItem onClick={() => alert("Click on item 1")} to="/">
-            <Text>Item 1</Text>
+            <Link>Item 1</Link>
           </MenuItem>
           <MenuItem to="/" active>
-            <Text>Item 2</Text>
+            <Link>Item 2</Link>
           </MenuItem>
           <MenuItem>
             <SubMenuItem>
               <MenuItem to="/">
-                <Text>Item 3.1</Text>
+                <Link>Item 3.1</Link>
               </MenuItem>
               <MenuItem to="/">
-                <Text>Item 3.2</Text>
+                <Link>Item 3.2</Link>
               </MenuItem>
             </SubMenuItem>
           </MenuItem>
           <MenuItem to="/">
-            <Text>Item 3.3</Text>
+            <Link>Item 3.3</Link>
           </MenuItem>
         </Menu>
       </Section>

diff --git a/examples/react-template/screens/Price.tsx b/examples/react-template/screens/Price.tsx
@@ -1,15 +1,15 @@
 import * as React from "react";
 import {
-  Section,
   Divider,
-  Title,
-  TitleLevels,
+  Hero,
   Price,
-  PriceVariant,
   PriceLevel,
-  Hero,
+  PriceVariant,
+  Section,
+  Title,
+  TitleLevels,
 } from "@trilogy-ds/react/components";
-import { Alignable, VariantState } from "@trilogy-ds/react/objects";
+import {Alignable, VariantState} from "@trilogy-ds/react/objects";
 
 export const PriceScreen = (): JSX.Element => {
   return (
@@ -23,6 +23,16 @@ export const PriceScreen = (): JSX.Element => {
         showCents
       />
 
+
+      <Price
+        variant={PriceVariant.PRIMARY}
+        level={"2"}
+        amount={18.99}
+        showCents
+        striked={true}
+      />
+
+
       <Divider />
       <Title level={TitleLevels.THREE}>Inlined</Title>
 
@@ -140,7 +150,7 @@ export const PriceScreen = (): JSX.Element => {
 
       <Title level={TitleLevels.THREE}>Inverted price</Title>
 
-      <Hero variant={VariantState.TERTIARY}>
+      <Hero variant={VariantState.MAIN}>
         <Price
           inverted
           level={PriceLevel.LEVEL1}

diff --git a/examples/react-template/screens/Stepper.tsx b/examples/react-template/screens/Stepper.tsx
@@ -48,6 +48,7 @@ export const StepperScreen = (): JSX.Element => {
               step={2}
             />
             <StepperStep
+              error
               done={3 < activeStep}
               current={activeStep === 3}
               iconName={IconName.SEARCH}

diff --git a/examples/react-template/screens/Timeline.tsx b/examples/react-template/screens/Timeline.tsx
@@ -16,11 +16,11 @@ import { Divider, TrilogyColor } from "@trilogy-ds/react";
 
 export const TimelineScreen = (): JSX.Element => {
   return (
-    <Section background={TrilogyColor.WHITE}>
+    <>
       {/* TIMELINE WITH 4 ITEMSS */}
       <Timeline horizontal>
         <TimelineItem cancel>
-          <TimelineMarker iconName={IconName.CHECK} iconColor={"WHITE"} />
+          <TimelineMarker iconName={IconName.CHECK} />
           <TimelineContent
             heading="20 September"
             content="loremp ipsum dolor sit amet"
@@ -31,7 +31,7 @@ export const TimelineScreen = (): JSX.Element => {
         </TimelineItem>
 
         <TimelineItem done>
-          <TimelineMarker iconColor={"WHITE"} iconName={IconName.CHECK} />
+          <TimelineMarker iconName={IconName.CHECK} />
           <TimelineContent
             heading="20 September"
             content="loremp ipsum dolor sit amet"
@@ -40,7 +40,7 @@ export const TimelineScreen = (): JSX.Element => {
           />
         </TimelineItem>
         <TimelineItem active>
-          <TimelineMarker iconColor={"WHITE"} iconName={IconName.CHECK} />
+          <TimelineMarker iconName={IconName.CHECK} />
           <TimelineContent
             heading="20 September"
             content="loremp ipsum dolor sit amet"
@@ -49,7 +49,7 @@ export const TimelineScreen = (): JSX.Element => {
           />
         </TimelineItem>
         <TimelineItem undone>
-          <TimelineMarker iconColor={"WHITE"} iconName={IconName.CHECK} />
+          <TimelineMarker iconName={IconName.CHECK} />
           <TimelineContent
             heading="20 September"
             content="loremp ipsum dolor sit amet"
@@ -63,7 +63,7 @@ export const TimelineScreen = (): JSX.Element => {
 
       <Timeline>
         <TimelineItem cancel>
-          <TimelineMarker iconColor={"WHITE"} iconName={IconName.CHECK} />
+          <TimelineMarker iconName={IconName.CHECK} />
           <TimelineContent>
             <Title level={TitleLevels.THREE}>20 septembre</Title>
             <Text level={TextLevels.FOUR}>
@@ -106,6 +106,6 @@ export const TimelineScreen = (): JSX.Element => {
           </TimelineContent>
         </TimelineItem>
       </Timeline>
-    </Section>
+    </>
   );
 };
diff --git a/packages/react/components/options/item/OptionsItem.tsx b/packages/react/components/options/item/OptionsItem.tsx
@@ -106,11 +106,11 @@ const OptionsItem = ({
               })
             }
           }}
+          disabled={disabled}
         />
         <label
           htmlFor={id}
           className={multilineClass}
-          {...{ disabled: disabled }}
         >
           {label}
           {variant && iconName && <Icon name={iconName} {...others} />}

diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -37,7 +37,6 @@ const Price = ({
   period,
   showCents,
   level,
-  huge,
   inverted,
   align,
   alert,
@@ -56,8 +55,7 @@ const Price = ({
       "price",
       !alert && variant && is(`${variant}`),
       !variant && alert && is(`${alert}`),
-      level && !huge && is(`level-${level}`),
-      huge && !level && is("huge"),
+      level && is(`level-${level}`),
       inverted && is("inverted"),
       inline && is("inlined"),
       striked && is("striked"),
@@ -76,10 +74,6 @@ const Price = ({
     )
   )
 
-  // const fixedCents = (n: any) => {
-  //   return n.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
-  // }
-
   const isNegative = amount < 0
   const absoluteAmount = Math.abs(amount)
   // Math.floor on negative decimal decrease its value (as expected), ex: Math.floor(-17.09) => -18
@@ -117,7 +111,7 @@ const Price = ({
           {...others}
         >
           {suptitle && <span className='price-suptitle'>{suptitle}</span>}
-          <Text className={"main"}>{`${whole}`}</Text>
+          <Text>{`${whole}`}</Text>
           <span className={hashClass(styled, clsx("price-details"))}>
             <span className={hashClass(styled, clsx("cents"))}>
               {inline && centsDisplayed === "€" ? (
@@ -146,7 +140,7 @@ const Price = ({
       {...others}
     >
       {suptitle && <span className='price-suptitle'>{suptitle}</span>}
-      <Text className='main'>{`${whole}`}</Text>
+      <Text>{`${whole}`}</Text>
       <span className={hashClass(styled, clsx("price-details"))}>
         <span className={hashClass(styled, clsx("cents"))}>
           {centsDisplayed || "00"}

diff --git a/packages/react/components/price/PriceProps.ts b/packages/react/components/price/PriceProps.ts
@@ -14,8 +14,6 @@ export interface PriceProps extends Invertable, Accessibility, AlignableProps, A
   showCents?: boolean
   inline?: boolean
   level?: PriceLevel | PriceLevelValues
-  /** @deprecated v-1.3.2 */
-  huge?: boolean
   className?: string
   striked?: boolean
   suptitle?: string

diff --git a/packages/react/components/timeline/marker/TimelineMarker.tsx b/packages/react/components/timeline/marker/TimelineMarker.tsx
@@ -33,7 +33,7 @@ const TimelineMarker = ({
     <div className={classes} {...others} data-testid={testId}>
       <div className='card-header-icon'>
         <Icon
-          color={iconColor || IconColor.WHITE}
+          color={iconColor}
           className={iconClasses}
           name={iconName}
           size={IconSize.SMALL}

diff --git a/packages/styles/framework/src/base/_color.scss b/packages/styles/framework/src/base/_color.scss
@@ -1,24 +1,33 @@
 @use "sass:map";
 
 @function getColor( $name ) {
+  @if str-slice($name, 0, 3) == 'bg-' {
+    $submane: str-slice($name, 4);
+  @return getBGColor( $submane );
+  }
   @return var(--color-#{nth(map-get($colors,$name),1)})
 }
 
 @function getColorValue( $name ) {
   @return #{nth(map-get($colors,$name),2)}
 }
 
+@function getBGColorValue( $name ) {
+  @return #{nth(map-get($colors,$name),4)}
+}
+
 @function getColorBrandName( $name ) {
   @return #{nth(map-get($colors,$name),1)}
 }
 
-@function getVariantColor($name, $n:1)  {
-  @return #{nth(map-get($colorsOld,$name),$n+3)}
-};
+@function getBGColor( $name ) {
+  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
+}
 
 :root {
   @each $name, $color in $colors {
     --color-#{nth($color,1)}: #{nth($color,2)};
+    --color-bg-#{nth($color,1)}: #{nth($color,4)};
   }
 }
 

diff --git a/packages/styles/framework/src/base/_generic.scss b/packages/styles/framework/src/base/_generic.scss
@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getColor('grey-lighter');
+    background-color: getBGColor('neutral');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -56,12 +56,7 @@ $body-line-height: 1.5 !default;
         }
     }
   [disabled], [aria-disabled="true"] {
-    background-color: getColor('bg-disabled') !important;
-    border-color: transparent !important;
-    box-shadow: none !important;
-    color: getColor('grey-dark') !important;
-    cursor: not-allowed !important;
-    filter: grayscale(1);
+    @include disabledRules;
   }
 }
 

diff --git a/packages/styles/framework/src/base/_helpers.scss b/packages/styles/framework/src/base/_helpers.scss
@@ -445,7 +445,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 .is-bordered {
-  border: 1px solid getColor('grey-light');
+  border: 1px solid getBGColor('neutral-dark');
 }
 
 .is-vertical-paddingless {

diff --git a/packages/styles/framework/src/components/_accordion.scss b/packages/styles/framework/src/components/_accordion.scss
@@ -11,8 +11,8 @@
     flex-direction: column;
     background-color: getColor('background');
     font-size: $size-normal;
-    border: 1px solid getColor('grey-light');
-    border-radius: 8px;
+    border: 1px solid getBGColor('font');
+    border-radius: $radius;
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
@@ -28,7 +28,7 @@
 
       & .toggle {
         &::before {
-          @include arrow(getColor('font'), 'up');
+          @include arrow('up');
         }
       }
     }
@@ -56,7 +56,7 @@
     &:last-child {
       margin-bottom: 0;
     }
-    
+
     .accordion-header {
       align-items: center;
       display: flex;
@@ -112,7 +112,7 @@
         }
 
         &::before {
-          @include arrow(getColor('grey-dark'));
+          @include arrow();
           top: -0.25em;
           left: 0;
           right: 0;

diff --git a/packages/styles/framework/src/components/_card.scss b/packages/styles/framework/src/components/_card.scss
@@ -16,7 +16,7 @@
     position: relative;
     flex-shrink: 0;
     overflow: hidden;
-    border-radius: 8px 8px 0px 0px;
+    border-radius: $radius $radius 0px 0px;
   }
 
   .card-content {
@@ -31,7 +31,7 @@
   }
 
   .card-footer {
-    border-top: 1px solid getColor('grey');
+    border-top: 1px solid getColor('neutral');
   }
 
   .mention {
@@ -62,7 +62,7 @@
     }
 
     .card-content {
-      border: 1px solid getColor('grey');
+      border: 1px solid getBGColor('font');
       padding-left: 20px;
       padding-right: 20px;
 
@@ -113,7 +113,7 @@
 
     .card-image {
       max-width: 100%;
-      border-radius: 8px 0px 0px 8px;
+      border-radius: $radius 0px 0px $radius;
 
       @include tablet {
         img {