From 54720368bffd56be1881bce547d2290b1666ba7e Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Tue, 21 Apr 2020 12:07:36 -0300
Subject: [PATCH] update documentation page

---
 .../MeasurementsPanel/MeasurementsPanel.mdx   | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)

diff --git a/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx b/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx
index e69de29bb..0089064cc 100644
--- a/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx
+++ b/platform/ui/src/components/MeasurementsPanel/MeasurementsPanel.mdx
@@ -0,0 +1,101 @@
+---
+name: Measurements Panel
+menu: Data Display
+route: components/measurementsPanel
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import {
+  SidePanel,
+  MeasurementsPanel,
+  ButtonGroup,
+  Button,
+  IconButton,
+  Icon,
+} from '@ohif/ui';
+
+# Measurements Panel
+
+## Import
+
+```javascript
+import { MeasurementsPanel } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
+    const descriptionData = {
+      date: '07-Sep-2010',
+      modality: 'CT',
+      description: 'CHEST/ABD/PELVIS W CONTRAST',
+    };
+    const measurementTableData = {
+      title: 'Measurements',
+      amount: 10,
+      data: new Array(10).fill({}).map((el, i) => ({
+        id: i + 1,
+        label: 'Label short description',
+        displayText: '24.0 x 24.0 mm (S:4, I:22)',
+        isActive: activeMeasurementItem === i + 1,
+      })),
+      onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
+      onEdit: (id) => alert(`Edit: ${id}`),
+    };
+    return (
+      <div className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full h-screen">
+        <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
+          CONTENT
+        </div>
+        <SidePanel
+          side="right"
+          iconName="list-bullets"
+          iconLabel="Measure"
+          componentLabel="Measurements"
+          defaultIsOpen={true}
+        >
+          <MeasurementsPanel
+            descriptionData={descriptionData}
+            measurementTableData={measurementTableData}
+            actionButtons={
+              <>
+                <ButtonGroup onClick={() => alert('Export')}>
+                  <Button
+                    className="text-white border-primary-main bg-black text-base py-2 px-2"
+                    size="initial"
+                    color="inherit"
+                  >
+                    Export
+                  </Button>
+                  <IconButton
+                    className="bg-black border-primary-main px-2 text-white px-2"
+                    color="inherit"
+                    size="initial"
+                  >
+                    <Icon name="arrow-down" />
+                  </IconButton>
+                </ButtonGroup>
+                <Button
+                  className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
+                  variant="outlined"
+                  size="initial"
+                  color="inherit"
+                  onClick={() => alert('Create Report')}
+                >
+                  Create Report
+                </Button>
+              </>
+            }
+          />
+        </SidePanel>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={MeasurementsPanel} />