Skip to content

Commit 1880dc1

Browse files
zuramaizuramai
committed
feat: typography texts
1 parent 57cd233 commit 1880dc1

File tree

7 files changed

+190
-0
lines changed

7 files changed

+190
-0
lines changed

‎.storybook/preview.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "tailwindcss/tailwind.css";
2+
import "../src/fonts.css";
23
import type { Preview } from '@storybook/react';
34

45
const preview: Preview = {

‎packages/typography/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "@bootwind/typography",
3+
"version": "0.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"peerDependencies": {
13+
"react": "^18.2.0",
14+
"@types/react": "^18.2.15",
15+
"@types/react-dom": "^18.2.14"
16+
}
17+
}

‎packages/typography/src/text.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, { ReactNode } from 'react';
2+
3+
type TextType = "display" | "headline" | "short-desc" | "paragraph"
4+
type TextFontWeight = "font-thin" | "font-extralight" | "font-light" | "font-normal" | "font-medium" | "font-semibold" | "font-bold" | "font-extrabold" | "font-black"
5+
type TextStyle = Record<TextType, {
6+
defaults: {
7+
fontWeight: TextFontWeight,
8+
size: number,
9+
color: string
10+
},
11+
styles: { fontSize: string, lineHeight: string, letterSpacing: string }[]
12+
}>
13+
const styleMap: TextStyle = {
14+
"display": {
15+
defaults: {
16+
fontWeight: "font-bold",
17+
color: "text-[#3D4A5C]",
18+
size: 1
19+
},
20+
styles: [
21+
{ fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[3.5px]" },
22+
{ fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[3.5px]" },
23+
{ fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[3.5px]" },
24+
{ fontSize: "text-[6rem]", lineHeight: "leading-[6.87rem]", letterSpacing: "tracking-[2.5px]" },
25+
]
26+
},
27+
"headline": {
28+
defaults: {
29+
fontWeight: "font-bold",
30+
color: "text-[#3D4A5C]",
31+
size: 1
32+
},
33+
styles: [
34+
{ fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[2.3px]" },
35+
{ fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[2.3px]" },
36+
{ fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[2.3px]" },
37+
{ fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[1px]" },
38+
{ fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[0.5px]" },
39+
{ fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.4px]" },
40+
]
41+
},
42+
"short-desc": {
43+
defaults: {
44+
fontWeight: "font-medium",
45+
color: "text-black",
46+
size: 1
47+
},
48+
styles: [
49+
{ fontSize: "text-[1.875rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" },
50+
{ fontSize: "text-[1.75rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" },
51+
{ fontSize: "text-[1.625rem]", lineHeight: "leading-[2.5rem]", letterSpacing: "tracking-[0.5px]" },
52+
{ fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.5px]" },
53+
]
54+
},
55+
"paragraph": {
56+
defaults: {
57+
fontWeight: "font-normal",
58+
color: "text-black",
59+
size: 1
60+
},
61+
styles: [
62+
{ fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[0.3px]" },
63+
{ fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[0.3px]" },
64+
{ fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[0.3px]" },
65+
{ fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[0.3px]" },
66+
{ fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[0.2px]" },
67+
{ fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[0.2px]" },
68+
]
69+
},
70+
}
71+
72+
export interface TextProps {
73+
type?: TextType
74+
size?: number
75+
italic?: boolean
76+
color?: string
77+
weight?: TextFontWeight
78+
children?: ReactNode
79+
}
80+
81+
const Text: React.FC<TextProps> = ({
82+
type = "paragraph",
83+
size = styleMap[type].defaults.size,
84+
weight = styleMap[type].defaults.fontWeight,
85+
color = styleMap[type].defaults.color,
86+
italic = false,
87+
children
88+
}: TextProps) => {
89+
const styles = Object.values(styleMap[type].styles[size-1]).join(' ')
90+
const additionalClasses = [
91+
`bootwind-text bootwind-text-${type}`,
92+
italic ? 'italic' : '',,
93+
weight,
94+
color
95+
].join(' ')
96+
97+
const classes = `${additionalClasses} ${styles}`
98+
99+
return (
100+
<p className={classes}>{children}</p>
101+
)
102+
};
103+
104+
export default Text;

‎packages/typography/stories/Text.stories.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Meta } from '@storybook/react';
2+
import Text, { TextProps } from '../src/text';
3+
4+
export default {
5+
title: 'Typography/Text',
6+
component: Text,
7+
argTypes: {
8+
9+
},
10+
} as Meta;
11+
12+
export const Sizes = (args: TextProps) => (
13+
<div>
14+
15+
{[...Array(6)].map((_, i) => (
16+
<div className='mb-12'>
17+
<Text type='paragraph' size={i+1} weight='font-bold'>Paragraph: {i+1} / Bold</Text>
18+
<Text type='paragraph' size={i+1} weight='font-semibold'>Paragraph: {i+1} / SemiBold</Text>
19+
<Text type='paragraph' size={i+1} weight='font-medium'>Paragraph: {i+1} / Medium</Text>
20+
<Text type='paragraph' size={i+1} weight='font-normal'>Paragraph: {i+1} / Normal</Text>
21+
</div>
22+
))}
23+
{[...Array(4)].map((_, i) => (
24+
<div className='mb-12'>
25+
<Text type='short-desc' size={i+1} weight='font-bold'>Short Desc: {i+1} / Bold</Text>
26+
<Text type='short-desc' size={i+1} weight='font-semibold'>Short Desc: {i+1} / SemiBold</Text>
27+
<Text type='short-desc' size={i+1} weight='font-medium'>Short Desc: {i+1} / Medium</Text>
28+
<Text type='short-desc' size={i+1} weight='font-normal'>Short Desc: {i+1} / Normal</Text>
29+
</div>
30+
))}
31+
{[...Array(6)].map((_, i) => (
32+
<div className='mb-12'>
33+
<Text type='headline' size={i+1} weight='font-bold'>Headline: {i+1} / Bold</Text>
34+
<Text type='headline' size={i+1} weight='font-semibold'>Headline: {i+1} / SemiBold</Text>
35+
<Text type='headline' size={i+1} weight='font-medium'>Headline: {i+1} / Medium</Text>
36+
<Text type='headline' size={i+1} weight='font-normal'>Headline: {i+1} / Normal</Text>
37+
</div>
38+
))}
39+
{[...Array(3)].map((_, i) => (
40+
<div className='mb-24'>
41+
<Text type='display' size={i+1} weight='font-bold' >Display: i+1 / Bold</Text>
42+
<Text type='display' size={i+1} weight='font-semibold' >Display: i+1 / Semibold</Text>
43+
<Text type='display' size={i+1} weight='font-medium' >Display: i+1 / Medium</Text>
44+
</div>
45+
))}
46+
</div>
47+
);

‎packages/typography/tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": ["../../tsconfig.json"],
3+
"include": ["src"]
4+
}

‎pnpm-lock.yaml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/fonts.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
2+
3+
body {
4+
font-family: 'Inter';
5+
}

0 commit comments

Comments
 (0)