diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx index c149ba42..f0dd179d 100644 --- a/next/pages/guidelines/color/palette.tsx +++ b/next/pages/guidelines/color/palette.tsx @@ -3,7 +3,7 @@ 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'; @@ -152,6 +152,23 @@ function ColorSection({ values }: Usage): JSX.Element { ); } +interface SwatchProps { + tokenColor: string; + children?: React.ReactNode; + level: string; +} + +function Swatch({ tokenColor, children, level }: SwatchProps): JSX.Element { + return ( +
+ {level} +
+ ); +} + export default function OverviewAbout({ usages, layoutProps, @@ -176,41 +193,148 @@ export default function OverviewAbout({

-
color palette table
- - {Object.keys(usages).map(key => { - return ( -
-

{key}

-

- Express default and less-opinionated UI elements such as background - colors, icons, and text elements. -

- -
-
-
Suggested use
-
Backgrounds, text, iconography, shadows.
- -
- {usages[key].map(component => { - return ; - })} + {/* palette */} +
+
+
+ Neutral +
+
+ 100 +
+
+ 200 +
+
+ 300 +
+
+ Core +
+
+ 500 +
+
+ 600 +
+
+
+
+ Netural +
+ + + + + + +
+
+
+ Blue +
+ + + + + + +
+
+
+ Green +
+ + + + + + +
+
+
+ Yellow +
+ + + + + + +
+
+
+ Red +
+ + + + + + +
+
+
+ Indigo +
+ + + + + + +
+
+
+ Purple +
+ + + + + + +
+
+ + {/* colors */} +
+ {Object.keys(usages).map(key => { + return ( +
+

{key}

+

+ Express default and less-opinionated UI elements such as background + colors, icons, and text elements. +

+ +
+
+
Suggested use
+
+ Backgrounds, text, iconography, shadows. +
+ +
+ {usages[key].map(component => { + return ; + })} +
-
-
-
Examples
- {images[key].alt} +
+
Examples
+ {images[key].alt} +
-
- ); - })} + ); + })} +
); } diff --git a/next/pages/guidelines/color/usage/color-usage-nav.tsx b/next/pages/guidelines/color/usage/color-usage-nav.tsx new file mode 100644 index 00000000..d2f1c0d2 --- /dev/null +++ b/next/pages/guidelines/color/usage/color-usage-nav.tsx @@ -0,0 +1,63 @@ +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, + }; + + const { path } = node; + return platformOrder[getPlatformSlugByPath(path)]; +}; + +/** + * 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); + + return ( + + {sortedPlatforms.map(({ node }) => ( + + {getPlatformDisplayName(node.path)} + + ))} + + ); +}; + +PlatformNav.propTypes = { + platformNavQueryResults: PropTypes.shape({}).isRequired, +}; + +export default PlatformNav;