changes palette color description to list

thumbtack · Aug 23, 2024 · d1dfe0a · d1dfe0a
1 parent d35dea7
commit d1dfe0a
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx
@@ -8,7 +8,7 @@ import { NavigationCaretDownSmall } 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 { H2, P, LI, UL } from '../../../components/mdx/components';
 import { paletteColortMappings } from './usage-mappings';
 
 import purple from '../../../images/pages/guide/product/color/palette/purple.png';
@@ -120,7 +120,13 @@ function ColorSection({ values }: Usage): JSX.Element {
             {/* end clickable region */}
             <div className="pb3 ph3">
                 {/* body content */}
-                <div className="pb3">{values.description}</div>
+                <div className="pb3">
+                    <ul style={{ listStyle: 'bullet' }} className="ml3">
+                        {values.description.split('\n').map(item => {
+                            return <li>{item}</li>;
+                        })}
+                    </ul>
+                </div>
                 {/* tokens */}
                 <div className="flex flex-row col-gap2 row-gap2 flex-wrap">
                     {coloredPill({