revert me

ym · Oct 6, 2021 · bf3a363 · bf3a363
1 parent d88fd8a
commit bf3a363
Showing 1 changed file with 61 additions and 34 deletions.
diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
@@ -1,6 +1,12 @@
 import React, { Fragment } from 'react';
 
-import { EuiProgress, EuiSpacer } from '../../../../src/components';
+import {
+  EuiBadge,
+  EuiPopover,
+  EuiButton,
+  EuiProgress,
+  EuiSpacer,
+} from '../../../../src/components';
 
 const data = [
   { label: 'Basic percentage', value: '80' },
@@ -13,36 +19,57 @@ const data = [
   { label: "Women's Accessories", value: '24.0256' },
 ];
 
-export default () => (
-  <Fragment>
-    <div style={{ maxWidth: 160 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="success"
-            size="s"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-    <EuiSpacer size="m" />
-    <div style={{ maxWidth: 200 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="primary"
-            size="m"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-  </Fragment>
-);
+export default () => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Show popover
+    </EuiButton>
+  );
+
+  return (
+    <Fragment>
+      <EuiPopover
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+      >
+        <EuiBadge>Text</EuiBadge>
+        <div style={{ maxWidth: 160 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="success"
+                size="s"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+        <EuiSpacer size="m" />
+        <div style={{ maxWidth: 200 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="primary"
+                size="m"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+      </EuiPopover>
+    </Fragment>
+  );
+};