From 4e2c64786ef720c86d6e885fea8a8bd9158a2895 Mon Sep 17 00:00:00 2001 From: Erik Goens Date: Sat, 24 Aug 2024 02:18:55 -0700 Subject: [PATCH] cleans up linter issues adds tab nav component for usage tabs adds alt tags for images moves reusable types into utils --- next/pages/guidelines/color/overview.tsx | 11 +-- next/pages/guidelines/color/palette.tsx | 83 ++++++++----------- .../guidelines/color/usage/background.tsx | 61 +++----------- next/pages/guidelines/color/usage/borders.tsx | 51 ++---------- .../color/usage/color-usage-nav.tsx | 67 +++++---------- next/pages/guidelines/color/usage/icons.tsx | 61 +++----------- next/pages/guidelines/color/usage/text.tsx | 61 +++----------- .../color/usage/usage-categories.tsx | 1 - next/pages/guidelines/color/utils.ts | 52 ++++++++++++ 9 files changed, 141 insertions(+), 307 deletions(-) create mode 100644 next/pages/guidelines/color/utils.ts diff --git a/next/pages/guidelines/color/overview.tsx b/next/pages/guidelines/color/overview.tsx index a0a99103..7131aa8d 100644 --- a/next/pages/guidelines/color/overview.tsx +++ b/next/pages/guidelines/color/overview.tsx @@ -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'; @@ -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, @@ -161,7 +154,7 @@ export default function OverviewAbout({

Emphasis

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.

diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx index 555f97a2..af700f1f 100644 --- a/next/pages/guidelines/color/palette.tsx +++ b/next/pages/guidelines/color/palette.tsx @@ -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'; @@ -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 (
{title}
@@ -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 (
{/* clickable region */} -
+ setActive(!active)} + > {values.color}{' '} - -
+ {!active ? : } + {/* end clickable region */} -
+
{/* body content */}
    @@ -128,7 +111,7 @@ function ColorSection({ values }: Usage): JSX.Element {
{/* tokens */} -
+
{coloredPill({ title: 'Hex', value: values['light-hex'], @@ -193,7 +176,7 @@ function renderColors({ usages }): JSX.Element { {paletteColortMappings[key].suggestedUse} -
+
{usages[key].map(component => { return ; })} @@ -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.`); diff --git a/next/pages/guidelines/color/usage/background.tsx b/next/pages/guidelines/color/usage/background.tsx index e60cb48c..f89ea9fe 100644 --- a/next/pages/guidelines/color/usage/background.tsx +++ b/next/pages/guidelines/color/usage/background.tsx @@ -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'; @@ -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, @@ -112,20 +84,7 @@ export default function UsageBackground({ across the product.

- - - Background - - - Text - - - Borders - - - Icons - - +
diff --git a/next/pages/guidelines/color/usage/borders.tsx b/next/pages/guidelines/color/usage/borders.tsx index 2954aeef..2953b261 100644 --- a/next/pages/guidelines/color/usage/borders.tsx +++ b/next/pages/guidelines/color/usage/borders.tsx @@ -1,57 +1,29 @@ 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 { H2, H3, LI, P, UL } from '../../../../components/mdx/components'; import getLayoutProps from '../../../../utils/get-layout-props'; -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/borders/intro.png'; import neutral from '../../../../images/pages/guide/product/color/usage/borders/neutral.png'; import guidance from '../../../../images/pages/guide/product/color/usage/borders/guidance.png'; -interface Image { - [key: string]: { - src: StaticImageData; - alt: string; - }; -} - const images: Image = { neutral: { src: neutral, - alt: 'alt text', + alt: 'user interface example where neutral colors are applied to borders', }, guidance: { src: guidance, - alt: 'alt text', + alt: 'user interface example where guidance colors are applied to borders', }, }; -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 UsageBorders({ usages, layoutProps, @@ -69,20 +41,7 @@ export default function UsageBorders({ across the product.

- - - Background - - - Text - - - Borders - - - Icons - - +
diff --git a/next/pages/guidelines/color/usage/color-usage-nav.tsx b/next/pages/guidelines/color/usage/color-usage-nav.tsx index d2f1c0d2..11c5d48d 100644 --- a/next/pages/guidelines/color/usage/color-usage-nav.tsx +++ b/next/pages/guidelines/color/usage/color-usage-nav.tsx @@ -1,63 +1,34 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { sortBy } from 'lodash'; import TabNav, { TabNavItem } from '../../../../components/tab-nav/tab-nav'; -/** - * Given `/components/button/react/`, this function returns `react`. - */ -const getPlatformSlugByPath = path => { - const arr = path.split('/'); - return arr[arr.length - 2]; -}; - -const sortPlatforms = ({ node }) => { - const platformOrder = { - usage: 1, - react: 2, - scss: 3, - ios: 4, - swiftui: 5, - android: 6, +interface TabProps { + [key: string]: { + name: string; + path: string; }; +} - const { path } = node; - return platformOrder[getPlatformSlugByPath(path)]; +const usageTabs: TabProps = { + background: { name: 'Background', path: '/guidelines/color/usage/background' }, + text: { name: 'Text', path: '/guidelines/color/usage/text' }, + borders: { name: 'Borders', path: '/guidelines/color/usage/borders' }, + icons: { name: 'Icons', path: '/guidelines/color/usage/icons' }, }; -/** - * Given `/components/button/react/`, this function returns `React`. - */ -const getPlatformDisplayName = path => { - const displayName = { - neutral: 'Neutral', - primary: 'Primary & info', - success: 'Success, finance & ratings', - guidance: 'Guidance & visualization', - alert: 'Alert', - caution: 'Caution', - accent: 'Accents', - }; - - return displayName[getPlatformSlugByPath(path)]; -}; - -const PlatformNav = ({ platformNavQueryResults }) => { - const sortedPlatforms = sortBy(platformNavQueryResults.edges, sortPlatforms); - +const ColorUsageNav = ({ activeTab }: { activeTab: string }) => { return ( - {sortedPlatforms.map(({ node }) => ( - - {getPlatformDisplayName(node.path)} + {Object.keys(usageTabs).map(node => ( + +
{usageTabs[node].name}
 ))} ); }; -PlatformNav.propTypes = { - platformNavQueryResults: PropTypes.shape({}).isRequired, -}; - -export default PlatformNav; +export default ColorUsageNav; diff --git a/next/pages/guidelines/color/usage/icons.tsx b/next/pages/guidelines/color/usage/icons.tsx index eff3fc57..87b6f02d 100644 --- a/next/pages/guidelines/color/usage/icons.tsx +++ b/next/pages/guidelines/color/usage/icons.tsx @@ -1,13 +1,13 @@ 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 { H2, H3, LI, P, UL } from '../../../../components/mdx/components'; import getLayoutProps from '../../../../utils/get-layout-props'; -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/icons/intro.png'; import neutral from '../../../../images/pages/guide/product/color/usage/icons/neutral.png'; @@ -18,65 +18,37 @@ import alert from '../../../../images/pages/guide/product/color/usage/icons/aler import caution from '../../../../images/pages/guide/product/color/usage/icons/caution.png'; import accent from '../../../../images/pages/guide/product/color/usage/icons/accent.png'; -interface Image { - [key: string]: { - src: StaticImageData; - alt: string; - }; -} - const images: Image = { neutral: { src: neutral, - alt: 'alt text', + alt: 'user interface example where neutral colors are applied to icons', }, primary: { src: primary, - alt: 'alt text', + alt: 'user interface example where primary colors are applied to icons', }, success: { src: success, - alt: 'alt text', + alt: 'user interface example where success colors are applied to icons', }, guidance: { src: guidance, - alt: 'alt text', + alt: 'user interface example where guidance colors are applied to icons', }, alert: { src: alert, - alt: 'alt text', + alt: 'user interface example where alert colors are applied to icons', }, caution: { src: caution, - alt: 'alt text', + alt: 'user interface example where caution colors are applied to icons', }, accent: { src: accent, - alt: 'alt text', + alt: 'user interface example where accent colors are applied to icons', }, }; -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 UsageIcons({ usages, layoutProps, @@ -94,20 +66,7 @@ export default function UsageIcons({ across the product.

- - - Background - - - Text - - - Borders - - - Icons - - +
diff --git a/next/pages/guidelines/color/usage/text.tsx b/next/pages/guidelines/color/usage/text.tsx index 8dbbd7f3..ee117d33 100644 --- a/next/pages/guidelines/color/usage/text.tsx +++ b/next/pages/guidelines/color/usage/text.tsx @@ -1,13 +1,13 @@ 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 { H2, H3, LI, P, UL } from '../../../../components/mdx/components'; import getLayoutProps from '../../../../utils/get-layout-props'; -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/text/intro.png'; import neutral from '../../../../images/pages/guide/product/color/usage/text/neutral.png'; @@ -18,65 +18,37 @@ import alert from '../../../../images/pages/guide/product/color/usage/text/alert import caution from '../../../../images/pages/guide/product/color/usage/text/caution.png'; import accent from '../../../../images/pages/guide/product/color/usage/text/accent.png'; -interface Image { - [key: string]: { - src: StaticImageData; - alt: string; - }; -} - const images: Image = { neutral: { src: neutral, - alt: 'alt text', + alt: 'user interface example where neutral colors are applied to text', }, primary: { src: primary, - alt: 'alt text', + alt: 'user interface example where primary colors are applied to text', }, success: { src: success, - alt: 'alt text', + alt: 'user interface example where success colors are applied to text', }, guidance: { src: guidance, - alt: 'alt text', + alt: 'user interface example where guidance colors are applied to text', }, alert: { src: alert, - alt: 'alt text', + alt: 'user interface example where alert colors are applied to text', }, caution: { src: caution, - alt: 'alt text', + alt: 'user interface example where caution colors are applied to text', }, accent: { src: accent, - alt: 'alt text', + alt: 'user interface example where accent colors are applied to text', }, }; -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 UsageText({ usages, layoutProps, @@ -94,20 +66,7 @@ export default function UsageText({ across the product.

- - - Background - - - Text - - - Borders - - - Icons - - +
diff --git a/next/pages/guidelines/color/usage/usage-categories.tsx b/next/pages/guidelines/color/usage/usage-categories.tsx index aac6bcbd..43c2a8d9 100644 --- a/next/pages/guidelines/color/usage/usage-categories.tsx +++ b/next/pages/guidelines/color/usage/usage-categories.tsx @@ -75,7 +75,6 @@ export default function UsageCategory({ usages, images }): JSX.Element { ); }) .sort((a, b) => { - console.log(a); const themeOrder = { neutral: 1, primary: 2, diff --git a/next/pages/guidelines/color/utils.ts b/next/pages/guidelines/color/utils.ts new file mode 100644 index 00000000..9c1f73d5 --- /dev/null +++ b/next/pages/guidelines/color/utils.ts @@ -0,0 +1,52 @@ +import { StaticImageData } from 'next/image'; + +export 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 interface Color { + browserLink: string; + createdAt: string; + href: string; + id: string; + index: number; + name: string; + type: string; + updatedAt: string; + values: { + description: string; + color: string; + 'light-hex': string; + 'pill-color': string; + javascript: string; + ios: string; + android: string; + scss: string; + }; +} + +export interface Image { + [key: string]: { + src: StaticImageData; + alt: string; + }; +} + +export default Usage;