Skip to content

Commit

Permalink
sorts palette colors and usage themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@egoens
egoens committed Aug 24, 2024
1 parent b16fe46 commit 1b2a2d9
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 96 deletions.
92 changes: 57 additions & 35 deletions next/pages/guidelines/color/palette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { NavigationCaretDownSmall } from '@thumbtack/thumbprint-icons';
import { Text } from '@thumbtack/thumbprint-react';
import { ContentPage } from '../../../components/mdx/mdx';
import getLayoutProps from '../../../utils/get-layout-props';
import { H2, P, LI, UL } from '../../../components/mdx/components';
import { H2, P } from '../../../components/mdx/components';
import { paletteColortMappings } from './usage-mappings';

import purple from '../../../images/pages/guide/product/color/palette/purple.png';
Expand Down Expand Up @@ -176,6 +176,61 @@ function Swatch({ tokenColor, level }: SwatchProps): JSX.Element {
);
}

function renderColors({ usages }): JSX.Element {
return (
<div className="pt6">
{Object.keys(usages)
.map(key => {
return (
<div key={key} className="ba b-gray-300 pa5 br3 mb5">
<H2>{paletteColortMappings[key].title}</H2>
<P>{paletteColortMappings[key].description}</P>

<div className="flex flex-column l_flex-row row-gap4 col-gap4 ">
<div className="flex-auto tp-body-2">
<div className="b">Suggested use</div>
<Text className="pb3 black-300" size={2}>
{paletteColortMappings[key].suggestedUse}
</Text>

<div className="br3 overflow-hidden">
{usages[key].map(component => {
return <ColorSection values={component.values} />;
})}
</div>
</div>

<div style={{ minWidth: '375px' }}>
<div className="tp-body-3 ttu">Examples</div>
<img
src={images[key].src.src}
width="375px"
alt={images[key].alt}
/>
</div>
</div>
</div>
);
})
.sort((a, b) => {
const colorOrder = {
purple: 4,
yellow: 7,
neutral: 1,
red: 6,
indigo: 3,
green: 5,
blue: 2,
};
if (!colorOrder[a.key] || !colorOrder[b.key]) {
throw new Error(`All colors must be defined in the \`colorOrder\` object.`);
}
return colorOrder[a.key] - colorOrder[b.key];
})}
</div>
);
}

export default function OverviewAbout({
usages,
layoutProps,
Expand Down Expand Up @@ -305,40 +360,7 @@ export default function OverviewAbout({
</div>

{/* colors */}
<div className="pt6">
{Object.keys(usages).map(key => {
return (
<div className="ba b-gray-300 pa5 br3 mb5">
<H2>{paletteColortMappings[key].title}</H2>
<P>{paletteColortMappings[key].description}</P>

<div className="flex flex-column l_flex-row row-gap4 col-gap4 ">
<div className="flex-auto tp-body-2">
<div className="b">Suggested use</div>
<Text className="pb3 black-300" size={2}>
{paletteColortMappings[key].suggestedUse}
</Text>

<div className="br3 overflow-hidden">
{usages[key].map(component => {
return <ColorSection values={component.values} />;
})}
</div>
</div>

<div style={{ minWidth: '375px' }}>
<div className="tp-body-3 ttu">Examples</div>
<img
src={images[key].src.src}
width="375px"
alt={images[key].alt}
/>
</div>
</div>
</div>
);
})}
</div>
{renderColors({ usages })}
</ContentPage>
);
}
Expand Down
140 changes: 79 additions & 61 deletions next/pages/guidelines/color/usage/usage-categories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,76 +3,94 @@ import usageContentMappings from '../usage-mappings';
import ExampleBox from '../../../../components/example-box';
import { H2, P } from '../../../../components/mdx/components';

function showInteractionColum(usages) {
function showInteractionColumn(usages) {
return usages.filter(item => item.values.interaction !== '').length;
}

export default function UsageCategory({ usages, images }): JSX.Element {
return (
<div>
{Object.keys(usages).map(key => {
return (
<div key={key}>
<div className="mb4">
<H2>{usageContentMappings[key].title}</H2>
<P>{usageContentMappings[key].description}</P>
</div>
{Object.keys(usages)
.map(key => {
return (
<div key={key}>
<div className="mb4">
<H2>{usageContentMappings[key].title}</H2>
<P>{usageContentMappings[key].description}</P>
</div>

<table className="tp-body-2 black-300">
<tr className="bb b-gray-300">
<th className="tl pv2 pr4">Color</th>
<th className="tl pv2 pr4">Emphasis</th>
{showInteractionColum(usages[key]) > 0 ? (
<th className="tl pv2 pr4">Interaction</th>
) : null}
<th className="tl pv2 ">Description</th>
</tr>
{usages[key].map(component => {
return (
<tr className="bb b-gray-300" key={component}>
<td className="v-top pv2 pr4 s_nowrap">
<div>
<span
className="w1 h1 mr2 dib relative top-3 br2 b-gray-300 ba"
style={{
background: `${component.values['light-hex']}`,
}}
/>
{component.values.color}
</div>
</td>
<td className="v-top pv2 pr4">
{component.values.emphasis}
</td>
{showInteractionColum(usages[key]) > 0 ? (
<table className="tp-body-2 black-300">
<tr className="bb b-gray-300">
<th className="tl pv2 pr4">Color</th>
<th className="tl pv2 pr4">Emphasis</th>
{showInteractionColumn(usages[key]) > 0 ? (
<th className="tl pv2 pr4">Interaction</th>
) : null}
<th className="tl pv2 ">Description</th>
</tr>
{usages[key].map(component => {
return (
<tr className="bb b-gray-300" key={component}>
<td className="v-top pv2 pr4 s_nowrap">
<div>
<span
className="w1 h1 mr2 dib relative top-3 br2 b-gray-300 ba"
style={{
background: `${component.values['light-hex']}`,
}}
/>
{component.values.color}
</div>
</td>
<td className="v-top pv2 pr4">
{component.values.interaction}
{component.values.emphasis}
</td>
) : null}
<td className="v-top pv2">
{component.values.description}
</td>
</tr>
);
})}
</table>
{images[key] ? (
<div className="pt3">
<span className="tp-body-3 black-300 ttu">Examples</span>
<ExampleBox>
<div className="tc" style={{ minWidth: '375px' }}>
<img
src={images[key].src.src}
width="375px"
alt={images[key].alt}
/>
</div>
</ExampleBox>
</div>
) : null}
</div>
);
})}
{showInteractionColumn(usages[key]) > 0 ? (
<td className="v-top pv2 pr4">
{component.values.interaction}
</td>
) : null}
<td className="v-top pv2">
{component.values.description}
</td>
</tr>
);
})}
</table>
{images[key] ? (
<div className="pt3">
<span className="tp-body-3 black-300 ttu">Examples</span>
<ExampleBox>
<div className="tc" style={{ minWidth: '375px' }}>
<img
src={images[key].src.src}
width="375px"
alt={images[key].alt}
/>
</div>
</ExampleBox>
</div>
) : null}
</div>
);
})
.sort((a, b) => {
console.log(a);

Check warning on line 78 in next/pages/guidelines/color/usage/usage-categories.tsx

View workflow job for this annotation

GitHub Actions / ESLint 

Unexpected console statement
const themeOrder = {
neutral: 1,
primary: 2,
guidance: 3,
accent: 4,
success: 5,
alert: 6,
caution: 7,
input: 8,
};
if (!themeOrder[a.key] || !themeOrder[b.key]) {
throw new Error(`All themes must be defined in the \`themeOrder\` object.`);
}
return themeOrder[a.key] - themeOrder[b.key];
})}
</div>
);
}

0 comments on commit 1b2a2d9

Please sign in to comment.