Skip to content

Commit

Permalink
feat(eyebrow): adding eyebrow variation as a paramter option
Browse files Browse the repository at this point in the history
  • Loading branch information
Vega committed Dec 10, 2024

Verified

This commit was signed with the committer’s verified signature.
Robbepop Robin Freyler
1 parent f1f4de9 commit ec421b7
Showing 3 changed files with 22 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -22,14 +22,18 @@ const meta = {
'headline3',
'caption',
'eyebrow',
'eyebrow2',
],
control: { type: 'select' },
},
alignment: {
options: ['center', 'left', 'right'],
control: { type: 'select' },
if: { arg: 'scale', eq: 'eyebrow' },
},
},
args: { scale: 'headline1' },
args: { scale: 'headline1', alignment: 'center' },
render: (args) => {
return <Typography scale={args.scale}>Change the scale value.</Typography>;
return <Typography scale={args.scale} alignment={args.alignment}>Change the scale value.</Typography>;
},
} satisfies Meta<typeof Typography>;

7 changes: 4 additions & 3 deletions libs/react-components/src/lib/components/Typography/index.tsx
Original file line number Diff line number Diff line change
@@ -13,17 +13,18 @@ interface TypographyProps {
| 'headline2'
| 'headline3'
| 'caption'
| 'eyebrow'
| 'eyebrow2';
| 'eyebrow';
alignment: 'center' | 'left' | 'right';
children?: ReactNode;
}

const Typography: React.FC<TypographyProps> = ({
scale = 'body1',
alignment = 'center',
children,
}) => {
return (
<slot className={`${styles[scale]} ${styles.typography}`}>{children}</slot>
<slot className={`${styles[scale]} ${alignment && scale === 'eyebrow' ? styles[alignment] : 'center'} ${styles.typography}`}>{children}</slot>
);
};

Original file line number Diff line number Diff line change
@@ -70,7 +70,7 @@
}

.caption,
.eyebrow, .eyebrow2 {
.eyebrow {
@extend %headline-styles;
/* Desktop/Caption/Bold */
font-family: var(--td-web-typography-caption-font-family);
@@ -81,26 +81,21 @@


.eyebrow {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;

&::after {
background-color: var(--cv-theme-tertiary);
border-radius: 2px;
content: '';
height: 2px;
width: 20px;
&.center {
align-items: center;
}

&.left {
align-items: flex-start;
}
}

.eyebrow2 {
align-items: left;
display: flex;
flex-direction: column;
gap: 8px;

&.right {
align-items: flex-end;
}
&::after {
background-color: var(--cv-theme-tertiary);
border-radius: 2px;
@@ -110,6 +105,7 @@
}
}


/* Mobile styles */
@media only screen and (max-width: 768px) {
.headline1 {

0 comments on commit ec421b7

Please sign in to comment.