Merge branch 'rarrojolopez-fix' of https://github.com/dxc-technology/halstack-react into rarrojolopez-fix

Author: raquelarrojo

README.md

@@ -1,4 +1,4 @@
-# Halstack React CDK
+# Halstack React CDK 
 
 Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
 

docs/src/pages/overview/Overview.jsx

@@ -102,10 +102,21 @@ function CustomThemes() {
       </p>
 
       <p>
-        You will need to create an object with your colors preferences. The
-        variables are documented in each component's documentation. You will
-        also need to import ThemeProvider, and use it to wrap the component and
-        pass your colors object as the theme property.
+        You will need to create an object with your colors preferences. In this
+        object, you will have as much objects as components you want to
+        customize, using the next structure:
+        <SyntaxHighlighter language="javascript" style={docco}>
+          {`componentName: {
+  themeInput: "value", 
+}`}
+        </SyntaxHighlighter>
+        The theme inputs for each component are documented in the themes
+        guidelines.
+      </p>
+
+      <p>
+        You will also need to import ThemeProvider, and use it to wrap the
+        component and pass your colors object as the theme property.
       </p>
 
       <p>This is an example that includes the necessary code:</p>

lib/src/common/variables.js

@@ -277,6 +277,16 @@ export const componentTokens = {
     disabledUnselectedFontColor: globalTokens.lighterBlack,
     disabledSelectedFontColor: globalTokens.white,
   },
+  upload: {
+    fontColor: globalTokens.darkGrey,
+    shadowColor: globalTokens.lightWhite,
+    backgroundDragColor: globalTokens.lightWhite,
+    accentColor: globalTokens.lightGrey,
+    fileHoverColor: globalTokens.darkWhite,
+    scrollBarThumbColor: globalTokens.darkGrey,
+    scrollBarTrackColor: globalTokens.lightGrey,
+    errorColor: globalTokens.red,
+  },
   wizard: {
     selectedBackgroundColor: globalTokens.purple,
     selectedFont: globalTokens.white,

lib/src/toggle/Toggle.jsx

@@ -1,12 +1,11 @@
 /* eslint-disable no-else-return */
-import React, { useContext } from "react";
+import React from "react";
 import { ToggleButton } from "@material-ui/lab";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import "../common/OpenSans.css";
-import { globalTokens, spaces } from "../common/variables.js";
 import { getMargin } from "../common/utils.js";
-import ThemeContext from "../ThemeContext.js";
+import useTheme from "../useTheme.js";
 
 const DxcToggle = ({
   label = "",
@@ -21,7 +20,7 @@ const DxcToggle = ({
   margin,
   size = "fitContent",
 }) => {
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   const handlerToggleClick = () => {
     if (!disabled && typeof onClick === "function") {

lib/src/upload/buttons-upload/ButtonsUpload.jsx

@@ -1,16 +1,15 @@
 /* eslint-disable no-undef */
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import "../../common/OpenSans.css";
 import Button from "../../button/Button";
 import uploadIcon from "./upload-button.svg";
 import dragAndDropIcon from "./drag-drop-icon.svg";
-import { globalTokens } from "../../common/variables.js";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcButtonsUpload = ({ addFile, onUpload }) => {
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   const selectFile = (e) => {
     const filesObject = e.target.files;
@@ -25,7 +24,7 @@ const DxcButtonsUpload = ({ addFile, onUpload }) => {
   };
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCButtonsUpload>
         <DragAndDropLabel>
           <DragAndDropIcon />
@@ -58,7 +57,7 @@ const DragAndDropLabel = styled.div`
   align-items: center;
   font-style: italic;
   font-size: 12px;
-  color: ${(props) => props.theme.darkGrey};
+  color: ${(props) => props.theme.fontColor};
   margin-right: 50px;
 `;
 

lib/src/upload/dragAndDropArea/DragAndDropArea.jsx

@@ -1,17 +1,17 @@
 /* eslint-disable no-undef */
-import React, { useContext } from "react";
+import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import "../../common/OpenSans.css";
-import { globalTokens } from "../../common/variables.js";
+import {} from "../../common/variables.js";
 import uploadFile from "./upload_file.svg";
 import dropFile from "./upload_drop.svg";
 import Button from "../../button/Button";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcDragAndDropArea = ({ dashed = false, addFile }) => {
   const [dragging, setDragging] = React.useState(false);
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   const text = "There are no files to upload";
   const description = "Drag and drop your files here or choose one from your computer";
@@ -60,7 +60,7 @@ const DxcDragAndDropArea = ({ dashed = false, addFile }) => {
   };
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCDragAndDrop
         onDrop={handleDrop}
         onDragEnter={handleDragIn}
@@ -126,7 +126,7 @@ const DXCDragAndDropArea = styled.div`
   display: flex;
   justify-content: center;
   border-radius: 4px;
-  box-shadow: 0px 3px 6px ${(props) => props.theme.black}29;
+  box-shadow: 0px 3px 6px ${(props) => props.theme.shadowColor};
 `;
 
 const DragAndDropContent = styled.div`
@@ -158,7 +158,7 @@ const DragAndDropTitle = styled.div`
 const DragAndDropDescription = styled.div`
   font-size: 16px;
   margin-bottom: 40px;
-  color: ${(props) => props.theme.darkGrey};
+  color: ${(props) => props.theme.fontColor};
   font-style: italic;
 `;
 
@@ -212,7 +212,7 @@ const DragAndDropContentHover = styled.div`
   background-size: var(--dash-size) var(--border-weight), calc(var(--dash-size) + var(--gap-size)) var(--border-weight),
     var(--dash-size) var(--border-weight), var(--border-weight) var(--dash-size),
     var(--border-weight) calc(var(--dash-size) + var(--gap-size)), var(--border-weight) var(--dash-size);
-  background-color: ${(props) => props.theme.black}0F;
+  background-color: ${(props) => props.theme.backgroundDragColor};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -231,7 +231,7 @@ const DragAndDropIconHover = styled.div`
 const DragAndDropTextHover = styled.div`
   font-size: 16px;
   margin-bottom: 20px;
-  color: ${(props) => props.theme.darkGrey};
+  color: ${(props) => props.theme.fontColor};
   font-style: italic;
 `;
 

lib/src/upload/file-upload/FileToUpload.jsx

@@ -1,22 +1,21 @@
 /* eslint-disable react/require-default-props */
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import "../../common/OpenSans.css";
 import styled, { ThemeProvider } from "styled-components";
-import { globalTokens } from "../../common/variables.js";
 import closeIcon from "./close.svg";
 import defaultIcon from "./file-icon.svg";
 import videoIcon from "./video-icon.svg";
 import audioIcon from "./audio-icon.svg";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcFileToUpload = ({ name = "", type = "", image, onDelete }) => {
   const icon = (type.includes("video") && videoIcon) || (type.includes("audio") && audioIcon) || defaultIcon;
   const hasImage = image && image.includes("image");
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCFileToUpload>
         <FileContent>
           {(hasImage && <FileImage src={image} />) || <FileImage src={icon} />}
@@ -46,14 +45,14 @@ const DXCFileToUpload = styled.div`
   flex-direction: column;
   padding-bottom: 25px;
   padding-top: 25px;
-  border-bottom: 1px solid ${(props) => props.theme.lightGrey};
+  border-bottom: 1px solid ${(props) => props.theme.accentColor};
   :hover {
     cursor: pointer;
-    background: ${(props) => props.theme.darkWhite};
+    background: ${(props) => props.theme.fileHoverColor};
     .delete-file {
       display: flex;
       margin-right: 30px;
-      background: url('${closeIcon}') no-repeat padding-box;
+      background: url("${closeIcon}") no-repeat padding-box;
       width: 30px;
       height: 30px;
       margin-top: 11px;
@@ -88,7 +87,7 @@ const FileInfo = styled.div`
 const FileType = styled.div`
   text-transform: uppercase;
   font-size: 12px;
-  color: ${(props) => props.theme.black}99;
+  color: ${(props) => props.theme.fontColor};
 `;
 
 const DeleteFile = styled.div`

lib/src/upload/files-upload/FilesToUpload.jsx

@@ -1,14 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import "../../common/OpenSans.css";
 import PropTypes from "prop-types";
 import FileToUpload from "../file-upload/FileToUpload";
 import ButtonsUpload from "../buttons-upload/ButtonsUpload";
-import { globalTokens } from "../../common/variables.js";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcFilesToUpload = ({ filesToUpload, onUpload, addFile }) => {
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   const handleDrag = (e) => {
     e.preventDefault();
@@ -37,7 +36,7 @@ const DxcFilesToUpload = ({ filesToUpload, onUpload, addFile }) => {
   };
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCFilesToUpload
         onDrop={handleDrop}
         onDragEnter={handleDragIn}
@@ -73,7 +72,7 @@ const DXCFilesToUpload = styled.div`
   width: 100%;
   padding: 20px;
   border-radius: 4px 4px 0px 4px;
-  box-shadow: 0px 0px 1px ${(props) => props.theme.black}29;
+  box-shadow: 0px 0px 1px ${(props) => props.theme.shadowColor};
 `;
 
 const FilesToUpload = styled.div`
@@ -85,11 +84,11 @@ const FilesToUpload = styled.div`
   }
   ::-webkit-scrollbar-track {
     border-radius: 3px;
-    background-color: ${(props) => props.theme.lightGrey};
+    background-color: ${(props) => props.theme.scrollBarTrackColor};
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 3px;
-    background-color: ${(props) => props.theme.darkGrey};
+    background-color: ${(props) => props.theme.scrollBarThumbColor};
   }
 `;
 

lib/src/upload/transaction/Transaction.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import "../../common/OpenSans.css";
@@ -14,11 +14,10 @@ import imageIconError from "./image-icon-err.svg";
 import videoIconError from "./video-icon-err.svg";
 import audioIconError from "./audio-icon-err.svg";
 import Spinner from "../../spinner/Spinner";
-import { globalTokens } from "../../common/variables.js";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcTransaction = ({ name = "", type = "", status = "", message = "" }) => {
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
   const icon =
     (status === "error" &&
       ((type.includes("image") && imageIconError) ||
@@ -31,7 +30,7 @@ const DxcTransaction = ({ name = "", type = "", status = "", message = "" }) =>
     defaultIcon;
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCTransaction status={status}>
         <FileImage src={icon} />
         {(status === "processing" && (
@@ -72,7 +71,7 @@ const DXCTransaction = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 16px;
-  color: ${(props) => props.status === "error" && `${props.theme.red}`};
+  color: ${(props) => props.status === "error" && `${props.theme.errorColor}`};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -87,7 +86,7 @@ const FileImage = styled.img`
   width: 24px;
   margin-right: 16px;
   svg {
-    fill: ${(props) => (props.status === "error" && "#D0011B") || `${props.theme.lightGrey}`};
+    fill: ${(props) => (props.status === "error" && "#D0011B") || `${props.theme.accentColor}`};
   }
 `;
 

lib/src/upload/transactions/Transactions.jsx

@@ -1,16 +1,15 @@
-import React, { useContext } from "react";
+import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import "../../common/OpenSans.css";
 import PropTypes from "prop-types";
 import Transaction from "../transaction/Transaction";
-import { globalTokens } from "../../common/variables.js";
-import ThemeContext from "../../ThemeContext.js";
+import useTheme from "../../useTheme.js";
 
 const DxcTransactions = ({ transactions }) => {
-  const colorsTheme = useContext(ThemeContext) || globalTokens;
+  const colorsTheme = useTheme();
 
   return (
-    <ThemeProvider theme={colorsTheme}>
+    <ThemeProvider theme={colorsTheme.upload}>
       <DXCTransactions>
         <TransactionsText>
           <TransactionsTitle>Files uploaded</TransactionsTitle>
@@ -47,18 +46,18 @@ const DXCTransactions = styled.div`
   padding-top: 46px;
   padding-left: 65px;
   border-radius: 4px 0px 4px 4px;
-  box-shadow: 0px 0px 1px ${(props) => props.theme.black}29;
+  box-shadow: 0px 0px 1px ${(props) => props.theme.lightWhite};
   overflow: auto;
   ::-webkit-scrollbar {
     width: 3px;
   }
   ::-webkit-scrollbar-track {
     border-radius: 3px;
-    background-color: ${(props) => props.theme.lightGrey};
+    background-color: ${(props) => props.theme.scrollBarTrackColor};
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 3px;
-    background-color: ${(props) => props.theme.darkGrey};
+    background-color: ${(props) => props.theme.scrollBarThumbColor};
   }
 `;
 
@@ -75,7 +74,7 @@ const TransactionsTitle = styled.span`
 
 const TransactionsSubTitle = styled.span`
   font-size: 12px;
-  color: ${(props) => props.theme.darkGrey};
+  color: ${(props) => props.theme.fontColor};
 `;
 
 const TransactionsNumber = styled.span`