@dhis2/analytics 26.3.0-alpha.3 → 26.3.0

package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap

@@ -1,282 +1,405 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionItem matches the snapshot 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-    elevations={false}
-    layers={false}
-    spacers={false}
-    theme={false}
-  />
-  <li
-    className="item"
-    name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
+<li
+  name="Period"
+  onClick={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "borderRadius": "2px",
+      "cursor": "pointer",
+      "display": "flex",
+      "marginBottom": 3,
+      "marginTop": 3,
+      "minHeight": "24px",
+    }
+  }
+>
+  <div
+    className="label"
+    data-test="undefined-button-pe"
+    style={
+      Object {
+        "display": "flex",
+        "outline": "none",
+      }
+    }
+    tabIndex={0}
   >
     <div
-      className="label"
-      data-test="undefined-button-pe"
-      tabIndex={0}
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
     >
-      <div
-        className="iconWrapper"
-      >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
-      </div>
-      <div
-        className="labelWrapper"
+      <SvgClock16
+        style={
+          Object {
+            "paddingBottom": "2px",
+            "paddingLeft": "6px",
+          }
+        }
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "padding": "2px 5px 2px 0",
+        }
+      }
+    >
+      <span
+        data-dimensionid="pe"
+        style={
+          Object {
+            "color": "#212934",
+            "fontSize": "14px",
+            "userSelect": "none",
+            "wordBreak": "break-word",
+          }
+        }
       >
-        <span
-          className="labelText"
-        >
-          <span
-            data-dimensionid="pe"
-          >
-            Period
-          </span>
-        </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
-      </div>
+        Period
+      </span>
+      <RecommendedIcon
+        dataTest="undefined-recommended-icon"
+        isRecommended={false}
+      />
     </div>
-  </li>
-  <style />
-</Fragment>
+  </div>
+</li>
 `;
 
 exports[`DimensionItem matches the snapshot with locked 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-    elevations={false}
-    layers={false}
-    spacers={false}
-    theme={false}
-  />
-  <li
-    className="item"
-    name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
+<li
+  name="Period"
+  onClick={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "borderRadius": "2px",
+      "cursor": "pointer",
+      "display": "flex",
+      "marginBottom": 3,
+      "marginTop": 3,
+      "minHeight": "24px",
+    }
+  }
+>
+  <div
+    className="label"
+    data-test="undefined-button-pe"
+    style={
+      Object {
+        "display": "flex",
+        "outline": "none",
+      }
+    }
+    tabIndex={0}
   >
     <div
-      className="label"
-      data-test="undefined-button-pe"
-      tabIndex={0}
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
     >
-      <div
-        className="iconWrapper"
-      >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
-      </div>
-      <div
-        className="labelWrapper"
-      >
-        <span
-          className="labelText"
-        >
-          <span
-            data-dimensionid="pe"
-          >
-            Period
-          </span>
-        </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
-      </div>
+      <SvgClock16
+        style={
+          Object {
+            "paddingBottom": "2px",
+            "paddingLeft": "6px",
+          }
+        }
+      />
     </div>
     <div
-      className="lockWrapper"
+      style={
+        Object {
+          "padding": "2px 5px 2px 0",
+        }
+      }
     >
-      <svg
-        fill="none"
-        height="9"
-        width="7"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        data-dimensionid="pe"
+        style={
+          Object {
+            "color": "#212934",
+            "fontSize": "14px",
+            "userSelect": "none",
+            "wordBreak": "break-word",
+          }
+        }
       >
-        <path
-          clipRule="evenodd"
-          d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
-          fill="none"
-          fillRule="evenodd"
-        />
-      </svg>
+        Period
+      </span>
+      <RecommendedIcon
+        dataTest="undefined-recommended-icon"
+        isRecommended={false}
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
+    >
+      <SvgLock16 />
     </div>
-  </li>
-  <style />
-</Fragment>
+  </div>
+</li>
 `;
 
 exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-    elevations={false}
-    layers={false}
-    spacers={false}
-    theme={false}
-  />
-  <li
-    className="item"
-    name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
+<li
+  name="Period"
+  onClick={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "borderRadius": "2px",
+      "cursor": "pointer",
+      "display": "flex",
+      "marginBottom": 3,
+      "marginTop": 3,
+      "minHeight": "24px",
+    }
+  }
+>
+  <div
+    className="label"
+    data-test="undefined-button-pe"
+    style={
+      Object {
+        "display": "flex",
+        "outline": "none",
+      }
+    }
+    tabIndex={0}
   >
     <div
-      className="label"
-      data-test="undefined-button-pe"
-      tabIndex={0}
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
     >
-      <div
-        className="iconWrapper"
-      >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
-      </div>
-      <div
-        className="labelWrapper"
-      >
-        <span
-          className="labelText"
-        >
-          <span
-            data-dimensionid="pe"
-          >
-            Period
-          </span>
-        </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
-      </div>
+      <SvgClock16
+        style={
+          Object {
+            "paddingBottom": "2px",
+            "paddingLeft": "6px",
+          }
+        }
+      />
     </div>
     <div
-      className="optionsWrapper"
-      data-test="undefined-menu-pe"
-    />
-  </li>
-  <style />
-</Fragment>
+      style={
+        Object {
+          "padding": "2px 5px 2px 0",
+        }
+      }
+    >
+      <span
+        data-dimensionid="pe"
+        style={
+          Object {
+            "color": "#212934",
+            "fontSize": "14px",
+            "userSelect": "none",
+            "wordBreak": "break-word",
+          }
+        }
+      >
+        Period
+      </span>
+      <RecommendedIcon
+        dataTest="undefined-recommended-icon"
+        isRecommended={false}
+      />
+    </div>
+  </div>
+  <div
+    data-test="undefined-menu-pe"
+    style={
+      Object {
+        "height": "20px",
+        "left": "5px",
+        "position": "relative",
+        "width": "20px",
+      }
+    }
+  />
+</li>
 `;
 
 exports[`DimensionItem matches the snapshot with recommended 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-    elevations={false}
-    layers={false}
-    spacers={false}
-    theme={false}
-  />
-  <li
-    className="item"
-    name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
+<li
+  name="Period"
+  onClick={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "borderRadius": "2px",
+      "cursor": "pointer",
+      "display": "flex",
+      "marginBottom": 3,
+      "marginTop": 3,
+      "minHeight": "24px",
+    }
+  }
+>
+  <div
+    className="label"
+    data-test="undefined-button-pe"
+    style={
+      Object {
+        "display": "flex",
+        "outline": "none",
+      }
+    }
+    tabIndex={0}
   >
     <div
-      className="label"
-      data-test="undefined-button-pe"
-      tabIndex={0}
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
     >
-      <div
-        className="iconWrapper"
-      >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
-      </div>
-      <div
-        className="labelWrapper"
+      <SvgClock16
+        style={
+          Object {
+            "paddingBottom": "2px",
+            "paddingLeft": "6px",
+          }
+        }
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "padding": "2px 5px 2px 0",
+        }
+      }
+    >
+      <span
+        data-dimensionid="pe"
+        style={
+          Object {
+            "color": "#212934",
+            "fontSize": "14px",
+            "userSelect": "none",
+            "wordBreak": "break-word",
+          }
+        }
       >
-        <span
-          className="labelText"
-        >
-          <span
-            data-dimensionid="pe"
-          >
-            Period
-          </span>
-        </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={true}
-        />
-      </div>
+        Period
+      </span>
+      <RecommendedIcon
+        dataTest="undefined-recommended-icon"
+        isRecommended={true}
+      />
     </div>
-  </li>
-  <style />
-</Fragment>
+  </div>
+</li>
 `;
 
 exports[`DimensionItem matches the snapshot with selected 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-    elevations={false}
-    layers={false}
-    spacers={false}
-    theme={false}
-  />
-  <li
-    className="item selected"
-    name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
+<li
+  name="Period"
+  onClick={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#e0f2f1",
+      "borderRadius": "2px",
+      "cursor": "pointer",
+      "display": "flex",
+      "fontWeight": 500,
+      "marginBottom": 3,
+      "marginTop": 3,
+      "minHeight": "24px",
+    }
+  }
+>
+  <div
+    className="label"
+    data-test="undefined-button-pe"
+    style={
+      Object {
+        "display": "flex",
+        "outline": "none",
+      }
+    }
+    tabIndex={0}
   >
     <div
-      className="label"
-      data-test="undefined-button-pe"
-      tabIndex={0}
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "padding": "3px 8px 0 8px",
+        }
+      }
     >
-      <div
-        className="iconWrapper"
-      >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
-      </div>
-      <div
-        className="labelWrapper"
+      <SvgClock16
+        style={
+          Object {
+            "paddingBottom": "2px",
+            "paddingLeft": "6px",
+          }
+        }
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "padding": "2px 5px 2px 0",
+        }
+      }
+    >
+      <span
+        data-dimensionid="pe"
+        style={
+          Object {
+            "color": "#212934",
+            "fontSize": "14px",
+            "userSelect": "none",
+            "wordBreak": "break-word",
+          }
+        }
       >
-        <span
-          className="labelText"
-        >
-          <span
-            data-dimensionid="pe"
-          >
-            Period
-          </span>
-        </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
-      </div>
+        Period
+      </span>
+      <RecommendedIcon
+        dataTest="undefined-recommended-icon"
+        isRecommended={false}
+      />
     </div>
-  </li>
-  <style />
-</Fragment>
+  </div>
+</li>
 `;