Skip to content

Commit

Permalink
Merge pull request #94 from BouyguesTelecom/feature/box-refonte
Browse files Browse the repository at this point in the history 
Box - updated SASS structure and improved UI graphics
  • Loading branch information
@JulienMora
JulienMora authored Jul 15, 2024
2 parents 073189a + 753c67e commit 1f6b05f
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 84 deletions.
55 changes: 26 additions & 29 deletions examples/react-template/screens/Box.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,6 @@
import * as React from "react";
import {
AutoLayout,
Box,
BoxContent,
BoxFooter,
BoxHeader,
BoxMarkup,
Button,
ButtonVariant,
Columns,
ColumnsItem,
Divider,
Icon,
IconName,
Link,
Price,
Section,
Text,
Title,
TitleLevels,
} from "@trilogy-ds/react/components";
import { TrilogyColor, TypographyAlign } from "@trilogy-ds/react/objects";
import * as React from 'react'
import { AutoLayout, Box, BoxContent, BoxFooter, BoxHeader, BoxMarkup, Button, ButtonVariant, Columns, ColumnsItem, Divider, Icon, IconName, Link, Price, Section, Text, Title, TitleLevels } from '@trilogy-ds/react/components'
import { TrilogyColor, TypographyAlign } from '@trilogy-ds/react/objects'

export const BoxScreen = (): JSX.Element => {
const [active, setActive] = React.useState(false);
Expand All @@ -37,7 +17,7 @@ export const BoxScreen = (): JSX.Element => {
<Columns multiline>
<ColumnsItem size={6}></ColumnsItem>
<ColumnsItem size={10}>
<Box>
<Box flat>
<BoxHeader>Box with Header and Content</BoxHeader>
<BoxContent>
<Text>
Expand Down Expand Up @@ -207,28 +187,45 @@ export const BoxScreen = (): JSX.Element => {
</Box>
<Divider />
<Columns>
<ColumnsItem size={10}>
<Box leftBorder={TrilogyColor.ERROR}>
<ColumnsItem size={6}>
<Box leftBorder={TrilogyColor.ERROR} className='is-fullheight'>
<BoxHeader>
Test
</BoxHeader>
<BoxContent>
<Title level={TitleLevels.FOUR}>Highlited box</Title>
<Text>
Eget tincidunt tincidunt id massa sollicitudin. Egestas felis
dolor neque nunc. Eget suscipit enim velit ultricies justo
ultrices sed leo cras.
</Text>
<Text>
Eget tincidunt tincidunt id massa sollicitudin. Egestas felis
dolor neque nunc. Eget suscipit enim velit ultricies justo
ultrices sed leo cras.
</Text>
</BoxContent>
<BoxFooter>
<Button variant={ButtonVariant.CONVERSION}>Test</Button>
</BoxFooter>
</Box>
</ColumnsItem>
<ColumnsItem size={10}>
<Box leftBorder={TrilogyColor.WARNING}>
<BoxContent>
<ColumnsItem size={6}>
<Box leftBorder={TrilogyColor.WARNING} className='is-fullheight'>
<BoxContent background={"NEUTRAL_LIGHT"}>
<Title level={TitleLevels.FOUR}>Highlited box</Title>
<Text>
Eget tincidunt tincidunt id massa sollicitudin. Egestas felis
dolor neque nunc. Eget suscipit enim velit ultricies justo
ultrices sed leo cras.
</Text>
</BoxContent>
<BoxContent>
<Title level={TitleLevels.FOUR}>Highlited box</Title>
</BoxContent>
<BoxFooter background={"SUCCESS"}>
<Button variant={ButtonVariant.CONVERSION}>Test</Button>
</BoxFooter>
</Box>
</ColumnsItem>
</Columns>
Expand Down
115 changes: 60 additions & 55 deletions packages/styles/framework/src/elements/_box.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
@use 'sass:math';
@import "../utilities/spacing";
:root{
--padding-box : #{$spacing-5};
@include mobile {
--padding-box : #{$spacing-4};
}
}
$highlighted-border-width: 4px;

$space-between-tiles: 5px;
$padding-box: $spacing-5;
$padding-box-mobile: $spacing-4;

/* @toto : add to figma */
a.box {
cursor: pointer;
transition: box-shadow $animation-duration;
Expand All @@ -21,16 +24,13 @@ a.box {
background-color: getColor('background');
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
padding: 24px;
padding: var(--padding-box);


@include mobile {
padding: 16px;
}

&:not(:last-child) {
margin-bottom: 15px;
Expand All @@ -46,22 +46,7 @@ a.box {
}
}

&.is-highlighted {
.box-content {
padding-left: 23px;
border-left: 8px solid transparent;
}

@each $name, $pair in $colors-brand-funcionnal {
$color: getColor($name);
$brandName: getColorBrandName($name);

&.is-#{$brandName} .box-content {
border-left-color: $color;
border-left-width: 4px;
}
}
}

&.is-flat {
box-shadow: none;
Expand All @@ -73,35 +58,51 @@ a.box {
}

.box-header {
margin-top: calc(-#{$padding-box} - 1px);
margin-left: calc(-#{$padding-box} - 1px);
margin-right: calc(-#{$padding-box} - 1px);
margin-top: calc(var(--padding-box)*-1 - 1px);
margin-left: calc(var(--padding-box)*-1 - 1px);
margin-right: calc(var(--padding-box)*-1 - 1px);
}
}


&.is-highlighted {
border-left: $highlighted-border-width solid transparent;
border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
border-bottom-left-radius: calc(var(--radius) + $highlighted-border-width);
@each $name, $pair in $colors-brand-funcionnal {
$color: getColor($name);
$brandName: getColorBrandName($name);

&.is-#{$brandName}{
border-left-color: $color;
border-left-width: $highlighted-border-width;
}
}

.box-header{
margin-left: calc(var(--padding-box)*-1 - $highlighted-border-width);
}
}


.box-header {
z-index: inherit;
background-color: getColor('font');
color: getColor('background');
margin-top: -$padding-box;
margin-left: -$padding-box;
margin-right: -$padding-box;
margin-top: calc(var(--padding-box)*-1);
margin-left: calc(var(--padding-box)*-1);
margin-right: calc(var(--padding-box)*-1);
padding: 8px;
padding-left: 24px;
padding-left: var(--padding-box);
padding-right: var(--padding-box);
box-shadow: none;
font-size: 15px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-weight: $weight-semibold;

@include mobile {
margin-top: -16px;
margin-left: -16px;
margin-right: -16px;
}

border-radius: var(--radius) var(--radius) 0 0;
@include tablet {
flex-direction: row;
align-items: center;
Expand All @@ -124,27 +125,27 @@ a.box {
}

.box-content {
margin: -$padding-box;
padding: $padding-box;

@include mobile {
margin: -$padding-box-mobile;
padding: $padding-box-mobile;
margin-left: calc(var(--padding-box)*-1);
margin-right: calc(var(--padding-box)*-1);
padding: var(--padding-box);
&:first-child{
margin-top: calc(var(--padding-box)*-1);
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
&:last-child{
margin-bottom: calc(var(--padding-box)*-1);
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}

@include mobile {
text-align: left;
}

> .is-unboxed {
margin-left: -$padding-box;
margin-right: -$padding-box;
width: auto;

@include desktop {
margin-left: -$padding-box;
margin-right: -$padding-box;
}
margin-left: calc(var(--padding-box)*-1);
margin-right: calc(var(--padding-box)*-1);
}

&.is-transparent {
Expand All @@ -153,8 +154,12 @@ a.box {
}

.box-footer {
padding-top: $padding-box;
border-top: var(--border);
margin: 12.5px 7.5px 7.5px;
margin-left: calc(var(--padding-box)*-1);
margin-right: calc(var(--padding-box)*-1);
margin-bottom: calc(var(--padding-box)*-1);
padding: var(--padding-box);
border-top: 1px solid getBGColor('hovered');
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
}

0 comments on commit 1f6b05f

Please sign in to comment.