4075845841

Build Type

github

Committed by GitHub

Commit Message

Merge a0d6d6254 into 861d9be98

Pull Request Pull Request #137: fix(typography): :label: fix typography types, making them optional with defaults

Run Details

423 of 538 branches covered (78.62%)

Branch coverage included in aggregate %.

198 of 198 new or added lines in 1 file covered. (100.0%)

4931 of 5687 relevant lines covered (86.71%)

2.84 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

3.06

/lib/components/Typography/Typography.tsx

import React, { PropsWithChildren } from "react";
import { StyledText, StyledTitle } from "./Typography.styled";
import { TextProps, TitleProps } from "./Typography.types";

export function Text({
  as,
  type = "paragraphMedium",
  color = "neutral",
  shade = "900",
  weight = "normal",
  children,
}: PropsWithChildren<TextProps>) {
  if (!as) {
    switch (type) {
      case "overlineLarge":
        return (
          <StyledText
            as="span"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "overlineMedium":
        return (
          <StyledText
            as="span"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "overlineXSmall":
        return (
          <StyledText
            as="span"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "paragraphLarge":
        return (
          <StyledText
            as="p"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "paragraphMedium":
        return (
          <StyledText
            as="p"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "paragraphSmall":
        return (
          <StyledText
            as="p"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
      case "paragraphXSmall":
        return (
          <StyledText
            as="p"
            type={type}
            color={color}
            shade={shade}
            weight={weight}
          >
            {children}
          </StyledText>
        );
    }
  }

  return (
    <StyledText type={type} color={color} shade={shade} weight={weight} as={as}>
      {children}
    </StyledText>
  );
}

export function Title({
  as,
  type = "headingH1",
  color = "neutral",
  shade = "900",
  weight = "bold",
  children,
}: PropsWithChildren<TitleProps>) {
  if (!as) {
    switch (type) {
      case "displayLarge":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h1"
          >
            {children}
          </StyledTitle>
        );
      case "displaySmall":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h2"
          >
            {children}
          </StyledTitle>
        );
      case "headingH1":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h1"
          >
            {children}
          </StyledTitle>
        );
      case "headingH2":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h2"
          >
            {children}
          </StyledTitle>
        );
      case "headingH3":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h3"
          >
            {children}
          </StyledTitle>
        );
      case "headingH4":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h4"
          >
            {children}
          </StyledTitle>
        );
      case "headingH5":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h5"
          >
            {children}
          </StyledTitle>
        );
      case "headingH6":
        return (
          <StyledTitle
            type={type}
            color={color}
            shade={shade}
            weight={weight}
            as="h6"
          >
            {children}
          </StyledTitle>
        );
    }
  }

  return (
    <StyledTitle
      as={as}
      type={type}
      color={color}
      shade={shade}
      weight={weight}
    >
      {children}
    </StyledTitle>
  );
}

1	import React, { PropsWithChildren } from "react";	1✔
2	import { StyledText, StyledTitle } from "./Typography.styled";	1✔
3	import { TextProps, TitleProps } from "./Typography.types";	1✔
4		1✔
5	export function Text({	1✔
6	as,	×
7	type = "paragraphMedium",	×
8	color = "neutral",	×
9	shade = "900",	×
10	weight = "normal",	×
11	children,	×
12	}: PropsWithChildren<TextProps>) {	×
13	if (!as) {	×
14	switch (type) {	×
15	case "overlineLarge":	×
16	return (	×
17	<StyledText	×
18	as="span"	×
19	type={type}	×
20	color={color}	×
21	shade={shade}	×
22	weight={weight}	×
23	>	×
24	{children}	×
25	</StyledText>	×
26	);	×
27	case "overlineMedium":	×
28	return (	×
29	<StyledText	×
30	as="span"	×
31	type={type}	×
32	color={color}	×
33	shade={shade}	×
34	weight={weight}	×
35	>	×
36	{children}	×
37	</StyledText>	×
38	);	×
39	case "overlineXSmall":	×
40	return (	×
41	<StyledText	×
42	as="span"	×
43	type={type}	×
44	color={color}	×
45	shade={shade}	×
46	weight={weight}	×
47	>	×
48	{children}	×
49	</StyledText>	×
50	);	×
51	case "paragraphLarge":	×
52	return (	×
53	<StyledText	×
54	as="p"	×
55	type={type}	×
56	color={color}	×
57	shade={shade}	×
58	weight={weight}	×
59	>	×
60	{children}	×
61	</StyledText>	×
62	);	×
63	case "paragraphMedium":	×
64	return (	×
65	<StyledText	×
66	as="p"	×
67	type={type}	×
68	color={color}	×
69	shade={shade}	×
70	weight={weight}	×
71	>	×
72	{children}	×
73	</StyledText>	×
74	);	×
75	case "paragraphSmall":	×
76	return (	×
77	<StyledText	×
78	as="p"	×
79	type={type}	×
80	color={color}	×
81	shade={shade}	×
82	weight={weight}	×
83	>	×
84	{children}	×
85	</StyledText>	×
86	);	×
87	case "paragraphXSmall":	×
88	return (	×
89	<StyledText	×
90	as="p"	×
91	type={type}	×
92	color={color}	×
93	shade={shade}	×
94	weight={weight}	×
95	>	×
96	{children}	×
97	</StyledText>	×
98	);	×
99	}	×
100	}	×
101		×
102	return (	×
103	<StyledText type={type} color={color} shade={shade} weight={weight} as={as}>	×
104	{children}	×
105	</StyledText>	×
106	);	×
107	}	×
108		1✔
109	export function Title({	1✔
110	as,	×
111	type = "headingH1",	×
112	color = "neutral",	×
113	shade = "900",	×
114	weight = "bold",	×
115	children,	×
116	}: PropsWithChildren<TitleProps>) {	×
117	if (!as) {	×
118	switch (type) {	×
119	case "displayLarge":	×
120	return (	×
121	<StyledTitle	×
122	type={type}	×
123	color={color}	×
124	shade={shade}	×
125	weight={weight}	×
126	as="h1"	×
127	>	×
128	{children}	×
129	</StyledTitle>	×
130	);	×
131	case "displaySmall":	×
132	return (	×
133	<StyledTitle	×
134	type={type}	×
135	color={color}	×
136	shade={shade}	×
137	weight={weight}	×
138	as="h2"	×
139	>	×
140	{children}	×
141	</StyledTitle>	×
142	);	×
143	case "headingH1":	×
144	return (	×
145	<StyledTitle	×
146	type={type}	×
147	color={color}	×
148	shade={shade}	×
149	weight={weight}	×
150	as="h1"	×
151	>	×
152	{children}	×
153	</StyledTitle>	×
154	);	×
155	case "headingH2":	×
156	return (	×
157	<StyledTitle	×
158	type={type}	×
159	color={color}	×
160	shade={shade}	×
161	weight={weight}	×
162	as="h2"	×
163	>	×
164	{children}	×
165	</StyledTitle>	×
166	);	×
167	case "headingH3":	×
168	return (	×
169	<StyledTitle	×
170	type={type}	×
171	color={color}	×
172	shade={shade}	×
173	weight={weight}	×
174	as="h3"	×
175	>	×
176	{children}	×
177	</StyledTitle>	×
178	);	×
179	case "headingH4":	×
180	return (	×
181	<StyledTitle	×
182	type={type}	×
183	color={color}	×
184	shade={shade}	×
185	weight={weight}	×
186	as="h4"	×
187	>	×
188	{children}	×
189	</StyledTitle>	×
190	);	×
191	case "headingH5":	×
192	return (	×
193	<StyledTitle	×
194	type={type}	×
195	color={color}	×
196	shade={shade}	×
197	weight={weight}	×
198	as="h5"	×
199	>	×
200	{children}	×
201	</StyledTitle>	×
202	);	×
203	case "headingH6":	×
204	return (	×
205	<StyledTitle	×
206	type={type}	×
207	color={color}	×
208	shade={shade}	×
209	weight={weight}	×
210	as="h6"	×
211	>	×
212	{children}	×
213	</StyledTitle>	×
214	);	×
215	}	×
216	}	×
217		×
218	return (	×
219	<StyledTitle	×
220	as={as}	×
221	type={type}	×
222	color={color}	×
223	shade={shade}	×
224	weight={weight}	×
225	>	×
226	{children}	×
227	</StyledTitle>	×
228	);	×
229	}	×

LogRock / pebbles / 4075845841

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous