Web: Components: help-button: Added theme support, moved styles to a separate file.

packages/asc-web-components/src/components/help-button/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+
 import IconButton from "../icon-button";
 import Tooltip from "../tooltip";
 import { handleAnyClick } from "../../utils/event";
@@ -9,33 +10,7 @@ import { desktop } from "../../utils/device";
 import Backdrop from "../backdrop";
 import Heading from "../heading";
 import throttle from "lodash/throttle";
-import styled from "styled-components";
-
-const Content = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px 16px;
-
-  .header {
-    max-width: 500px;
-    margin: 0;
-    line-height: 56px;
-    font-weight: 700;
-  }
-`;
-
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #dee2e6;
-`;
-
-const Body = styled.div`
-  position: relative;
-  padding: 16px 0;
-`;
+import { Content, HeaderContent, Body } from "./styled-help-button";
 
 class HelpButton extends React.Component {
   constructor(props) {

packages/asc-web-components/src/components/help-button/styled-help-button.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { Base } from "../../themes";
+
+const Content = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: ${(props) => props.theme.helpButton.width};
+  background-color: ${(props) => props.theme.helpButton.backgroundColor};
+  padding: ${(props) => props.theme.helpButton.padding};
+
+  .header {
+    max-width: ${(props) => props.theme.helpButton.maxWidth};
+    margin: ${(props) => props.theme.helpButton.margin};
+    line-height: ${(props) => props.theme.helpButton.lineHeight};
+    font-weight: ${(props) => props.theme.helpButton.fontWeight};
+  }
+`;
+Content.defaultProps = { theme: Base };
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: ${(props) => props.theme.helpButton.borderBottom};
+`;
+HeaderContent.defaultProps = { theme: Base };
+
+const Body = styled.div`
+  position: relative;
+  padding: ${(props) => props.theme.helpButton.bodyPadding};
+`;
+Body.defaultProps = { theme: Base };
+
+export { Content, HeaderContent, Body };

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

@@ -142,6 +142,18 @@ const Base = {
     },
   },
 
+  helpButton: {
+    width: "100%",
+    backgroundColor: white,
+    maxWidth: "500px",
+    margin: "0",
+    lineHeight: "56px",
+    fontWeight: "700",
+    borderBottom: `1px solid ${globalColors.pattensBlue}`,
+    padding: "0 16px 16px",
+    bodyPadding: "16px 0",
+  },
+
   mainButton: {
     backgroundColor: orangeMain,
     disableBackgroundColor: orangeDisabled,