@zohodesk/components 1.0.0-temp-999 → 1.0.0-temp-69

package/es/common/transition.module.css

@@ -1,6 +1,7 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -8,6 +9,8 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -15,15 +18,20 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
   opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  transform: scale(1);
   opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -31,6 +39,9 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -38,6 +49,9 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -45,14 +59,27 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-  transform: translateX(110%);
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
 .slideLeftEnter.slideLeftEnterActive,
 .slideLeftLeave {
   opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
   transform: translateX(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -61,6 +88,9 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -69,6 +99,9 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -77,14 +110,27 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
 .skewInEnter.skewInEnterActive,
 .skewInLeave {
   opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
   transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -98,9 +144,3 @@
 .defaultLeave {
   display: block;
 }
-
-.noneEnter,
-.noneEnter.noneEnterActive,
-.noneLeave,
-.noneLeave.noneLeaveActive {
-}

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -1,8 +1,7 @@
 .wrapper {
   position: relative;
 }
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -10,9 +9,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
@@ -41,25 +40,40 @@
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -105,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types'; //Components
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps'; //Components
 
 import Modal from '../../Modal/Modal';
 let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -95,21 +96,8 @@ export default class PortalLayer extends React.Component {
   }
 
 }
-PortalLayer.defaultProps = {
-  autoZIndexNeeded: true,
-  isChildrenRestrictionNeeded: false,
-  portalId: 'portal1'
-};
-PortalLayer.propTypes = {
-  autoZIndexNeeded: PropTypes.bool,
-  children: PropTypes.element,
-  initialState: PropTypes.bool,
-  isChildrenRestrictionNeeded: PropTypes.bool,
-  portalId: PropTypes.string,
-  renderChildren: PropTypes.func,
-  saveGetFunction: PropTypes.func,
-  saveUpdateFunction: PropTypes.func
-};
+PortalLayer.defaultProps = defaultProps;
+PortalLayer.propTypes = propTypes;
 
 if (false) {
   PortalLayer.docs = {

package/es/deprecated/PortalLayer/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  autoZIndexNeeded: true,
+  isChildrenRestrictionNeeded: false,
+  portalId: 'portal1'
+};

package/es/deprecated/PortalLayer/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoZIndexNeeded: PropTypes.bool,
+  children: PropTypes.element,
+  initialState: PropTypes.bool,
+  isChildrenRestrictionNeeded: PropTypes.bool,
+  portalId: PropTypes.string,
+  renderChildren: PropTypes.func,
+  saveGetFunction: PropTypes.func,
+  saveUpdateFunction: PropTypes.func
+};

package/es/index.js

@@ -4,6 +4,15 @@ export { renderToStaticMarkup } from 'react-dom/server';
 import './common/reset.module.css';
 export { default as _provider } from './Provider';
 export * from './Layout';
+export * from './ucl/Grid';
+export { default as Grid__default } from './ucl/Grid/docs/Grid__default.docs';
+export { default as Grid__Basic_Detail_Layout } from './ucl/Grid/docs/Grid__Basic_Detail_Layout.docs';
+export { default as Grid__Auto_Flow_Row } from './ucl/Grid/docs/Grid__Auto_Flow_Row.docs';
+export { default as Grid__Area_Based_Detail_Layout } from './ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs';
+export { default as Grid__Line_Based_Detail_Layout } from './ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs';
+export { default as Grid__Area_Based_List_Layout } from './ucl/Grid/docs/Grid__Area_Based_List_Layout.docs';
+export { default as Grid__Line_Based_List_Layout } from './ucl/Grid/docs/Grid__Line_Based_List_Layout.docs';
+export { default as Grid__Box_Alignment } from './ucl/Grid/docs/Grid__Box_Alignment.docs';
 export { default as Layout__default } from './Layout/docs/Layout__default.docs';
 export { default as Layout__two_Column } from './Layout/docs/Layout__two_Column.docs';
 export { default as Layout__three_Column } from './Layout/docs/Layout__three_Column.docs';
@@ -149,9 +158,5 @@ export { default as Provider__Zindex_For_FunctionComponent } from './Provider/do
 
 export { default as SemanticButton } from './semantic/Button/Button';
 export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
-export { default as FocusScope } from './a11y/FocusScope/FocusScope';
-export { default as FocusScope__default } from './a11y/FocusScope/docs/FocusScope__default.docs';
-export { default as FocusRing } from './beta/FocusRing/FocusRing';
-export { default as FocusRing__default } from './beta/FocusRing/docs/FocusRing__default.docs';
 export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';
 export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';

package/es/semantic/Button/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './semanticButton.module.css';
 export default class Button extends React.Component {
   constructor(props) {
@@ -49,43 +50,8 @@ export default class Button extends React.Component {
   }
 
 }
-Button.defaultProps = {
-  children: null,
-  autoFocus: false,
-  dataId: 'semanticButton',
-  disabled: false,
-  palette: 'primary',
-  text: 'Button',
-  type: 'button',
-  value: 'text',
-  customClass: '',
-  a11y: {}
-};
-Button.propTypes = {
-  ariaControls: PropTypes.bool,
-  ariaExpanded: PropTypes.bool,
-  ariaHaspopup: PropTypes.bool,
-  ariaLabel: PropTypes.string,
-  autofocus: PropTypes.bool,
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  onClick: PropTypes.func,
-  ref: PropTypes.func,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'reset', 'button']),
-  value: PropTypes.string,
-  a11y: PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    ariaHaspopup: PropTypes.bool,
-    ariaExpanded: PropTypes.bool,
-    ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string
-  })
-};
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes;
 
 if (false) {
   Button.docs = {

package/es/semantic/Button/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  children: null,
+  autoFocus: false,
+  dataId: 'semanticButton',
+  disabled: false,
+  palette: 'primary',
+  text: 'Button',
+  type: 'button',
+  value: 'text',
+  customClass: '',
+  a11y: {}
+};

package/es/semantic/Button/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  ariaControls: PropTypes.bool,
+  ariaExpanded: PropTypes.bool,
+  ariaHaspopup: PropTypes.bool,
+  ariaLabel: PropTypes.string,
+  autofocus: PropTypes.bool,
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  ref: PropTypes.func,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button']),
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
 .buttonReset {
-  border: inherit;
   outline: 0;
-  background-color: inherit;
   font: inherit;
-  padding: 0;
   color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0;
   text-align: inherit;
 }

package/es/ucl/Grid/Grid.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import { withTheme } from '@zohodesk/theme';
+import style from './css/Grid.module.css';
+import defaultProps from './props/defaultProps';
+import propTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+import cssJSLogic from './css/cssJSLogic';
+import componentNames from './componentNames';
+const additionStyle = ['base'];
+const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
+  let {
+    tagName,
+    customStyle,
+    customId,
+    tagAttributes,
+    tagGeneralAttributes,
+    children,
+    a11y
+  } = props;
+  /* external customization - need memorize?*/
+
+  let newStyle = useMergeStyle(style, customStyle, additionStyle);
+  /* css classname added based on logic */
+
+  const className = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement(tagName, { ...tagGeneralAttributes,
+    'data-id': customId,
+    className,
+    ref,
+    ...tagAttributes,
+    ...a11y
+  }, children);
+});
+Grid.displayName = 'Grid';
+Grid.defaultProps = defaultProps;
+Grid.propTypes = propTypes;
+Grid.constantProps = constantProps;
+export default withTheme(Grid, componentNames.GridLayout);
+Grid.docs = {
+  componentGroup: 'Grid',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: false
+};

package/es/ucl/Grid/componentNames.js

@@ -0,0 +1,6 @@
+export default {
+  "GridLayout": "GridLayout",
+  "NileLayout": "NileLayout",
+  "AmazonLayout": "AmazonLayout",
+  "YangtzeLayout": "YangtzeLayout"
+};

package/es/ucl/Grid/css/Grid.module.css

@@ -0,0 +1,217 @@
+.cover {
+  height: 100%;
+  width: 100%;
+}
+
+/*Container Props */
+
+.grid {
+  display: grid;
+}
+
+.inlineGrid {
+  display: inline-grid;
+}
+
+.row {
+  grid-auto-flow: row;
+}
+
+.column {
+  grid-auto-flow: column;
+}
+
+.dense {
+  grid-auto-flow: dense;
+}
+
+.rowDense {
+  grid-auto-flow: row dense;
+}
+
+.colDense {
+  grid-auto-flow: column dense;
+}
+
+/* align-items props start */
+
+.alignItems_start {
+  align-items: start;
+}
+
+.alignItems_end {
+  align-items: end;
+}
+
+.alignItems_center {
+  align-items: center;
+}
+
+.alignItems_stretch {
+  align-items: stretch;
+}
+
+.alignItems_baseline {
+  align-items: baseline;
+}
+
+/* align-items props end */
+
+/* align-self props start */
+
+.alignSelf_start {
+  align-self: start;
+}
+
+.alignSelf_end {
+  align-self: end;
+}
+
+.alignSelf_center {
+  align-self: center;
+}
+
+.alignSelf_stretch {
+  align-self: stretch;
+}
+
+.alignSelf_baseline {
+  align-self: baseline;
+}
+
+/* align-self props End */
+
+/* align-content props start*/
+
+.alignContent_start {
+  align-content: start;
+}
+
+.alignContent_end {
+  align-content: end;
+}
+
+.alignContent_center {
+  align-content: center;
+}
+
+.alignContent_stretch {
+  align-content: stretch;
+}
+
+.alignContent_baseline {
+  align-content: baseline;
+}
+
+.alignContent_spaceBetween {
+  align-content: space-between;
+}
+
+.alignContent_spaceAround {
+  align-content: space-around;
+}
+
+.alignContent_spaceEvenly {
+  align-content: space-evenly;
+}
+
+/* align-content props end*/
+
+
+/* justify-items props start */
+
+.justifyItems_start {
+  justify-items: start;
+}
+
+.justifyItems_end {
+  justify-items: end;
+}
+
+.justifyItems_center {
+  justify-items: center;
+}
+
+.justifyItems_stretch {
+  justify-items: stretch;
+}
+
+.justifyItems_baseline {
+  justify-items: baseline;
+}
+
+/* justify-items props end */
+
+/* justify-self props start */
+
+.justifySelf_start {
+  justify-self: start;
+}
+
+.justifySelf_end {
+  justify-self: end;
+}
+
+.justifySelf_center {
+  justify-self: center;
+}
+
+.justifySelf_stretch {
+  justify-self: stretch;
+}
+
+.justifySelf_baseline {
+  justify-self: baseline;
+}
+
+/* justify-self props end */
+
+/* justify-content props start */
+
+.justifyContent_start {
+  justify-content: start;
+}
+
+.justifyContent_end {
+  justify-content: end;
+}
+
+.justifyContent_center {
+  justify-content: center;
+}
+
+.justifyContent_stretch {
+  justify-content: stretch;
+}
+
+.justifyContent_spaceBetween {
+  justify-content: space-between;
+}
+
+.justifyContent_spaceAround {
+  justify-content: space-around;
+}
+
+.justifyContent_spaceEvenly {
+  justify-content: space-evenly;
+}
+
+/* justify-content props end */
+
+.scroll_y {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scroll_x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll_none {
+  overflow: hidden;
+}
+
+.scroll_both {
+  overflow: auto;
+}