adds content to usage views

standardized delivery of usages assets

next/pages/guidelines/color/overview.tsx

@@ -1,19 +1,42 @@
 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,
     interactionContent,
     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.
             </P>
-            {/* <div>
-                <H2>Naming</H2>
-                <P>
-                    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).
-                </P>
-            </div> */}
 
             <div>
                 <H2>Color themes</H2>
@@ -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.
                 </P>
-                <ExampleBox>Image</ExampleBox>
+                <ExampleBox>
+                    <div className="tc">
+                        <img src={images.usage.src.src} width="375px" alt={images.usage.alt} />
+                    </div>
+                </ExampleBox>
                 {overviewTable({ list: usageContent })}
             </div>
 
@@ -147,7 +165,15 @@ export default function OverviewAbout({
                     attention. A strong emphasis is high contrast in comparison to the surface the
                     component occupies.
                 </P>
-                <ExampleBox>Image</ExampleBox>
+                <ExampleBox>
+                    <div className="tc">
+                        <img
+                            src={images.emphasis.src.src}
+                            width="375px"
+                            alt={images.emphasis.alt}
+                        />
+                    </div>
+                </ExampleBox>
                 {overviewTable({ list: emphasisContent })}
             </div>
 
@@ -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.
                 </P>
-                <ExampleBox>Image</ExampleBox>
+                <ExampleBox>
+                    <div className="tc">
+                        <img
+                            src={images.interaction.src.src}
+                            width="375px"
+                            alt={images.interaction.alt}
+                        />
+                    </div>
+                </ExampleBox>
                 {overviewTable({ list: interactionContent })}
             </div>
         </ContentPage>

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({
 
                             <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>

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<typeof getStaticProps>) {
@@ -93,7 +126,11 @@ export default function OverviewAbout({
                 </TabNavItem>
             </TabNav>
 
-            <ExampleBox>Image</ExampleBox>
+            <ExampleBox>
+                <div className="tc" style={{ minWidth: '375px' }}>
+                    <img src={intro.src} width="375px" alt="" />
+                </div>
+            </ExampleBox>
 
             <div>
                 <H2>Background colors</H2>
@@ -127,60 +164,7 @@ export default function OverviewAbout({
                 </UL>
             </div>
 
-            <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>
-                                    <th className="tl pv2 pr4">Interaction</th>
-                                    <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>
-                                            <td className="v-top pv2 pr4">
-                                                {component.values.interaction}
-                                            </td>
-                                            <td className="v-top pv2">
-                                                {component.values.description}
-                                            </td>
-                                        </tr>
-                                    );
-                                })}
-                            </table>
-                            <div className="pt3">
-                                <span className="tp-body-3 black-300 ttu">Examples</span>
-                                <ExampleBox>
-                                    <div className="tc">
-                                        <H3>{key}</H3>
-                                    </div>
-                                </ExampleBox>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
+            <UsageCategory usages={usages} images={images} />
         </ContentPage>
     );
 }