Skip to content

Commit

Permalink
cleans up linter issues
Browse files Browse the repository at this point in the history 
adds tab nav component for usage tabs
adds alt tags for images
moves reusable types into utils
  • Loading branch information
@egoens
egoens committed Aug 24, 2024
1 parent 1b2a2d9 commit 4e2c647
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 307 deletions.
11 changes: 2 additions & 9 deletions next/pages/guidelines/color/overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import type { InferGetStaticPropsType } from 'next';
import { StaticImageData } from 'next/image';
import { ContentPage } from '../../../components/mdx/mdx';
import getContentPageStaticProps from '../../../utils/get-content-page-static-props';
import { H2, H3, P } from '../../../components/mdx/components';
Expand All @@ -10,18 +9,12 @@ import usageContentMappings, {
interactionContent,
ContentMapping,
} from './usage-mappings';
import { Image } from './utils';

import usage from '../../../images/pages/guide/product/color/overiew/usage.png';
import emphasis from '../../../images/pages/guide/product/color/overiew/emphasis.png';
import interaction from '../../../images/pages/guide/product/color/overiew/interaction.png';

interface Image {
[key: string]: {
src: StaticImageData;
alt: string;
};
}

const images: Image = {
usage: {
src: usage,
Expand Down Expand Up @@ -161,7 +154,7 @@ export default function OverviewAbout({
<H2>Emphasis</H2>
<P>
Not all experiences are treated equal. To provide varying levels of importance
in conjunction with the hue, we use levels of emphasis to draw the user’s
in conjunction with the hue, we use levels of emphasis to draw the users
attention. A strong emphasis is high contrast in comparison to the surface the
component occupies.
</P>
Expand Down
83 changes: 33 additions & 50 deletions next/pages/guidelines/color/palette.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import React, { useState } from 'react';
import type { InferGetStaticPropsType } from 'next';
import { StaticImageData } from 'next/image';
import ClickableBox from 'clickable-box';
import { groupBy } from 'lodash-es';
import classNames from 'classnames';
import * as tokens from '@thumbtack/thumbprint-tokens';
import { NavigationCaretDownSmall } from '@thumbtack/thumbprint-icons';
import { NavigationCaretDownSmall, NavigationCaretUpSmall } 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 } from '../../../components/mdx/components';
import { paletteColortMappings } from './usage-mappings';
import { Color, Image } from './utils';

import purple from '../../../images/pages/guide/product/color/palette/purple.png';
import yellow from '../../../images/pages/guide/product/color/palette/yellow.png';
Expand All @@ -19,71 +20,44 @@ import blue from '../../../images/pages/guide/product/color/palette/blue.png';
import green from '../../../images/pages/guide/product/color/palette/green.png';
import indigo from '../../../images/pages/guide/product/color/palette/indigo.png';

interface Image {
[key: string]: {
src: StaticImageData;
alt: string;
};
}

const images: Image = {
purple: {
src: purple,
alt: 'alt text',
alt: 'user interface example where purple colors are applied',
},
yellow: {
src: yellow,
alt: 'alt text',
alt: 'user interface example where yellow colors are applied',
},
neutral: {
src: neutral,
alt: 'alt text',
alt: 'user interface example where neutral colors are applied',
},
red: {
src: red,
alt: 'alt text',
alt: 'user interface example where red colors are applied',
},
blue: {
src: blue,
alt: 'alt text',
alt: 'user interface example where blue colors are applied',
},
green: {
src: green,
alt: 'alt text',
alt: 'user interface example where green colors are applied',
},
indigo: {
src: indigo,
alt: 'alt text',
alt: 'user interface example where indigo colors are applied',
},
};

interface Usage {
values: {
usage: string;
// usage: string;
theme: string;
'light-hex': string;
'pill-color': string;
color: string;
emphasis: string;
interaction: string;
description: string;
family: string;
level: string;
javascript: string;
ios: string;
android: string;
scss: string;
};
}

interface ColoredPill {
interface ColoredPillProps {
fill: string;
title: string;
value: string;
}

function coloredPill({ fill, title, value }: ColoredPill): JSX.Element {
function coloredPill({ fill, title, value }: ColoredPillProps): JSX.Element {
return (
<div>
<div>{title}</div>
Expand All @@ -99,7 +73,8 @@ function coloredPill({ fill, title, value }: ColoredPill): JSX.Element {
);
}

function ColorSection({ values }: Usage): JSX.Element {
function ColorSection({ values }: Color): JSX.Element {
const [active, setActive] = useState(false);
return (
<div
className={classNames('flex flex-column tp-body-3', {
Expand All @@ -113,12 +88,20 @@ function ColorSection({ values }: Usage): JSX.Element {
}}
>
{/* clickable region */}
<div className="pv3 ph3 b flex flex-row">
<ClickableBox
className="pv3 ph3 b flex flex-row cursor-pointer"
onClick={(): void => setActive(!active)}
>
<span className="flex-auto tp-body-2">{values.color}</span>{' '}
<NavigationCaretDownSmall />
</div>
{!active ? <NavigationCaretDownSmall /> : <NavigationCaretUpSmall />}
</ClickableBox>
{/* end clickable region */}
<div className="pb3 ph3">
<div
className={classNames('ph3', {
'h-0 overflow-hidden': !active,
'h-auto pb3 ': active,
})}
>
{/* body content */}
<div className="pb3">
<ul style={{ listStyle: 'bullet' }} className="ml3">
Expand All @@ -128,7 +111,7 @@ function ColorSection({ values }: Usage): JSX.Element {
</ul>
</div>
{/* tokens */}
<div className="flex flex-row col-gap2 row-gap2 flex-wrap">
<div className="flex flex-row col-gap2 row-gap2 flex-wrap mv3">
{coloredPill({
title: 'Hex',
value: values['light-hex'],
Expand Down Expand Up @@ -193,7 +176,7 @@ function renderColors({ usages }): JSX.Element {
{paletteColortMappings[key].suggestedUse}
</Text>

<div className="br3 overflow-hidden">
<div className="br3 overflow-hidden mt2">
{usages[key].map(component => {
return <ColorSection values={component.values} />;
})}
Expand All @@ -214,13 +197,13 @@ function renderColors({ usages }): JSX.Element {
})
.sort((a, b) => {
const colorOrder = {
purple: 4,
yellow: 7,
neutral: 1,
red: 6,
blue: 2,
indigo: 3,
purple: 4,
green: 5,
blue: 2,
red: 6,
yellow: 7,
};
if (!colorOrder[a.key] || !colorOrder[b.key]) {
throw new Error(`All colors must be defined in the \`colorOrder\` object.`);
Expand Down
61 changes: 10 additions & 51 deletions next/pages/guidelines/color/usage/background.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import type { InferGetStaticPropsType } from 'next';
import { StaticImageData } from 'next/image';
import { groupBy } from 'lodash-es';
import { ContentPage } from '../../../../components/mdx/mdx';
import Alert from '../../../../components/alert/alert';
import InlineCode from '../../../../components/inline-code/inline-code';
import getLayoutProps from '../../../../utils/get-layout-props';
import { H2, H3, LI, P, UL } from '../../../../components/mdx/components';
import TabNav, { TabNavItem } from '../../../../components/tab-nav/tab-nav';
import ExampleBox from '../../../../components/example-box';
import UsageCategory from './usage-categories';
import ColorUsageNav from './color-usage-nav';
import { Usage, Image } from '../utils';

import intro from '../../../../images/pages/guide/product/color/usage/background/intro.png';
import neutral from '../../../../images/pages/guide/product/color/usage/background/neutral.png';
Expand All @@ -20,65 +20,37 @@ import alert from '../../../../images/pages/guide/product/color/usage/background
import caution from '../../../../images/pages/guide/product/color/usage/background/caution.png';
import accent from '../../../../images/pages/guide/product/color/usage/background/accent.png';

interface Image {
[key: string]: {
src: StaticImageData;
alt: string;
};
}

const images: Image = {
neutral: {
src: neutral,
alt: 'alt text',
alt: 'user interface example where the netural theme is applied to element backgrounds',
},
primary: {
src: primary,
alt: 'alt text',
alt: 'user interface example where the primary theme is applied to element backgrounds',
},
success: {
src: success,
alt: 'alt text',
alt: 'user interface example where the success theme is applied to element backgrounds',
},
guidance: {
src: guidance,
alt: 'alt text',
alt: 'user interface example where the guidance theme is applied to element backgrounds',
},
alert: {
src: alert,
alt: 'alt text',
alt: 'user interface example where the alert theme is applied to element backgrounds',
},
caution: {
src: caution,
alt: 'alt text',
alt: 'user interface example where the caution theme is applied to element backgrounds',
},
accent: {
src: accent,
alt: 'alt text',
alt: 'user interface example where the accent theme is applied to element backgrounds',
},
};

interface Usage {
browserLink: string;
createdAt: string;
href: string;
id: string;
index: number;
name: string;
type: string;
updatedAt: string;
values: {
usage: string;
// usage: string;
theme: string;
'light-hex': string;
color: string;
emphasis: string;
interaction: string;
description: string;
};
}

export default function UsageBackground({
usages,
layoutProps,
Expand Down Expand Up @@ -112,20 +84,7 @@ export default function UsageBackground({
across the product.
</P>

<TabNav>
<TabNavItem isActive key={1} href="/guidelines/color/usage/background">
Background
</TabNavItem>
<TabNavItem isActive={false} key={2} href="/guidelines/color/usage/text">
Text
</TabNavItem>
<TabNavItem isActive={false} key={3} href="/guidelines/color/usage/borders">
Borders
</TabNavItem>
<TabNavItem isActive={false} key={4} href="/guidelines/color/usage/icons">
Icons
</TabNavItem>
</TabNav>
<ColorUsageNav activeTab="background" />

<ExampleBox>
<div className="tc" style={{ minWidth: '375px' }}>
Expand Down
Loading

0 comments on commit 4e2c647

Please sign in to comment.