Refactor into BulletedItemList component

2 files changed, 33 insertions, 24 deletions

diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
new file mode 100644
index 000000000..108f31e00
--- /dev/null
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -0,0 +1,30 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+
+export interface BulletedItemListProps {
+    headerText: string;
+    bulletedItems: BulletedItemProps[];
+}
+export const BulletedItemList = (props: BulletedItemListProps) => {
+    return (
+        <div className="mx-auto max-width-4">
+            <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
+                {props.headerText}
+            </div>
+            <div className="px2">
+                {_.map(props.bulletedItems, bulletedItemProps => {
+                    return (
+                        <BulletedItem
+                            bulletColor={bulletedItemProps.bulletColor}
+                            title={bulletedItemProps.title}
+                            description={bulletedItemProps.description}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 9bb98d016..37e62d23b 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,7 +2,8 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 
 const BULLETED_ITEMS: BulletedItemProps[] = [
     {
@@ -22,26 +23,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [
     },
 ];
 
-export const Values = () => {
-    const isSmallScreen = false;
-    return (
-        <div className="clearfix" style={{ backgroundColor: colors.white }}>
-            <div className="mx-auto max-width-4 clearfix">
-                <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
-                    Our Values
-                </div>
-                <div className="col col-12 px2">
-                    {_.map(BULLETED_ITEMS, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-};
+export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />;