chore(Dropdown): convert examples to TypeScript

packages/react-core/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-breakpoints');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      alignments={{
+        sm: 'left',
+        md: 'right',
+        lg: 'left',
+        xl: 'right',
+        '2xl': 'left'
+      }}
+      toggle={
+        <DropdownToggle id="toggle-breakpoints" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

packages/react-core/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, Flex } from '@patternfly/react-core';
+
+export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
+  const [isBodyOpen, setIsBodyOpen] = React.useState(false);
+  const [isParentOpen, setIsParentOpen] = React.useState(false);
+
+  const onBodyToggle = (isBodyOpen: boolean) => {
+    setIsBodyOpen(isBodyOpen);
+  };
+  const onParentToggle = (isParentOpen: boolean) => {
+    setIsParentOpen(isParentOpen);
+  };
+
+  const onBodyFocus = () => {
+    const element = document.getElementById('toggle-append-body');
+    element.focus();
+  };
+  const onParentFocus = () => {
+    const element = document.getElementById('toggle-append-parent');
+    element.focus();
+  };
+
+  const onBodySelect = () => {
+    setIsBodyOpen(false);
+    onBodyFocus();
+  };
+  const onParentSelect = () => {
+    setIsParentOpen(false);
+    onParentFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Flex>
+      <Dropdown
+        onSelect={onBodySelect}
+        toggle={
+          <DropdownToggle id="toggle-append-body" onToggle={onBodyToggle}>
+            Dropdown appended to body
+          </DropdownToggle>
+        }
+        isOpen={isBodyOpen}
+        dropdownItems={dropdownItems}
+        menuAppendTo={() => document.body}
+      />
+      <Dropdown
+        onSelect={onParentSelect}
+        toggle={
+          <DropdownToggle id="toggle-append-parent" onToggle={onParentToggle}>
+            Dropdown appended to parent
+          </DropdownToggle>
+        }
+        isOpen={isParentOpen}
+        dropdownItems={dropdownItems}
+        menuAppendTo="parent"
+      />
+    </Flex>
+  );
+};

packages/react-core/src/components/Dropdown/examples/DropdownBadge.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+
+export const DropdownBadge: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-badge');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+      Edit
+    </DropdownItem>,
+    <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+      Deployment
+    </DropdownItem>,
+    <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+      Applications
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <BadgeToggle id="toggle-badge" onToggle={onToggle}>
+          {dropdownItems.length}
+        </BadgeToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownBasic: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-basic');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-basic" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

packages/react-core/src/components/Dropdown/examples/DropdownBasicPanel.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Dropdown, DropdownToggle } from '@patternfly/react-core';
+
+export const DropdownBasicPanel: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-panel');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-panel" onToggle={onToggle}>
+          Expanded dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+    >
+      [Panel contents here]
+    </Dropdown>
+  );
+};

packages/react-core/src/components/Dropdown/examples/DropdownDescriptions.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownDescriptions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-descriptions');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link" description="This is a description" icon={<CubesIcon />}>
+      Link
+    </DropdownItem>,
+    <DropdownItem
+      key="action"
+      component="button"
+      icon={<BellIcon />}
+      description="This is a very long description that describes the menu item"
+    >
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled description="Disabled link description">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button" description="This is a description">
+      Disabled action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-descriptions" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};