Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(data-components,themes): add data components design tokens #760

Merged
merged 11 commits into from
Mar 15, 2024
+220 −68
Merged

feat(data-components,themes): add data components design tokens #760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e66425f
feat(avatar,themes): add design tokens to avatar components
mmorin-equisoft Feb 20, 2024
e66cb02
feat(legend,themes): add design tokens to legend components
mmorin-equisoft Feb 20, 2024
aed35eb
feat(progress-circle,themes): add design tokens to progress-circle co…
mmorin-equisoft Feb 20, 2024
0274b62
feat(progress-indicator,themes): add design tokens to progress-indica…
mmorin-equisoft Feb 20, 2024
c2f9a30
feat(progress-tracker,themes): add design tokens to progress-tracker …
mmorin-equisoft Feb 20, 2024
a28711f
feat(status,themes): add design tokens to status components
mmorin-equisoft Mar 5, 2024
b60fe57
feat(legend,progress-tracker,status,themes): apply @hebernardEquisoft…
mmorin-equisoft Mar 5, 2024
0c3c108
fix(progress-tracker,themes): apply @LarryMatte change requests
mmorin-equisoft Mar 12, 2024
5f30de2
Merge branch 'master' into dev/DS-979
mmorin-equisoft Mar 12, 2024
5fba2ff
fix(components,theme): apply @meriouma suggestions
mmorin-equisoft Mar 15, 2024
1eaab79
Merge branch 'master' into dev/DS-979
mmorin-equisoft Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react/src/components/avatar/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ interface StyledDivProps extends SizeStyleProps {

const StyledDiv = styled.div<StyledDivProps>`
align-items: center;
background: ${({ bgColor, theme }) => bgColor ?? theme.greys['light-grey']};
background: ${({ bgColor, theme }) => bgColor ?? theme.component['avatar-background-color']};
border-radius: 50%;
color: ${({ theme }) => theme.greys['dark-grey']};
color: ${({ theme }) => theme.component['avatar-text-color']};
display: flex;
font-weight: var(--font-semi-bold);
justify-content: center;
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/legend/legend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Item = styled.li<Pick<LegendItem, 'color'>>`
}

::before {
background-color: ${(props) => props.color || props.theme.main['primary-1.2']};
background-color: ${({ color, theme }) => color || theme.component['legend-item-bullet-color']};
mmorin-equisoft marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 50%;
content: '';
height: var(--size-half);
Expand All @@ -36,7 +36,7 @@ const Item = styled.li<Pick<LegendItem, 'color'>>`
`;

const Description = styled.span`
color: ${(props) => props.theme.greys['dark-grey']};
color: ${({ theme }) => theme.component['legend-item-description-text-color']};
display: block;
font-size: 0.75rem;
line-height: 1.25rem;
Expand Down
0 ...act/src/components/circle/circle.test.tsx → ...omponents/progress-circle/circle.test.tsx
View file
Open in desktop
File renamed without changes.
0 ...rc/components/circle/circle.test.tsx.snap → ...ents/progress-circle/circle.test.tsx.snap
View file
Open in desktop
File renamed without changes.
5 changes: 2 additions & 3 deletions ...es/react/src/components/circle/circle.tsx → ...src/components/progress-circle/circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { VoidFunctionComponent } from 'react';
import styled from 'styled-components';
import { useTheme } from '../../hooks/use-theme';
import styled, { useTheme } from 'styled-components';

const Svg = styled.svg`
display: block;
Expand Down Expand Up @@ -32,7 +31,7 @@ export const Circle: VoidFunctionComponent<CircleProps> = ({
return (
<Svg height="100%" width="100%" viewBox={`0 0 ${diameter} ${diameter}`}>
<BackgroundCircle
stroke={theme.greys.grey}
stroke={theme.component['progress-circle-empty-stroke-color']}
fill="transparent"
strokeWidth={stroke}
strokeLinecap="round"
Expand Down
12 changes: 3 additions & 9 deletions packages/react/src/components/progress-circle/progress-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import { VoidFunctionComponent } from 'react';
import styled from 'styled-components';
import { ResolvedTheme } from '../../themes/theme';
import { Circle } from '../circle/circle';
import { Circle } from './circle';

const RADIUS = 62;
const STROKE = 8;

interface ResultProps {
theme: ResolvedTheme;
secondary?: boolean;
}

const Container = styled.div`
display: inline-block;
height: auto;
Expand All @@ -35,15 +29,15 @@ const Result = styled.div`
width: 100%;

p {
color: ${(props: ResultProps) => props.theme.greys.black};
color: ${({ theme }) => theme.component['progress-circle-result-text-color']};
font-size: 1.5rem;
margin: 0;
padding: 0;
}
`;

const Label = styled.p`
color: ${(props: ResultProps) => props.theme.greys.black};
color: ${({ theme }) => theme.component['progress-circle-label-text-color']};
font-size: 1rem;
letter-spacing: 0.02875rem;
line-height: 1.5rem;
Expand Down
0 ...ges/react/src/components/bar/bar.test.tsx → ...omponents/progress-indicator/bar.test.tsx
View file
Open in desktop
File renamed without changes.
0 ...eact/src/components/bar/bar.test.tsx.snap → ...ents/progress-indicator/bar.test.tsx.snap
View file
Open in desktop
File renamed without changes.
25 changes: 12 additions & 13 deletions packages/react/src/components/bar/bar.tsx → ...src/components/progress-indicator/bar.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pareillement que pour circle.tsx

Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { ReactText, VoidFunctionComponent } from 'react';
import styled from 'styled-components';
import { ResolvedTheme } from '../../themes/theme';

interface BarProps {
className?: string;
color: string;
percent: number;
endLabel: ReactText;
}

const Container = styled.div`
p {
color: ${(props: { theme: ResolvedTheme }) => props.theme.greys.black};
color: ${({ theme }) => theme.component['progress-indicator-label-text-color']};
letter-spacing: 0.02875rem;
line-height: 1.5rem;
margin: 0;
Expand All @@ -13,27 +19,20 @@ const Container = styled.div`
`;

const Progress = styled.div`
background-color: ${(props) => props.theme.greys.grey};
background-color: ${({ theme }) => theme.component['progress-indicator-track-color']};
border-radius: var(--border-radius);
height: 0.5rem;
margin-bottom: var(--spacing-half);
width: 100%;
`;

const StyledBar = styled.div`
background: ${(props: { color?: string, percent: number }) => props.color};
const StyledBar = styled.div<Omit<BarProps, 'endLabel'>>`
background: ${({ color }) => color};
mmorin-equisoft marked this conversation as resolved.
Show resolved Hide resolved
border-radius: var(--border-radius);
height: 0.5rem;
width: ${(props) => Math.min(Math.max(props.percent, 0), 100)}%;
width: ${({ percent }) => Math.min(Math.max(percent, 0), 100)}%;
`;

interface BarProps {
className?: string;
color: string;
percent: number;
endLabel: ReactText;
}

export const Bar: VoidFunctionComponent<BarProps> = ({
className, color, percent, endLabel,
}) => (
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/progress-indicator/progress-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { ReactText, VoidFunctionComponent } from 'react';
import styled from 'styled-components';
import { ResolvedTheme } from '../../themes/theme';
import { Bar } from '../bar/bar';
import { Bar } from './bar';

const Label = styled.label`
color: ${(props: { theme: ResolvedTheme }) => props.theme.greys.black};
color: ${({ theme }) => theme.component['progress-indicator-label-text-color']};
display: block;
font-size: 0.875rem;
letter-spacing: 0.02875rem;
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ exports[`Progress Component Snapshots linear 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #004E78;
color: #006296;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -255,7 +255,7 @@ exports[`Progress Component Snapshots non linear 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #004E78;
color: #006296;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down
48 changes: 26 additions & 22 deletions packages/react/src/components/progress-tracker/progress-tracker.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'ai renommé les status en utilisant les valeurs défini dans Figma

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactElement, VoidFunctionComponent } from 'react';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import { useTranslation } from '../../i18n/use-translation';
import { Icon } from '../icon/icon';
import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
Expand Down Expand Up @@ -39,7 +39,7 @@ const StepLink = styled.a`

const StyledStep = styled.li<{ $linear: boolean }>`
align-items: center;
color: ${({ theme }) => theme.main['primary-3']};
color: ${({ theme }) => theme.component['progress-tracker-step-todo-text-color']};
display: flex;
flex-direction: column;
font-weight: var(--font-normal);
Expand All @@ -49,7 +49,7 @@ const StyledStep = styled.li<{ $linear: boolean }>`

&::before {
align-items: center;
background-color: ${({ theme }) => theme.greys.white};
background-color: ${({ theme }) => theme.component['progress-tracker-step-todo-background-color']};
border: 0.125rem solid;
border-radius: 50%;
box-sizing: border-box;
Expand All @@ -66,7 +66,7 @@ const StyledStep = styled.li<{ $linear: boolean }>`
}

&::after {
background-color: ${({ theme }) => theme.greys.grey};
background-color: ${({ theme }) => theme.component['progress-tracker-bridge-todo-background-color']};
content: '';
height: 0.25rem;
left: calc(-50% - 0.5rem);
Expand All @@ -83,56 +83,60 @@ const StyledStep = styled.li<{ $linear: boolean }>`

const CompletedStep = styled(StyledStep)`
&::before {
background-color: ${({ theme }) => theme.main['primary-1.1']};
border-color: ${({ theme }) => theme.main['primary-1.1']};
color: ${({ theme }) => theme.greys.white};
background-color: ${({ theme }) => theme.component['progress-tracker-step-completed-background-color']};
border-color: ${({ theme }) => theme.component['progress-tracker-step-completed-border-color']};
color: ${({ theme }) => theme.component['progress-tracker-step-completed-text-color']};
font-weight: var(--font-semi-bold);
}

&::after {
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
${({ $linear, theme }) => $linear && css`
background-color: ${theme.component['progress-tracker-bridge-completed-color']};
`}
}

${Label} {
color: ${({ theme }) => theme.main['primary-1.1']};
color: ${({ theme }) => theme.component['progress-tracker-step-completed-label-text-color']};
}
`;

const CurrentStep = styled(StyledStep)`
const ActiveStep = styled(StyledStep)`
&::before {
border-color: ${({ theme }) => theme.main['primary-1.1']};
border-color: ${({ theme }) => theme.component['progress-tracker-step-active-border-color']};
border-width: 0.25rem;
color: ${({ theme }) => theme.main['primary-1.3']};
color: ${({ theme }) => theme.component['progress-tracker-step-active-text-color']};
font-weight: var(--font-semi-bold);
height: var(--size-2x);
margin: -0.25rem auto 0;
width: var(--size-2x);
}

&::after {
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
${({ $linear, theme }) => $linear && css`
background-color: ${theme.component['progress-tracker-bridge-active-background-color']};
`}
}

${Label} {
color: ${({ theme }) => theme.main['primary-1.3']};
color: ${({ theme }) => theme.component['progress-tracker-step-active-label-text-color']};
font-weight: var(--font-semi-bold);
}
`;

const UncompletedStep = styled(StyledStep)`
&::before {
border-color: ${({ theme }) => theme.greys['mid-grey']};
color: ${({ theme }) => theme.greys['neutral-90']};
border-color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-border-color']};
color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-text-color']};
}

${Label} {
color: ${({ theme }) => theme.greys['dark-grey']};
color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-label-text-color']};
}
`;

const UncompletedIcon = styled(Icon)`
color: ${({ theme }) => theme.greys.white};
fill: ${({ theme }) => theme.notifications['alert-2.1']};
const NotificationBadgeIcon = styled(Icon)`
color: ${({ theme }) => theme.component['progress-tracker-notification-badge-color']};
fill: ${({ theme }) => theme.component['progress-tracker-notification-badge-fill-color']};
left: calc(50% + 0.25rem);
position: absolute;
top: -0.5rem;
Expand Down Expand Up @@ -173,7 +177,7 @@ const Step: VoidFunctionComponent<StepProps> = ({

if (stepNumber === value) {
dataTestId = 'progress-tracker-step-current';
StepComponent = CurrentStep;
StepComponent = ActiveStep;
} else if ((linear && stepNumber < value) || (!linear && step.completion === 'completed')) {
dataTestId = 'progress-tracker-step-completed';
screenReaderText = t('completedAriaLabel');
Expand All @@ -186,7 +190,7 @@ const Step: VoidFunctionComponent<StepProps> = ({

const content = (
<>
{showUncompletedIcon && <UncompletedIcon name='alertCircle' size='16' aria-hidden="true" />}
{showUncompletedIcon && <NotificationBadgeIcon name='alertCircle' size='16' aria-hidden="true" />}
{step.label && <Label data-testid="progress-tracker-label">{step.label}</Label>}
{screenReaderText && <ScreenReaderOnlyText label={screenReaderText} />}
</>
Expand Down
19 changes: 7 additions & 12 deletions packages/react/src/components/status/status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,22 @@ import { ResolvedTheme } from '../../themes/theme';

export type StatusType = 'enabled' | 'disabled' | 'blocked';

function getBackgroundColor(type: StatusType, theme: ResolvedTheme): string {
switch (type) {
case 'enabled':
return theme.notifications['success-1.1'];
case 'disabled':
return theme.greys.white;
case 'blocked':
return theme.notifications['alert-2.1'];
function getCircleBorderStyle({ theme, type }: {theme: ResolvedTheme, type: StatusType}): string {
if (type === 'disabled') {
return `1px solid ${theme.component['status-circle-disabled-border-color']}`;
}
return 'none';
}

const Wrapper = styled.div<{ type: StatusType }>`
align-items: center;
display: flex;

${({ type, theme }) => type === 'disabled' && `color: ${theme.greys['dark-grey']}`}
${({ type, theme }) => type === 'disabled' && `color: ${theme.component['status-disabled-text-color']}`};
`;

const Circle = styled.div<{ type: StatusType }>`
background-color: ${({ type, theme }) => getBackgroundColor(type, theme)};
border: ${({ type, theme }) => (type === 'disabled' ? `1px solid ${theme.greys['dark-grey']}` : 'none')};
background-color: ${({ theme, type }) => theme.component[`status-circle-${type}-background-color`]};
border: ${getCircleBorderStyle};
border-radius: 50%;
box-sizing: border-box;
height: 0.625rem;
Expand Down
Loading
Loading