@zohodesk/svg 1.0.0-beta.4 → 1.0.0-beta.40

package/preprocess/json/svgThemeVariableJson.js

@@ -0,0 +1,71 @@
+/* sample => 
+  {
+    "--zdt_variable_name": {
+    'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
+    'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
+    }
+  }
+*/
+
+const svgThemeVariables = [
+  {
+    "primary_fill": {
+        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+    "primary_stroke": {
+        'light': ['#221f1f', '#010101', '#010101', '#010101', '#010101'],
+        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+     },
+     "secondary_fill": {
+        'light': [
+            'rgba(10, 115, 235, 0.25)',
+            'rgba(38, 169, 66, 0.25)',
+            'rgba(229, 119, 23, 0.25)',
+            'rgba(222, 53, 53, 0.25)',
+            'rgba(232, 185, 35, 0.25)'
+        ],
+        'dark': [
+            '#334b68',
+            'rgba(69, 161, 89, 0.25)',
+            'rgba(255, 128, 31, 0.25)',
+            'rgba(233, 79, 79, 0.25)',
+            'rgba(215, 152, 53, 0.25)'
+        ]
+    },
+    "secondary_plainfill": {
+        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "primary_dark_fill": {
+        'light': ['#a6add7', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "primary_dark_stroke": {
+        'light': ['#fff', '#fff', '#fff', '#fff', '#fff'],
+        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    },
+    "secondary_dark_fill": {
+        'light': [
+            '#3f70b7',
+            'rgba(38, 169, 66, 0.25)',
+            'rgba(229, 119, 23, 0.25)',
+            'rgba(222, 53, 53, 0.25)',
+            'rgba(232, 185, 35, 0.25)'
+        ],
+        'dark': [
+            '#334b68',
+            'rgba(69, 161, 89, 0.25)',
+            'rgba(255, 128, 31, 0.25)',
+            'rgba(233, 79, 79, 0.25)',
+            'rgba(215, 152, 53, 0.25)'
+        ]
+    },
+    "secondary_dark_plainfill": {
+        'light': ['#3f70b7', '#26a942', '#e57717', '#de3535', '#e8b923'],
+        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
+    }
+  }
+];
+
+module.exports = { svgThemeVariables: svgThemeVariables };

package/preprocess/svgAppearanceColors.js

@@ -0,0 +1,63 @@
+var { svgAppearanceVariables } = require('./json/svgAppearanceVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let modeFiles = [];
+let prefix=`\n\t--zdt_svg_`;
+mode.forEach(mode => {
+  let modeFilesString = `../assets/${baseFolder}/${mode}/mode/${mode}EmptyStates.module.css`;
+  modeFiles.push(path.join(__dirname, modeFilesString));
+});
+let files = modeFiles;
+
+function generate(mode) {
+  let exportVariables = [];
+  let counter = 0;
+  let newLine = '';
+
+  svgAppearanceVariables.forEach((element) => {
+    let commentName = element.comment;
+    counting = counter++;
+    if (counting != 0) {
+      newLine = `\n\t`;
+    }
+
+    exportVariables.push(commentName ? `${newLine}\n\t/* ${commentName} */` : '');
+
+    Object.entries(element.data).map(([key, value]) => {
+      if (mode == 'default') {
+        let svgDefaultColors = value.light[0];
+
+        colorsResult = [
+          `${prefix}${key}: ${svgDefaultColors};`
+        ];
+        exportVariables.push(colorsResult);
+      } else if (mode == 'dark') {
+        let svgDarkColors = value.dark[0];
+
+        colorsResult = [
+          `${prefix}${key}: ${svgDarkColors};`
+        ];
+        exportVariables.push(colorsResult);
+      }
+    })
+  });
+  return exportVariables.join('');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+  let fileString = files[arrayIndexCounter];
+  // let splitPath = fileString.split(/\\/g);
+  let getMode = mode;
+  ensureDirectoryExistence(fileString);
+  fs.writeFileSync(
+    fileString,
+    `[data-mode='${getMode}'] {${generate(
+      getMode
+    )}\n}`
+  );
+  arrayIndexCounter++;
+});

package/preprocess/svgThemeColors.js

@@ -0,0 +1,92 @@
+var { svgThemeVariables } = require('./json/svgThemeVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
+let themeFiles = [];
+let prefix=`\n\t--zdt_cta_`;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let themeFilesString = `../assets/${baseFolder}/${mode}/themes/${theme}/${
+      theme + capitalizeFirstLetter(mode)
+    }CTATheme.module.css`;
+    themeFiles.push(path.join(__dirname, themeFilesString));
+  });
+});
+let files = themeFiles;
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function generate(mode, theme) {
+  let exportVariables = [];
+
+  svgThemeVariables.forEach((element) => {
+    Object.entries(element).map(([key, value]) => {
+        if (mode == 'default') {
+          let svgDefaultColors = value.light;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[0]}`
+            ];
+          } else if (theme == 'green') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[1]}`
+            ];
+          } else if (theme == 'orange') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[2]}`
+            ];
+          } else if (theme == 'red') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[3]}`
+            ];
+          } else if (theme == 'yellow') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[4]}`
+            ];
+          }
+          exportVariables.push(colorsResult);
+        } else if (mode == 'dark') {
+          let svgDarkColors = value.dark;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[0]}`];
+          } else if (theme == 'green') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[1]}`];
+          } else if (theme == 'orange') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[2]}`];
+          } else if (theme == 'red') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[3]}`];
+          } else if (theme == 'yellow') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[4]}`];
+          }
+          exportVariables.push(colorsResult);
+        }
+    })
+  });
+  return exportVariables.join(';');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let fileString = files[arrayIndexCounter];
+    // let splitPath = fileString.split(/\\/g);
+    let getMode = mode;
+    let getTheme = theme;
+    ensureDirectoryExistence(fileString);
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}'][data-theme='${getTheme}'] {${generate(
+        getMode,
+        getTheme
+      )}\n}`
+    );
+    arrayIndexCounter++;
+  });
+});

package/src/Provider.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Switch from '@zohodesk/components/lib/Switch/Switch';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
+/* default mode & themes */
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/mode/defaultEmptyStates.module.css';
+/* dark mode & themes */
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/mode/darkEmptyStates.module.css';
+
+export default class Provider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      appearanceName: 'default',
+      themeName: 'blue'
+    };
+
+    this.switchMode = this.switchMode.bind(this);
+    this.setTheme = this.setTheme.bind(this);
+  }
+
+  switchMode() {
+    let appearanceName = this.state.appearanceName;
+    if (appearanceName == 'default') {
+      this.setState({
+        appearanceName: 'dark'
+      });
+    } else {
+      this.setState({
+        appearanceName: 'default'
+      });
+    }
+  }
+
+  setTheme(theme) {
+    this.setState({
+      themeName: theme
+    });
+  }
+
+  render() {
+    let { appearanceName, themeName } = this.state;
+    let themeClass = {
+      width: '20px',
+      height: '20px',
+      borderRadius: '3px',
+      display: 'flex',
+      border: '1px solid #ccc',
+      margin: '0 5px',
+      cursor: 'pointer',
+      backgroundColor: '#0a73eb'
+    };
+    let green = {
+      backgroundColor: '#26a942'
+    };
+    let red = {
+      backgroundColor: '#de3535'
+    };
+    let orange = {
+      backgroundColor: '#e57717'
+    };
+    let yellow = {
+      backgroundColor: '#e8b923'
+    };
+    
+    return (
+      <AppContainer 
+        customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
+      >
+        <Container scroll='vertical'>{this.props.children}</Container>
+        <div
+          style={{
+            position: 'fixed',
+            bottom: '0',
+            backgroundColor: '#272727',
+            padding: '10px',
+            borderRadius: '15px 15px 0 0',
+            minWidth: '100px',
+            textAlign: 'center',
+            left: '50%',
+            transform: 'translate(-50%)',
+            boxShadow: '0 0 3px #000',
+            fontSize: '12px',
+            zIndex: '3',
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
+          <div>
+            <Switch
+              id='switchMode'
+              text='Light/Night Mode'
+              labelSize='small'
+              onChange={this.switchMode}
+              checked={appearanceName == 'dark'}
+            />
+          </div>
+          <div style={{display: 'flex'}}>
+            <span 
+              title='Blue Theme' 
+              style={themeClass}
+              onClick={() => this.setTheme('blue')}
+            ></span>
+            <span 
+              title='Green Theme' 
+              style={Object.assign({}, themeClass, green)}
+              onClick={() => this.setTheme('green')}
+            ></span>
+            <span 
+              title='Red Theme' 
+              style={Object.assign({}, themeClass, red)}
+              onClick={() => this.setTheme('red')}
+            ></span>
+            <span 
+              title='Orange Theme' 
+              style={Object.assign({}, themeClass, orange)}
+              onClick={() => this.setTheme('orange')}
+            ></span>
+            <span 
+              title='Yellow Theme' 
+              style={Object.assign({}, themeClass, yellow)}
+              onClick={() => this.setTheme('yellow')}
+            ></span>
+          </div>
+        </div>
+      </AppContainer>
+    );
+  }
+}

package/src/index.js

@@ -1,6 +1,10 @@
 export { default as React } from 'react';
 export { default as ReactDOM } from 'react-dom';
 export { renderToStaticMarkup } from 'react-dom/server';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
 
+export { default as _provider } from './Provider';
 export { default as SVG } from './svg/SVG';
-export { default as SVG__default } from './svg/docs/SVG__default.docs'
+export { default as SVG__emptystate } from './svg/docs/SVG__default.docs';
+export { default as SVG__common } from './svg/docs/SVG__common.docs';
+export { default as SVG__errorstate } from './svg/docs/SVG__errorstate.docs';

package/src/svg/EmptyAccounts.js

@@ -1,28 +1,119 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyAccounts.svg';
+
 export default class EmptyAccounts extends React.Component {
   render() {
-    let { size, className='', alignHorizontal } = this.props;
     return (
-      <SVG viewBox='0 0 181.9 139.3' name='accounts' size={size} className={className} alignHorizontal={alignHorizontal}>
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox="0 0 200 200" name="accounts" {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyAccounts_svg__cls-7,.EmptyAccounts_svg__cls-9{fill:var(--zd_emptysvg_secondary_fill)}.EmptyAccounts_svg__cls-3,.EmptyAccounts_svg__cls-4,.EmptyAccounts_svg__cls-5,.EmptyAccounts_svg__cls-6,.EmptyAccounts_svg__cls-8{fill:none}.EmptyAccounts_svg__cls-3{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyAccounts_svg__cls-8{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyAccounts_svg__cls-4,.EmptyAccounts_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyAccounts_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyAccounts_svg__cls-6{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          opacity={0.05}
+          fill="var(--zd_emptysvg_primary_fill)"
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyAccounts_svg__cls-8"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyAccounts_svg__cls-4"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyAccounts_svg__cls-6"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyAccounts_svg__cls-3"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <g opacity={0.3}>
+          <ellipse
+            className="EmptyAccounts_svg__cls-7"
+            cx={70.01}
+            cy={92.77}
+            rx={13.53}
+            ry={13.42}
+          />
+          <path
+            className="EmptyAccounts_svg__cls-7"
+            d="M128.12 74.12s5.37-7.3 17.62-.47 3.25 28-11.37 26.24c0 0-4.75-.87-6.36-2-.01-.02 4.36-11.67.11-23.77z"
+          />
+          <ellipse
+            className="EmptyAccounts_svg__cls-7"
+            cx={104.52}
+            cy={81.92}
+            rx={18.72}
+            ry={18.56}
+          />
+        </g>
+        <g>
+          <ellipse
+            className="EmptyAccounts_svg__cls-9"
+            cx={70.01}
+            cy={92.77}
+            rx={13.53}
+            ry={13.42}
+          />
+          <path
+            className="EmptyAccounts_svg__cls-9"
+            d="M128.12 74.12s5.37-7.3 17.62-.47 3.25 28-11.37 26.24c0 0-4.75-.87-6.36-2-.01-.02 4.36-11.67.11-23.77z"
+          />
+          <ellipse
+            className="EmptyAccounts_svg__cls-9"
+            cx={104.52}
+            cy={81.92}
+            rx={18.72}
+            ry={18.56}
+          />
+        </g>
+        <path
+          className="EmptyAccounts_svg__cls-5"
+          d="M43.12 137.27s26.19 17.89 43.6 1.66a6.4 6.4 0 002-4c.65-6.42 1-24.27-14.68-29.35a17.28 17.28 0 007.88-8.3c2.6-6.49 1.34-16.24-9-18.38-17.24-3.58-19.41 15-13 22.12l3.78 4.56s-18.89 12.48-16.32 23.95c0 0 13.38 12.34 30.06 7.68 0 0 23 28.3 52.82 2.18a7.2 7.2 0 002.43-5.47c-.07-8.11-1.8-29-17-36.76 0 0-13.62 12.11-26.54-3.49s3-32.37 14.56-31 23 5.12 19.49 30.5c0 0 7.75 12.35 20.9 3.5s5.17-20.73 1.65-23.06-13.1-5.77-17.62.47a35.44 35.44 0 01-7.18 35.44 29.18 29.18 0 00-6 10.41c-.88 2.75-1.33 5.66-.39 7.71 2.27 4.95 26.73 11 40.87-2.31a4.65 4.65 0 001.47-3.5c-.06-4.26-1.32-13.89-10.87-18.18 0 0 11.51 20.26 2.12 32.84"
+        />
       </SVG>
     );
   }
 }
 
 EmptyAccounts.propTypes = {
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignHorizontal: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyAccounts.defaultProps = {
   size: 'large',
-  alignHorizontal: true
-}
-
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyAccounts',
+  palette: 'default'
+};
 if (__DOCS__) {
   EmptyAccounts.docs = {
     componentGroup: 'SVG'

package/src/svg/EmptyActiveCalls.js

@@ -1,32 +1,81 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from './SVG';
-import image from './images/EmptyActiveCalls.svg';
+
 export default class EmptyActiveCalls extends React.Component {
   render() {
-    let { isRender, size, className='', alignHorizontal } = this.props;
     return (
-      <SVG
-        viewBox='0 0 181.9 139.3'
-        name='ActiveCalls'
-        isRender={isRender}
-        size={size} className={className} alignHorizontal={alignHorizontal}
-      >
-        <image xlinkHref={image} height='100%' width='100%' />
+      <SVG viewBox='0 0 200 200' name='ActiveCalls' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyActiveCalls_svg__cls-4,.EmptyActiveCalls_svg__cls-5,.EmptyActiveCalls_svg__cls-6,.EmptyActiveCalls_svg__cls-7,.EmptyActiveCalls_svg__cls-8{fill:none}.EmptyActiveCalls_svg__cls-4{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyActiveCalls_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyActiveCalls_svg__cls-5,.EmptyActiveCalls_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyActiveCalls_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyActiveCalls_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity={0.05}
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyActiveCalls_svg__cls-7"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyActiveCalls_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-4"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M79.93 53.67c6.28.38 9.53 13.52 8.06 18.09s-6.15 4.54-10.33-1.48-2-16.09-2-16.09c.53-.82 4.27-.52 4.27-.52zm15.35 57.76s3.88 8.57 9.94 10.57 8.88 3.58 10.12-.5c0 0-2.21-10.29-14.9-12.13 0-.02-2.16-.24-5.16 2.06z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-6"
+          d="M64.76 119.92h18.49S67.07 90.31 65.72 83.25s-3.66-20.63 3.86-26 13.67-4.2 15.79 0 6.75 22-4 17c0 0-7.13-4.2-6.55-17a3.4 3.4 0 00-3 2.82c-.61 2.7.49 12.49 6.46 16a7.05 7.05 0 01-4.77 1.67s6.92 21.53 19.17 36.42c0 0 5.39-8.09 13-3.32s11.51 8.81 9 15-12.39 9.25-19 6.65-10.5-9.69-10.5-9.69 12.1 12.72 24.34 3.76c0 0-12.09-2.75-13.84-10 0 0 .57-2.1 1.19-2.1a21.06 21.06 0 0016.49 9.68s-4.48 8-3.5 9.25 8.47 18.38 20.72 13.88 9.31-21.6 20.65-24.75 17.93-2.92 17.93-2.92"
+        />
       </SVG>
     );
   }
 }
 EmptyActiveCalls.propTypes = {
-  isRender: PropTypes.bool,
-  size: PropTypes.oneOf('small','large'),
+  alignHorizontal: PropTypes.bool,
   className: PropTypes.string,
-  alignHorizontal: PropTypes.bool
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 EmptyActiveCalls.defaultProps = {
-  isRender: true,
   size: 'large',
-  alignHorizontal: true
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyActiveCalls',
+  palette: 'default'
 };
 
 if (__DOCS__) {