Merge pull request #2 from dxc-technology/responsive

Adapting HalUI to responsive with a new design

example/src/App.js

@@ -2,6 +2,9 @@ import React, { Component } from "react";
 import HalUI from "@diaas/hal-ui";
 import "./App.css";
 
+const API_PROFILE_ID = ""; // From DXC Developer Central
+const API_USER_NAME = ""; // From DXC Developer Central
+const YOUR_API_KEY = ""; // From DXC Developer Central
 class App extends Component {
   state = { actions: [] };
 
@@ -12,20 +15,16 @@ class App extends Component {
   More information at https://developer.dxc.com/api/insurance/life/integral-prospects/codelab
   */
 
-  const API_PROFILE_ID =""; // From DXC Developer Central
-  const API_USER_NAME = ""; // From DXC Developer Central
-  const YOUR_API_KEY = ""; // From DXC Developer Central
-
   urlProspects =
     "https://api.dxc-dev-integral.hub-1.dev.us.insurance.dxc.com/prospects";
 
   headersProspects = {
-    'Content-Type': 'application/json',
-    'Accept': 'application/json',
-    'x-api-key': YOUR_API_KEY,
-    'userName': API_USER_NAME,
-    'profileid': API_PROFILE_ID
-  }
+    "Content-Type": "application/json",
+    Accept: "application/json",
+    "x-api-key": YOUR_API_KEY,
+    userName: API_USER_NAME,
+    profileid: API_PROFILE_ID,
+  };
 
   render() {
     return (

lib/src/common/utils.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+
+export const responsiveSizes = {
+  mobileSmall: "320",
+  mobileMedium: "375",
+  mobileLarge: "425",
+  tablet: "768",
+  laptop: "1024",
+  desktop: "1440",
+};
+
+export const useScreenType = () => {
+  const [screenType, setScreenType] = useState();
+
+  const handleResize = () => {
+    let type = "desktop";
+
+    if (
+      document.documentElement.clientWidth > responsiveSizes.mobileLarge &&
+      document.documentElement.clientWidth <= responsiveSizes.tablet
+    ) {
+      type = "tablet";
+    } else if (document.documentElement.clientWidth <= responsiveSizes.mobileLarge) {
+      type = "mobile";
+    }
+    setScreenType(type);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return screenType;
+};

lib/src/hal-ui/HalUI.jsx

@@ -126,7 +126,7 @@ const ErrorMessage = styled.div`
 `;
 
 const EmptyList = styled.div`
-  background-color: #d8d8d8;
+  background-color: #eee;
   text-align: center;
   padding: 20px;
   color: #545454;

lib/src/hal-ui/InputPropertiesList.jsx

@@ -2,13 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import InputProperty from "./InputProperty.jsx";
 
-const InputPropertiesList = ({
-  properties,
-  disabled,
-  propertyUpdateFunction
-}) => (
+const InputPropertiesList = ({ properties, disabled, propertyUpdateFunction }) => (
   <PropertiesListStyled>
-    {properties.map(property => (
+    {properties.map((property) => (
       <PropertyLayout>
         <Label>
           {property.key}
@@ -42,6 +38,8 @@ const PropertyLayout = styled.div`
 
 const Label = styled.span`
   width: 50%;
+  display: inline-flex;
+  align-items: center;
 `;
 
 const InputPropertyLayout = styled.div`

lib/src/hal-ui/Operation.jsx

@@ -7,6 +7,7 @@ import Title3 from "./Title3.jsx";
 import Button1 from "./Button1.jsx";
 import InputPropertiesList from "./InputPropertiesList.jsx";
 import Response from "./Response.jsx";
+import { useScreenType } from "../common/utils.js";
 
 export default class Operation extends React.Component {
   constructor(props) {
@@ -27,42 +28,47 @@ export default class Operation extends React.Component {
       params: (method === "GET" && body) || null,
       data: (method !== "GET" && body) || null,
       headers,
-      responseType: "json"
+      responseType: "json",
     })
-      .then(response => {
+      .then((response) => {
         this.setState(() => ({
           isLoading: false,
           error: null,
           response: {
             headers: response.headers,
             body: response.data,
-            halResource: halResource({ body: response.data })
-          }
+            halResource: halResource({ body: response.data }),
+          },
         }));
       })
-      .catch(error => {
+      .catch((error) => {
         this.setState(() => ({
           isLoading: false,
           error,
-          response: null
+          response: null,
         }));
       });
   }
 
   updateFunction(key, value) {
-    this.setState(prevState => ({
-      body: { ...prevState.body, [key]: value === "" ? undefined : value }
+    this.setState((prevState) => ({
+      body: { ...prevState.body, [key]: value === "" ? undefined : value },
     }));
   }
 
   toggleIsExpanded() {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isExpanded: !prevState.isExpanded,
       body: {},
-      response: undefined
+      response: undefined,
     }));
   }
 
+  updateResize() {
+    let screenType = useScreenType();
+    return screenType;
+  }
+
   render() {
     const { method, rel, title, changeBaseResource, properties } = this.props;
     const { body, isExpanded, response, error, isLoading } = this.state;
@@ -78,16 +84,16 @@ export default class Operation extends React.Component {
             <OperationContent key="operationConten" method={method}>
               <Title3 title="Properties" />
               {(properties.length > 0 && (
-                <RequestContainer>
-                  <PropertiesColumn>
+                <RequestContainer screenType={this.updateResize}>
+                  <PropertiesColumn screenType={this.updateResize}>
                     <InputPropertiesList
                       disabled={isLoading}
                       properties={properties}
                       propertyUpdateFunction={this.updateFunction}
                     />
                   </PropertiesColumn>
-                  <BodyColumn>
-                    <BodyTextArea disabled value={JSON.stringify(body, null, 2)} />
+                  <BodyColumn screenType={this.updateResize}>
+                    <BodyTextArea screenType={this.updateResize} disabled value={JSON.stringify(body, null, 2)} />
                   </BodyColumn>
                 </RequestContainer>
               )) || <EmptyMessage>No properties available for this operation</EmptyMessage>}
@@ -112,62 +118,64 @@ export default class Operation extends React.Component {
 
 const OperationStyled = styled.div`
   width: 100%;
-  background-color: ${props =>
+  min-height: 46px;
+  background-color: ${(props) =>
     props.method === "GET" || props.method === "OPTIONS"
-      ? "#7ee3ff"
+      ? "#b2efff"
       : props.method === "POST" || props.method === "PATCH" || props.method === "PUT"
-      ? "#B0FF7E"
+      ? "#B0FF7E99"
       : "#7E7E7E"};
   display: flex;
   flex-direction: column;
 `;
 
 const OperationHeader = styled.div`
   width: 100%;
+  min-height: 46px;
+  align-items: center;
   display: flex;
   cursor: pointer;
 `;
 
 const Rel = styled.div`
-  background-color: ${props =>
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 46px;
+  background-color: ${(props) =>
     props.method === "GET" || props.method === "OPTIONS"
-      ? "#00c9ff"
+      ? "#7fe4ff;"
       : props.method === "POST" || props.method === "PATCH" || props.method === "PUT"
       ? "#64FF00"
       : "black"};
-  color: ${props =>
+  color: ${(props) =>
     props.method === "GET" || props.method === "OPTIONS"
-      ? "#004558"
+      ? "black"
       : props.method === "POST" || props.method === "PATCH" || props.method === "PUT"
-      ? "#245d00"
+      ? "black"
       : "#969696"};
   min-width: 110px;
   text-align: center;
-  line-height: 35px;
-  font-weight: bold;
+  font-size: 14px;
+  font-weight: 600;
   padding: 0px 10px;
 `;
 
 const Method = styled.div`
   margin: 0px 20px;
-  line-height: 35px;
-  font-weight: bold;
+  font-size: 14px;
+  font-weight: 600;
   color: black;
 `;
 
 const OperationTitle = styled.div`
   margin: 0px 10px;
-  line-height: 35px;
-  color: rgba(0, 0, 0, 0.7);
+  font-size: 12px;
+  color: #00000099;
 `;
 
 const OperationContent = styled.div`
-  border-top: ${props =>
-    props.method === "GET" || props.method === "OPTIONS"
-      ? "1px solid #00c9ff"
-      : props.method === "POST" || props.method === "PATCH" || props.method === "PUT"
-      ? "1px solid #64FF00"
-      : "1px solid black"};
+  border-top: 1px solid #ffffffcc;
   padding: 20px;
 `;
 
@@ -177,25 +185,30 @@ const EmptyMessage = styled.div`
   font-size: 13px;
   font-weight: bold;
 `;
-
 const RequestContainer = styled.div`
   display: flex;
+  flex-wrap: ${(props) => (props.screenType !== "desktop" ? "wrap" : "")};
 `;
 const PropertiesColumn = styled.div`
-  width: calc(50% - 10px);
+  width: ${(props) => (props.screenType !== "desktop" ? "100%" : "calc(50% - 10px)")};
   margin-right: 10px;
 `;
 
 const BodyColumn = styled.div`
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: ${(props) => (props.screenType !== "desktop" ? "100%" : "50%")};
 `;
 
 const BodyTextArea = styled.textarea`
-  height: 100%;
+  height: ${(props) => (props.screenType === "desktop" ? "100%" : "200px")};
   margin: 5px 0px;
   box-sizing: border-box;
+  background-color: #212121;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
 `;
 
 const ButtonsContainer = styled.div`

lib/src/hal-ui/PropertiesList.jsx

@@ -32,7 +32,7 @@ const PropertyLayout = styled.div`
 `;
 
 const EmptyList = styled.div`
-  background-color: #d8d8d8;
+  background-color: #eee;
   text-align: center;
   padding: 20px;
   color: #545454;

lib/src/hal-ui/Title2.jsx

@@ -4,10 +4,11 @@ import styled from "styled-components";
 const Title2 = ({ title }) => <TitleStyled>{title}</TitleStyled>;
 
 const TitleStyled = styled.h2`
-  border-bottom: 1px solid black;
-  font-weight: 100;
-  font-size: 18px;
-  padding-bottom: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  padding: 10px 20px 10px 10px;
+  line-height: 24px;
+  border-bottom: 1px solid #d9d9d9;
 `;
 
 export default Title2;

lib/src/hal-ui/Title3.jsx

@@ -4,10 +4,10 @@ import styled from "styled-components";
 const Title3 = ({ title }) => <TitleStyled>{title}</TitleStyled>;
 
 const TitleStyled = styled.h2`
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid #212121;
   font-weight: 600;
   font-size: 14px;
-  padding-bottom: 0px;
+  padding-bottom: 6px;
   text-transform: uppercase;
   width: 100%;
 `;