Web: Components: Added theme support, added color support, moved styles iat another file.

packages/asc-web-components/src/components/checkbox/README.md

@@ -37,3 +37,4 @@ import { Checkbox } from "@appserver/components";
 | `value`           |    `string`    |    -     |   -    |    -    | Value of the input                                          |
 | `title`           |     `bool`     |    -     |   -    |    -    | Title                                                       |
 | `truncate`        |     `bool`     |    -     |   -    | `false` | Disables word wrapping                                      |
+| `color`           |    `string`    |    -     |   -    | `#FFFF` | Makes the checkbox a different color                         |

packages/asc-web-components/src/components/checkbox/index.js

@@ -1,51 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+
 import { Icons } from "../icons";
 import Text from "../text";
-
-const disableColor = "#A3A9AE";
-const hoverColor = disableColor;
-
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin: 0;
-  user-select: none;
-  -o-user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  .checkbox {
-    margin-right: 12px;
-  }
-
-  ${(props) =>
-    props.isDisabled
-      ? css`
-          cursor: not-allowed;
-        `
-      : css`
-          cursor: pointer;
-
-          &:hover {
-            svg {
-              rect:first-child {
-                stroke: ${hoverColor};
-              }
-            }
-          }
-        `}
-`;
-
-const HiddenInput = styled.input`
-  opacity: 0.0001;
-  position: absolute;
-  right: 0;
-  z-index: -1;
-`;
+import { StyledLabel, HiddenInput } from "./styled-checkbox";
 
 // eslint-disable-next-line react/prop-types
 const CheckboxIcon = ({ isChecked, isDisabled, isIndeterminate }) => {
@@ -59,17 +17,7 @@ const CheckboxIcon = ({ isChecked, isDisabled, isIndeterminate }) => {
     size: "medium",
     className: "checkbox",
   };
-
-  if (isDisabled) {
-    newProps.isfill = true;
-    newProps.color = "#F8F9F9";
-
-    if (isIndeterminate || isChecked) {
-      newProps.isStroke = true;
-      newProps.stroke = "#ECEEF1";
-    }
-  }
-
+  
   return <>{React.createElement(Icons[iconName], { ...newProps })}</>;
 };
 
@@ -108,6 +56,7 @@ class Checkbox extends React.Component {
     //console.log("Checkbox render");
     const {
       isDisabled,
+      isIndeterminate,
       id,
       className,
       label,
@@ -116,30 +65,36 @@ class Checkbox extends React.Component {
       title,
       truncate,
     } = this.props;
-    const colorProps = isDisabled ? { color: disableColor } : {};
 
     return (
-      <Label
+      <StyledLabel
         id={id}
         style={style}
         isDisabled={isDisabled}
+        isIndeterminate={isIndeterminate}
         className={className}
       >
         <HiddenInput
           type="checkbox"
           checked={this.state.checked}
-          disabled={isDisabled}
+          isDisabled={isDisabled}
           ref={this.ref}
           value={value}
           onChange={this.onInputChange}
         />
         <CheckboxIcon {...this.props} />
         {this.props.label && (
-          <Text as="span" title={title} truncate={truncate} {...colorProps}>
+          <Text
+            as="span"
+            title={title}
+            isDisabled={isDisabled}
+            truncate={truncate}
+            className="checkbox-text"
+          >
             {label}
           </Text>
         )}
-      </Label>
+      </StyledLabel>
     );
   }
 }

packages/asc-web-components/src/components/checkbox/styled-checkbox.js

@@ -0,0 +1,166 @@
+import styled, { css } from "styled-components";
+import { Base } from "../../themes/index";
+
+const StyledLabel = styled.label`
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: 0;
+
+  user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  .checkbox {
+    margin-right: 12px;
+  }
+
+  /* ${(props) =>
+    props.isDisabled
+      ? css`
+          cursor: not-allowed;
+        `
+      : css`
+          cursor: pointer;
+
+          &:hover {
+            svg {
+              rect:first-child {
+                stroke: ${(props) => props.theme.text.hoverColor};
+              }
+            }
+          }
+        `} */
+
+  svg {
+    ${(props) =>
+      !props.isIndeterminate
+        ? css`
+            rect {
+              fill: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.fillColor
+                  : props.color};
+              stroke: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.borderColor
+                  : props.color};
+            }
+            path {
+              fill: ${(props) =>
+                props.color
+                  ? props.color === "#FFFF"
+                    ? props.theme.checkbox.arrowColor
+                    : "white"
+                  : props.theme.checkbox.arrowColor};
+            }
+          `
+        : css`
+            rect {
+              fill: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.fillColor
+                  : props.color};
+                  stroke: ${(props) =>
+                    props.color === "#FFFF"
+                      ? props.theme.checkbox.borderColor
+                      : props.color};
+            }
+            }
+            rect:last-child {
+              fill: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.indeterminateColor
+                  : "white"};
+              stroke: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.fillColor
+                  : "none"};
+            }
+          `}
+
+    ${(props) =>
+      props.isDisabled && !props.isIndeterminate
+        ? css`
+            filter: ${(props) =>
+              props.color !== "#FFFF" ? "opacity(30%)" : "opacity(100%)"};
+            rect {
+              fill: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.disableFillColor
+                  : props.color};
+              stroke: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.disableBorderColor
+                  : props.color};
+            }
+            path {
+              fill: ${(props) => props.theme.checkbox.disableArrowColor};
+            }
+          `
+        : props.isDisabled &&
+          css`
+            filter: ${(props) =>
+              props.color !== "#FFFF" ? "opacity(30%)" : "opacity(100%)"};
+            rect:last-child {
+              fill: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.disableIndeterminateColor
+                  : "rgba(255,255,255,0.7)"};
+            }
+          `}
+  }
+  &:hover {
+    ${(props) =>
+      props.isDisabled
+        ? css`
+            cursor: not-allowed;
+          `
+        : !props.indeterminate
+        ? css`
+            cursor: pointer;
+
+            rect:nth-child(2) {
+              stroke: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.hoverBorderColor
+                  : "rgba(0,0,0,0.2)"};
+            }
+          `
+        : css`
+          cursor: pointer;
+           rect:nth-child(2) {
+              stroke: ${(props) =>
+                props.color === "#FFFF"
+                  ? props.theme.checkbox.hoverBorderColor
+                  : "rgba(0,0,0,0.2)"};
+            }
+          rect:last-child {
+              fill: ${(props) =>
+                props.indeterminate && props.color === "#FFFF"
+                  ? props.theme.checkbox.hoverIndeterminateColor
+                  : props.indeterminate
+                  ? "white"
+                  : props.color};
+            `}
+  }
+
+  .checkbox-text {
+    color: ${(props) =>
+      props.isDisabled
+        ? props.theme.text.disableColor
+        : props.theme.text.color};
+  }
+`;
+StyledLabel.defaultProps = { theme: Base };
+
+const HiddenInput = styled.input`
+  opacity: 0.0001;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+`;
+
+export { StyledLabel, HiddenInput };

packages/asc-web-components/src/themes/base.js

@@ -345,20 +345,20 @@ const Base = {
     },
   },
 
-  // checkbox: {
-  //   fillColor: white,
-  //   borderColor: grayMid,
-  //   arrowColor: black,
-  //   indeterminateColor: black,
+  checkbox: {
+    fillColor: white,
+    borderColor: grayMid,
+    arrowColor: black,
+    indeterminateColor: black,
 
-  //   disableArrowColor: grayMid,
-  //   disableBorderColor: grayLightMid,
-  //   disableFillColor: grayLight,
-  //   disableIndeterminateColor: gray,
+    disableArrowColor: grayMid,
+    disableBorderColor: grayLightMid,
+    disableFillColor: grayLight,
+    disableIndeterminateColor: gray,
 
-  //   hoverBorderColor: gray,
-  //   hoverIndeterminateColor: gray,
-  // },
+    hoverBorderColor: gray,
+    hoverIndeterminateColor: gray,
+  },
 
   // slider: {
   //   sliderBarColorProgress: blueMain,

packages/asc-web-components/src/themes/dark.js

@@ -327,20 +327,20 @@ const Dark = {
     },
   },
 
-  // checkbox: {
-  //   fillColor: white,
-  //   borderColor: grayMid,
-  //   arrowColor: black,
-  //   indeterminateColor: black,
+  checkbox: {
+    fillColor: white,
+    borderColor: grayMid,
+    arrowColor: black,
+    indeterminateColor: black,
 
-  //   disableArrowColor: grayMid,
-  //   disableBorderColor: grayLightMid,
-  //   disableFillColor: grayLight,
-  //   disableIndeterminateColor: gray,
+    disableArrowColor: grayMid,
+    disableBorderColor: grayLightMid,
+    disableFillColor: grayLight,
+    disableIndeterminateColor: gray,
 
-  //   hoverBorderColor: gray,
-  //   hoverIndeterminateColor: black,
-  // },
+    hoverBorderColor: gray,
+    hoverIndeterminateColor: black,
+  },
 
   // switchButton: {
   //   fillColor: white,