Log In and Sign Up templates for MG Kit Storybook

src/components/button/Button.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-export function Button({ style }) {
+export function Button({ style,label }) {
   return (
     <button type="button" className={style}>
-      Button
+      {label}
     </button>
   );
 }

src/components/button/Button.stories.jsx

@@ -3,18 +3,18 @@ import '../../stylesheets/button.scss';
 import { Button } from './Button';
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button
 };
 
-export const Primary = () => <Button style="kit-button"/>;
-export const PrimaryMedium = () => <Button style="kit-button -medium"/>;
-export const PrimarySmall = () => <Button style="kit-button -small"/>;
-export const Alt = () => <Button style="kit-button -alt"/>;
-export const AltMedium = () => <Button style="kit-button -alt -medium"/>;
-export const AltSmall = () => <Button style="kit-button -alt -small"/>;
-export const Disabled = () => <Button style="kit-button -disabled"/>;
-export const Line = () => <Button style="kit-button -line"/>;
-export const Light = () => <Button style="kit-button -light"/>;
-export const LightAlt = () => <Button style="kit-button -lightalt"/>;
-export const LightLine = () => <Button style="kit-button -lightline"/>;
+export const Primary = () => <Button style="kit-button" label="Button"/>;
+export const PrimaryMedium = () => <Button style="kit-button -medium" label="Button"/>;
+export const PrimarySmall = () => <Button style="kit-button -small" label="Button"/>;
+export const Alt = () => <Button style="kit-button -alt" label="Button"/>;
+export const AltMedium = () => <Button style="kit-button -alt -medium" label="Button"/>;
+export const AltSmall = () => <Button style="kit-button -alt -small" label="Button"/>;
+export const Disabled = () => <Button style="kit-button -disabled" label="Button"/>;
+export const Line = () => <Button style="kit-button -line" label="Button"/>;
+export const Light = () => <Button style="kit-button -light" label="Button"/>;
+export const LightAlt = () => <Button style="kit-button -lightalt" label="Button"/>;
+export const LightLine = () => <Button style="kit-button -lightline" label="Button"/>;

src/components/button/DropDown.stories.jsx

@@ -3,7 +3,7 @@ import '../../stylesheets/dropdown.scss';
 import { DropDown } from './DropDown';
 
 export default {
-  title: 'Drop Down',
+  title: 'Components/Drop Down',
   component: DropDown
 };
 

src/components/button/Footer.stories.jsx

@@ -4,7 +4,7 @@ import { Footer } from './Footer';
 import { FooterAlt } from './FooterAlt';
 
 export default {
-  title: 'Footer',
+  title: 'Components/Footer',
   component: Footer
 };
 

src/components/button/LoginPage.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { TextBox } from "./TextBox";
+import { Button } from "./Button";
+import MonogramWhite from "../../assets/MonogramWhite.svg";
+import LogIn from "../../assets/LogIn.png";
+
+export function LoginPage({ mode, textbox, button }) {
+  return (
+    <div class={mode}>
+      <img class="illustration" src={LogIn}></img>
+      <div class="background">
+        <div class="gradient"></div>
+        <div class="image"></div>
+      </div>
+      <div class="container">
+        <img class="monogram -primary" src={MonogramWhite} alt="logo" />
+        <div class="title">Sign in to your account</div>
+        <div class="subtitle">
+          <span>Or start your</span> <a href="#"> 7-day trial!</a>
+        </div>
+        <div class="login-container">
+          <TextBox style={textbox} input="Email Address" type="text" />
+          <TextBox style={textbox} input="Password" type="password" />
+          <div class="actions">
+            <label>
+              <input type="checkbox" id="remember" value="off" />
+              <span>Remember Me</span>
+            </label>
+            <a class="forgot" href="#">
+              {" "}
+              Forgot your password?
+            </a>
+          </div>
+        </div>
+        <Button style={button} label="Log in" />
+      </div>
+    </div>
+  );
+}

src/components/button/LoginPage.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import '../../stylesheets/login.scss';
+import '../../stylesheets/textbox.scss';
+import '../../stylesheets/button.scss';
+import { LoginPage } from './LoginPage';
+
+
+
+export default {
+  title: 'Templates/Log In',
+  component: LoginPage
+};
+
+const Template = (args) => <LoginPage {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: "log-in",
+  textbox: "kit-textbox",
+  button: "kit-button -login",
+};

src/components/button/ProductItem.stories.jsx

@@ -3,7 +3,7 @@ import '../../stylesheets/product-item.scss';
 import { ProductItem } from './ProductItem';
 
 export default {
-  title: 'Product Item',
+  title: 'Components/Product Item',
   component: ProductItem
 };
 

src/components/button/SideNavbar.stories.jsx

@@ -3,7 +3,7 @@ import '../../stylesheets/navbar.scss';
 import { SideNavbar } from './SideNavbar';
 
 export default {
-  title: 'Side Navbar',
+  title: 'Components/Side Navbar',
   component: SideNavbar
 };
 

src/components/button/SignupPage.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { TextBox } from "./TextBox";
+import { Button } from "./Button";
+import MonogramWhite from "../../assets/MonogramWhite.svg";
+
+export function SignupPage({ mode, textbox, button }) {
+  return (
+    <div class={mode}>
+      <div class="background">
+        <div class="gradient"></div>
+        <div class="image"></div>
+      </div>
+      <div class="container">
+        <img class="monogram -primary" src={MonogramWhite} alt="logo" />
+        <div class="title">Create New Account</div>
+        <div class="subtitle">
+          <span>Already registered?</span>
+          <a href="#"> Log In</a>
+        </div>
+        <div class="signup-container">
+          <div class="row">
+            <TextBox style={textbox} input="Email Address" type="text" />
+          </div>
+          <div class="row">
+            <TextBox style={textbox} input="First Name" type="text" />
+            <TextBox style={textbox} input="Last Name" type="text" />
+          </div>
+          <div class="row">
+            <TextBox style={textbox} input="Password" type="password" />
+            <TextBox style={textbox} input="Re-Enter Password" type="password"/>
+          </div>
+          <div class="row">
+            <Button style={button} label="Create Account" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/button/SignupPage.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import '../../stylesheets/signup.scss';
+import '../../stylesheets/textbox.scss';
+import '../../stylesheets/button.scss';
+import { SignupPage } from './SignupPage';
+
+
+export default {
+  title: 'Templates/Sign Up',
+  component: SignupPage
+};
+
+const Template = (args) => <SignupPage {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: "sign-up",
+  textbox: "kit-textbox -signup",
+  button: "kit-button -signup",
+};

src/components/button/TextBox.jsx

@@ -4,11 +4,11 @@ import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import
 
 console.log(FontAwesomeIcon)
 
-export function TextBox({ style }) {
+export function TextBox({ style, input, type }) {
   return (
     <div class={style}> 
       <span><FontAwesomeIcon icon={solid('magnifying-glass')} color=''/></span>
-		  <input type="text" placeholder="Input text here"></input>
+		  <input type={type} placeholder={input}></input>
     </div>
   );
 }

src/components/button/TextBox.stories.jsx

@@ -3,13 +3,15 @@ import '../../stylesheets/textbox.scss';
 import { TextBox } from './TextBox';
 
 export default {
-  title: 'Textbox',
+  title: 'Components/Textbox',
   component: TextBox
 };
 
-export const Primary = () => <TextBox style="kit-textbox"/>;
-export const PrimaryLight = () => <TextBox style="kit-textbox -light"/>;
-export const PrimarySearch = () => <TextBox style="kit-textbox -search"/>;
-export const PrimarySearchLight = () => <TextBox style="kit-textbox -search -light"/>;
-export const Disabled = () => <TextBox style="kit-textbox -disabled"/>;
-export const Error = () => <TextBox style="kit-textbox -error"/>;
+export const Primary = () => <TextBox style="kit-textbox" input="Input placeholder text here" type="text" />;
+export const PrimaryLight = () => <TextBox style="kit-textbox -light" input="Input placeholder text here" type="text"/>;
+export const PrimarySearch = () => <TextBox style="kit-textbox -search" input="Input placeholder text here" type="text"/>;
+export const PrimarySearchLight = () => <TextBox style="kit-textbox -search -light" input="Input placeholder text here" type="text"/>;
+export const Disabled = () => <TextBox style="kit-textbox -disabled" input="Input placeholder text here" type="text"/>;
+export const Error = () => <TextBox style="kit-textbox -error" input="Input placeholder text here" type="text"/>;
+export const PrimaryPassword = () => <TextBox style="kit-textbox -password" input="Input placeholder text here" type="password"/>;
+

src/components/button/TopNavbar.stories.jsx

@@ -3,7 +3,7 @@ import '../../stylesheets/navbar.scss';
 import { TopNavbar } from './TopNavbar';
 
 export default {
-  title: 'Top Navbar',
+  title: 'Components/Top Navbar',
   component: TopNavbar
 };
 

src/stylesheets/button.scss

@@ -39,10 +39,9 @@
   justify-content: center;
   background-color: $primary;
   border-radius: 4px;
-  font-size: $button-text;
-  text-transform: uppercase;
-  letter-spacing: 4px;
+  font-size: $body;
   cursor: pointer;
+  color: $text;
 
   &:hover {
     opacity: 0.5;

src/stylesheets/login.scss

@@ -0,0 +1,123 @@
+@import "./variables";
+
+.log-in {
+  display: flex;
+  color: $text;
+  width: 100%;
+  height: 100vh;
+  align-items: center;
+  overflow: hidden;
+  margin: 0;
+  justify-content: center;
+
+  > .illustration {
+    position: absolute;
+    z-index: 4;
+    height: 32%;
+    bottom: 0;
+  }
+
+  > .background {
+    display: flex;
+    align-items: center;
+  }
+
+  > .background > * {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  > .background > .gradient {
+    background: $color-gradient;
+    z-index: 1;
+  }
+
+  > .background > .image {
+    z-index: 2;
+    background-image: url("../assets/Background.png");
+    opacity: 0.3;
+  }
+
+  > .container {
+    display: flex;
+    height: 200vh;
+    width: 100vw;
+    min-width: 560px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: $bg1;
+    position: relative;
+    clip-path: polygon(25% 0%, 100% 0%, 75.89% 116.36%, -4.62% 116.5%);
+    z-index: 3;
+    margin-top: -234px;
+    padding: 32px;
+    box-sizing: content-box;
+  }
+
+  > .container > .monogram {
+    width: 64px;
+    margin-bottom: 16px;
+  }
+
+  > .container > .title {
+    font-size: $h5;
+  }
+
+  > .container > .subtitle {
+    font-size: $h6;
+    margin-bottom: 48px;
+  }
+
+  > .container > .subtitle > a {
+    color: $primary;
+  }
+
+  @media only screen and (min-width: 832px) {
+    justify-content: normal;
+
+
+    > .illustration {
+      right: 24px;
+      height: 60vh;
+      margin-top: 0;
+      bottom: auto;
+    }
+
+    > .container {
+      height: 100vh;
+      width: 75vw;
+      left: -5%;
+      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+      margin-top: 0;
+      padding: 0;
+    }
+
+    > .container > .title {
+      font-size: $h4;
+    }
+  }
+}
+
+.login-container {
+  width: 400px;
+  margin-bottom: 32px;
+
+  > .actions {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > .actions > a {
+    color: $primary;
+  }
+
+  @media only screen and (min-width: 832px) {
+    min-width: 200px;
+  }
+}
+
+.kit-button.-login {
+  width: 400px;
+}