@desynova-digital/components 9.2.52 → 9.3.0

package/atoms/sideBar/sidebar.jsx

@@ -1,159 +1,158 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import Button from "../button/index";
-import { Loader } from "../../components";
-import { colors } from "@desynova-digital/tokens";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Button from '../button/index';
+import { Loader } from '../../components'
+import { colors } from '@desynova-digital/tokens';
 const SideBarOverlay = styled.div`
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0,0,0,0.5);
   z-index: 100;
-  visibility: ${(props) => (props.open ? "visible" : "hidden")};
+  visibility: ${((props) => props.open ? 'visible' : 'hidden')};
 `;
 
 const SideBarBlock = styled.div`
-  height: 100%;
-  position: fixed;
-  z-index: 101;
-  top: 0;
-  right: 0px;
-  background-color: #121d29;
-  box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  width: 0px;
-
-  transition: width 250ms ease-in-out;
-
-  .ball {
-    background-color: #151717;
-  }
-
-  .circle {
-    border: 4px solid #1d2020;
-    height: 10px;
-    width: 10px;
-  }
-
-  div.loader-holder > div {
-    height: 20px;
-    margin-left: 5px;
-  }
+    height: 100%;
+    position: fixed;
+    z-index: 101;
+    top: 0;
+    right: 0px;
+    background-color: #121D29;
+    box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+    width:0px;
+
+    transition: width 250ms ease-in-out;
+
+    .ball{
+      background-color:#151717
+    }
 
-  .parentBox {
-    width: 18px;
-    height: 18px;
-  }
+    .circle{
+      border:4px solid #1d2020;
+      height:10px;
+      width:10px
+    }
 
-  &.open {
-    width: 400px;
-    .sidebar-header,
-    .bodyContainer,
-    .button-container {
-      opacity: 1;
+    div.loader-holder > div{
+      height:20px;
+      margin-left:5px;
     }
-  }
 
-  .sidebar-header {
-    transition: opacity 50ms ease-in-out 250ms;
-    opacity: 0;
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
+    .parentBox{
+      width:18px;
+      height:18px;
+    }
 
-    .header-title {
-      font-family: SFUIText-Light;
-      line-height: 14px;
-      font-size: 16px;
-      line-height: 14px;
-      color: #ffffff;
+    &.open{
+      width: ${props => props.width || '400px'};
+      .sidebar-header, .bodyContainer, .button-container {
+        opacity: 1;
+      }
     }
-    ${Button.Element} {
-      margin: 0;
-      background: transparent;
-      border-color: transparent;
-      padding: 0;
-      &:hover {
+
+    .sidebar-header {
+      transition: opacity 50ms ease-in-out 250ms;
+      opacity:0;
+      padding:20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+  
+      .header-title {
+        font-family: SFUIText-Light;
+        line-height: 14px;
+        font-size: 16px;
+        line-height: 14px;
+        color: #FFFFFF;
+      }
+      ${Button.Element} {
+        margin: 0;
         background: transparent;
         border-color: transparent;
+        padding: 0;
+        &:hover {
+          background: transparent;
+          border-color: transparent;
+        }
       }
     }
-  }
 
-  .bodyContainer {
-    opacity: 0;
-    transition: opacity 50ms ease-in-out 250ms;
-    color: white;
-    font-family: SFUIText-Regular;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(100% - 110px);
-    padding: 0px 10px 0px 20px;
-    overflow-x: hidden;
-  }
+    .bodyContainer {
+      opacity:0;
+      transition: opacity 50ms ease-in-out 250ms;
+      color:white;
+      font-family: SFUIText-Regular;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      height:  calc(100% - 110px);
+      padding:0px 20px 0px 20px;
+      overflow-x: hidden;
+    }
+
+    .bodyContainer-without-footer {
+      height:  calc(100% - 70px) !important;
+    }
 
-  .bodyContainer-without-footer {
-    height: calc(100% - 70px) !important;
-  }
 `;
 
 const ButtonContainer = styled.div`
-  font-family: SFUIText-Regular;
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  background: #182738;
-  box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
-  width: 100%;
-  bottom: 0;
-  position: absolute;
-  opacity: 0;
-  transition: opacity 50ms ease-in-out 250ms;
-
-  .btn {
-    border-radius: 22px;
-    color: #ffffff;
-    font-size: 12px;
-    line-height: 12px;
-    text-align: center;
-    min-width: 150px;
-    text-transform: uppercase;
-    padding: 10px 0;
-    margin: 0 10px;
-    max-width: 150px;
-    cursor: pointer;
+    font-family: SFUIText-Regular;
     display: flex;
-    justify-content: center;
-    align-items: center;
-
-    :hover {
-      color: ${(props) => colors[props.theme].sideBar.themeColor};
+    justify-content:center;
+    padding: 10px 0;
+    background: #182738;
+    box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
+    width: 100%;
+    bottom:0;
+    position: absolute;
+    opacity:0;
+    transition: opacity 50ms ease-in-out 250ms;
+    
+    .btn{
+        border-radius: 22px;
+        color: #FFFFFF;
+        font-size: 12px;
+        line-height: 12px;
+        text-align: center;
+        min-width: 150px;
+        text-transform: uppercase;
+        padding: 10px 0;
+        margin: 0 10px;
+        max-width: 150px;
+        cursor: pointer;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        
+        :hover{
+            color: ${props => colors[props.theme].sideBar.themeColor};
+        }
     }
-  }
 
-  .default {
-    background: #303f51;
+    .default{
+        background: #303F51;
 
-    :hover {
-      color: ${(props) => colors[props.theme].sideBar.lightthemeColor};
+        :hover{
+            color:${props => colors[props.theme].sideBar.lightthemeColor};
+        }
     }
-  }
-
-  .primary {
-    color: rgb(12, 20, 29);
-    background: ${(props) => colors[props.theme].sideBar.themeColor};
-
-    :hover {
-      color: rgb(12, 20, 29);
-      transition: all 0.2s ease-in-out 0s;
-      box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
+    
+    .primary {
+        color: rgb(12, 20, 29);
+        background: ${props => colors[props.theme].sideBar.themeColor};
+
+        :hover{
+            color: rgb(12, 20, 29);
+            transition: all 0.2s ease-in-out 0s;
+            box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
+        }
     }
-  }
 `;
 
 /**
@@ -166,14 +165,14 @@ export default class SideBar extends Component {
     super(props);
     this.state = {
       show: false,
-      renderFlag: false,
+      renderFlag: false
     };
   }
   componentDidMount = () => {
     this.setState({
-      renderFlag: true,
-    });
-  };
+      renderFlag: true
+    })
+  }
 
   cancelClick() {
     const { onCancelClick } = this.props;
@@ -184,63 +183,52 @@ export default class SideBar extends Component {
     const { onButtonClick } = this.props;
     onButtonClick(field);
     this.setState({
-      ...this.state,
-    });
+      ...this.state
+    })
   }
   render() {
-    const {
-      title,
-      content,
-      sideBarButtonObject,
-      showSideBar,
-      loadingBtn,
-      theme,
-    } = this.props;
+    const { title, content, sideBarButtonObject, showSideBar, loadingBtn,theme, width } = this.props;
 
     return (
       <React.Fragment>
         <SideBarOverlay open={showSideBar} />
-        <SideBarBlock theme={theme} className={showSideBar ? "open" : "close"}>
+        <SideBarBlock theme={theme} width={width} className={showSideBar ? 'open' : 'close'}>
           <div className="sidebar-header">
             <p className="header-title">{title}</p>
             <Button
-              theme={theme}
+            theme={theme}
               appearance="cta"
               iconWidth={12}
               iconHeight={12}
               icon="cross"
               iconBackground={false}
               onClick={() => {
-                this.buttonClick("cancel");
+                this.buttonClick('cancel');
               }}
             />
           </div>
-          <div
-            className={`bodyContainer ${!sideBarButtonObject.length &&
-              "bodyContainer-without-footer"}`}
-          >
+          <div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
             {content}
           </div>
-          {sideBarButtonObject && sideBarButtonObject.length ? (
-            <ButtonContainer theme={theme} className="button-container">
-              {sideBarButtonObject.map((object) => {
+          {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={theme} className="button-container" >
+            {
+              sideBarButtonObject.map((object) => {
                 return (
                   <div
                     key={object.field}
-                    className={`btn ${object.type || "default"}`}
-                    onClick={() => {
-                      this.buttonClick(object.field);
-                    }}
+                    className={`btn ${object.type || 'default'}`}
+                    onClick={() => { this.buttonClick(object.field) }}
                   >
                     {object.title}
-                    {object.isLoading ? (
-                      <Loader theme={theme} loaderName="SpinningLoader" />
-                    ) : null}
+                    {object.isLoading ?
+                      <Loader theme={theme} loaderName='SpinningLoader' />
+                      : null}
                   </div>
-                );
-              })}
-            </ButtonContainer>
-          ) : null}
+                )
+              })
+            }
+          </ButtonContainer> : null
+          }
         </SideBarBlock>
       </React.Fragment>
     );
@@ -248,15 +236,16 @@ export default class SideBar extends Component {
 }
 
 SideBar.propTypes = {
-  theme: PropTypes.oneOf(["light", "dark", "nexc"]),
+  theme: PropTypes.oneOf(['light', 'dark', 'nexc']),
   showSideBar: PropTypes.bool,
   title: PropTypes.string,
   content: PropTypes.object,
   sideBarButtonObject: PropTypes.object,
   onCancelClick: PropTypes.func,
-  onButtonClick: PropTypes.func,
-};
+  onButtonClick: PropTypes.func
+}
 
 SideBar.defaultProps = {
-  theme: "dark",
-};
+  theme: 'dark',
+  width: '400px'
+};

package/atoms/timeCodeInput/timeCodeMSInput.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../_helpers/utils");
 var _tokens = require("@desynova-digital/tokens");
-var _components = require("@desynova-digital/components");
+var _icon = _interopRequireDefault(require("../icon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  /* color: ", "; */\n  color: ", ";\n  text-align: left;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  &:hover {\n    color: ", ";\n  }\n    max-width: 79px;\n  /* width: ", "; */\n  border-bottom: ", ";\n  padding-bottom: 1px;\n"])), function (props) {
   return props.isValid ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
 }, function (props) {
-  return props.isValid ? "#FFFFFF" : "#FF6C56";
+  return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
 }, function (props) {
   return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
 }, function (props) {
@@ -57,7 +57,8 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     updateFormDataExternally = _ref.updateFormDataExternally,
     inputTitle = _ref.inputTitle,
     _ref$checkBaiscError = _ref.checkBaiscError,
-    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
+    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
+    color = _ref.color;
   var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(inputValue, frameRate) || "00:00:00.000"),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     customInputValue = _useState2[0],
@@ -189,7 +190,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
     onClick: crossClicked
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     name: "cross",
     width: 7,
     height: 7
@@ -197,6 +198,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     name: inputFieldType,
     theme: theme,
     width: width,
+    color: color,
     value: customInputValue,
     onFocus: onFocus,
     onBlur: onBlurFn,

package/atoms/timeCodeInput/timeCodeMainInput.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../_helpers/utils");
 var _tokens = require("@desynova-digital/tokens");
-var _components = require("@desynova-digital/components");
+var _icon = _interopRequireDefault(require("../icon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  /* color: ", "; */\n  color: ", ";\n  text-align: left;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  &:hover {\n    color: ", ";\n  }\n  /* width: ", "; */\n      max-width: 73px;\n  border-bottom: ", ";\n  padding-bottom: 1px;\n"])), function (props) {
   return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
 }, function (props) {
-  return props.isValid ? "#FFFFFF" : "#FF6C56";
+  return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
 }, function (props) {
   return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
 }, function (props) {
@@ -57,7 +57,8 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     updateFormDataExternally = _ref.updateFormDataExternally,
     inputTitle = _ref.inputTitle,
     _ref$checkBaiscError = _ref.checkBaiscError,
-    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
+    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
+    color = _ref.color;
   var _useState = (0, _react.useState)(inputValue || "00:00:00:00"),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     customInputValue = _useState2[0],
@@ -190,7 +191,7 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
     onClick: crossClicked
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     name: "cross",
     width: 7,
     height: 7
@@ -199,6 +200,7 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     id: inputFieldType,
     theme: theme,
     width: width,
+    color: color,
     ref: inputRef,
     value: customInputValue,
     onFocus: onFocus,

package/atoms/timeCodeInput/timeCodeStandardInput.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../_helpers/utils");
 var _tokens = require("@desynova-digital/tokens");
-var _components = require("@desynova-digital/components");
+var _icon = _interopRequireDefault(require("../icon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  /* color: ", "; */\n        color: ", ";\n  text-align: left;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  &:hover {\n    color: ", ";\n  }\n  /* width: ", "; */\n      max-width: 53px;\nborder-bottom: ", ";\n  padding-bottom: 1px;\n"])), function (props) {
   return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
 }, function (props) {
-  return props.isValid ? "#FFFFFF" : "#FF6C56";
+  return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
 }, function (props) {
   return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
 }, function (props) {
@@ -58,7 +58,8 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     updateFormDataExternally = _ref.updateFormDataExternally,
     inputTitle = _ref.inputTitle,
     _ref$checkBaiscError = _ref.checkBaiscError,
-    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
+    checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
+    color = _ref.color;
   var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSS)(inputValue, frameRate) || "00:00:00"),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     customInputValue = _useState2[0],
@@ -67,6 +68,7 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isValid = _useState4[0],
     setIsValid = _useState4[1];
+  var inputRef = (0, _react.useRef)(null);
   var onTimePickerChange = function onTimePickerChange(value, e) {
     if (!e || !e.target || e.target.selectionStart === undefined) return;
     var rawInput = value;
@@ -195,7 +197,7 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
     onClick: crossClicked
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     name: "cross",
     width: 7,
     height: 7
@@ -204,6 +206,7 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     theme: theme,
     width: width,
     ref: inputRef,
+    color: color,
     value: customInputValue,
     onFocus: onFocus,
     onBlur: onBlurFn,

package/components.js

@@ -227,6 +227,12 @@ Object.defineProperty(exports, "PageHeader", {
     return _pageHeader["default"];
   }
 });
+Object.defineProperty(exports, "PageSearchCard", {
+  enumerable: true,
+  get: function get() {
+    return _pageSearchCard["default"];
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {
@@ -375,6 +381,7 @@ var _icon = _interopRequireWildcard(require("./atoms/icon"));
 var _dateTime = _interopRequireDefault(require("./atoms/dateTime"));
 var _card = _interopRequireDefault(require("./atoms/card"));
 var _cardV = _interopRequireDefault(require("./atoms/cardV2"));
+var _pageSearchCard = _interopRequireDefault(require("./atoms/pageSearchCard"));
 var _videoCard = _interopRequireDefault(require("./atoms/videoCard"));
 var _inputText = _interopRequireDefault(require("./atoms/inputText"));
 var _textarea = _interopRequireDefault(require("./atoms/textarea"));

package/index.js

@@ -225,6 +225,12 @@ Object.defineProperty(exports, "PageHeader", {
     return _components.PageHeader;
   }
 });
+Object.defineProperty(exports, "PageSearchCard", {
+  enumerable: true,
+  get: function get() {
+    return _components.PageSearchCard;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {