Web: Components: field-container: Added theme support and moved styles to separate file.

packages/asc-web-components/src/components/field-container/index.js

@@ -1,80 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
-import { tablet } from "../../utils/device";
+
 import Label from "../label";
 import HelpButton from "../help-button";
 import Text from "../text";
-
-function getHorizontalCss(labelWidth) {
-  return css`
-    display: flex;
-    flex-direction: row;
-    align-items: start;
-    margin: 0 0 16px 0;
-
-    .field-label {
-      line-height: 32px;
-      margin: 0;
-      position: relative;
-    }
-    .field-label-icon {
-      display: inline-flex;
-      min-width: ${labelWidth};
-      width: ${labelWidth};
-    }
-    .field-body {
-      flex-grow: 1;
-    }
-    .icon-button {
-      position: relative;
-      margin-top: 10px;
-      margin-left: 8px;
-    }
-  `;
-}
-
-function getVerticalCss() {
-  return css`
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    margin: 0 0 16px 0;
-
-    .field-label {
-      line-height: 13px;
-      height: 15px;
-      display: inline-block;
-    }
-    .field-label-icon {
-      display: inline-flex;
-      width: 100%;
-      margin: 0 0 8px 0;
-    }
-    .field-body {
-      width: 100%;
-    }
-    .icon-button {
-      position: relative;
-      margin: 0;
-      padding: 0px 8px;
-      width: 13px;
-      height: 13px;
-    }
-  `;
-}
-
-const Container = styled.div`
-  .error-label {
-    max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
-  }
-  ${(props) =>
-    props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
-
-  @media ${tablet} {
-    ${getVerticalCss()}
-  }
-`;
+import Container from "./styled-field-container";
 
 class FieldContainer extends React.Component {
   constructor(props) {

packages/asc-web-components/src/components/field-container/styled-field-container.js

@@ -0,0 +1,83 @@
+import styled, { css } from "styled-components";
+import { tablet } from "../../utils/device";
+import { Base } from "../../themes";
+function getHorizontalCss(labelWidth) {
+  return css`
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    margin: ${(props) => props.theme.fieldContainer.horizontal.margin};
+
+    .field-label {
+      line-height: ${(props) =>
+        props.theme.fieldContainer.horizontal.label.lineHeight};
+      margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
+      position: relative;
+    }
+    .field-label-icon {
+      display: inline-flex;
+      min-width: ${labelWidth};
+      width: ${labelWidth};
+    }
+    .field-body {
+      flex-grow: ${(props) => props.theme.fieldContainer.horizontal.body.width};
+    }
+    .icon-button {
+      position: relative;
+      margin-top: ${(props) =>
+        props.theme.fieldContainer.horizontal.iconButton.marginTop};
+      margin-left: ${(props) =>
+        props.theme.fieldContainer.horizontal.iconButton.marginLeft};
+    }
+  `;
+}
+
+function getVerticalCss() {
+  return css`
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    margin: ${(props) => props.theme.fieldContainer.vertical.margin};
+
+    .field-label {
+      line-height: ${(props) =>
+        props.theme.fieldContainer.vertical.label.lineHeight};
+      height: ${(props) => props.theme.fieldContainer.vertical.label.height};
+      display: inline-block;
+    }
+    .field-label-icon {
+      display: inline-flex;
+      width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
+      margin: ${(props) =>
+        props.theme.fieldContainer.vertical.labelIcon.margin};
+    }
+    .field-body {
+      width: ${(props) => props.theme.fieldContainer.vertical.body.width};
+    }
+    .icon-button {
+      position: relative;
+      margin: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.margin};
+      padding: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.padding};
+      width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
+      height: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.height};
+    }
+  `;
+}
+
+const Container = styled.div`
+  .error-label {
+    max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
+  }
+  ${(props) =>
+    props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
+
+  @media ${tablet} {
+    ${getVerticalCss()}
+  }
+`;
+
+Container.defaultProps = { theme: Base };
+export default Container;

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

@@ -298,7 +298,7 @@ const Base = {
     },
   },
 
- 
+
   selectorAddButton: {
     background: grayLight,
     activeBackground: grayLightMid,
@@ -446,7 +446,7 @@ const Base = {
     fontStyle: "normal",
     fontWeight: "600",
     height: "56px",
-    maxWidth:" 100%",
+    maxWidth: " 100%",
 
     sideInfo: {
       minWidth: "160px",
@@ -461,7 +461,6 @@ const Base = {
       marginTop: "8px",
       width: "95%",
     },
-
   },
 
   badge: {
@@ -604,6 +603,7 @@ const Base = {
   },
 
 
+
   searchInput: {
     fontSize: "14px",
     fontWeight: "600",
@@ -770,6 +770,51 @@ const Base = {
     },
   },
 
+  fieldContainer: {
+    horizontal: {
+      margin: "0 0 16px 0",
+
+      label: {
+        lineHeight: "32px",
+        margin: "0",
+      },
+
+      body: {
+        flexGrow: "1",
+      },
+
+      iconButton: {
+        marginTop: "10px",
+        marginLeft: "8px",
+      },
+    },
+
+    vertical: {
+      margin: "0 0 16px 0",
+
+      label: {
+        lineHeight: "13px",
+        height: "15px",
+      },
+
+      labelIcon: {
+        width: "100%",
+        margin: "0 0 8px 0",
+      },
+
+      body: {
+        width: "100%",
+      },
+
+      iconButton: {
+        margin: "0",
+        padding: "0px 8px",
+        width: "13px",
+        height: "13px",
+      },
+    },
+  },
+
   avatar: {
     initialsContainer: {
       color: white,