Skip to content

Commit

Permalink
typography updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcinsawicki
marcinsawicki committed Jan 31, 2024
1 parent 2bf8aff commit 91614e1
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 74 deletions.
3 changes: 2 additions & 1 deletion packages/react-components/src/components/Typography/Display.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import cx from 'clsx';
import styles from './Typography.module.scss';

interface IProps {
size?: 'md' | 'sm';
/** Size of the text */
size?: 'md' | 'sm' | 'max';
/** DOM element name that will be rendered */
as?: string;
/** Optional custom className */
Expand Down
14 changes: 13 additions & 1 deletion packages/react-components/src/components/Typography/Heading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,30 @@ interface IProps {
as?: string;
/** Optional custom className */
className?: string;
/** Optional prop to set the uppercase */
caps?: boolean;
}

export const Heading: React.FC<React.PropsWithChildren<IProps>> = ({
as,
size = 'md',
children,
className,
caps,
...props
}) => {
return React.createElement(
as || SIZE_TO_ELEMENT_MAP[size],
{ className: cx(styles[`heading-${size}`], className), ...props },
{
className: cx(
{
[styles[`heading-${size}`]]: true,
[styles[`heading-caps`]]: caps,
},
className
),
...props,
},
children
);
};
10 changes: 8 additions & 2 deletions packages/react-components/src/components/Typography/Text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,17 @@ type TSize = 'md' | 'sm' | 'xs';
interface IProps {
/** DOM element name that will be rendered */
as?: string;
/** Size of the text */
size?: TSize;
/** Optional custom className */
className?: string;
/** Optional prop to set the uppercase */
caps?: boolean;
/** Optional prop to set the bold */
bold?: boolean;
/** Optional prop to set the underline */
underline?: boolean;
/** Optional prop to set the strike */
strike?: boolean;
}

Expand All @@ -29,17 +34,18 @@ export const Text: React.FC<React.PropsWithChildren<IProps>> = ({
className,
...props
}) => {
const baseClassPrefix = caps ? 'caps' : `paragraph-${size}`;
const baseClassPrefix = `paragraph`;

return React.createElement(
as,
{
className: cx(
{
[styles[`${baseClassPrefix}`]]: true,
[styles[`${baseClassPrefix}-${size}`]]: true,
[styles[`${baseClassPrefix}--bold`]]: bold,
[styles[`${baseClassPrefix}--strike`]]: strike,
[styles[`${baseClassPrefix}--underline`]]: underline,
[styles[`${baseClassPrefix}--caps`]]: caps,
},
className
),
Expand Down
79 changes: 39 additions & 40 deletions packages/react-components/src/components/Typography/Typography.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
line-height: 28px;
letter-spacing: 0;
font-size: 20px;
font-weight: 600;
font-weight: 700;
font-style: normal;
}

Expand All @@ -38,73 +38,50 @@
font-style: normal;
}

@mixin caps {
@mixin heading-caps {
text-transform: uppercase;
line-height: 20px;
letter-spacing: 0.2px;
font-size: 12px;
font-weight: 400;
font-style: normal;

&--bold {
font-weight: 600;
}
}

@mixin paragraph-md {
line-height: 22px;
letter-spacing: 0;
font-size: 15px;
letter-spacing: -0.1px;
font-size: 14px;
font-weight: 400;
font-style: normal;

&--bold {
font-weight: 600;
}

&--underline {
text-decoration-line: underline;
}

&--strike {
text-decoration-line: line-through;
}
}

@mixin paragraph-sm {
line-height: 20px;
letter-spacing: 0;
font-size: 14px;
letter-spacing: -0.1px;
font-size: 13px;
font-weight: 400;
font-style: normal;

&--bold {
font-weight: 600;
}
}

@mixin paragraph-xs {
line-height: 16px;
letter-spacing: 0.2px;
letter-spacing: 0;
font-size: 12px;
font-weight: 400;
font-style: normal;

&--bold {
font-weight: 600;
}
}

@mixin display-md {
line-height: 32px;
font-size: 24px;
font-weight: bold;
font-weight: 700;
}

@mixin display-sm {
line-height: 24px;
font-size: 18px;
font-weight: bold;
font-weight: 700;
}

@mixin display-max {
line-height: 80px;
font-size: 80px;
font-weight: 700;
}

.heading-xl {
Expand All @@ -127,8 +104,8 @@
@include heading-xs;
}

.caps {
@include caps;
.heading-caps {
@include heading-caps;
}

.paragraph-md {
Expand All @@ -143,10 +120,32 @@
@include paragraph-xs;
}

.paragraph {
&--bold {
font-weight: 600;
}

&--underline {
text-decoration-line: underline;
}

&--strike {
text-decoration-line: line-through;
}

&--caps {
text-transform: uppercase;
}
}

.display-md {
@include display-md;
}

.display-sm {
@include display-sm;
}

.display-max {
@include display-max;
}
80 changes: 50 additions & 30 deletions packages/react-components/src/docs/foundations/Typography.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,20 @@ You can modify the output element via `as` prop. For example if you want to rend
backgroundColor: 'var(--background)',
}}
>
<Heading size="xl">Heading XLarge</Heading>
<Heading size="lg">Heading Large</Heading>
<Heading size="md">Heading Medium</Heading>
<Heading size="sm">Heading Small</Heading>
<Heading size="xs">Heading XSmall</Heading>
<div>
<Heading size="xl">Heading XL</Heading>
<Heading size="lg">Heading LG</Heading>
<Heading size="md">Heading MD</Heading>
<Heading size="sm">Heading SM</Heading>
<Heading size="xs">Heading XS</Heading>
</div>
<div>
<Heading size="xl" caps>Heading XL CAPS</Heading>
<Heading size="lg" caps>Heading LG CAPS</Heading>
<Heading size="md" caps>Heading MD CAPS</Heading>
<Heading size="sm" caps>Heading SM CAPS</Heading>
<Heading size="xs" caps>Heading XS CAPS</Heading>
</div>
</Canvas>

## Text
Expand All @@ -53,25 +62,39 @@ You can modify the output element via `as` prop. For example if you want to rend
backgroundColor: 'var(--background)',
}}
>
<Text>Paragraph Medium</Text>
<Text bold>Paragraph Medium Bold</Text>
<Text underline>Paragraph Medium Underline</Text>
<Text strike>Paragraph Medium Strikethrough</Text>
<Text size="sm">Paragraph Small</Text>
<Text size="sm" bold>
Paragraph Small Bold
</Text>
<Text size="xs">Paragraph XSmall</Text>
<Text size="xs" bold>
Paragraph XSmall Bold
</Text>
<Text caps>Caps</Text>
<Text caps bold>
Bold Caps
</Text>
<Text as="div" size="sm">
Small text as div
</Text>
<div>
<Text>Paragraph MD</Text>
<Text bold>Paragraph MD Bold</Text>
<Text underline>Paragraph MD Underline</Text>
<Text strike>Paragraph MD Strikethrough</Text>
<Text caps>Paragraph MD CAPS</Text>
</div>
<div>
<Text size="sm">Paragraph SM</Text>
<Text size="sm" bold>
Paragraph SM Bold
</Text>
<Text size="sm" underline>
Paragraph SM Underline
</Text>
<Text size="sm" strike>
Paragraph SM Strikethrough
</Text>
<Text size="sm" caps>Paragraph SM CAPS</Text>
</div>
<div>
<Text size="xs">Paragraph XS</Text>
<Text size="xs" bold>
Paragraph XS Bold
</Text>
<Text size="xs" underline>
Paragraph XS Underline
</Text>
<Text size="xs" strike>
Paragraph XS Strikethrough
</Text>
<Text size="xs" caps>Paragraph XS CAPS</Text>
</div>
</Canvas>

## Display
Expand All @@ -90,10 +113,7 @@ You can modify the output element via `as` prop. For example if you want to rend
backgroundColor: 'var(--background)',
}}
>
<Display>Div Medium</Display>
<Display size="sm">Div Small</Display>
<Display as="p">Paragraph Medium</Display>
<Display as="p" size="sm">
Paragraph Small
</Display>
<Display size="max">Display MAX</Display>
<Display>Display MD</Display>
<Display size="sm">Display SM</Display>
</Canvas>

0 comments on commit 91614e1

Please sign in to comment.