Web: Components: date-picker: Added theme support, moved styles to a separate file.

packages/asc-web-components/src/components/date-picker/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+
 import InputBlock from "../input-block";
 import DropDown from "../drop-down";
 import Calendar from "../calendar";
@@ -12,43 +12,13 @@ import { desktop } from "../../utils/device";
 import Backdrop from "../backdrop";
 import Heading from "../heading";
 import throttle from "lodash/throttle";
-
-const DateInputStyle = styled.div`
-  width: 115px;
-`;
-
-const DropDownStyle = styled.div`
-  .drop-down {
-    padding: 16px 16px 16px 17px;
-  }
-  position: relative;
-`;
-
-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 !important;
-  }
-`;
-
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #dee2e6;
-`;
-
-const Body = styled.div`
-  position: relative;
-  padding: 16px 0;
-`;
+import {
+  Body,
+  Header,
+  Content,
+  DropDownStyle,
+  DateInputStyle,
+} from "./styled-date-picker";
 
 class DatePicker extends Component {
   constructor(props) {

packages/asc-web-components/src/components/date-picker/styled-date-picker.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { Base } from "../../themes";
+
+const DateInputStyle = styled.div`
+  width: ${(props) => props.theme.datePicker.width};
+`;
+DateInputStyle.defaultProps = { theme: Base };
+
+const DropDownStyle = styled.div`
+  .drop-down {
+    padding: ${(props) => props.theme.datePicker.dropDownPadding};
+  }
+  position: relative;
+`;
+DropDownStyle.defaultProps = { theme: Base };
+
+const Content = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  padding: ${(props) => props.theme.datePicker.contentPadding};
+
+  .header {
+    max-width: ${(props) => props.theme.datePicker.contentMaxWidth};
+    margin: 0;
+    line-height: ${(props) => props.theme.datePicker.contentLineHeight};
+    font-weight: ${(props) =>
+      props.theme.datePicker.contentFontWeight} !important;
+  }
+`;
+Content.defaultProps = { theme: Base };
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: ${(props) => props.theme.datePicker.borderBottom};
+`;
+Header.defaultProps = { theme: Base };
+
+const Body = styled.div`
+  position: relative;
+  padding: ${(props) => props.theme.datePicker.bodyPadding};
+`;
+Body.defaultProps = { theme: Base };
+
+export { Body, Header, Content, DropDownStyle, DateInputStyle };

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

@@ -1013,13 +1013,21 @@ const Base = {
   //   },
   // },
 
-  // datePicker: {
-  //   width: "110px",
-  //   dropDownPadding: "16px 16px 16px 17px",
-  //   inputPadding: "5px 5px 5px 9px",
-  //   inputBorder: blueMain,
-  //   iconPadding: "8px 8px 7px 0px",
-  // },
+  datePicker: {
+    width: "115px",
+    dropDownPadding: "16px 16px 16px 17px",
+    contentPadding: "0 16px 16px",
+    bodyPadding: "16px 0",
+    backgroundColor: white,
+    inputBorder: blueMain,
+    iconPadding: "8px 8px 7px 0px",
+
+    contentMaxWidth: "500px",
+    contentLineHeight: "56px",
+    contentFontWeight: "700",
+
+    borderBottom: `1px solid ${globalColors.pattensBlue}`,
+  },
 
   // phoneInput: {
   //   width: "304px",