Skip to content

Commit

Permalink
Merge pull request #171 from BouyguesTelecom/fix/price
Browse files Browse the repository at this point in the history 
use size on container for price
  • Loading branch information
@JulienMora
JulienMora authored Oct 29, 2024
2 parents 0b6b711 + 124ddad commit 3ff7259
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 85 deletions.
8 changes: 3 additions & 5 deletions packages/react/components/price/Price.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ const Price = ({
styled,
clsx(
"price",
level && is(`level-${level}`),
inverted && is("inverted"),
inline && is("inlined"),
overline && has("suptitle"),
Expand All @@ -67,7 +66,6 @@ const Price = ({
styled,
clsx(
"price",
level && level == PriceLevel.ONE && is(`level-3`) || level == PriceLevel.TWO && is(`level-4`) || level == PriceLevel.THREE && is(`level-5`) || level == PriceLevel.FOUR && is(`level-6`) || is(`level-7`),
inverted && is("inverted"),
inline && is("inlined"),
strikedAmount && is("striked"),
Expand Down Expand Up @@ -108,7 +106,7 @@ const Price = ({
"€"

const returnComponent = (
<div className={hashClass(styled,clsx("price-container"))}>
<div className={hashClass(styled, clsx("price-container", is(`level-${level || '1'}`)) )}>
{overline && <p className={hashClass(styled,clsx("overline"))}>{overline}</p>}
{/* StrikedAmount Price */}
{strikedAmount && (
Expand Down Expand Up @@ -160,8 +158,8 @@ const Price = ({
</span>
{tagAmount && (
<span {...{ role: 'paragraph' }} className={hashClass(styled, clsx(('price-tag')))}>
<Text markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyColor.TEXT_WHITE]}>{tagAmount} {tagSymbol ? tagSymbol : '€'}</Text>
{tagSymbol === '€' && period && <Text markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_NORMAL, TypographyColor.TEXT_WHITE]}>&nbsp;/{period}</Text>}
<Text className={clsx('tag-amount')} markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyColor.TEXT_WHITE]}>{tagAmount} {tagSymbol ? tagSymbol : '€'}</Text>
{tagSymbol === '€' && period && <Text className={clsx('tag-period')} markup={TextMarkup.SPAN} typo={[TypographyBold.TEXT_WEIGHT_NORMAL, TypographyColor.TEXT_WHITE]}>&nbsp;/{period}</Text>}
</span>
)}
{accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
Expand Down
139 changes: 59 additions & 80 deletions packages/styles/framework/src/components/_price.scss
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,37 @@
$price-levels: (
($text-64),
($text-56),
($text-44),
($text-32),
($text-28),
($text-24),
($text-20),
[$text-64, $text-44, $text-28, $text-16],
[$text-56, $text-32, $text-22, $text-16],
[$text-48, $text-28, $text-16, $text-16],
[$text-40, $text-24, $text-10, $text-10],
[$text-36, $text-20, $text-10, $text-10],
[$text-24, $text-20, $text-10, $text-10],
[$text-20, $text-20, $text-10, $text-10],
);

.price-container {
display: flex;
align-items: baseline;
column-gap: 12px;
flex-wrap: wrap;

.overline {
width: 100%;
flex: none;
margin: 0;
--font-size: #{$text-64};
font-size: calc(var(--font-size) * 0.4);

@each $price-level in $price-levels {
$i: index($price-levels, $price-level);
$font-size: nth($price-level, 1);

&:has(~ .price.is-level-#{$i}:not(.is-striked)) {
--font-size: #{$font-size};
}
}
}
}

.price {
display: inline-flex;
font-weight: $weight-semibold;
line-height: 0.8;
margin-bottom: 0;

&:not(.is-inlined) {
font-size: $text-44;
}
--font-size: #{$text-64};
--tag-period-size:#{$text-16};

@each $price-level in $price-levels {
$i: index($price-levels, $price-level);
$font-size: nth($price-level, 1);
$striked-font-size: nth($price-level, 2);
$tag-size: nth($price-level, 3);
$tag-period-size: nth($price-level, 4);

&.is-level-#{$i} {
font-size: $font-size;

@if $i == 1 {
+ .price-tag {
span:nth-child(2) {
font-size: $text-16;
}
}
}

@if $i == 2 {
+ .price-tag {
font-size: 22px;
span:nth-child(2) {
font-size: $text-16;
}
}
}

@if $i == 3 {
+ .price-tag {
font-size: 16px;
span:nth-child(2) {
font-size: $text-16;
}
}
}

@if $i < 4 {
+ .price-tag {
span:nth-child(2) {
place-self: flex-end;
margin-bottom: 3px;
}
}
}
--font-size: #{$font-size};
--striked-font-size: #{$striked-font-size};
--tag-amount-size: #{$tag-size};
--tag-period-size: #{$tag-period-size};

@if $i > 4 {
.price-details {
padding-left: 2px !important;
padding-left: 2px;
}
}
@if $i > 3 {
Expand All @@ -96,11 +41,47 @@ $price-levels: (
margin-left: -6px;
border-radius: 1px;
}
font-size: $text-10;
padding: 4px !important;
}
}
}
}

.overline {
width: 100%;
flex: none;
margin: 0;
font-size: calc(var(--font-size) * 0.4);
}

.price {
font-size: var(--font-size);
&.is-striked {
font-size: var(--striked-font-size);
}
}

.price-tag {
padding: calc(var(--tag-period-size)/2);
font-size: var(--tag-amount-size);

&:before {
margin-left:calc(4px - var(--tag-period-size));
}

.tag-period {
font-size: var(--tag-period-size);
margin-bottom: calc( calc( var(--tag-period-size) - 10px) / 2);
}
}

}

.price {
display: inline-flex;
font-weight: $weight-semibold;
line-height: 0.8;
margin-bottom: 0;

// the details : cents + period

Expand Down Expand Up @@ -138,9 +119,6 @@ $price-levels: (
}
}


}

&.is-inverted {
color: getColor('background');
}
Expand Down Expand Up @@ -208,16 +186,14 @@ $price-levels: (
}

.price-tag {
line-height: 1em;
align-self: center;
background-color: getColor('accent');
margin-left: 10px;
border-radius: 6px;
display: inline-flex;
color: getColor('background');
height: fit-content;
padding: 8px;
font-size: 28px;
line-height: 1em;
align-items: baseline;
position: relative;
margin-left: -4px;
Expand All @@ -228,7 +204,7 @@ $price-levels: (
border-left-color: getColor('accent');
transform: rotate(45deg);
border-style: solid;
border-width: 5px;
border-width: 6px;
border-radius: 2px;
pointer-events: none;
position: absolute;
Expand All @@ -241,4 +217,7 @@ $price-levels: (
height: 0;
width: 0;
}
.tag-period {
place-self: flex-end;
}
}

0 comments on commit 3ff7259

Please sign in to comment.