Merge branch 'development' into dev-tools-pages

1 files changed, 59 insertions, 0 deletions

diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..b747ef598
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,59 @@
+import { colors, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+import { styled } from 'ts/style/theme';
+
+export interface TutorialButtonProps {
+    className?: string;
+    translate: Translate;
+    tutorialInfo: TutorialInfo;
+}
+
+const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => (
+    <Container className={className}>
+        <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}>
+            <div className="flex relative">
+                <div className="col col-1 flex items-center sm-pr3">
+                    <img src={tutorialInfo.iconUrl} height={40} />
+                </div>
+                <div className="lg-pl2 md-pl2 sm-pl3 col col-10">
+                    <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                        {translate.get(tutorialInfo.link.title as Key, Deco.Cap)}
+                    </Text>
+                    <Text Tag="div" fontColor={colors.grey750} fontSize="16">
+                        {translate.get(tutorialInfo.description as Key, Deco.Cap)}
+                    </Text>
+                </div>
+                <div className="col col-1 flex items-center justify-end">
+                    <div className="right">
+                        <i
+                            className="zmdi zmdi-chevron-right bold"
+                            style={{ fontSize: 26, color: colors.lightLinkBlue }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Link>
+    </Container>
+);
+
+export const TutorialButton = styled(PlainTutorialButton)`
+    border-radius: 4px;
+    border: 1px solid ${colors.grey325};
+    background-color: ${colors.white};
+    &:hover {
+        border: 1px solid ${colors.lightLinkBlue};
+        background-color: ${colors.lightestBlue};
+    }
+    padding: 20px;
+    margin-bottom: 15px;
+`;
+
+TutorialButton.defaultProps = {};
+
+TutorialButton.displayName = 'TutorialButton';