@zohodesk/components 1.0.0-temp-71 → 1.0.0-temp-72

package/es/Select/props/defaultProps.js

@@ -0,0 +1,110 @@
+import { getLibraryConfig } from '../../Provider/Config';
+export const Select_defaultProps = {
+  animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
+  autoSelectOnType: true,
+  dataId: 'selectComponent',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: true,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needBorder: true,
+  needLocalSearch: true,
+  needSearch: false,
+  needSelectDownIcon: true,
+  placeHolder: '',
+  searchBoxPlaceHolder: 'Search',
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  borderColor: 'default',
+  needTick: true,
+  boxSize: 'default',
+  needListBorder: false,
+  needCloseOnSelect: true,
+  isParentBased: true,
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  iconOnHover: false,
+  customProps: {}
+};
+export const GroupSelect_defaultProps = {
+  animationStyle: 'bounce',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: true,
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  needSearch: false,
+  needSelectDownIcon: true,
+  placeHolder: '',
+  searchBoxPlaceHolder: 'Search',
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  autoSelectOnType: true,
+  dataIdSlctComp: 'selectComponent',
+  dataIdDownIcon: 'downIcon',
+  dataIdLoading: 'loading',
+  dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  isPopupOpenOnEnter: false,
+  borderColor: 'default',
+  needTick: true,
+  needLocalSearch: true,
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  iconOnHover: false
+};
+export const SelectWithAvatar_defaultProps = {
+  animationStyle: 'bounce',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: false,
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  needLocalSearch: true,
+  needSearch: true,
+  placeHolder: '',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  dataId: 'selectWithAvatar',
+  borderColor: 'default',
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  needEffect: true
+};
+export const SelectWithIcon_defaultProps = {
+  isReadOnly: false,
+  isDisabled: false,
+  animationStyle: 'bounce',
+  valueKey: 'value',
+  idKey: 'id',
+  needListBorder: false,
+  needSearch: false,
+  boxSize: 'default',
+  needListBorder: false,
+  needCloseOnSelect: true,
+  borderColor: 'default',
+  needTick: true,
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  dataId: 'selectWithIcon',
+  dropBoxSize: 'small',
+  needIcon: true,
+  iconSize: '14',
+  i18nKeys: {}
+};

package/es/Select/props/propTypes.js

@@ -0,0 +1,266 @@
+import PropTypes from 'prop-types';
+export const Select_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  autoSelectDebouneTime: PropTypes.number,
+  autoSelectOnType: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getChildren: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  getCustomEmptyState: PropTypes.func,
+  getFooter: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPopupHandlers: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDefaultSelectValue: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isParentBased: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needCloseOnSelect: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needSelectDownIcon: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onAddNewOption: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  children: PropTypes.node,
+  onFocus: PropTypes.func,
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
+};
+export const GroupSelect_propTypes = {
+  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    valueField: PropTypes.string,
+    textField: PropTypes.string,
+    options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    }))])
+  })),
+  selectedOption: PropTypes.shape({
+    groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  emptyMessage: PropTypes.string.isRequired,
+  placeHolder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  needSearch: PropTypes.bool,
+  searchEmptyMessage: PropTypes.string,
+  getRef: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needSelectDownIcon: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  autoSelectOnType: PropTypes.bool,
+  autoSelectDebouneTime: PropTypes.number,
+  dataId: PropTypes.string,
+  dataIdSlctComp: PropTypes.string,
+  dataIdDownIcon: PropTypes.string,
+  dataIdSrchEmptyMsg: PropTypes.string,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  searchDebounceTime: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  onSearch: PropTypes.func,
+  isSearchClearOnClose: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  isAnimate: PropTypes.bool,
+  onFocus: PropTypes.func,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  className: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  needTick: PropTypes.bool,
+  children: PropTypes.node,
+  getFooter: PropTypes.func,
+  htmlId: PropTypes.string,
+  iconOnHover: PropTypes.bool,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  })
+};
+export const SelectWithAvatar_propTypes = {
+  animationStyle: PropTypes.string,
+  avatarPalette: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getRef: PropTypes.func,
+  groupName: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onRemove: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    text: PropTypes.string,
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  tagSize: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
+};
+export const SelectWithIcon_propTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce']),
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  dataId: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  idKey: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needIcon: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchEmptyMessage: PropTypes.string,
+  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selectedValue: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  togglePopup: PropTypes.func,
+  valueKey: PropTypes.string,
+  htmlId: PropTypes.string
+};

package/es/Stencils/Stencils.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
 import style from './Stencils.module.css';
@@ -19,22 +20,8 @@ export default class Stencils extends React.PureComponent {
   }
 
 }
-Stencils.propTypes = {
-  palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
-  shape: PropTypes.oneOf(['rect', 'circle']),
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
-  customClass: PropTypes.string
-};
-Stencils.defaultProps = {
-  palette: 'primary',
-  shape: 'rect',
-  size: 'medium',
-  customClass: ''
-}; // Stencils.propTypesDescription = {
-//   shape: ' ',
-//   size: ' ',
-//   palette: ' '
-// };
+Stencils.propTypes = propTypes;
+Stencils.defaultProps = defaultProps;
 
 if (false) {
   Stencils.docs = {

package/es/Stencils/Stencils.module.css

@@ -1,78 +1,96 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: var(--zd_size5);
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  animation-name: placeHolderShimmer;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-  background-size: 800px 1px;
-}
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: var(--zd_size5);
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: var(--zd_size5);
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer-ltr {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: var(--zd_size5);
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap

@@ -1,49 +1,49 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stencils component should the palette is primary 1`] = `
-<div
-  className="rectangular medium primary"
-/>
-`;
-
-exports[`Stencils component should the palette is secondary 1`] = `
-<div
-  className="rectangular medium secondary"
-/>
-`;
-
-exports[`Stencils component should the shape is circle 1`] = `
-<div
-  className="circle cdefault default"
-/>
-`;
-
-exports[`Stencils component should the shape is rect 1`] = `
-<div
-  className="rectangular default default"
-/>
-`;
-
-exports[`Stencils component should the size is default 1`] = `
-<div
-  className="rectangular default default"
-/>
-`;
-
-exports[`Stencils component should the size is large 1`] = `
-<div
-  className="rectangular large default"
-/>
-`;
-
-exports[`Stencils component should the size is medium 1`] = `
-<div
-  className="rectangular small default"
-/>
-`;
-
-exports[`Stencils component should the size is small 1`] = `
-<div
-  className="rectangular small default"
-/>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stencils component should the palette is primary 1`] = `
+<div
+  className="rectangular medium primary"
+/>
+`;
+
+exports[`Stencils component should the palette is secondary 1`] = `
+<div
+  className="rectangular medium secondary"
+/>
+`;
+
+exports[`Stencils component should the shape is circle 1`] = `
+<div
+  className="circle cdefault default"
+/>
+`;
+
+exports[`Stencils component should the shape is rect 1`] = `
+<div
+  className="rectangular default default"
+/>
+`;
+
+exports[`Stencils component should the size is default 1`] = `
+<div
+  className="rectangular default default"
+/>
+`;
+
+exports[`Stencils component should the size is large 1`] = `
+<div
+  className="rectangular large default"
+/>
+`;
+
+exports[`Stencils component should the size is medium 1`] = `
+<div
+  className="rectangular small default"
+/>
+`;
+
+exports[`Stencils component should the size is small 1`] = `
+<div
+  className="rectangular small default"
+/>
+`;

package/es/Stencils/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  palette: 'primary',
+  shape: 'rect',
+  size: 'medium',
+  customClass: ''
+};