added toggle highlight and multiple hightlight with clear button func…

…tionality

src/stories/Area.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment, useRef } from 'react';
 import Mapper from './components/Mapper';
 
 const Area = {
@@ -19,7 +19,9 @@ ShowHighlightedArea.argTypes = {
   active: { control: 'boolean' },
 };
 
-export const StaySelectedHighlightedArea = args => <Mapper stayHighlighted={args.stayHighlighted} />;
+export const StaySelectedHighlightedArea = args => (
+  <Mapper stayHighlighted={args.stayHighlighted} />
+);
 
 StaySelectedHighlightedArea.args = {
   stayHighlighted: true,
@@ -29,4 +31,55 @@ StaySelectedHighlightedArea.argTypes = {
   stayHighlighted: { control: 'boolean' },
 };
 
+export const StayMultipleSelectedHighlightedArea = args => {
+  const myRef = useRef(null);
+
+  const callingMe = () => {
+    myRef.current.clearHighlightedArea();
+  };
+
+  return (
+    <Mapper
+      containerRef={myRef}
+      stayMultiHighlighted={args.stayMultiHighlighted}
+      TopComponent={() => (
+        <Fragment>
+          <p>For Clear Multiple Selected Highlight</p>
+          <button type="button" onClick={callingMe}>
+            Clear
+          </button>
+        </Fragment>
+      )}
+    />
+  );
+};
+
+StayMultipleSelectedHighlightedArea.args = {
+  stayMultiHighlighted: true,
+};
+
+StayMultipleSelectedHighlightedArea.argTypes = {
+  stayMultiHighlighted: { control: 'boolean' },
+};
+
+export const ToggleStayHighlightedArea = args => (
+  <Mapper
+    stayHighlighted={args.stayHighlighted}
+    stayMultiHighlighted={args.stayMultiHighlighted}
+    toggleHighlighted={args.toggleHighlighted}
+  />
+);
+
+ToggleStayHighlightedArea.args = {
+  stayHighlighted: true,
+  stayMultiHighlighted: false,
+  toggleHighlighted: true,
+};
+
+ToggleStayHighlightedArea.argTypes = {
+  stayHighlighted: { control: 'boolean' },
+  stayMultiHighlighted: { control: 'boolean' },
+  toggleHighlighted: { control: 'boolean' },
+};
+
 export default Area;