xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign homepage WIP

Browse source
This commit is contained in:
Robert Long 2022-01-04 16:00:13 -08:00
commit ef8c28f274
18 changed files with 697 additions and 437 deletions
Download patch file Download diff file Expand all files Collapse all files

123
src/typography/Typography.jsx Normal file
View file

@ -0,0 +1,123 @@
import React, { forwardRef } from "react";
import classNames from "classnames";
import { Link as RouterLink } from "react-router-dom";
import styles from "./Typography.module.css";
export const Headline = forwardRef(
({ as: Component = "h1", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Title = forwardRef(
({ as: Component = "h2", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Subtitle = forwardRef(
({ as: Component = "h3", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Body = forwardRef(
({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Caption = forwardRef(
({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles.caption, styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Micro = forwardRef(
({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
return (
<Component
{...rest}
className={classNames(styles.micro, styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);
export const Link = forwardRef(
(
{
as: Component = RouterLink,
children,
className,
color = "link",
href,
fontWeight,
...rest
},
ref
) => {
let externalLinkProps;
if (href) {
externalLinkProps = {
target: "_blank",
rel: "noreferrer noopener",
};
}
return (
<Component
{...externalLinkProps}
{...rest}
className={classNames(styles[color], styles[fontWeight], className)}
ref={ref}
>
{children}
</Component>
);
}
);

29
src/typography/Typography.module.css Normal file
View file

@ -0,0 +1,29 @@
.caption {
font-size: 12px;
line-height: 15px;
}
.micro {
font-size: 10px;
line-height: 12px;
}
.regular {
font-weight: 400;
}
.semiBold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.link {
color: var(--linkColor);
}
.primary {
color: var(--primaryColor);
}

25
src/typography/Typography.stories.jsx Normal file
View file

@ -0,0 +1,25 @@
import React from "react";
import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
export default {
title: "Typography",
parameters: {
layout: "fullscreen",
},
};
export const Typography = () => (
<>
<Headline>Headline Semi Bold</Headline>
<Title>Title</Title>
<Subtitle>Subtitle</Subtitle>
<Subtitle fontWeight="semiBold">Subtitle Semi Bold</Subtitle>
<Body>Body</Body>
<Body fontWeight="semiBold">Body Semi Bold</Body>
<Caption>Caption</Caption>
<Caption fontWeight="semiBold">Caption Semi Bold</Caption>
<Caption fontWeight="bold">Caption Bold</Caption>
<Micro>Micro</Micro>
<Micro fontWeight="bold">Micro bold</Micro>
</>
);