docs: refactored the dropdownable component story issue number #1004 (#…

…1047)

* docs: refactored the dropdownable component story issue number #1004

* docs: fix frozen screen issue

packages/dropdownable/stories/Dropdownable.stories.tsx

@@ -1,9 +1,21 @@
 import * as React from "react";
+import { css } from "@emotion/css";
 import { StoryFn, Meta } from "@storybook/react";
+import styled from "@emotion/styled";
 
-import Dropdownable from "../components/Dropdownable";
-import DropdownStory from "./helpers/DropdownStory";
-import DropdownStoryFit from "./helpers/DropdownStoryFit";
+import Dropdownable, { Direction } from "../components/Dropdownable";
+import { PrimaryButton, SecondaryButton } from "../../button";
+import {
+ themeBgPrimary,
+ themeBorder
+} from "../../design-tokens/build/js/designTokens";
+
+const DropdownContentContainer = styled.div`
+ min-width: 250px;
+ border: 1px solid ${themeBorder};
+ background-color: ${themeBgPrimary};
+ padding: 5px;
+`;
 
 export default {
  title: "Utils/Dropdownable",
@@ -30,21 +42,106 @@ export default {
  }
 } as Meta;
 
-const Template: StoryFn = args => (
- <DropdownStory {...args}>
- Change dropdown orientation using Controls
- </DropdownStory>
-);
+const Template: StoryFn = args => {
+ const [isShowing, setIsShowing] = React.useState(false);
+ const { preferredDirections } = args;
+ function toggle(
+ event?: React.SyntheticEvent<HTMLElement, Event> | undefined
+ ) {
+ event?.preventDefault();
+ setIsShowing(!isShowing);
+ event?.stopPropagation();
+ }
+ const containerStyle = css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ `;
+
+ return (
+ <div className={containerStyle}>
+ <Dropdownable
+ isOpen={isShowing}
+ onClose={toggle}
+ preferredDirections={preferredDirections}
+ dropdown={
+ <DropdownContentContainer>
+ <p>Positioned relative to children.</p>
+ <p>Click outside to dismiss.</p>
+ </DropdownContentContainer>
+ }
+ >
+ <PrimaryButton onClick={event => toggle(event)}>
+ Change dropdown orientation using Controls
+ </PrimaryButton>
+ </Dropdownable>
+ </div>
+ );
+};
+
+const MultipleTemplate: StoryFn = args => {
+ const [isOpen, setIsOpen] = React.useState<boolean>(false);
+ const [expanded, setExpanded] = React.useState<boolean>(false);
+
+ const containerStyle = css({
+ display: "flex",
+ ["align-items"]: "center",
+ ["justify-content"]: "flex-end",
+ ["min-height"]: expanded ? "400px" : "40px"
+ });
+
+ function toggleExpand() {
+ setExpanded(!expanded);
+ }
+
+ function handleClose() {
+ setIsOpen(false);
+ }
+
+ function handleOpen(
+ event?: React.SyntheticEvent<HTMLElement, Event> | undefined
+ ) {
+ event?.preventDefault();
+ setIsOpen(true);
+ event?.stopPropagation();
+ }
+
+ return (
+ <div>
+ <div className={containerStyle}>
+ <Dropdownable
+ isOpen={isOpen}
+ onClose={handleClose}
+ preferredDirections={[Direction.TopRight, Direction.BottomRight]}
+ dropdown={
+ <DropdownContentContainer>
+ <p>I prefer to be positioned on the top</p>
+ <p>Click outside to dismiss</p>
+ <p>Also try resizing</p>
+ <p>Click the other button to make more vertical space</p>
+ <p>Click the other button to make more vertical space</p>
+ <p>Click the other button to make more vertical space</p>
+ <p>Click the other button to make more vertical space</p>
+ <p>Click the other button to make more vertical space</p>
+ </DropdownContentContainer>
+ }
+ >
+ <PrimaryButton onClick={event => handleOpen(event)}>
+ Open the dropdown before and after expanding the height
+ </PrimaryButton>
+ </Dropdownable>
+ </div>
+ <SecondaryButton onClick={toggleExpand}>
+ {expanded ? "Collapse" : "Expand"}
+ </SecondaryButton>
+ </div>
+ );
+};
 
 export const Default = {
  render: Template
 };
 export const WithMultipleDirectionPreferences = {
- render: args => {
- return (
- <DropdownStoryFit {...args}>
- Open the dropdown before and after expanding the height
- </DropdownStoryFit>
- );
- }
+ render: MultipleTemplate
 };