@desynova-digital/components 9.1.21 → 9.1.22

package/atoms/toast/toast.js

@@ -18,8 +18,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _tokens = require("../../../tokens");
 var _templateObject, _templateObject2;
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {

package/atoms/videoCard/index.js

@@ -12,6 +12,5 @@ Object.defineProperty(exports, "StyledCard", {
 });
 exports["default"] = void 0;
 var _videoCard = _interopRequireWildcard(require("./videoCard"));
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var _default = exports["default"] = _videoCard["default"];

package/atoms/videoCard/videoCard.js

@@ -383,9 +383,9 @@ var defaultDimensions = {
     }
   },
   type4: {
-    /*
-     * //width:'280px',
-     * //height:'auto',
+    /*
+     * //width:'280px',
+     * //height:'auto',
      */
 
     large: {

package/components.js

@@ -418,5 +418,4 @@ var _Shimmer = _interopRequireDefault(require("./atoms/loader/ShimmerComponent/S
 var _timeCodeInput = _interopRequireDefault(require("./atoms/timeCodeInput/timeCodeInput"));
 var _timeCodeDisplay = _interopRequireDefault(require("./atoms/timeCodeDisplay/timeCodeDisplay"));
 var _richTextInput = _interopRequireDefault(require("./molecules/richTextInput"));
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/molecules/errorScreen/TableErrorScreen.jsx

@@ -1,85 +1,85 @@
-import React from 'react';
-
-const TableErrorScreen = ({ h1 = "No Results Found", h2 = "Try a different filter set" }) => {
-  return (
-    <div
-      style={{
-        height: '279px',
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}>
-      <div
-        style={{
-          width: '520px',
-          height: '130px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '10px'
-        }}>
-        <div
-          style={{
-            height: '120px',
-            width: '120px',
-            background: '#303F51',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '50%',
-            flexDirection: 'column'
-          }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              justifyContent: 'center',
-              gap: '8px',
-              flexDirection: 'column'
-            }}>
-            <div style={{ height: '10px', width: '60px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '40px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '30px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
-          </div>
-        </div>
-        <div
-          style={{
-            height: '120px',
-            width: '300px ',
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            flexDirection: 'column'
-          }}>
-          <p
-            style={{
-              color: 'var(--color-text-color-pure-white, #FFF)',
-              fontSize: '24px',
-              fontWeight: '500',
-              lineHeight: '36px',
-              fontStyle: 'normal',
-              fontFamily: 'SFUIText-Medium'
-            }}>
-            {h1}
-          </p>
-          <p
-            style={{
-              color: 'var(--color-text-color-pure-white, #FFF)',
-              fontSize: '14px',
-              fontStyle: 'normal',
-              fontWeight: '300',
-              lineHeight: '21px',
-              fontFamily: 'SFUIText-Medium'
-            }}>
-            {h2}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TableErrorScreen;
+import React from 'react';
+
+const TableErrorScreen = ({ h1 = "No Results Found", h2 = "Try a different filter set" }) => {
+  return (
+    <div
+      style={{
+        height: '279px',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+      <div
+        style={{
+          width: '520px',
+          height: '130px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px'
+        }}>
+        <div
+          style={{
+            height: '120px',
+            width: '120px',
+            background: '#303F51',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            flexDirection: 'column'
+          }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              gap: '8px',
+              flexDirection: 'column'
+            }}>
+            <div style={{ height: '10px', width: '60px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '40px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '30px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+          </div>
+        </div>
+        <div
+          style={{
+            height: '120px',
+            width: '300px ',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexDirection: 'column'
+          }}>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '24px',
+              fontWeight: '500',
+              lineHeight: '36px',
+              fontStyle: 'normal',
+              fontFamily: 'SFUIText-Medium'
+            }}>
+            {h1}
+          </p>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '14px',
+              fontStyle: 'normal',
+              fontWeight: '300',
+              lineHeight: '21px',
+              fontFamily: 'SFUIText-Medium'
+            }}>
+            {h2}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableErrorScreen;

package/molecules/errorScreen/errorScreen.js

@@ -23,11 +23,11 @@ var SubHeader = _styledComponents["default"].p(_templateObject4 || (_templateObj
 var Line = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 50px;\n  border-bottom: 3px solid #00cec6;\n"])));
 var ErrorButtons = (0, _styledComponents["default"])(_button["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 30px 0 0 0;\n  width: 150px;\n  border: none;\n  padding: 15px 0;\n"])));
 
-/*
- * Image links
- * https://ctdnstgthumbnail.contido.io/contido-assets/
- * props that we recieve are names of images. the page renders content based on that
- * Name of images are 404-error, no-ressults, went-wrong & network-error
+/*
+ * Image links
+ * https://ctdnstgthumbnail.contido.io/contido-assets/
+ * props that we recieve are names of images. the page renders content based on that
+ * Name of images are 404-error, no-ressults, went-wrong & network-error
  */
 
 var propTypes = {
@@ -38,10 +38,10 @@ var propTypes = {
   showButton: _propTypes["default"].bool
 };
 
-/**
- * @component
- * @category App
- * @subcategory Error Screen
+/**
+ * @component
+ * @category App
+ * @subcategory Error Screen
  */
 
 var ErrorScreen = function ErrorScreen(props) {

package/molecules/errorScreen/errorScreen.jsx

@@ -1,149 +1,149 @@
-/* eslint-disable no-unused-expressions, no-restricted-globals */
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import Button from '../../atoms/button/button';
-
-const Wrapper = styled.div`
-  display: flex;
-  font-size: 32px;
-  align-items: center;
-  color: #fff;
-  flex-direction: column;
-  justify-content: center;
-  font-family: 'SFUIText-Medium';
-  color: rgba(255, 255, 255, 0.8);
-  /* height: calc(100vh - 80px); */
-  height: ${(props => props.smallImage ? '' : '100vh')};
-  background: #0c141d;
-  .flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  width: ${(props => props.smallImage ? '240px' : '400px')};
-  margin-right: 50px;
-  img {
-    width: 100%;
-  }
-`;
-
-const Header = styled.p`
-  font-size: 50px;
-  margin-bottom: 40px;
-  font-weight: bold;
-  display: flex;
-`;
-
-const SubHeader = styled.p`
-  font-size: 20px;
-  font-weight: 300;
-  margin-top: 40px;
-  display: flex;
-`;
-
-const Line = styled.div`
-  width: 50px;
-  border-bottom: 3px solid #00cec6;
-`;
-
-const ErrorButtons = styled(Button)`
-  margin: 30px 0 0 0;
-  width: 150px;
-  border: none;
-  padding: 15px 0;
-`;
-
-/*
- * Image links
- * https://ctdnstgthumbnail.contido.io/contido-assets/
- * props that we recieve are names of images. the page renders content based on that
- * Name of images are 404-error, no-ressults, went-wrong & network-error
- */
-
-const propTypes = {
-  type: PropTypes.oneOf(['no-result-found', 'went-wrong', '404-error', 'network-error' ]),
-  title: PropTypes.string,
-  subTitle: PropTypes.string,
-  smallImage: PropTypes.bool,
-  showButton: PropTypes.bool
-};
-
-/**
- * @component
- * @category App
- * @subcategory Error Screen
- */
-
-const ErrorScreen = (props) => {
-  const { type, smallImage, showButton } = props;
-
-  const data = {
-    'no-result-found': {
-      'title': 'No Results Found',
-      'subTitle': 'No data available for the selected filters',
-      'buttonText': ''
-    },
-    'went-wrong': {
-      'title': 'Something Went Wrong',
-      'subTitle': '',
-      'buttonText': ''
-    },
-    '404-error': {
-      'title': 'Page Not Found',
-      'subTitle': 'We can’t seem to find the page you are looking for.',
-      'buttonText': 'Go Home'
-    },
-    'network-error': {
-      'title': 'Network Error',
-      'subTitle': '',
-      'buttonText': ''
-    }
-  }
-
-  const title = props.title || data[type].title;
-  const subTitle = props.subTitle || data[type].subTitle;
-  const buttonText = props.buttonText || data[type].buttonText;
-    
-  const ctaFunction = () => {
-    type === '404-error' ? (location.href = '/') : window.location.reload();
-  };
-
-  return (
-    <Wrapper smallImage={smallImage}>
-      <div className="flex">
-        <ImageWrapper smallImage={smallImage}>
-          <img src={`https://ctdnstgthumbnail.contido.io/contido-assets/${type}.svg`} alt="" />
-        </ImageWrapper>
-        <div className="text">
-          <Header>{title}</Header>
-          <Line />
-          <SubHeader>{subTitle}</SubHeader>
-          {showButton ? 
-            <ErrorButtons
-                display="rounded"
-                onClick={() => {
-                ctaFunction();
-                }}>
-                {buttonText}
-            </ErrorButtons> :
-            null
-          }
-        </div>
-      </div>
-    </Wrapper>
-  );
-};
-
-ErrorScreen.propTypes = propTypes;
-
-ErrorScreen.defaultProps = {
-  title: 'No Results Found',
-  subTitle: 'Refresh this page or try again later.',
-  buttonText: 'Refresh'
-};
-
-export default ErrorScreen;
+/* eslint-disable no-unused-expressions, no-restricted-globals */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Button from '../../atoms/button/button';
+
+const Wrapper = styled.div`
+  display: flex;
+  font-size: 32px;
+  align-items: center;
+  color: #fff;
+  flex-direction: column;
+  justify-content: center;
+  font-family: 'SFUIText-Medium';
+  color: rgba(255, 255, 255, 0.8);
+  /* height: calc(100vh - 80px); */
+  height: ${(props => props.smallImage ? '' : '100vh')};
+  background: #0c141d;
+  .flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  width: ${(props => props.smallImage ? '240px' : '400px')};
+  margin-right: 50px;
+  img {
+    width: 100%;
+  }
+`;
+
+const Header = styled.p`
+  font-size: 50px;
+  margin-bottom: 40px;
+  font-weight: bold;
+  display: flex;
+`;
+
+const SubHeader = styled.p`
+  font-size: 20px;
+  font-weight: 300;
+  margin-top: 40px;
+  display: flex;
+`;
+
+const Line = styled.div`
+  width: 50px;
+  border-bottom: 3px solid #00cec6;
+`;
+
+const ErrorButtons = styled(Button)`
+  margin: 30px 0 0 0;
+  width: 150px;
+  border: none;
+  padding: 15px 0;
+`;
+
+/*
+ * Image links
+ * https://ctdnstgthumbnail.contido.io/contido-assets/
+ * props that we recieve are names of images. the page renders content based on that
+ * Name of images are 404-error, no-ressults, went-wrong & network-error
+ */
+
+const propTypes = {
+  type: PropTypes.oneOf(['no-result-found', 'went-wrong', '404-error', 'network-error' ]),
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  smallImage: PropTypes.bool,
+  showButton: PropTypes.bool
+};
+
+/**
+ * @component
+ * @category App
+ * @subcategory Error Screen
+ */
+
+const ErrorScreen = (props) => {
+  const { type, smallImage, showButton } = props;
+
+  const data = {
+    'no-result-found': {
+      'title': 'No Results Found',
+      'subTitle': 'No data available for the selected filters',
+      'buttonText': ''
+    },
+    'went-wrong': {
+      'title': 'Something Went Wrong',
+      'subTitle': '',
+      'buttonText': ''
+    },
+    '404-error': {
+      'title': 'Page Not Found',
+      'subTitle': 'We can’t seem to find the page you are looking for.',
+      'buttonText': 'Go Home'
+    },
+    'network-error': {
+      'title': 'Network Error',
+      'subTitle': '',
+      'buttonText': ''
+    }
+  }
+
+  const title = props.title || data[type].title;
+  const subTitle = props.subTitle || data[type].subTitle;
+  const buttonText = props.buttonText || data[type].buttonText;
+    
+  const ctaFunction = () => {
+    type === '404-error' ? (location.href = '/') : window.location.reload();
+  };
+
+  return (
+    <Wrapper smallImage={smallImage}>
+      <div className="flex">
+        <ImageWrapper smallImage={smallImage}>
+          <img src={`https://ctdnstgthumbnail.contido.io/contido-assets/${type}.svg`} alt="" />
+        </ImageWrapper>
+        <div className="text">
+          <Header>{title}</Header>
+          <Line />
+          <SubHeader>{subTitle}</SubHeader>
+          {showButton ? 
+            <ErrorButtons
+                display="rounded"
+                onClick={() => {
+                ctaFunction();
+                }}>
+                {buttonText}
+            </ErrorButtons> :
+            null
+          }
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+ErrorScreen.propTypes = propTypes;
+
+ErrorScreen.defaultProps = {
+  title: 'No Results Found',
+  subTitle: 'Refresh this page or try again later.',
+  buttonText: 'Refresh'
+};
+
+export default ErrorScreen;