From 2087da5742cf89da85833063994faea61088b49b Mon Sep 17 00:00:00 2001
From: Julianna Langston <108109448+julianna-langston@users.noreply.github.com>
Date: Mon, 19 Jun 2023 13:04:31 -0400
Subject: [PATCH] Provide descriptions and examples for extra Polygon props
 (#3631)

## Description

Provide reasonable descriptions and stories for the Polygon props
`connectNulls` and `baseLinePoints`

## Related Issue

#3587

## Motivation and Context

Improving completeness of documentation

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

I made stories and made sure they do what I said they do

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
- [x] Documentation enhancement

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [NA] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Co-authored-by: Julianna Langston <julianna@cosaic.io>
---
 .../stories/API/shapes/Polygon.stories.tsx    | 92 ++++++++++++++++++-
 1 file changed, 91 insertions(+), 1 deletion(-)

diff --git a/storybook/stories/API/shapes/Polygon.stories.tsx b/storybook/stories/API/shapes/Polygon.stories.tsx
index e5873ee2cf..8124152946 100644
--- a/storybook/stories/API/shapes/Polygon.stories.tsx
+++ b/storybook/stories/API/shapes/Polygon.stories.tsx
@@ -173,13 +173,37 @@ export default {
   component: Polygon,
   argTypes: {
     points: {
-      description: 'The coordinates of all the vertexes of the polygon, like [{ x, y }].',
+      description: `The coordinates of all the verteces of the polygon, like [{ x, y }].<br/> By default. 
+      lines will be drawn to connect all verteces, in order to create a connected shape. If you want to 
+      skip drawing a line between 2 verteces, add a null point.`,
       table: {
         type: { summary: 'Coordinate[]' },
         category: 'General',
       },
       defaultValue: pointDefault,
     },
+    baseLinePoints: {
+      description: `Provide another polygon to receive the same visual and event handling treatment. This is
+      intended to be used in cases like icons, where multiple shapes may be necessary for the same layer.`,
+      table: {
+        type: {
+          summary: 'Coordinate[]',
+        },
+        category: 'General',
+      },
+      defaultValue: [],
+    },
+    connectNulls: {
+      description: `Determines if null points should be filtered out of the draw order.<br/>If there are
+      null points, and connectNulls is not true, the fill style will be ignored.`,
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: 'General',
+      },
+      defaultValue: false,
+    },
     stroke: GeneralStyle.stroke,
     fill: GeneralStyle.fill,
     // Deprecated
@@ -371,3 +395,69 @@ export const API = {
     fill: 'red',
   },
 };
+
+export const UsingConnectNulls = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={500}>
+        <ComposedChart
+          width={250}
+          height={250}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <Customized component={<Polygon {...args} />} />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    points: [{ x: 50, y: 50 }, { x: 0, y: 100 }, { x: 0, y: 200 }, { x: 100, y: 200 }, { x: 100, y: 100 }, null],
+    stroke: '#000',
+    fill: 'red',
+    connectNulls: true,
+  },
+};
+
+export const UsingBaselinePoints = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={500}>
+        <ComposedChart
+          width={250}
+          height={250}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <Customized component={<Polygon {...args} />} />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    points: [
+      { x: 40, y: 20 },
+      { x: 60, y: 20 },
+      { x: 60, y: 60 },
+      { x: 70, y: 60 },
+      { x: 50, y: 90 },
+      { x: 30, y: 60 },
+      { x: 40, y: 60 },
+    ],
+    baseLinePoints: [
+      { x: 15, y: 95 },
+      { x: 85, y: 95 },
+    ],
+    stroke: '#000',
+    fill: 'red',
+    connectNulls: false,
+  },
+};