Skip to content

Commit

Permalink
feat: remove unicoderange from our font faces (#675)
Browse files Browse the repository at this point in the history
  • Loading branch information
@artmsilva
artmsilva authored Dec 9, 2024
1 parent 546bce7 commit 74e8ffe
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 166 deletions.
312 changes: 156 additions & 156 deletions build.washingtonpost.com/components/Markdown/Examples/IconSamples.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,163 +18,163 @@ import { logoList } from "./LogoSamples";
*/

const SuccessToast = ({ Name }) => {
return (
<AlertBanner.Root variant="success">
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
<b>Copied: </b>
<Box as="span" css={{ fontSize: 16 }}>
Import statement for{" "}
<Box as="i" css={{ textTransform: "capitalize" }}>
{Name}
</Box>
</Box>
</AlertBanner.Content>
</AlertBanner.Root>
);
return (
<AlertBanner.Root variant="success">
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
<b>Copied: </b>
<Box as="span" css={{ fontSize: 16 }}>
Import statement for{" "}
<Box as="i" css={{ textTransform: "capitalize" }}>
{Name}
</Box>
</Box>
</AlertBanner.Content>
</AlertBanner.Root>
);
};

export default function Icons({ data }) {
const [controlledValue, setControlledValue] = useState("");

useEffect(() => {
// if on window and has search query
if (typeof window !== "undefined" && window.location.search) {
const search = new URLSearchParams(window.location.search).get("search");
setControlledValue(search);
}
}, []);

// when search query changes
useEffect(() => {
if (controlledValue) {
// debounce search
const timeout = setTimeout(() => {
handleChange({ target: { value: controlledValue } });

// push search query to url
if (typeof window !== "undefined") {
window.history.pushState(
{},
"",
`${window.location.pathname}?search=${controlledValue}`,
);
}
}, 300);

return () => clearTimeout(timeout);
}
}, [controlledValue]);

const fuse = new Fuse(data, {
keys: ["name", "description"],
threshold: 0.1,
});

const [ExampleToCopy, setExampleToCopy] = useState(null);
const [Name, setName] = useState("");
const [Filter, setFilter] = useState([]);

useEffect(() => {
if (ExampleToCopy) {
window.navigator.clipboard.writeText(ExampleToCopy);

toast(<SuccessToast Name={Name}/>, {
position: "top-center",
closeButton: false,
autoClose: 2000,
hideProgressBar: true,
draggable: false,
onClose: () => {
setName(null);
},
});
}
}, [ExampleToCopy, Name]);

function setVariables(example, Name) {
setName(Name);
setExampleToCopy(example);
}

function handleChange(e) {
const value = e.target.value;

setControlledValue(value);

const result = fuse.search(value);
setFilter(result);
}

const GetIcons = () => {
let list;

if (Filter.length === 0) {
list = Object.keys(AllAssets).filter(
(asset) => !logoList.includes(paramCase(asset)),
);
} else {
list = Filter.map((filtered) =>
pascalCase(filtered.item.name).replace("15", "Svg15"),
);
}

return list.map((Asset, i) => {
const Sample = AllAssets[Asset];
if (!Sample) {
return;
}
const componentName = paramCase(Asset);

const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;

return (
<MDXStyling.Cell key={i}>
<Box
as="button"
onClick={() => setVariables(importExample, componentName)}
css={{
display: "flex",
width: "100%",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
gap: "$075",
border: "none",
"&:hover": { opacity: 0.5 },
backgroundColor: theme.colors.gray500,
padding: theme.space[100],
color: "$primary",
}}
>
<Icon size="$150">
<Sample />
</Icon>
<Box as="span">{componentName}</Box>
</Box>
</MDXStyling.Cell>
);
});
};

return (
<>
<Box css={{ marginBottom: "$050" }}>
<InputText
onChange={handleChange}
label="Search"
icon="right"
value={controlledValue}
>
<Icon label="">
<Search />
</Icon>
</InputText>
</Box>

<Grid maxSize={"150px"}>
<GetIcons />
</Grid>
</>
);
const [controlledValue, setControlledValue] = useState("");

useEffect(() => {
// if on window and has search query
if (typeof window !== "undefined" && window.location.search) {
const search = new URLSearchParams(window.location.search).get("search");
setControlledValue(search);
}
}, []);

// when search query changes
useEffect(() => {
if (controlledValue) {
// debounce search
const timeout = setTimeout(() => {
handleChange({ target: { value: controlledValue } });

// push search query to url
if (typeof window !== "undefined") {
window.history.pushState(
{},
"",
`${window.location.pathname}?search=${controlledValue}`
);
}
}, 300);

return () => clearTimeout(timeout);
}
}, [controlledValue]);

const fuse = new Fuse(data, {
keys: ["name", "description"],
threshold: 0.1,
});

const [ExampleToCopy, setExampleToCopy] = useState(null);
const [Name, setName] = useState("");
const [Filter, setFilter] = useState([]);

useEffect(() => {
if (ExampleToCopy) {
window.navigator.clipboard.writeText(ExampleToCopy);

toast(<SuccessToast Name={Name} />, {
position: "top-center",
closeButton: false,
autoClose: 2000,
hideProgressBar: true,
draggable: false,
onClose: () => {
setName(null);
},
});
}
}, [ExampleToCopy, Name]);

function setVariables(example, Name) {
setName(Name);
setExampleToCopy(example);
}

function handleChange(e) {
const value = e.target.value;

setControlledValue(value);

const result = fuse.search(value);
setFilter(result);
}

const GetIcons = () => {
let list;

if (Filter.length === 0) {
list = Object.keys(AllAssets).filter(
(asset) => !logoList.includes(paramCase(asset))
);
} else {
list = Filter.map((filtered) =>
pascalCase(filtered.item.name).replace("15", "Svg15")
);
}

return list.map((Asset, i) => {
const Sample = AllAssets[Asset];
if (!Sample) {
return;
}
const componentName = paramCase(Asset);

const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;

return (
<MDXStyling.Cell key={i}>
<Box
as="button"
onClick={() => setVariables(importExample, componentName)}
css={{
display: "flex",
width: "100%",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
gap: "$075",
border: "none",
"&:hover": { opacity: 0.5 },
backgroundColor: theme.colors.gray500,
padding: theme.space[100],
color: "$primary",
}}
>
<Icon size="$150">
<Sample />
</Icon>
<Box as="span">{componentName}</Box>
</Box>
</MDXStyling.Cell>
);
});
};

return (
<>
<Box css={{ marginBottom: "$050" }}>
<InputText
onChange={handleChange}
label="Search"
icon="right"
value={controlledValue}
>
<Icon label="">
<Search />
</Icon>
</InputText>
</Box>

<Grid maxSize={"150px"}>
<GetIcons />
</Grid>
</>
);
}
10 changes: 0 additions & 10 deletions packages/kit/src/theme/stitches.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,16 +193,12 @@ export const globalStyles = globalCss({
fontWeight: 700,
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2)",
unicodeRange:
"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",
},
{
fontFamily: "Postoni",
fontWeight: 300,
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2)",
unicodeRange:
"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",
},
{
fontFamily: "Franklin-fallback",
Expand Down Expand Up @@ -252,24 +248,18 @@ export const globalStyles = globalCss({
fontWeight: 700,
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2)",
unicodeRange:
"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",
},
{
fontFamily: "Franklin",
fontWeight: 300,
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2)",
unicodeRange:
"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",
},
{
fontFamily: "PostoniDisplayMag",
fontWeight: 800,
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra.woff2)",
unicodeRange:
"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",
},
{
fontFamily: "PostoniDisplayMag",
Expand Down

0 comments on commit 74e8ffe

Please sign in to comment.