feat: add labels (#782)

Signed-off-by: hxtree <[email protected]>

clients/admin-client/src/pages/login.page.tsx

@@ -1,15 +1,26 @@
 import { Paper, Link, Button, TextField, faArrowRight, FontAwesomeIcon } from '@cats-cradle/design-system/dist/main';
+import React from 'react';
 
 export default function LoginPage() {
+  function onClickHandler(event: React.MouseEvent){
+    console.log(event);
+    return;
+  }
+
   return (
     <main className="container">
       <Paper elevation="1">
         <h1>Log In</h1>
-        <TextField id="email-address" label="Email Address" type="text"/>
-
-        <Link href="/forgot-password">Forgot Password</Link>
-        <TextField id="password" label="Password" type="password"/>
-        <Button onClick={()=>{}} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+        <div className="mb-3">
+          <TextField id="email-address" label="Email Address" type="text"/>
+        </div>
+        <div className="mb-3">
+          <Link href="/forgot-password">Forgot Password</Link>
+          <TextField id="password" label="Password" type="password"/>
+        </div>
+        <div className="mb-3">
+          <Button onClick={onClickHandler} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+        </div>
       </Paper>
     </main>
   );

clients/design-system/src/components/Button/style.module.scss

@@ -30,9 +30,16 @@
           color: $color-white;
         }
       }
+      > svg {
+        margin-left: 0.3rem;
+        color: lighten($color-primary, 15%);
+      }
       &:hover {
-        border-color:  lighten($color-primary, 5%);
-        background-color: lighten($color-primary, 5%);
+        border-color:  lighten($color-primary, 10%);
+        background-color: lighten($color-primary, 10%);
+        > svg {
+          color: $color-primary;
+        }
       }
     }
     &.button-secondary {
@@ -49,7 +56,7 @@
         }
       }
       &:hover {
-        border-color:  lighten($color-primary, 5%);
+        border-color:  lighten($color-primary, 10%);
         color: $color-black;
       }
     }

clients/design-system/src/components/SocialMediaBar/style.module.scss

@@ -3,7 +3,7 @@
 :global {
   .social-media-bar {
     background-color: $color-primary;
-    background: linear-gradient(to top left, $color-primary, darken($color-primary, 20%));
+    box-shadow: inset 0px 0px 30px 10px rgba(0, 0,0, 0.14);
     margin: 0;
     margin-top: 4rem;
     // padding: 0.2rem 3rem;

clients/design-system/src/components/TextField/TextField.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import './style.scss';
 
 export type TextFieldProps = {
   id?: string;
@@ -10,11 +11,12 @@ export type TextFieldProps = {
   invalid?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   variant?: string;
+  placeholder?: string;
 }
 
 // https://getbootstrap.com/docs/5.0/forms/validation/
 export const TextField = (props: TextFieldProps): JSX.Element => {
-  const { id, label, type, helpBlock, value, size, invalid, onChange } = props;
+  const { id, label, type, helpBlock, value, size, invalid, onChange, placeholder } = props;
 
   const classNames = [];
   classNames.push('form-control');
@@ -36,15 +38,15 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
   if(helpBlock){
     return (<>
       {label && <label htmlFor={ id } className="form-label">{ label }</label>}
-      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} aria-describedby={ `${id}HelpBlock` }/>
-      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text">{ helpBlock }</div> }
+      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} placeholder={placeholder} aria-describedby={ `${id}HelpBlock` }/>
+      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text" >{ helpBlock }</div> }
       { invalid && <div className="invalid-feedback">{ invalid }</div>}
     </>)
   }
 
   return (<>
     {label && <label htmlFor={ id } className="form-label">{ label }</label>}
-    <input id={ id } type={ type } value={ value } onChange={ onChange  }className={classNames.join(' ')}/>
+    <input id={ id } type={ type } value={ value } onChange={ onChange  } className={classNames.join(' ')}  placeholder={placeholder}/>
     { invalid && <div className="invalid-feedback">{ invalid }</div>}
   </>)
 };

clients/design-system/src/components/TextField/style.scss

@@ -0,0 +1,12 @@
+@import '../../styles/utils/color-pallette';
+
+.form-label {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 	0.875rem;
+  color: lighten($color-off-black, 30%);
+}
+
+.form-control {
+  letter-spacing: 0.1rem;
+}

clients/design-system/src/components/Typography/style.module.scss

@@ -8,7 +8,7 @@
   h1 {
     font-family: "Eczar", serif;
     font-weight: 800;
-    font-size: 3rem;
+    font-size: 2rem;
     color: $color-primary;
     padding: 12px 0;
     &.fill {
@@ -42,7 +42,7 @@
   }
 
   h2 {
-    font-size: 2rem;
+    font-size: 1.8rem;
     color: $color-primary;
     font-weight: bold;
     padding: 12px 0;
@@ -81,7 +81,7 @@
   h3 {
     font-family: Helvetica, Arial, sans-serif;
     font-weight: 400;
-    font-size:  1.8rem;
+    font-size:  1.7rem;
   };
 
   h4 {
@@ -112,7 +112,7 @@
   p.intro {
     font-family: Helvetica, Arial, sans-serif;
     font-weight: 400;
-    font-size:  1.6rem;
+    font-size:  1.5rem;
     line-height: 2rem;
   }
 }

clients/design-system/src/index.scss

@@ -43,11 +43,11 @@ $success: #7952b3;
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
 // @import "bootstrap/scss/tables";
-// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/forms";
 @import "bootstrap/scss/buttons";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/dropdown";
-// @import "bootstrap/scss/button-group";
+@import "bootstrap/scss/button-group";
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar"; // Requires nav
 @import "bootstrap/scss/card";
@@ -93,3 +93,7 @@ body {
   background-color: $color-off-white;
   color: $color-off-black;
 }
+
+a {
+  color: $color-blue;
+}

clients/design-system/src/styles/utils/_color-pallette.scss

@@ -9,7 +9,7 @@ $color-black: #000;
 $color-gray: #939699;
 $color-off-black: #1e1e1f;
 $color-off-white: #f1f4f9;
-$color-blue: #0077ae;
+$color-blue: darken( #0077ae, 10%);
 
 /* common color abstractions */
 $color-primary: $color-blue;

clients/design-system/stories/components/molecules/Textfield.stories.tsx

@@ -8,6 +8,4 @@ export default {
   argTypes: {},
 } as Meta<typeof TextField>;
 
-
-
-export const Default = () => <TextField/>;
+export const Default = () => <TextField id="email-address" placeholder="Enter Your Email" label="Email Address" type="text"/>