Merge branch 'v2-prototype' into feature/combinatorial-testing

* v2-prototype: (27 commits)
  Add back redirector behind feature flag
  Update minHeight in Text
  Use Text components in Values
  Use spread operator instead of React.createElement
  Fix issue with positions hash
  Revert localhost config
  Use Text in Teams
  Use Text in OpenPositions
  Use Text component for HeaderItem
  Remove FloatingImage
  Move FilledImage into components/ui
  Replace FlatButton with Button in Retry
  Fix incorrect colors
  Add font family to Button component and use in Join0x component
  Consolidate jobs page grey colors with shared colors
  Fix lint errors
  Remove extra packages
  Implement small open positions
  Implement large screen open positions
  Teams section
  ...

1 files changed, 90 insertions, 0 deletions

diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
new file mode 100644
index 000000000..80b036396
--- /dev/null
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -0,0 +1,90 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Text } from 'ts/components/ui/text';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
+
+const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [
+    {
+        bulletColor: '#EB5757',
+        title: 'User Growth',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#EB5757',
+        title: 'Governance',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+];
+const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [
+    {
+        bulletColor: '#EB5757',
+        title: 'Developer Tools',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#EB5757',
+        title: 'Marketing',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+];
+const HEADER_TEXT = 'Our Teams';
+const MINIMUM_ITEM_HEIGHT = 240;
+
+export interface TeamsProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />);
+
+const LargeLayout = () => (
+    <div className="mx-auto max-width-4 clearfix pb4">
+        <div className="col lg-col-6 md-col-6 col-12">
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => <TeamItem {...teamItemProps} />)}
+        </div>
+        <div className="col lg-col-6 md-col-6 col-12">
+            <HeaderItem headerText=" " />
+            {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)}
+        </div>
+    </div>
+);
+
+const SmallLayout = () => (
+    <div>
+        <HeaderItem headerText={HEADER_TEXT} />
+        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => (
+            <TeamItem {...teamItemProps} />
+        ))}
+    </div>
+);
+
+interface TeamItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+}
+
+export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, title, description }) => {
+    return (
+        <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}>
+            <ListItem bulletColor={bulletColor}>
+                <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}>
+                    {title}
+                </Text>
+            </ListItem>
+            <ListItem>
+                <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}>
+                    {description}
+                </Text>
+            </ListItem>
+        </div>
+    );
+};