feat(kite component): introduces Kite component as translated from pa…

…th lib

README.md

@@ -15,6 +15,7 @@ There are more docs and interactive demos at https://joemaddalone.github.io/reac
     - [Circle](#circle)
     - [Cross](#cross)
     - [Ellipse](#ellipse)
+    - [Kite](#kite)
     - [Lens](#lens)
     - [Line](#line)
     - [Omino](#omino)
@@ -209,6 +210,41 @@ centerEnd|boolean|Determines whether cursor should return to cx & cy as a last s
 </details>
 
 
+-----
+
+### Kite
+
+![](examples/kite.svg)
+
+[→ Interactive demo of Kite](https://joemaddalone.github.io/react-svg-path-docs/#/kite)
+
+```js
+<Kite 
+  centerEnd={boolean|default = true} 
+  cx={number} 
+  cy={number} 
+  dh={number} 
+  height={number} 
+  width={number} 
+/>
+```
+
+<details>
+
+<summary>Props overview</summary>
+
+Prop|Type|Description|Required|Default
+:-|:-|:-|:-|:-
+width|number|Width of the Kite.|true|
+height|number|Height of the Kite.|true|
+dh|number|Vertical position of the left and right points from the top.|true|
+cx|number|Center x coordinate of the Kite.|true|
+cy|number|Center x coordinate of the Kite.|true|
+centerEnd|boolean|Determines whether cursor should return to cx & cy as a last step.|false|true
+
+</details>
+
+
 -----
 
 ### Lens

package.json

@@ -70,7 +70,7 @@
     "dist"
   ],
   "dependencies": {
-    "@joemaddalone/path": "^1.2.3"
+    "@joemaddalone/path": "^1.3.1"
   },
   "config": {
     "commitizen": {

src/components/BasicShapes.js

@@ -14,6 +14,7 @@ const shapes = Object.keys(docs).reduce((accum, cur) => {
 }, {});
 
 export const Circle = shapes.Circle;
+export const Kite = shapes.Kite;
 export const Ellipse = shapes.Ellipse;
 export const Lens = shapes.Lens;
 export const Polygon = shapes.Polygon;

src/components/BasicShapes.test.js

@@ -24,6 +24,7 @@ const BSP = {
   ey: 100,
   width: 100,
   height: 300,
+  dh: 100,
   innerSize: 50,
   outerSize: 100,
   radius: 10,

src/docs/demos.mjs

@@ -25,6 +25,16 @@ const demos = {
         cy: basicSvgDimensions.h / 2
       }
     ],
+    kite: [
+      {
+        svgDimensions: { ...basicSvgDimensions },
+        width: 60,
+        height: 75,
+        dh: 25,
+        cx: basicSvgDimensions.w / 2,
+        cy: basicSvgDimensions.h / 2
+      }
+    ],
     lens: [
       {
         svgDimensions: { ...basicSvgDimensions },

src/docs/docs.mjs

@@ -144,6 +144,34 @@ const docs = {
     nestingProps: centeredShapeNestingProps,
     shorthands: [shorthands.cxy]
   },
+  kite: {
+    category: 'basicShapes',
+    Component: 'Kite',
+    command: 'kite',
+    args: ['width', 'height', 'dh', 'cx', 'cy', 'centerEnd'],
+    description:
+      '.kite is drawn from center point (cx & cy). dh = position of the left & right points from the top of the shape. The cursor is then moved to the center point.',
+    props: {
+      width: {
+        ...commonNumber,
+        description: 'Width of the Kite.'
+      },
+      height: {
+        ...commonNumber,
+        description: 'Height of the Kite.'
+      },
+      dh: {
+        ...commonNumber,
+        description:
+          'Vertical position of the left and right points from the top.'
+      },
+      cx,
+      cy,
+      centerEnd
+    },
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
+  },
   lens: {
     category: 'basicShapes',
     Component: 'Lens',

src/index.js

@@ -4,6 +4,7 @@ import * as shapes from './components/BasicShapes';
 /**  path basicShapes */
 export const Circle = shapes.Circle;
 export const Ellipse = shapes.Ellipse;
+export const Kite = shapes.Kite;
 export const Lens = shapes.Lens;
 export const Polygon = shapes.Polygon;
 export const Polygram = shapes.Polygram;