Skip to content

Commit 74e8ffe

Browse files
artmsilvaartmsilva
authored
feat: remove unicoderange from our font faces (#675)
1 parent 546bce7 commit 74e8ffe

File tree

2 files changed

+156
-166
lines changed

2 files changed

+156
-166
lines changed

‎build.washingtonpost.com/components/Markdown/Examples/IconSamples.jsx

+156-156
Original file line numberDiff line numberDiff line change
@@ -18,163 +18,163 @@ import { logoList } from "./LogoSamples";
1818
*/
1919

2020
const SuccessToast = ({ Name }) => {
21-
return (
22-
<AlertBanner.Root variant="success">
23-
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
24-
<b>Copied: </b>
25-
<Box as="span" css={{ fontSize: 16 }}>
26-
Import statement for{" "}
27-
<Box as="i" css={{ textTransform: "capitalize" }}>
28-
{Name}
29-
</Box>
30-
</Box>
31-
</AlertBanner.Content>
32-
</AlertBanner.Root>
33-
);
21+
return (
22+
<AlertBanner.Root variant="success">
23+
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
24+
<b>Copied: </b>
25+
<Box as="span" css={{ fontSize: 16 }}>
26+
Import statement for{" "}
27+
<Box as="i" css={{ textTransform: "capitalize" }}>
28+
{Name}
29+
</Box>
30+
</Box>
31+
</AlertBanner.Content>
32+
</AlertBanner.Root>
33+
);
3434
};
3535

3636
export default function Icons({ data }) {
37-
const [controlledValue, setControlledValue] = useState("");
38-
39-
useEffect(() => {
40-
// if on window and has search query
41-
if (typeof window !== "undefined" && window.location.search) {
42-
const search = new URLSearchParams(window.location.search).get("search");
43-
setControlledValue(search);
44-
}
45-
}, []);
46-
47-
// when search query changes
48-
useEffect(() => {
49-
if (controlledValue) {
50-
// debounce search
51-
const timeout = setTimeout(() => {
52-
handleChange({ target: { value: controlledValue } });
53-
54-
// push search query to url
55-
if (typeof window !== "undefined") {
56-
window.history.pushState(
57-
{},
58-
"",
59-
`${window.location.pathname}?search=${controlledValue}`,
60-
);
61-
}
62-
}, 300);
63-
64-
return () => clearTimeout(timeout);
65-
}
66-
}, [controlledValue]);
67-
68-
const fuse = new Fuse(data, {
69-
keys: ["name", "description"],
70-
threshold: 0.1,
71-
});
72-
73-
const [ExampleToCopy, setExampleToCopy] = useState(null);
74-
const [Name, setName] = useState("");
75-
const [Filter, setFilter] = useState([]);
76-
77-
useEffect(() => {
78-
if (ExampleToCopy) {
79-
window.navigator.clipboard.writeText(ExampleToCopy);
80-
81-
toast(<SuccessToast Name={Name}/>, {
82-
position: "top-center",
83-
closeButton: false,
84-
autoClose: 2000,
85-
hideProgressBar: true,
86-
draggable: false,
87-
onClose: () => {
88-
setName(null);
89-
},
90-
});
91-
}
92-
}, [ExampleToCopy, Name]);
93-
94-
function setVariables(example, Name) {
95-
setName(Name);
96-
setExampleToCopy(example);
97-
}
98-
99-
function handleChange(e) {
100-
const value = e.target.value;
101-
102-
setControlledValue(value);
103-
104-
const result = fuse.search(value);
105-
setFilter(result);
106-
}
107-
108-
const GetIcons = () => {
109-
let list;
110-
111-
if (Filter.length === 0) {
112-
list = Object.keys(AllAssets).filter(
113-
(asset) => !logoList.includes(paramCase(asset)),
114-
);
115-
} else {
116-
list = Filter.map((filtered) =>
117-
pascalCase(filtered.item.name).replace("15", "Svg15"),
118-
);
119-
}
120-
121-
return list.map((Asset, i) => {
122-
const Sample = AllAssets[Asset];
123-
if (!Sample) {
124-
return;
125-
}
126-
const componentName = paramCase(Asset);
127-
128-
const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;
129-
130-
return (
131-
<MDXStyling.Cell key={i}>
132-
<Box
133-
as="button"
134-
onClick={() => setVariables(importExample, componentName)}
135-
css={{
136-
display: "flex",
137-
width: "100%",
138-
flexDirection: "column",
139-
alignItems: "center",
140-
justifyContent: "center",
141-
cursor: "pointer",
142-
gap: "$075",
143-
border: "none",
144-
"&:hover": { opacity: 0.5 },
145-
backgroundColor: theme.colors.gray500,
146-
padding: theme.space[100],
147-
color: "$primary",
148-
}}
149-
>
150-
<Icon size="$150">
151-
<Sample />
152-
</Icon>
153-
<Box as="span">{componentName}</Box>
154-
</Box>
155-
</MDXStyling.Cell>
156-
);
157-
});
158-
};
159-
160-
return (
161-
<>
162-
<Box css={{ marginBottom: "$050" }}>
163-
<InputText
164-
onChange={handleChange}
165-
label="Search"
166-
icon="right"
167-
value={controlledValue}
168-
>
169-
<Icon label="">
170-
<Search />
171-
</Icon>
172-
</InputText>
173-
</Box>
174-
175-
<Grid maxSize={"150px"}>
176-
<GetIcons />
177-
</Grid>
178-
</>
179-
);
37+
const [controlledValue, setControlledValue] = useState("");
38+
39+
useEffect(() => {
40+
// if on window and has search query
41+
if (typeof window !== "undefined" && window.location.search) {
42+
const search = new URLSearchParams(window.location.search).get("search");
43+
setControlledValue(search);
44+
}
45+
}, []);
46+
47+
// when search query changes
48+
useEffect(() => {
49+
if (controlledValue) {
50+
// debounce search
51+
const timeout = setTimeout(() => {
52+
handleChange({ target: { value: controlledValue } });
53+
54+
// push search query to url
55+
if (typeof window !== "undefined") {
56+
window.history.pushState(
57+
{},
58+
"",
59+
`${window.location.pathname}?search=${controlledValue}`
60+
);
61+
}
62+
}, 300);
63+
64+
return () => clearTimeout(timeout);
65+
}
66+
}, [controlledValue]);
67+
68+
const fuse = new Fuse(data, {
69+
keys: ["name", "description"],
70+
threshold: 0.1,
71+
});
72+
73+
const [ExampleToCopy, setExampleToCopy] = useState(null);
74+
const [Name, setName] = useState("");
75+
const [Filter, setFilter] = useState([]);
76+
77+
useEffect(() => {
78+
if (ExampleToCopy) {
79+
window.navigator.clipboard.writeText(ExampleToCopy);
80+
81+
toast(<SuccessToast Name={Name} />, {
82+
position: "top-center",
83+
closeButton: false,
84+
autoClose: 2000,
85+
hideProgressBar: true,
86+
draggable: false,
87+
onClose: () => {
88+
setName(null);
89+
},
90+
});
91+
}
92+
}, [ExampleToCopy, Name]);
93+
94+
function setVariables(example, Name) {
95+
setName(Name);
96+
setExampleToCopy(example);
97+
}
98+
99+
function handleChange(e) {
100+
const value = e.target.value;
101+
102+
setControlledValue(value);
103+
104+
const result = fuse.search(value);
105+
setFilter(result);
106+
}
107+
108+
const GetIcons = () => {
109+
let list;
110+
111+
if (Filter.length === 0) {
112+
list = Object.keys(AllAssets).filter(
113+
(asset) => !logoList.includes(paramCase(asset))
114+
);
115+
} else {
116+
list = Filter.map((filtered) =>
117+
pascalCase(filtered.item.name).replace("15", "Svg15")
118+
);
119+
}
120+
121+
return list.map((Asset, i) => {
122+
const Sample = AllAssets[Asset];
123+
if (!Sample) {
124+
return;
125+
}
126+
const componentName = paramCase(Asset);
127+
128+
const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;
129+
130+
return (
131+
<MDXStyling.Cell key={i}>
132+
<Box
133+
as="button"
134+
onClick={() => setVariables(importExample, componentName)}
135+
css={{
136+
display: "flex",
137+
width: "100%",
138+
flexDirection: "column",
139+
alignItems: "center",
140+
justifyContent: "center",
141+
cursor: "pointer",
142+
gap: "$075",
143+
border: "none",
144+
"&:hover": { opacity: 0.5 },
145+
backgroundColor: theme.colors.gray500,
146+
padding: theme.space[100],
147+
color: "$primary",
148+
}}
149+
>
150+
<Icon size="$150">
151+
<Sample />
152+
</Icon>
153+
<Box as="span">{componentName}</Box>
154+
</Box>
155+
</MDXStyling.Cell>
156+
);
157+
});
158+
};
159+
160+
return (
161+
<>
162+
<Box css={{ marginBottom: "$050" }}>
163+
<InputText
164+
onChange={handleChange}
165+
label="Search"
166+
icon="right"
167+
value={controlledValue}
168+
>
169+
<Icon label="">
170+
<Search />
171+
</Icon>
172+
</InputText>
173+
</Box>
174+
175+
<Grid maxSize={"150px"}>
176+
<GetIcons />
177+
</Grid>
178+
</>
179+
);
180180
}

‎packages/kit/src/theme/stitches.config.ts

-10
Original file line numberDiff line numberDiff line change
@@ -193,16 +193,12 @@ export const globalStyles = globalCss({
193193
fontWeight: 700,
194194
fontDisplay: "swap",
195195
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2)",
196-
unicodeRange:
197-
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
198196
},
199197
{
200198
fontFamily: "Postoni",
201199
fontWeight: 300,
202200
fontDisplay: "swap",
203201
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2)",
204-
unicodeRange:
205-
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
206202
},
207203
{
208204
fontFamily: "Franklin-fallback",
@@ -252,24 +248,18 @@ export const globalStyles = globalCss({
252248
fontWeight: 700,
253249
fontDisplay: "swap",
254250
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2)",
255-
unicodeRange:
256-
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
257251
},
258252
{
259253
fontFamily: "Franklin",
260254
fontWeight: 300,
261255
fontDisplay: "swap",
262256
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2)",
263-
unicodeRange:
264-
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
265257
},
266258
{
267259
fontFamily: "PostoniDisplayMag",
268260
fontWeight: 800,
269261
fontDisplay: "swap",
270262
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra.woff2)",
271-
unicodeRange:
272-
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
273263
},
274264
{
275265
fontFamily: "PostoniDisplayMag",

0 commit comments

Comments
 (0)