style: Updated styles on Checkbox Overview

src/components/Checkbox/CheckboxOverview.mdx

@@ -1,17 +1,19 @@
 import { Meta } from '@storybook/addon-docs';
-import { List, Link, ListLink, Heading } from '~/src/index';
+import { List, Link, ListLink, Heading, Paragraph } from '~/src/index';
 
 <Meta title='Components (Verified)/Checkboxes/Overview' />
 
 <Heading type='1'>Checkboxes</Heading>
 
-Use checkboxes when the user can select more than one option from a list. Make clear with helper text that this is the case. Use [radio buttons](https://cfpb.github.io/design-system/components/radio-buttons) when the user can choose only one option from a list.
+<Paragraph>Use checkboxes when the user can select more than one option from a list. Make clear with helper text that this is the case. Use [radio buttons](https://cfpb.github.io/design-system/components/radio-buttons) when the user can choose only one option from a list.</Paragraph>
 
-Source: <Link href='https://cfpb.github.io/design-system/components/checkboxes'>https://cfpb.github.io/design-system/components/checkboxes</Link>
+<Paragraph>Source: <Link href='https://cfpb.github.io/design-system/components/checkboxes'>https://cfpb.github.io/design-system/components/checkboxes</Link></Paragraph>
 
-<Heading type='3'>Types</Heading>
+<br />
 
-<List isLinks>
+<Heading type='4'>Types</Heading>
+
+<List forceListStyleOverride className="cfpb-list-style-override" isLinks>
   <ListLink href='/?path=/docs/components-verified-checkboxes-checkbox--overview'>Checkbox</ListLink>
   <ListLink href='/?path=/docs/components-verified-checkboxes-large-target-area--overview'>Large target area</ListLink>
 </List>

src/components/List/List.less

@@ -0,0 +1,8 @@
+.cfpb-list-style-override {
+  padding-left: 1.125em !important;
+  list-style: square !important;
+
+  a {
+    font-size: 16px;
+  }
+}

src/components/List/List.tsx

@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import './List.less';
 
 interface ListProperties {
   children: JSX.Element | JSX.Element[];
@@ -8,6 +9,7 @@ interface ListProperties {
   isOrdered?: boolean;
   isSpaced?: boolean;
   isUnstyled?: boolean;
+  forceListStyleOverride?: boolean;
 }
 
 export default function List({
@@ -17,13 +19,16 @@ export default function List({
   isLinks = false,
   isOrdered,
   isSpaced,
+  forceListStyleOverride,
   isUnstyled
 }: ListProperties): JSX.Element {
-  const cnames = [className, 'm-list'];
+  const cnames = ['m-list'];
   if (isHorizontal) cnames.push('m-list__horizontal');
   if (isLinks) cnames.push('m-list__links');
   if (isSpaced) cnames.push('m-list__spaced');
   if (isUnstyled) cnames.push('m-list__unstyled');
+  if (forceListStyleOverride) cnames.push('cfpb-list-style-override');
+  if (className) cnames.push(className);
 
   if (isOrdered) return <ol className={classnames(cnames)}>{children}</ol>;
   return <ul className={classnames(cnames)}>{children}</ul>;