Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: return the colors to TW docs #4023

Merged
merged 1 commit into from
Sep 15, 2023
Merged

docs: return the colors to TW docs #4023

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 76 additions & 21 deletions docs/src/components/TailwindClassnames/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import orbitFoundation from "@kiwicom/orbit-tailwind-preset";
import {
Table,
Text,
TableHead,
Stack,
TableRow,
Expand All @@ -15,19 +16,35 @@ import { upperFirst, transform, omit } from "lodash";

import { DesignTokenName, DesignTokenValue, DesignTokenIcon } from "../DesignTokensList";

type Category =
| "Screens"
| "Spacing"
| "ZIndex"
| "Colors"
| "BorderRadius"
| "BoxShadow"
| "TransitionDuration"
| "Padding"
| "Width"
| "Height"
| "LineHeight"
| "FontSize"
| "FontWeight"
| "FontFamily"
| "Animation";

/* eslint-disable no-param-reassign */

const StyledTableWrapper = styled.div`
table {
table-layout: fixed;
}
`;

const tailwindPrefixes = {
BackgroundColor: "bg",
BorderColor: "border",
BorderRadius: "rounded",
BoxShadow: "shadow",
TransitionDuration: "duration",
TextColor: "text",
Padding: "p",
Width: "w",
Height: "h",
Expand All @@ -39,7 +56,7 @@ const tailwindPrefixes = {
Animation: "animate",
};

const getCategory = (name: string) => {
const getCategory = (name: Category) => {
if (["Padding", "Width", "Height"].includes(name)) return "size";
if (["FontWeight", "FontSize", "LineHeight", "FontFamily"].includes(name)) return "typography";
if (name === "ZIndex") return "z-index";
Expand All @@ -52,6 +69,36 @@ const getCategory = (name: string) => {
return "palette";
};

const transformColors = (colors: Record<string, string>) => {
return Object.entries(colors).reduce((acc, [category, value]) => {
if (typeof value === "object") {
Object.entries(value).forEach(([name, color]) => {
acc[`${category}-${name}`] = color;
});
} else {
acc[category] = value;
}

return acc;
}, {});
};

const CategoryDescriptions = ({ category }: { category: Category }) => {
return (
<Text type="info" weight="medium" margin={{ bottom: "12px" }}>
{category === "Colors" &&
`To be used with Tailwind classes that apply a color property (eg: "text-blue-dark",
"bg-red-light", etc).`}
{category === "Screens" &&
`To be used as a Tailwind prefix for defining media queries (eg: "sm:opacity-1",
"tb:hidden", etc).`}
{category === "Spacing" &&
`To be used as a Tailwind prefix for defining margin and padding (eg: "m-sm", "p-xl", etc).`}
{category === "ZIndex" && "Default Tailwind zIndex classes are also available"}
</Text>
);
};

const TailwindClassnames = () => {
const orbitPreset = orbitFoundation().presets?.at(0)?.theme;
const transformedConfig = omit(
Expand All @@ -61,49 +108,54 @@ const TailwindClassnames = () => {
zIndex: orbitPreset?.extend?.zIndex,
},
(r, v, k) => {
// eslint-disable-next-line no-param-reassign
r[upperFirst(k)] = v;
if (k === "colors") {
// @ts-expect-error lodash
r[upperFirst(k)] = transformColors(v);
} else {
r[upperFirst(k)] = v;
}
return r;
},
{},
),
["Keyframes", "Colors", "Extend"],
["Keyframes", "Extend"],
);

const [listOfClassnames, setListOfClassnames] = React.useState(transformedConfig);

const [selectedGroup, setSelectedGroup] = React.useState<string>();
const [selectedCategory, setSelectedCategory] = React.useState<string>();

return (
<Stack direction="column" shrink spacing="XLarge">
<Stack inline spacing="small" wrap>
{Object.keys(transformedConfig).map(grp => {
{Object.keys(transformedConfig).map(cat => {
return (
<Button
type={selectedGroup === grp ? "primary" : "secondary"}
type={selectedCategory === cat ? "primary" : "secondary"}
size="small"
onClick={() => {
setSelectedGroup(grp);
setSelectedCategory(cat);
setListOfClassnames(() => {
return {
[grp]: {
...transformedConfig[grp],
[cat]: {
...transformedConfig[cat],
},
};
});
}}
>
{grp}
{cat}
</Button>
);
})}
</Stack>
{Object.keys(listOfClassnames).map(group => {
{Object.keys(listOfClassnames).map(category => {
return (
<StyledTableWrapper>
<Heading type="title2" spaceAfter="normal">
{group}
<Heading type="title2" spaceAfter="small">
{category}
</Heading>
<CategoryDescriptions category={category as Category} />
<Table>
<TableHead>
<TableRow>
Expand All @@ -112,16 +164,19 @@ const TailwindClassnames = () => {
</TableRow>
</TableHead>
<TableBody>
{Object.entries(listOfClassnames[group]).map(([name, value]) => {
{Object.entries(listOfClassnames[category]).map(([name, value]) => {
return (
<TableRow>
<TableCell>
<Stack flex align="center">
<DesignTokenIcon value={String(value)} type={getCategory(group)} />
<DesignTokenIcon
value={String(value)}
type={getCategory(category as Category)}
/>
<DesignTokenName tooltipText="Click to copy the classname.">
{["Screens", "Spacing"].includes(group)
{["Screens", "Spacing", "Colors"].includes(category)
? name
: `${tailwindPrefixes[group]}-${name}`}
: `${tailwindPrefixes[category]}-${name}`}
</DesignTokenName>
</Stack>
</TableCell>
Expand Down