feat: add with button story for contextual component (#88)

The button is displayed overlaying the contextual element
Circle-Back · Nov 25, 2019 · 8d79c3b · 8d79c3b · vercel · Nov 25, 2019
1 parent d80a262
commit 8d79c3b
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 27 deletions.
diff --git a/src/components/Contextual.stories.tsx b/src/components/Contextual.stories.tsx
@@ -1,15 +1,30 @@
 import * as React from "react";
+import Box from "@material-ui/core/Box";
 import { Contextual } from "./Contextual";
 
 export default {
   title: "Contextual",
 };
 
 export const Default: React.FC = () => (
-  <Contextual
-    name="category"
-    title="Hardware"
-    body="Lorem ipsum dolor sit amet..."
-    image="./hardware.png"
-  />
+  <Box width="344px">
+    <Contextual
+      name="category"
+      title="Hardware"
+      body="Lorem ipsum dolor sit amet..."
+      image="./hardware.png"
+    />
+  </Box>
+);
+
+export const WithButton: React.FC = () => (
+  <Box width="344px">
+    <Contextual
+      name="category"
+      title="Hardware"
+      body="Lorem ipsum dolor sit amet..."
+      image="./hardware.png"
+      button
+    />
+  </Box>
 );
diff --git a/src/components/Contextual.styles.ts b/src/components/Contextual.styles.ts
@@ -1,22 +1,37 @@
 import styled from "styled-components";
 import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
 
 export interface BackgroundImageProps {
   image: string;
 }
 
+interface ContextualButtonProps {
+  textcolor?: string | undefined;
+  backgroundcolor?: string | undefined;
+}
+
+export const ContextualContainer = styled.div`
+  position: relative;
+`;
+
+export const ContextualButton = styled(Button)<ContextualButtonProps>`
+  height: 36px;
+  background-color: ${({ backgroundcolor }): string => backgroundcolor || "white"};
+  color: ${({ textcolor }): string => textcolor || "white"};
+  top: 140%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -140%);
+  position: absolute;
+`;
+
 export const StyledGrid = styled(Grid)`
   position: absolute;
   z-index: 1;
 `;
 
-export const ContextualContainer = styled.div`
-  position: relative;
-  width: 344px;
-  height: 100px;
-`;
 export const BackgroundImage = styled.div<BackgroundImageProps>`
-  width: 344px;
   height: 100px;
   border-radius: 4px;
   background-image: url(${({ image }): string => image});

diff --git a/src/components/Contextual.tsx b/src/components/Contextual.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import Grid from "@material-ui/core/Grid";
+import { ThemeProvider, StylesProvider } from "@material-ui/core/styles";
 import {
   BackgroundImage,
   Title,
@@ -8,34 +9,47 @@ import {
   Name,
   StyledGrid,
   Body,
+  ContextualButton,
 } from "./Contextual.styles";
+import theme from "../MuiTheme";
 
 export interface ContextualProps {
   name: string;
   title: string;
   body: string;
   image: string;
+  button?: boolean | undefined;
 }
 
 export const Contextual: React.FC<ContextualProps> = ({
   name,
   title,
   body,
   image,
+  button,
 }: ContextualProps) => (
-  <ContextualContainer>
-    <StyledGrid container direction="column" spacing={1}>
-      <Grid item>
-        <Name>{name}</Name>
-      </Grid>
-      <Grid item>
-        <Title>{title}</Title>
-      </Grid>
-      <Grid item>
-        <Body>{body}</Body>
-      </Grid>
-    </StyledGrid>
-    <BackgroundImage image={image} />
-    <Overlay />
-  </ContextualContainer>
+  <StylesProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      <ContextualContainer>
+        <StyledGrid container direction="column" spacing={1}>
+          <Grid item>
+            <Name>{name}</Name>
+          </Grid>
+          <Grid item>
+            <Title>{title}</Title>
+          </Grid>
+          <Grid item>
+            <Body>{body}</Body>
+          </Grid>
+        </StyledGrid>
+        <BackgroundImage image={image} />
+        <Overlay />
+        {button ? (
+          <ContextualButton backgroundcolor={theme.palette.primary.main}>
+            Start a topic
+          </ContextualButton>
+        ) : null}
+      </ContextualContainer>
+    </ThemeProvider>
+  </StylesProvider>
 );