diff --git a/next/images/pages/guide/product/color/overiew/emphasis.png b/next/images/pages/guide/product/color/overiew/emphasis.png new file mode 100644 index 00000000..752ca13b Binary files /dev/null and b/next/images/pages/guide/product/color/overiew/emphasis.png differ diff --git a/next/images/pages/guide/product/color/overiew/interaction.png b/next/images/pages/guide/product/color/overiew/interaction.png new file mode 100644 index 00000000..89fa998d Binary files /dev/null and b/next/images/pages/guide/product/color/overiew/interaction.png differ diff --git a/next/images/pages/guide/product/color/overiew/usage.png b/next/images/pages/guide/product/color/overiew/usage.png new file mode 100644 index 00000000..3d813398 Binary files /dev/null and b/next/images/pages/guide/product/color/overiew/usage.png differ diff --git a/next/images/pages/guide/product/color/palette/blue.png b/next/images/pages/guide/product/color/palette/blue.png new file mode 100644 index 00000000..0d092b37 Binary files /dev/null and b/next/images/pages/guide/product/color/palette/blue.png differ diff --git a/next/images/pages/guide/product/color/palette/green.png b/next/images/pages/guide/product/color/palette/green.png new file mode 100644 index 00000000..f770d2ce Binary files /dev/null and b/next/images/pages/guide/product/color/palette/green.png differ diff --git a/next/images/pages/guide/product/color/palette/indigo.png b/next/images/pages/guide/product/color/palette/indigo.png new file mode 100644 index 00000000..53e2c8c9 Binary files /dev/null and b/next/images/pages/guide/product/color/palette/indigo.png differ diff --git a/next/images/pages/guide/product/color/palette/neutral.png b/next/images/pages/guide/product/color/palette/neutral.png new file mode 100644 index 00000000..1499ac98 Binary files /dev/null and b/next/images/pages/guide/product/color/palette/neutral.png differ diff --git a/next/images/pages/guide/product/color/palette/purple.png b/next/images/pages/guide/product/color/palette/purple.png new file mode 100644 index 00000000..ab88a848 Binary files /dev/null and b/next/images/pages/guide/product/color/palette/purple.png differ diff --git a/next/images/pages/guide/product/color/palette/red.png b/next/images/pages/guide/product/color/palette/red.png new file mode 100644 index 00000000..55b1c58e Binary files /dev/null and b/next/images/pages/guide/product/color/palette/red.png differ diff --git a/next/images/pages/guide/product/color/palette/yellow.png b/next/images/pages/guide/product/color/palette/yellow.png new file mode 100644 index 00000000..02442b5f Binary files /dev/null and b/next/images/pages/guide/product/color/palette/yellow.png differ diff --git a/next/images/pages/guide/product/color/usage/background/accent.png b/next/images/pages/guide/product/color/usage/background/accent.png new file mode 100644 index 00000000..760cbc23 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/accent.png differ diff --git a/next/images/pages/guide/product/color/usage/background/alert.png b/next/images/pages/guide/product/color/usage/background/alert.png new file mode 100644 index 00000000..7734c8dd Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/alert.png differ diff --git a/next/images/pages/guide/product/color/usage/background/caution.png b/next/images/pages/guide/product/color/usage/background/caution.png new file mode 100644 index 00000000..e468ff9a Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/caution.png differ diff --git a/next/images/pages/guide/product/color/usage/background/guidance.png b/next/images/pages/guide/product/color/usage/background/guidance.png new file mode 100644 index 00000000..4cba3a3c Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/guidance.png differ diff --git a/next/images/pages/guide/product/color/usage/background/intro.png b/next/images/pages/guide/product/color/usage/background/intro.png new file mode 100644 index 00000000..da636255 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/intro.png differ diff --git a/next/images/pages/guide/product/color/usage/background/neutral.png b/next/images/pages/guide/product/color/usage/background/neutral.png new file mode 100644 index 00000000..b6f4d13f Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/neutral.png differ diff --git a/next/images/pages/guide/product/color/usage/background/primary.png b/next/images/pages/guide/product/color/usage/background/primary.png new file mode 100644 index 00000000..905b7523 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/primary.png differ diff --git a/next/images/pages/guide/product/color/usage/background/success.png b/next/images/pages/guide/product/color/usage/background/success.png new file mode 100644 index 00000000..4793c770 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/background/success.png differ diff --git a/next/images/pages/guide/product/color/usage/borders/guidance.png b/next/images/pages/guide/product/color/usage/borders/guidance.png new file mode 100644 index 00000000..deb9d319 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/borders/guidance.png differ diff --git a/next/images/pages/guide/product/color/usage/borders/intro.png b/next/images/pages/guide/product/color/usage/borders/intro.png new file mode 100644 index 00000000..09c609d0 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/borders/intro.png differ diff --git a/next/images/pages/guide/product/color/usage/borders/neutral.png b/next/images/pages/guide/product/color/usage/borders/neutral.png new file mode 100644 index 00000000..549ec11f Binary files /dev/null and b/next/images/pages/guide/product/color/usage/borders/neutral.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/accent.png b/next/images/pages/guide/product/color/usage/icons/accent.png new file mode 100644 index 00000000..976296f3 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/accent.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/alert.png b/next/images/pages/guide/product/color/usage/icons/alert.png new file mode 100644 index 00000000..a71d20b3 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/alert.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/caution.png b/next/images/pages/guide/product/color/usage/icons/caution.png new file mode 100644 index 00000000..7150dc9c Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/caution.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/guidance.png b/next/images/pages/guide/product/color/usage/icons/guidance.png new file mode 100644 index 00000000..b56d30cd Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/guidance.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/intro.png b/next/images/pages/guide/product/color/usage/icons/intro.png new file mode 100644 index 00000000..bf44e266 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/intro.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/neutral.png b/next/images/pages/guide/product/color/usage/icons/neutral.png new file mode 100644 index 00000000..ae6ed164 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/neutral.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/primary.png b/next/images/pages/guide/product/color/usage/icons/primary.png new file mode 100644 index 00000000..d9e3aed5 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/primary.png differ diff --git a/next/images/pages/guide/product/color/usage/icons/success.png b/next/images/pages/guide/product/color/usage/icons/success.png new file mode 100644 index 00000000..39d25bd6 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/icons/success.png differ diff --git a/next/images/pages/guide/product/color/usage/text/accent.png b/next/images/pages/guide/product/color/usage/text/accent.png new file mode 100644 index 00000000..bcff1c29 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/accent.png differ diff --git a/next/images/pages/guide/product/color/usage/text/alert.png b/next/images/pages/guide/product/color/usage/text/alert.png new file mode 100644 index 00000000..2a34bab6 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/alert.png differ diff --git a/next/images/pages/guide/product/color/usage/text/caution.png b/next/images/pages/guide/product/color/usage/text/caution.png new file mode 100644 index 00000000..3b5b46b3 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/caution.png differ diff --git a/next/images/pages/guide/product/color/usage/text/guidance.png b/next/images/pages/guide/product/color/usage/text/guidance.png new file mode 100644 index 00000000..88c70f75 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/guidance.png differ diff --git a/next/images/pages/guide/product/color/usage/text/intro.png b/next/images/pages/guide/product/color/usage/text/intro.png new file mode 100644 index 00000000..12750955 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/intro.png differ diff --git a/next/images/pages/guide/product/color/usage/text/neutral.png b/next/images/pages/guide/product/color/usage/text/neutral.png new file mode 100644 index 00000000..dd965a37 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/neutral.png differ diff --git a/next/images/pages/guide/product/color/usage/text/primary.png b/next/images/pages/guide/product/color/usage/text/primary.png new file mode 100644 index 00000000..070ff718 Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/primary.png differ diff --git a/next/images/pages/guide/product/color/usage/text/success.png b/next/images/pages/guide/product/color/usage/text/success.png new file mode 100644 index 00000000..7b2d5cea Binary files /dev/null and b/next/images/pages/guide/product/color/usage/text/success.png differ diff --git a/next/pages/guidelines/color/overview.tsx b/next/pages/guidelines/color/overview.tsx index 9bc102ec..1ce267b0 100644 --- a/next/pages/guidelines/color/overview.tsx +++ b/next/pages/guidelines/color/overview.tsx @@ -1,12 +1,9 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; -import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; +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'; -import SwatchUsage from '../../../components/thumbprint-guide/swatch-usage'; -import Swatch from '../../../components/thumbprint-guide/swatch'; +import { H2, H3, P, Img } from '../../../components/mdx/components'; import usageContentMappings, { usageContent, emphasisContent, @@ -14,6 +11,32 @@ import usageContentMappings, { ContentMapping, } from './usage-mappings'; +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, + alt: 'alt text', + }, + emphasis: { + src: emphasis, + alt: 'alt text', + }, + interaction: { + src: interaction, + alt: 'alt text', + }, +}; + export const getStaticProps = getContentPageStaticProps; function ExampleBox({ children }: { children: React.ReactNode }): JSX.Element { @@ -92,15 +115,6 @@ export default function OverviewAbout({ cues. Color should be used sparingly to drive focus to moments that matter. Color should not be used to add personality or flair.

- {/*
-

Naming

-

- Color names are unambiguous and direct. "Blue" means blue. We do this to avoid - unneeded abstractions. Extended color names, like black-300 are variations that, - like font-weight values, denote increasingly darker (500, 600) and increasingly - lighter shades (300, 200). -

-
*/}

Color themes

@@ -135,7 +149,11 @@ export default function OverviewAbout({ Color usage is arranged into four high-level categories background, border, text and icon. Color usage patterns are represented by their intended use case.

- Image + +
+ {images.usage.alt} +
+ {overviewTable({ list: usageContent })}
@@ -147,7 +165,15 @@ export default function OverviewAbout({ attention. A strong emphasis is high contrast in comparison to the surface the component occupies.

- Image + +
+ {images.emphasis.alt} +
+ {overviewTable({ list: emphasisContent })} @@ -159,7 +185,15 @@ export default function OverviewAbout({ with content. Not all elements are interactive, but our color usage patterns provide additional color definitions when applicable.

- Image + +
+ {images.interaction.alt} +
+ {overviewTable({ list: interactionContent })} diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx index 2fc9aa76..c149ba42 100644 --- a/next/pages/guidelines/color/palette.tsx +++ b/next/pages/guidelines/color/palette.tsx @@ -1,13 +1,59 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; +import { StaticImageData } from 'next/image'; import { groupBy } from 'lodash-es'; import classNames from 'classnames'; import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; import { NavigationCaretDownSmall } from '@thumbtack/thumbprint-icons'; import { ContentPage } from '../../../components/mdx/mdx'; import getLayoutProps from '../../../utils/get-layout-props'; -import { CodeExperimental, H2, H3, LI, P, UL } from '../../../components/mdx/components'; +import { H2, P } from '../../../components/mdx/components'; + +import purple from '../../../images/pages/guide/product/color/palette/purple.png'; +import yellow from '../../../images/pages/guide/product/color/palette/yellow.png'; +import neutral from '../../../images/pages/guide/product/color/palette/neutral.png'; +import red from '../../../images/pages/guide/product/color/palette/red.png'; +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', + }, + yellow: { + src: yellow, + alt: 'alt text', + }, + neutral: { + src: neutral, + alt: 'alt text', + }, + red: { + src: red, + alt: 'alt text', + }, + blue: { + src: blue, + alt: 'alt text', + }, + green: { + src: green, + alt: 'alt text', + }, + indigo: { + src: indigo, + alt: 'alt text', + }, +}; interface Usage { values: { @@ -155,6 +201,11 @@ export default function OverviewAbout({
Examples
+ {images[key].alt}
diff --git a/next/pages/guidelines/color/usage/background.tsx b/next/pages/guidelines/color/usage/background.tsx index 1edbbf6d..18cf6d59 100644 --- a/next/pages/guidelines/color/usage/background.tsx +++ b/next/pages/guidelines/color/usage/background.tsx @@ -1,28 +1,61 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; -import { groupBy, keyBy } from 'lodash-es'; -import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; +import { StaticImageData } from 'next/image'; +import { groupBy } from 'lodash-es'; import { ContentPage } from '../../../../components/mdx/mdx'; import Alert from '../../../../components/alert/alert'; import getLayoutProps from '../../../../utils/get-layout-props'; -import { - CodeExperimental, - H2, - H3, - LI, - P, - UL, - OL, - Img, -} from '../../../../components/mdx/components'; -import SwatchUsage from '../../../../components/thumbprint-guide/swatch-usage'; -import Swatch from '../../../../components/thumbprint-guide/swatch'; +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 usageContentMappings from '../usage-mappings'; +import UsageCategory from './usage-categories'; -import custom from '../../../../images/pages/guide/product/aspect-ratio/avatar-customer.png'; +import intro from '../../../../images/pages/guide/product/color/usage/background/intro.png'; +import neutral from '../../../../images/pages/guide/product/color/usage/background/neutral.png'; +import primary from '../../../../images/pages/guide/product/color/usage/background/primary.png'; +import success from '../../../../images/pages/guide/product/color/usage/background/success.png'; +import guidance from '../../../../images/pages/guide/product/color/usage/background/guidance.png'; +import alert from '../../../../images/pages/guide/product/color/usage/background/alert.png'; +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', + }, + primary: { + src: primary, + alt: 'alt text', + }, + success: { + src: success, + alt: 'alt text', + }, + guidance: { + src: guidance, + alt: 'alt text', + }, + alert: { + src: alert, + alt: 'alt text', + }, + caution: { + src: caution, + alt: 'alt text', + }, + accent: { + src: accent, + alt: 'alt text', + }, +}; interface Usage { browserLink: string; @@ -45,7 +78,7 @@ interface Usage { }; } -export default function OverviewAbout({ +export default function UsageBackground({ usages, layoutProps, }: InferGetStaticPropsType) { @@ -93,7 +126,11 @@ export default function OverviewAbout({ - Image + +
+ +
+

Background colors

@@ -127,60 +164,7 @@ export default function OverviewAbout({
-
- {Object.keys(usages).map(key => { - return ( -
-
-

{usageContentMappings[key].title}

-

{usageContentMappings[key].description}

-
- - - - - - - - {usages[key].map(component => { - return ( - - - - - - - ); - })} -
ColorEmphasisInteractionDescription
-
- - {component.values.color} -
- 		- {component.values.emphasis} - - {component.values.interaction} - - {component.values.description} -
-
- Examples - -
-

{key}

-
- -
-
- ); - })} -
+ ); } diff --git a/next/pages/guidelines/color/usage/borders.tsx b/next/pages/guidelines/color/usage/borders.tsx index 275084fd..ef0cb795 100644 --- a/next/pages/guidelines/color/usage/borders.tsx +++ b/next/pages/guidelines/color/usage/borders.tsx @@ -1,18 +1,59 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; -import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; +import { StaticImageData } from 'next/image'; +import { groupBy } from 'lodash-es'; import { ContentPage } from '../../../../components/mdx/mdx'; -import getContentPageStaticProps from '../../../../utils/get-content-page-static-props'; -import { CodeExperimental, H2, H3, LI, P, UL } from '../../../../components/mdx/components'; -import SwatchUsage from '../../../../components/thumbprint-guide/swatch-usage'; -import Swatch from '../../../../components/thumbprint-guide/swatch'; +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'; -export const getStaticProps = getContentPageStaticProps; +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'; -export default function OverviewAbout({ +interface Image { + [key: string]: { + src: StaticImageData; + alt: string; + }; +} + +const images: Image = { + neutral: { + src: neutral, + alt: 'alt text', + }, + guidance: { + src: guidance, + alt: 'alt 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 UsageBorders({ + usages, layoutProps, }: InferGetStaticPropsType) { return ( @@ -32,10 +73,10 @@ export default function OverviewAbout({ Background - + Text - + Borders @@ -43,15 +84,20 @@ export default function OverviewAbout({ - Image + +
+ +
+
-

Borders

+

Border colors

Borders are used in product design to visually separate or delineate elements, create hierarchy, and provide structure to the overall layout.

+

General principles

    @@ -64,14 +110,34 @@ export default function OverviewAbout({
-
- Repeat over border colors. Group by: -
    -
  1. "usage" (borders)
    2. -
  2. "theme" (succes, primary, etc..)
    3. -
- {/* https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true */} -
+ ); } + +export const getStaticProps = async () => { + const listRowsRes = await fetch( + // https://coda.io/developers/apis/v1#operation/listRows + `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true`, + { + headers: { + Authorization: `Bearer ${process.env.CODA_API_TOKEN}`, + }, + }, + ); + + const data = listRowsRes.ok ? await listRowsRes.json() : null; + const usages: Usage[] = data ? data.items : []; + const filteredImplementations = usages.filter(item => item.values.usage === 'borders'); + + const groupedUsages = groupBy(filteredImplementations, usage => { + return usage.values.theme; + }); + + return { + props: { + layoutProps: getLayoutProps(), + usages: groupedUsages, + }, + }; +}; diff --git a/next/pages/guidelines/color/usage/icons.tsx b/next/pages/guidelines/color/usage/icons.tsx index 350d499e..046bab6a 100644 --- a/next/pages/guidelines/color/usage/icons.tsx +++ b/next/pages/guidelines/color/usage/icons.tsx @@ -1,18 +1,84 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; -import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; +import { StaticImageData } from 'next/image'; +import { groupBy } from 'lodash-es'; import { ContentPage } from '../../../../components/mdx/mdx'; -import getContentPageStaticProps from '../../../../utils/get-content-page-static-props'; -import { CodeExperimental, H2, H3, LI, P, UL } from '../../../../components/mdx/components'; -import SwatchUsage from '../../../../components/thumbprint-guide/swatch-usage'; -import Swatch from '../../../../components/thumbprint-guide/swatch'; +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'; -export const getStaticProps = getContentPageStaticProps; +import intro from '../../../../images/pages/guide/product/color/usage/icons/intro.png'; +import neutral from '../../../../images/pages/guide/product/color/usage/icons/neutral.png'; +import primary from '../../../../images/pages/guide/product/color/usage/icons/primary.png'; +import success from '../../../../images/pages/guide/product/color/usage/icons/success.png'; +import guidance from '../../../../images/pages/guide/product/color/usage/icons/guidance.png'; +import alert from '../../../../images/pages/guide/product/color/usage/icons/alert.png'; +import caution from '../../../../images/pages/guide/product/color/usage/icons/caution.png'; +import accent from '../../../../images/pages/guide/product/color/usage/icons/accent.png'; -export default function OverviewAbout({ +interface Image { + [key: string]: { + src: StaticImageData; + alt: string; + }; +} + +const images: Image = { + neutral: { + src: neutral, + alt: 'alt text', + }, + primary: { + src: primary, + alt: 'alt text', + }, + success: { + src: success, + alt: 'alt text', + }, + guidance: { + src: guidance, + alt: 'alt text', + }, + alert: { + src: alert, + alt: 'alt text', + }, + caution: { + src: caution, + alt: 'alt text', + }, + accent: { + src: accent, + alt: 'alt 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 UsageIcons({ + usages, layoutProps, }: InferGetStaticPropsType) { return ( @@ -32,18 +98,22 @@ export default function OverviewAbout({ Background - + Text Borders - + Icons - Image + +
+ +
+

Icons

@@ -69,14 +139,34 @@ export default function OverviewAbout({
-
- Repeat over icon colors. Group by: -
    -
  1. "usage" (icons)
    2. -
  2. "theme" (succes, primary, etc..)
    3. -
- {/* https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true */} -
+ ); } + +export const getStaticProps = async () => { + const listRowsRes = await fetch( + // https://coda.io/developers/apis/v1#operation/listRows + `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true`, + { + headers: { + Authorization: `Bearer ${process.env.CODA_API_TOKEN}`, + }, + }, + ); + + const data = listRowsRes.ok ? await listRowsRes.json() : null; + const usages: Usage[] = data ? data.items : []; + const filteredImplementations = usages.filter(item => item.values.usage === 'icon'); + + const groupedUsages = groupBy(filteredImplementations, usage => { + return usage.values.theme; + }); + + return { + props: { + layoutProps: getLayoutProps(), + usages: groupedUsages, + }, + }; +}; diff --git a/next/pages/guidelines/color/usage/text.tsx b/next/pages/guidelines/color/usage/text.tsx index c5b7b82c..8dbbd7f3 100644 --- a/next/pages/guidelines/color/usage/text.tsx +++ b/next/pages/guidelines/color/usage/text.tsx @@ -1,18 +1,84 @@ import React from 'react'; import type { InferGetStaticPropsType } from 'next'; -import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react'; -import * as tokens from '@thumbtack/thumbprint-tokens'; +import { StaticImageData } from 'next/image'; +import { groupBy } from 'lodash-es'; import { ContentPage } from '../../../../components/mdx/mdx'; -import getContentPageStaticProps from '../../../../utils/get-content-page-static-props'; -import { CodeExperimental, H2, H3, LI, P, UL } from '../../../../components/mdx/components'; -import SwatchUsage from '../../../../components/thumbprint-guide/swatch-usage'; -import Swatch from '../../../../components/thumbprint-guide/swatch'; +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'; -export const getStaticProps = getContentPageStaticProps; +import intro from '../../../../images/pages/guide/product/color/usage/text/intro.png'; +import neutral from '../../../../images/pages/guide/product/color/usage/text/neutral.png'; +import primary from '../../../../images/pages/guide/product/color/usage/text/primary.png'; +import success from '../../../../images/pages/guide/product/color/usage/text/success.png'; +import guidance from '../../../../images/pages/guide/product/color/usage/text/guidance.png'; +import alert from '../../../../images/pages/guide/product/color/usage/text/alert.png'; +import caution from '../../../../images/pages/guide/product/color/usage/text/caution.png'; +import accent from '../../../../images/pages/guide/product/color/usage/text/accent.png'; -export default function OverviewAbout({ +interface Image { + [key: string]: { + src: StaticImageData; + alt: string; + }; +} + +const images: Image = { + neutral: { + src: neutral, + alt: 'alt text', + }, + primary: { + src: primary, + alt: 'alt text', + }, + success: { + src: success, + alt: 'alt text', + }, + guidance: { + src: guidance, + alt: 'alt text', + }, + alert: { + src: alert, + alt: 'alt text', + }, + caution: { + src: caution, + alt: 'alt text', + }, + accent: { + src: accent, + alt: 'alt 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, }: InferGetStaticPropsType) { return ( @@ -43,7 +109,11 @@ export default function OverviewAbout({ - Image + +
+ +
+

Text

@@ -72,14 +142,34 @@ export default function OverviewAbout({
-
- Repeat over text colors. Group by: -
    -
  1. "usage" (text)
    2. -
  2. "theme" (succes, primary, etc..)
    3. -
- {/* https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true */} -
+ ); } + +export const getStaticProps = async () => { + const listRowsRes = await fetch( + // https://coda.io/developers/apis/v1#operation/listRows + `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/grid-jzs5ByTkFj/rows?useColumnNames=true`, + { + headers: { + Authorization: `Bearer ${process.env.CODA_API_TOKEN}`, + }, + }, + ); + + const data = listRowsRes.ok ? await listRowsRes.json() : null; + const usages: Usage[] = data ? data.items : []; + const filteredImplementations = usages.filter(item => item.values.usage === 'text'); + + const groupedUsages = groupBy(filteredImplementations, usage => { + return usage.values.theme; + }); + + return { + props: { + layoutProps: getLayoutProps(), + usages: groupedUsages, + }, + }; +}; diff --git a/next/pages/guidelines/color/usage/usage-categories.tsx b/next/pages/guidelines/color/usage/usage-categories.tsx new file mode 100644 index 00000000..ae5142b0 --- /dev/null +++ b/next/pages/guidelines/color/usage/usage-categories.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { StaticImageData } from 'next/image'; +import usageContentMappings from '../usage-mappings'; +import ExampleBox from '../../../../components/example-box'; +import { H2, P } from '../../../../components/mdx/components'; + +interface Image { + [key: string]: { + src: StaticImageData; + alt: string; + }; +} + +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 UsageCategory({ usages, images }): JSX.Element { + return ( +
+ {Object.keys(usages).map(key => { + return ( +
+
+

{usageContentMappings[key].title}

+

{usageContentMappings[key].description}

+
+ + + + + + + + {usages[key].map(component => { + return ( + + + + + + + ); + })} +
ColorEmphasisInteractionDescription
+
+ + {component.values.color} +
+ 		+ {component.values.emphasis} + + {component.values.interaction} + + {component.values.description} +
+ {images[key] ? ( +
+ Examples + +
+ {images[key].alt} +
+ +
+ ) : null} +
+ ); + })} +
+ ); +}