npm - @zohodesk/components - Versions diffs - 1.2.63 → 1.3.0 - Mend

@zohodesk/components 1.2.63 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/.cli/config/variables/variableMapping.json +7 -0
package/.cli/propValidation_report.html +1 -1
package/README.md +8 -0
package/assets/Appearance/dark/mode/Component_DarkMode.module.css +1 -0
package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -0
package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +1 -0
package/es/ListItem/ListContainer.js +3 -2
package/es/ListItem/ListItem.module.css +52 -6
package/es/ListItem/ListItemWithAvatar.js +17 -6
package/es/ListItem/ListItemWithCheckBox.js +18 -6
package/es/ListItem/ListItemWithIcon.js +20 -7
package/es/ListItem/ListItemWithRadio.js +19 -6
package/es/ListItem/__tests__/ListContainer.spec.js +8 -0
package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
package/es/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
package/es/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
package/es/ListItem/props/defaultProps.js +13 -5
package/es/ListItem/props/propTypes.js +13 -1
package/es/MultiSelect/AdvancedMultiSelect.js +10 -4
package/es/MultiSelect/MultiSelect.js +8 -4
package/es/MultiSelect/MultiSelect.module.css +9 -1
package/es/MultiSelect/MultiSelectWithAvatar.js +6 -2
package/es/MultiSelect/Suggestions.js +5 -2
package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
package/es/MultiSelect/props/propTypes.js +3 -0
package/es/Radio/props/propTypes.js +1 -1
package/es/common/common.module.css +10 -0
package/es/utils/dropDownUtils.js +33 -8
package/es/v1/Radio/props/propTypes.js +1 -1
package/lib/ListItem/ListContainer.js +3 -2
package/lib/ListItem/ListItem.module.css +52 -6
package/lib/ListItem/ListItemWithAvatar.js +16 -5
package/lib/ListItem/ListItemWithCheckBox.js +17 -5
package/lib/ListItem/ListItemWithIcon.js +19 -6
package/lib/ListItem/ListItemWithRadio.js +18 -5
package/lib/ListItem/__tests__/ListContainer.spec.js +8 -0
package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
package/lib/ListItem/props/defaultProps.js +13 -5
package/lib/ListItem/props/propTypes.js +12 -2
package/lib/MultiSelect/AdvancedMultiSelect.js +76 -69
package/lib/MultiSelect/MultiSelect.js +8 -4
package/lib/MultiSelect/MultiSelect.module.css +9 -1
package/lib/MultiSelect/MultiSelectWithAvatar.js +6 -2
package/lib/MultiSelect/Suggestions.js +5 -2
package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
package/lib/MultiSelect/props/propTypes.js +4 -1
package/lib/Radio/props/propTypes.js +1 -1
package/lib/common/common.module.css +10 -0
package/lib/utils/dropDownUtils.js +41 -11
package/lib/v1/Radio/props/propTypes.js +1 -1
package/package.json +6 -6
package/result.json +1 -1

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED Viewed

@@ -1,6 +1,306 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ListItemWithCheckBox rendering the defult props 1`] = `
+exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and LHS align center 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithCheckBox"
+    data-selector-id="listItemWithCheckBox"
+    data-test-id="List_ListItemWithCheckBox"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
+      data-id="List_checkBox"
+      data-selector-id="box"
+      data-test-id="List_checkBox"
+    >
+      <div
+        class="shrinkOff selfCenter"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          class="container pointer primary
+           inflex rowdir vCenter"
+          data-id="checkBox"
+          data-selector-id="container"
+          data-test-id="checkBox"
+          role="checkbox"
+          tabindex="-1"
+        >
+          <div
+            class="boxContainer medium  filled  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+            />
+            <label
+              class="checkbox pointer medium "
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  class="cbBox"
+                  height="38"
+                  rx="4"
+                  width="38"
+                  x="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  y="1"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and LHS align end 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithCheckBox"
+    data-selector-id="listItemWithCheckBox"
+    data-test-id="List_ListItemWithCheckBox"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
+      data-id="List_checkBox"
+      data-selector-id="box"
+      data-test-id="List_checkBox"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfEnd"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          class="container pointer primary
+           inflex rowdir vCenter"
+          data-id="checkBox"
+          data-selector-id="container"
+          data-test-id="checkBox"
+          role="checkbox"
+          tabindex="-1"
+        >
+          <div
+            class="boxContainer medium  filled  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+            />
+            <label
+              class="checkbox pointer medium "
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  class="cbBox"
+                  height="38"
+                  rx="4"
+                  width="38"
+                  x="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  y="1"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithCheckBox"
+    data-selector-id="listItemWithCheckBox"
+    data-test-id="List_ListItemWithCheckBox"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
+      data-id="List_checkBox"
+      data-selector-id="box"
+      data-test-id="List_checkBox"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          class="container pointer primary
+           inflex rowdir vCenter"
+          data-id="checkBox"
+          data-selector-id="container"
+          data-test-id="checkBox"
+          role="checkbox"
+          tabindex="-1"
+        >
+          <div
+            class="boxContainer medium  filled  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+            />
+            <label
+              class="checkbox pointer medium "
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  class="cbBox"
+                  height="38"
+                  rx="4"
+                  width="38"
+                  x="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  y="1"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -12,59 +312,180 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
       data-id="List_checkBox"
       data-selector-id="box"
       data-test-id="List_checkBox"
     >
       <div
-        aria-checked="false"
-        aria-hidden="true"
-        class="container pointer primary
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          class="container pointer primary
            inflex rowdir vCenter"
-        data-id="checkBox"
+          data-id="checkBox"
+          data-selector-id="container"
+          data-test-id="checkBox"
+          role="checkbox"
+          tabindex="-1"
+        >
+          <div
+            class="boxContainer medium  filled  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+            />
+            <label
+              class="checkbox pointer medium "
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  class="cbBox"
+                  height="38"
+                  rx="4"
+                  width="38"
+                  x="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  y="1"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
         data-selector-id="container"
-        data-test-id="checkBox"
-        role="checkbox"
-        tabindex="-1"
+        data-test-id="containerComponent"
       >
         <div
-          class="boxContainer medium  filled  shrinkOff"
+          class="value shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          <input
-            type="hidden"
-          />
-          <label
-            class="checkbox pointer medium "
+          List
+        </div>
+        <div
+          class="secondaryField  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+exports[`ListItemWithCheckBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithCheckBox"
+    data-selector-id="listItemWithCheckBox"
+    data-test-id="List_ListItemWithCheckBox"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
+      data-id="List_checkBox"
+      data-selector-id="box"
+      data-test-id="List_checkBox"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          class="container pointer primary
+           inflex rowdir vCenter"
+          data-id="checkBox"
+          data-selector-id="container"
+          data-test-id="checkBox"
+          role="checkbox"
+          tabindex="-1"
+        >
+          <div
+            class="boxContainer medium  filled  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
           >
-            <svg
-              viewBox="0 0 40 40"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              type="hidden"
+            />
+            <label
+              class="checkbox pointer medium "
             >
-              <rect
-                class="cbBox"
-                height="38"
-                rx="4"
-                width="38"
-                x="1"
+              <svg
+                viewBox="0 0 40 40"
                 xmlns="http://www.w3.org/2000/svg"
-                y="1"
-              />
-            </svg>
-          </label>
+              >
+                <rect
+                  class="cbBox"
+                  height="38"
+                  rx="4"
+                  width="38"
+                  x="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  y="1"
+                />
+              </svg>
+            </label>
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
+      class="grow basis shrinkOn"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>