Skip to content

Commit

Permalink
Merge pull request #16 from BouyguesTelecom/clean/bgColor
Browse files Browse the repository at this point in the history
🧹 Clean colors into components
  • Loading branch information
saramiap authored Apr 22, 2024
2 parents 0598192 + 7298e42 commit 5fa70ca
Show file tree
Hide file tree
Showing 59 changed files with 363 additions and 984 deletions.
11 changes: 6 additions & 5 deletions examples/react-template/screens/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Divider,
IconName,
Input,
Link,
Menu,
MenuItem,
MenuScrolling,
Expand All @@ -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>
Expand Down
24 changes: 17 additions & 7 deletions examples/react-template/screens/Price.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>

Expand Down Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions examples/react-template/screens/Stepper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const StepperScreen = (): JSX.Element => {
step={2}
/>
<StepperStep
error
done={3 < activeStep}
current={activeStep === 3}
iconName={IconName.SEARCH}
Expand Down
14 changes: 7 additions & 7 deletions examples/react-template/screens/Timeline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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}>
Expand Down Expand Up @@ -106,6 +106,6 @@ export const TimelineScreen = (): JSX.Element => {
</TimelineContent>
</TimelineItem>
</Timeline>
</Section>
</>
);
};
2 changes: 1 addition & 1 deletion packages/react/components/options/item/OptionsItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,11 @@ const OptionsItem = ({
})
}
}}
disabled={disabled}
/>
<label
htmlFor={id}
className={multilineClass}
{...{ disabled: disabled }}
>
{label}
{variant && iconName && <Icon name={iconName} {...others} />}
Expand Down
12 changes: 3 additions & 9 deletions packages/react/components/price/Price.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ const Price = ({
period,
showCents,
level,
huge,
inverted,
align,
alert,
Expand All @@ -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"),
Expand All @@ -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
Expand Down Expand Up @@ -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 === "€" ? (
Expand Down Expand Up @@ -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"}
Expand Down
2 changes: 0 additions & 2 deletions packages/react/components/price/PriceProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
15 changes: 12 additions & 3 deletions packages/styles/framework/src/base/_color.scss
Original file line number Diff line number Diff line change
@@ -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)};
}
}

Expand Down
9 changes: 2 additions & 7 deletions packages/styles/framework/src/base/_generic.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/styles/framework/src/base/_helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
10 changes: 5 additions & 5 deletions packages/styles/framework/src/components/_accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,7 +28,7 @@

& .toggle {
&::before {
@include arrow(getColor('font'), 'up');
@include arrow('up');
}
}
}
Expand Down Expand Up @@ -56,7 +56,7 @@
&:last-child {
margin-bottom: 0;
}

.accordion-header {
align-items: center;
display: flex;
Expand Down Expand Up @@ -112,7 +112,7 @@
}

&::before {
@include arrow(getColor('grey-dark'));
@include arrow();
top: -0.25em;
left: 0;
right: 0;
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/framework/src/components/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -31,7 +31,7 @@
}

.card-footer {
border-top: 1px solid getColor('grey');
border-top: 1px solid getColor('neutral');
}

.mention {
Expand Down Expand Up @@ -62,7 +62,7 @@
}

.card-content {
border: 1px solid getColor('grey');
border: 1px solid getBGColor('font');
padding-left: 20px;
padding-right: 20px;

Expand Down Expand Up @@ -113,7 +113,7 @@

.card-image {
max-width: 100%;
border-radius: 8px 0px 0px 8px;
border-radius: $radius 0px 0px $radius;

@include tablet {
img {
Expand Down
Loading

0 comments on commit 5fa70ca

Please sign in to comment.