Web: Components: password-input: Added theme support and moved styles to separate file.

packages/asc-web-components/src/components/icons/svg/index.js

@@ -101,7 +101,6 @@ import OrigMyspaceIcon from "./myspace.react.svg";
 import OrigBloggerIcon from "./blogger.react.svg";
 import OrigYahooIcon from "./yahoo.react.svg";
 import OrigCalendarEmptyIcon from "./calendar.empty.react.svg";
-import OrigRefreshIcon from "./refresh.react.svg";
 import OrigForwardIcon from "./forward.react.svg";
 import OrigFileActionsLockedIcon from "./file.actions.locked.react.svg";
 import OrigReplyAllIcon from "./reply.all.react.svg";
@@ -142,15 +141,11 @@ import OrigNavLogoOpenedIcon from "./nav.logo.opened.react.svg";
 
 import OrigCheckIcon from "./check.react.svg";
 
-
 import OrigDangerIcon from "./danger.react.svg";
 import OrigInfoIcon from "./info.react.svg";
 
-
 import OrigArrowPathIcon from "./arrow.path.react.svg";
 
-
-
 import OrigQuestionIcon from "./question.react.svg";
 
 import OrigShareGoogleIcon from "./share.google.react.svg";
@@ -631,7 +626,7 @@ export const RectangleFilterClickIcon = createStyledIcon(
   OrigRectangleFilterClickIcon,
   "RectangleFilterClickIcon"
 );
-export const RefreshIcon = createStyledIcon(OrigRefreshIcon, "RefreshIcon");
+
 export const RemoveIcon = createStyledIcon(OrigRemoveIcon, "RemoveIcon");
 export const ReplyAllIcon = createStyledIcon(OrigReplyAllIcon, "ReplyAllIcon");
 export const ReplyIcon = createStyledIcon(OrigReplyIcon, "ReplyIcon");
@@ -688,9 +683,6 @@ export const ArrowPathIcon = createStyledIcon(
   "ArrowPathIcon"
 );
 
-
-
-
 export const QuestionIcon = createStyledIcon(
   OrigQuestionIcon,
   "ToggleButtonIcon",

packages/asc-web-components/src/components/password-input/index.js

@@ -1,127 +1,20 @@
 import React from "react";
-import styled from "styled-components";
 import PropTypes from "prop-types";
 import equal from "fast-deep-equal/react";
 
-import { tablet, mobile } from "../../utils/device";
 import InputBlock from "../input-block";
-import { Icons } from "../icons";
+import { RefreshIcon } from "./svg";
 import Link from "../link";
 import Text from "../text";
 import Tooltip from "../tooltip";
 import { Base } from "../../themes";
-
-// eslint-disable-next-line no-unused-vars
-const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
-  <div {...props}></div>
-);
-
-SimpleInput.propTypes = {
-  onValidateInput: PropTypes.func,
-  onCopyToClipboard: PropTypes.func,
-};
-
-const StyledInput = styled(SimpleInput)`
-  display: flex;
-  align-items: center;
-  line-height: 32px;
-  flex-direction: row;
-  flex-wrap: wrap;
-  @media ${tablet} {
-    flex-wrap: wrap;
-  }
-
-  .append {
-    padding-right: 8px;
-  }
-
-  .prepend-children {
-    padding: 0;
-  }
-
-  .break {
-    flex-basis: 100%;
-    height: 0;
-  }
-
-  .text-tooltip {
-    line-height: 14px;
-    margin-top: -2px;
-  }
-
-  .password-field-wrapper {
-    display: flex;
-    width: auto;
-
-    @media ${mobile} {
-      width: 100%;
-    }
-  }
-`;
-
-const PasswordProgress = styled.div`
-  ${(props) =>
-    props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
-  .input-relative {
-    position: relative;
-    svg {
-      overflow: hidden;
-      vertical-align: middle;
-    }
-  }
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-`;
-
-const NewPasswordButton = styled.div`
-  margin: 0 16px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  svg {
-    overflow: hidden;
-    vertical-align: middle;
-    margin-bottom: 4px;
-  }
-  :hover {
-    cursor: pointer;
-  }
-`;
-
-const CopyLink = styled.div`
-  margin-top: -6px;
-  @media ${tablet} {
-    width: 100%;
-    margin-left: 0px;
-    margin-top: -1px;
-  }
-`;
-
-const TooltipStyle = styled.div`
-  .__react_component_tooltip {
-  }
-`;
-const Progress = styled.div`
-  border: 1.5px solid
-    ${(props) =>
-      !props.isDisabled && props.progressColor
-        ? props.progressColor
-        : "transparent"};
-  border-radius: 2px;
-  margin-top: -1px;
-  width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
-`;
-
-const StyledTooltipContainer = styled(Text)`
-  //margin: 8px 16px 16px 16px;
-`;
-
-const StyledTooltipItem = styled(Text)`
-  margin-left: 8px;
-  height: 24px;
-  color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
-`;
+import {
+  Progress,
+  CopyLink,
+  NewPasswordButton,
+  PasswordProgress,
+  StyledInput,
+} from "./styled-password-input";
 
 class PasswordInput extends React.Component {
   constructor(props) {
@@ -441,7 +334,6 @@ class PasswordInput extends React.Component {
     } = this.props;
 
     const { type, progressColor, progressWidth, inputValue } = this.state;
-    const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
     const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
 
     return (
@@ -459,7 +351,6 @@ class PasswordInput extends React.Component {
           scale={scale}
           size={size}
           type={type}
-          iconColor={`${iconsColor} !important`}
           iconSize={16}
           hoverColor={"#A3A9AE"}
           isIconFill={true}
@@ -500,6 +391,7 @@ class PasswordInput extends React.Component {
       style,
       simpleView,
       hideNewPasswordButton,
+      isDisabled,
     } = this.props;
     const { copyLabel, disableCopyAction } = this.state;
 
@@ -523,15 +415,14 @@ class PasswordInput extends React.Component {
                 data-tip=""
                 data-event="click"
                 ref={this.ref}
+                isDisabled={isDisabled}
               >
                 {this.renderInputGroup()}
               </PasswordProgress>
               {!hideNewPasswordButton ? (
-                <NewPasswordButton>
-                  <Icons.RefreshIcon
+                <NewPasswordButton isDisabled={isDisabled}>
+                  <RefreshIcon
                     size="medium"
-                    color={iconsColor}
-                    isfill={true}
                     onClick={this.onGeneratePassword}
                   />
                 </NewPasswordButton>
@@ -543,7 +434,7 @@ class PasswordInput extends React.Component {
                 type="action"
                 isHovered={true}
                 fontSize="13px"
-                color={iconsColor}
+                className="password-input_link"
                 isSemitransparent={disableCopyAction}
                 onClick={this.copyToClipboard.bind(this, emailInputName)}
               >

packages/asc-web-components/src/components/password-input/styled-password-input.js

@@ -0,0 +1,151 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import { tablet, mobile } from "../../utils/device";
+import { Base } from "../../themes";
+// eslint-disable-next-line no-unused-vars
+const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
+  <div {...props}></div>
+);
+
+SimpleInput.propTypes = {
+  onValidateInput: PropTypes.func,
+  onCopyToClipboard: PropTypes.func,
+};
+
+const StyledInput = styled(SimpleInput)`
+  display: flex;
+  align-items: center;
+  line-height: ${(props) => props.theme.passwordInput.lineHeight};
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .input-relative {
+    svg {
+      path {
+        fill: ${(props) =>
+          props.isDisabled
+            ? props.theme.passwordInput.disableColor
+            : props.theme.passwordInput.color} !important;
+      }
+    }
+  }
+
+  @media ${tablet} {
+    flex-wrap: wrap;
+  }
+
+  .append {
+    padding-right: 8px;
+  }
+
+  .prepend-children {
+    padding: 0;
+  }
+
+  .break {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .text-tooltip {
+    line-height: ${(props) => props.theme.passwordInput.text.lineHeight};
+    margin-top: ${(props) => props.theme.passwordInput.text.marginTop};
+  }
+
+  .password-field-wrapper {
+    display: flex;
+    width: auto;
+
+    @media ${mobile} {
+      width: 100%;
+    }
+  }
+`;
+StyledInput.defaultProps = { theme: Base };
+
+const PasswordProgress = styled.div`
+  ${(props) =>
+    props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
+  .input-relative {
+    position: relative;
+    svg {
+      overflow: hidden;
+      vertical-align: middle;
+    }
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+PasswordProgress.defaultProps = { theme: Base };
+
+const NewPasswordButton = styled.div`
+  margin: ${(props) => props.theme.passwordInput.newPassword.margin};
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  svg {
+    overflow: ${(props) => props.theme.passwordInput.newPassword.svg.overflow};
+    vertical-align: middle;
+    margin-bottom: ${(props) =>
+      props.theme.passwordInput.newPassword.svg.marginBottom};
+    path {
+      fill: ${(props) =>
+        props.isDisabled
+          ? props.theme.passwordInput.disableColor
+          : props.theme.passwordInput.color};
+    }
+  }
+  :hover {
+    cursor: pointer;
+  }
+`;
+NewPasswordButton.defaultProps = { theme: Base };
+
+const CopyLink = styled.div`
+  margin-top: ${(props) => props.theme.passwordInput.link.marginTop};
+  .password-input_link {
+    color: ${(props) =>
+      props.isDisabled
+        ? props.theme.passwordInput.disableColor
+        : props.theme.passwordInput.color};
+  }
+  @media ${tablet} {
+    width: ${(props) => props.theme.passwordInput.link.tablet.width};
+    margin-left: ${(props) => props.theme.passwordInput.link.tablet.marginLeft};
+    margin-top: ${(props) => props.theme.passwordInput.link.tablet.marginTop};
+  }
+`;
+CopyLink.defaultProps = { theme: Base };
+
+const Progress = styled.div`
+  border: 1.5px solid
+    ${(props) =>
+      !props.isDisabled && props.progressColor
+        ? props.progressColor
+        : "transparent"};
+  border-radius: ${(props) => props.theme.passwordInput.progress.borderRadius};
+  margin-top: ${(props) => props.theme.passwordInput.progress.marginTop};
+  width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
+`;
+Progress.defaultProps = { theme: Base };
+
+// const TooltipStyle = styled.div`
+//   .__react_component_tooltip {
+//   }
+// `;
+
+// const StyledTooltipContainer = styled(Text)`
+//   //margin: 8px 16px 16px 16px;
+// `;
+
+// const StyledTooltipItem = styled(Text)`
+//   margin-left: 8px;
+//   height: 24px;
+//   color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
+// `;
+
+export { Progress, CopyLink, NewPasswordButton, PasswordProgress, StyledInput };

packages/asc-web-components/src/components/password-input/svg/index.js

@@ -0,0 +1 @@
+export { default as RefreshIcon } from "./refresh.react.svg";

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

@@ -298,7 +298,7 @@ const Base = {
     },
   },
 
-
+  iconButton: {},
   selectorAddButton: {
     background: grayLight,
     activeBackground: grayLightMid,
@@ -602,7 +602,43 @@ const Base = {
     },
   },
 
+  passwordInput: {
+    disableColor: grayMid,
+    color: gray,
 
+    hoverColor: gray,
+
+    lineHeight: "32px",
+
+    text: {
+      lineHeight: "14px",
+      marginTop: "-2px",
+    },
+
+    link: {
+      marginTop: "-6px",
+
+      tablet: {
+        width: "100%",
+        marginLeft: "0px",
+        marginTop: "-1px",
+      },
+    },
+
+    progress: {
+      borderRadius: "2px",
+      marginTop: "-1px",
+    },
+
+    newPassword: {
+      margin: "0 16px",
+
+      svg: {
+        overflow: "hidden",
+        marginBottom: "4px",
+      },
+    },
+  },
 
   searchInput: {
     fontSize: "14px",