@zohodesk/components 1.0.0-temp-82 → 1.0.0-temp-84

package/es/Provider.js

@@ -3,7 +3,7 @@ import AppContainer from './AppContainer/AppContainer';
 import { Container } from './Layout';
 import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 
-/* default mode & theme 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';
@@ -15,8 +15,9 @@ import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.m
 import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/mode/defaultMode.module.css';
+import '../assets/Contrast/defaultContrastLightness.module.css';
 
-/* dark mode & theme 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';
@@ -28,8 +29,9 @@ import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.
 import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/mode/darkMode.module.css';
+import '../assets/Contrast/darkContrastLightness.module.css';
 
-/* pure dark mode & theme css */
+/* pureDark mode, themes */
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
@@ -41,6 +43,7 @@ import '../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme
 import '../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
 import '../assets/Appearance/pureDark/mode/pureDarkMode.module.css';
+import '../assets/Contrast/pureDarkContrastLightness.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {
@@ -49,10 +52,12 @@ export default class Provider extends React.Component {
     setGlobalIdPrefix('ZD');
     this.state = {
       appearanceName: 'default',
-      themeName: 'blue'
+      themeName: 'blue',
+      isContrastChecked: false
     };
     this.setTheme = this.setTheme.bind(this);
     this.setAppearance = this.setAppearance.bind(this);
+    this.setContrast = this.setContrast.bind(this);
   }
   setAppearance(mode) {
     this.setState({
@@ -64,10 +69,16 @@ export default class Provider extends React.Component {
       themeName: theme
     });
   }
+  setContrast() {
+    this.setState(prevState => ({
+      isContrastChecked: !prevState.isContrastChecked
+    }));
+  }
   render() {
     let {
       appearanceName,
-      themeName
+      themeName,
+      isContrastChecked
     } = this.state;
     return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
       value: {
@@ -80,12 +91,15 @@ export default class Provider extends React.Component {
           'data-mode': appearanceName,
           'data-theme': themeName
         }
-      }
+      },
+      className: isContrastChecked ? 'contrast' : ''
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
       onThemeChange: this.setTheme,
-      onAppearanceChange: this.setAppearance
+      onAppearanceChange: this.setAppearance,
+      onContrastChange: this.setContrast,
+      isChecked: isContrastChecked
     })));
   }
 }

package/es/Radio/Radio.module.css

@@ -1,112 +1,112 @@
-.varClass {
-  /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-  --radio_bg_color: none;
-  --radio_stroke_width: var(--zd_size2);
-  --radio_stroke_color: var(--zdt_radio_default_stroke);
-  --radio_fill: none;
-  --radio_inner_stroke_width: 0;
-}[dir=ltr] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
-}
-.container {
-  composes: varClass;
-}
-.pointer {
-  cursor: pointer;
-}
-.readonly, .disabled {
-  cursor: not-allowed;
-}
-.radio {
-  composes: offSelection from '../common/common.module.css';
-  width: var(--radio_width);
-  height: var(--radio_height);
-  stroke: var(--radio_stroke_color);
-  background: var(--radio_bg_color);
-  border-radius: 50%;
-}
-.radio,
-.centerPath {
-  fill: var(--radio_fill);
-}
-.filled {
-  --radio_bg_color: var(--zdt_radio_default_bg);
-}
-
-.medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-}
-.small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
-}
-.radioLabel {
-  font-size: 0;
-  display: block;
-}
-.rdBox {
-  fill: none;
-  stroke-width: var(--radio_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.centerPath {
-  --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
-  transform-origin: center;
-}
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-.rdBoxprimary,
-.hoverEfffect:hover .hoverprimary
-/* .hoverEfffect:focus .hoverprimary  */
-{
-  --radio_stroke_color: var(--zdt_radio_primary_stroke);
-}
-
-.rdBoxdanger,
-.hoverEfffect:hover .hoverdanger
-/* .hoverEfffect:focus .hoverdanger */
- {
-  --radio_stroke_color: var(--zdt_radio_danger_stroke);
-}
-
-.centerPathprimary {
-  --radio_fill: var(--zdt_radio_primary_fill);
-}
-.centerPathdanger {
-  --radio_fill: var(--zdt_radio_danger_fill);
-}
-
-.active:hover .primaryLabel,
-/* .active:focus .primaryLabel, */
-.primarycheckedActive {
-  --label_text_color: var(--zdt_radio_label_primary_text);
-}
-
-.active:hover .dangerLabel,
-/* .active:focus .dangerLabel, */
-.dangercheckedActive {
-  --label_text_color: var(--zdt_radio_label_danger_text);
-}
-
-.text {
-  margin: var(--radio_label_margin);
-}
-@keyframes circleAnimate {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
+.varClass {
+  /* radio default variables */
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+  --radio_bg_color: none;
+  --radio_stroke_width: var(--zd_size2);
+  --radio_stroke_color: var(--zdt_radio_default_stroke);
+  --radio_fill: none;
+  --radio_inner_stroke_width: 0;
+}[dir=ltr] .varClass {
+  --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
+}[dir=rtl] .varClass {
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
+}
+.container {
+  composes: varClass;
+}
+.pointer {
+  cursor: pointer;
+}
+.readonly, .disabled {
+  cursor: not-allowed;
+}
+.radio {
+  composes: offSelection from '../common/common.module.css';
+  width: var(--radio_width);
+  height: var(--radio_height);
+  stroke: var(--radio_stroke_color);
+  background: var(--radio_bg_color);
+  border-radius: 50%;
+}
+.radio,
+.centerPath {
+  fill: var(--radio_fill);
+}
+.filled {
+  --radio_bg_color: var(--zdt_radio_default_bg);
+}
+
+.medium {
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+}
+.small {
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
+}
+.radioLabel {
+  font-size: 0;
+  display: block;
+}
+.rdBox {
+  fill: none;
+  stroke-width: var(--radio_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.centerPath {
+  --radio_fill: inherit;
+  stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+.rdBoxprimary,
+.hoverEfffect:hover .hoverprimary
+/* .hoverEfffect:focus .hoverprimary  */
+{
+  --radio_stroke_color: var(--zdt_radio_primary_stroke);
+}
+
+.rdBoxdanger,
+.hoverEfffect:hover .hoverdanger
+/* .hoverEfffect:focus .hoverdanger */
+ {
+  --radio_stroke_color: var(--zdt_radio_danger_stroke);
+}
+
+.centerPathprimary {
+  --radio_fill: var(--zdt_radio_primary_fill);
+}
+.centerPathdanger {
+  --radio_fill: var(--zdt_radio_danger_fill);
+}
+
+.active:hover .primaryLabel,
+/* .active:focus .primaryLabel, */
+.primarycheckedActive {
+  --label_text_color: var(--zdt_radio_label_primary_text);
+}
+
+.active:hover .dangerLabel,
+/* .active:focus .dangerLabel, */
+.dangercheckedActive {
+  --label_text_color: var(--zdt_radio_label_danger_text);
+}
+
+.text {
+  margin: var(--radio_label_margin);
+}
+@keyframes circleAnimate {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/es/Responsive/docs/style.module.css

@@ -1,56 +1,56 @@
-.header{
-  color: #fff;
-  font-size: 24px;
-  background-color: #c60000;
-  padding: 10px;
-  text-align: center;
-  margin: 10px 6px;
-}[dir=ltr] .header{
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-}[dir=rtl] .header{
-  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
-}
-.box{
-  height: 80px;
-  line-height: 80px;
-  min-width: 300px;
-  background-color: #ffbb11;
-  text-align: center;
-  margin:6px;
-  padding: 0 100x;
-}
-.selected{
-  background-color: #60de55
-}
-.subHeading{
-  position: sticky;
-  top: 0;
-  text-align: center;
-  padding: 10px;
-  background-color: #fff
-}
-
-/* ---layout css--- */
-.contentBar{
-  height: 20px;
-  background-color: rgb(142, 156, 169);
-  margin: 6px 10px
-}
-.wrapper{
-  position: absolute;
-  width: 60%;
-  top: 50%;
-  border: 1px solid #aaa;
-  border-radius: 4px
-}
-[dir=ltr] .wrapper{
-  transform: translate(-50%,-50%);
-  left: 50%
-}
-[dir=rtl] .wrapper{
-  transform: translate(50%,-50%);
-  right: 50%
-}
-.avatar{
-  margin:20px auto
+.header{
+  color: #fff;
+  font-size: 24px;
+  background-color: #c60000;
+  padding: 10px;
+  text-align: center;
+  margin: 10px 6px;
+}[dir=ltr] .header{
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}[dir=rtl] .header{
+  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+.box{
+  height: 80px;
+  line-height: 80px;
+  min-width: 300px;
+  background-color: #ffbb11;
+  text-align: center;
+  margin:6px;
+  padding: 0 100x;
+}
+.selected{
+  background-color: #60de55
+}
+.subHeading{
+  position: sticky;
+  top: 0;
+  text-align: center;
+  padding: 10px;
+  background-color: #fff
+}
+
+/* ---layout css--- */
+.contentBar{
+  height: 20px;
+  background-color: rgb(142, 156, 169);
+  margin: 6px 10px
+}
+.wrapper{
+  position: absolute;
+  width: 60%;
+  top: 50%;
+  border: 1px solid #aaa;
+  border-radius: 4px
+}
+[dir=ltr] .wrapper{
+  transform: translate(-50%,-50%);
+  left: 50%
+}
+[dir=rtl] .wrapper{
+  transform: translate(50%,-50%);
+  right: 50%
+}
+.avatar{
+  margin:20px auto
 }

package/es/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -1,6 +1,6 @@
-.dropBoxContainer {
-  max-height: 70vh;
-}
-.boxPadding{
-  padding-bottom: var(--zd_size10);
-}
+.dropBoxContainer {
+  max-height: 70vh;
+}
+.boxPadding{
+  padding-bottom: var(--zd_size10);
+}