carbon-react 106.6.6 → 106.6.9

package/esm/components/duelling-picklist/duelling-picklist-test.stories.js

@@ -1,539 +0,0 @@
-import React, { useState, useCallback, useMemo } from "react";
-import { DuellingPicklist, Picklist, PicklistItem, PicklistDivider, PicklistPlaceholder, PicklistGroup } from ".";
-import Dialog from "../dialog/dialog.component";
-import Search from "../search";
-import { Checkbox } from "../checkbox";
-import Box from "../box";
-import Button from "../button";
-import Typography from "../typography";
-export default {
-  title: "DuellingPicklist/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: true
-    }
-  }
-};
-export const Default = () => {
-  const mockData = useMemo(() => {
-    const arr = [];
-
-    for (let i = 0; i < 20; i++) {
-      const data = {
-        key: i.toString(),
-        title: `Content ${i + 1}`,
-        description: `Description ${i + 1}`
-      };
-      arr.push(data);
-    }
-
-    return arr;
-  }, []);
-  const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {});
-  }, [mockData]);
-  const [isEachItemSelected, setIsEachItemSelected] = useState(false);
-  const [order] = useState(mockData.map(({
-    key
-  }) => key));
-  const [notSelectedItems, setNotSelectedItems] = useState(allItems);
-  const [notSelectedSearch, setNotSelectedSearch] = useState({});
-  const [selectedItems, setSelectedItems] = useState({});
-  const [searchQuery, setSearchQuery] = useState("");
-  const isSearchMode = Boolean(searchQuery.length);
-  const onAdd = useCallback(item => {
-    const {
-      [item.key]: removed,
-      ...rest
-    } = notSelectedItems;
-    setNotSelectedItems(rest);
-    setSelectedItems({ ...selectedItems,
-      [item.key]: item
-    });
-    const {
-      [item.key]: removed2,
-      ...rest2
-    } = notSelectedSearch;
-    setNotSelectedSearch(rest2);
-  }, [notSelectedItems, notSelectedSearch, selectedItems]);
-  const onRemove = useCallback(item => {
-    const {
-      [item.key]: removed,
-      ...rest
-    } = selectedItems;
-    setSelectedItems(rest);
-    setNotSelectedItems({ ...notSelectedItems,
-      [item.key]: item
-    });
-
-    if (isSearchMode && item.title.includes(searchQuery)) {
-      setNotSelectedSearch({ ...notSelectedSearch,
-        [item.key]: item
-      });
-    }
-  }, [isSearchMode, notSelectedItems, notSelectedSearch, searchQuery, selectedItems]);
-  const handleSearch = useCallback(ev => {
-    setSearchQuery(ev.target.value);
-    const tempNotSelectedItems = Object.keys(notSelectedItems).reduce((items, key) => {
-      const item = notSelectedItems[key];
-
-      if (item.title.includes(ev.target.value)) {
-        items[item.key] = item;
-      }
-
-      return items;
-    }, {});
-    setNotSelectedSearch(tempNotSelectedItems);
-  }, [notSelectedItems]);
-
-  const renderItems = (list, type, handler) => order.reduce((items, key) => {
-    const item = list[key];
-
-    if (item) {
-      items.push( /*#__PURE__*/React.createElement(PicklistItem, {
-        key: key,
-        type: type,
-        item: item,
-        onChange: handler
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "flex",
-          width: "100%"
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: "50%"
-        }
-      }, /*#__PURE__*/React.createElement("p", {
-        style: {
-          fontWeight: 700,
-          margin: 0,
-          marginLeft: 24
-        }
-      }, item.title)), /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: "50%"
-        }
-      }, /*#__PURE__*/React.createElement("p", {
-        style: {
-          margin: 0
-        }
-      }, item.description)))));
-    }
-
-    return items;
-  }, []);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: () => setIsEachItemSelected(!isEachItemSelected),
-    checked: isEachItemSelected,
-    label: "Example checkbox"
-  }), /*#__PURE__*/React.createElement(DuellingPicklist, {
-    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
-    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
-    leftControls: /*#__PURE__*/React.createElement(Search, {
-      tabIndex: isEachItemSelected ? -1 : 0,
-      placeholder: "Search",
-      name: "search_name",
-      onChange: handleSearch,
-      value: searchQuery,
-      id: "search_id"
-    }),
-    disabled: isEachItemSelected
-  }, /*#__PURE__*/React.createElement(Picklist, {
-    disabled: isEachItemSelected,
-    placeholder: /*#__PURE__*/React.createElement("div", null, "Your own placeholder")
-  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/React.createElement(PicklistDivider, null), /*#__PURE__*/React.createElement(Picklist, {
-    disabled: isEachItemSelected,
-    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
-      text: "Nothing to see here"
-    })
-  }, renderItems(selectedItems, "remove", onRemove))));
-};
-export const AlternativeSearch = () => {
-  const mockData = useMemo(() => {
-    const arr = [];
-
-    for (let i = 0; i < 20; i++) {
-      const data = {
-        key: i.toString(),
-        title: `Content ${i + 1}`,
-        description: `Description ${i + 1}`
-      };
-      arr.push(data);
-    }
-
-    return arr;
-  }, []);
-  const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {});
-  }, [mockData]);
-  const [isEachItemSelected, setIsEachItemSelected] = useState(false);
-  const [order] = useState(mockData.map(({
-    key
-  }) => key));
-  const [notSelectedItems, setNotSelectedItems] = useState(allItems);
-  const [notSelectedSearch, setNotSelectedSearch] = useState({});
-  const [selectedItems, setSelectedItems] = useState({});
-  const [searchQuery, setSearchQuery] = useState("");
-  const isSearchMode = Boolean(searchQuery.length);
-  const onAdd = useCallback(item => {
-    const {
-      [item.key]: removed,
-      ...rest
-    } = notSelectedItems;
-    setNotSelectedItems(rest);
-    setSelectedItems({ ...selectedItems,
-      [item.key]: item
-    });
-    const {
-      [item.key]: removed2,
-      ...rest2
-    } = notSelectedSearch;
-    setNotSelectedSearch(rest2);
-  }, [notSelectedItems, notSelectedSearch, selectedItems]);
-  const onRemove = useCallback(item => {
-    const {
-      [item.key]: removed,
-      ...rest
-    } = selectedItems;
-    setSelectedItems(rest);
-    setNotSelectedItems({ ...notSelectedItems,
-      [item.key]: item
-    });
-
-    if (isSearchMode && item.title.includes(searchQuery)) {
-      setNotSelectedSearch({ ...notSelectedSearch,
-        [item.key]: item
-      });
-    }
-  }, [isSearchMode, notSelectedItems, notSelectedSearch, searchQuery, selectedItems]);
-  const handleSearch = useCallback(ev => {
-    setSearchQuery(ev.target.value);
-    const tempNotSelectedItems = Object.keys(notSelectedItems).reduce((items, key) => {
-      const item = notSelectedItems[key];
-
-      if (item.title.includes(ev.target.value)) {
-        items[item.key] = item;
-      }
-
-      return items;
-    }, {});
-    setNotSelectedSearch(tempNotSelectedItems);
-  }, [notSelectedItems]);
-
-  const renderItems = (list, type, handler) => order.reduce((items, key) => {
-    const item = list[key];
-
-    if (item) {
-      items.push( /*#__PURE__*/React.createElement(PicklistItem, {
-        key: key,
-        type: type,
-        item: item,
-        onChange: handler
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "flex",
-          width: "100%"
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: "50%"
-        }
-      }, /*#__PURE__*/React.createElement("p", {
-        style: {
-          fontWeight: 700,
-          margin: 0,
-          marginLeft: 24
-        }
-      }, item.title)), /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: "50%"
-        }
-      }, /*#__PURE__*/React.createElement("p", {
-        style: {
-          margin: 0
-        }
-      }, item.description)))));
-    }
-
-    return items;
-  }, []);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: () => setIsEachItemSelected(!isEachItemSelected),
-    checked: isEachItemSelected,
-    label: "Example checkbox"
-  }), /*#__PURE__*/React.createElement(Box, {
-    width: "calc(50% + 80px)"
-  }, /*#__PURE__*/React.createElement(Search, {
-    tabIndex: isEachItemSelected ? -1 : 0,
-    placeholder: "Search",
-    name: "search_name",
-    onChange: handleSearch,
-    value: searchQuery,
-    id: "search_id"
-  }))), /*#__PURE__*/React.createElement(DuellingPicklist, {
-    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
-    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
-    disabled: isEachItemSelected
-  }, /*#__PURE__*/React.createElement(Picklist, {
-    disabled: isEachItemSelected,
-    placeholder: /*#__PURE__*/React.createElement("div", null, "Your own placeholder")
-  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/React.createElement(Picklist, {
-    disabled: isEachItemSelected,
-    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
-      text: "Nothing to see here"
-    })
-  }, renderItems(selectedItems, "remove", onRemove))));
-};
-export const Grouped = () => {
-  const mockData = {
-    groupA: [{
-      key: 1,
-      title: "Content 1"
-    }, {
-      key: 2,
-      title: "Content 2"
-    }, {
-      key: 3,
-      title: "Content 3"
-    }],
-    groupB: [{
-      key: 4,
-      title: "Content 4"
-    }],
-    groupC: [{
-      key: 5,
-      title: "Content 5"
-    }, {
-      key: 6,
-      title: "Content 6"
-    }]
-  };
-  const [notSelectedItems, setNotSelectedItems] = useState(mockData);
-  const [selectedItems, setSelectedItems] = useState({});
-  const getItemGroup = useCallback(item => {
-    let group;
-
-    for (const [key, value] of Object.entries(mockData)) {
-      if (value.filter(data => data.key === item.key).length > 0) group = key;
-    }
-
-    return group;
-  }, [mockData]);
-  const onAdd = useCallback(item => {
-    const itemGroup = getItemGroup(item);
-    const {
-      [itemGroup]: group,
-      ...rest
-    } = notSelectedItems;
-    const itemIndex = group.indexOf(item);
-    group.splice(itemIndex, 1);
-
-    if (group.length > 0) {
-      setNotSelectedItems({ ...rest,
-        [itemGroup]: group
-      });
-    } else {
-      setNotSelectedItems({ ...rest
-      });
-    }
-
-    if (selectedItems[itemGroup]) {
-      setSelectedItems({ ...selectedItems,
-        [itemGroup]: [...selectedItems[itemGroup], item]
-      });
-    } else {
-      setSelectedItems({ ...selectedItems,
-        [itemGroup]: [item]
-      });
-    }
-  }, [notSelectedItems, selectedItems, getItemGroup]);
-  const onRemove = useCallback(item => {
-    const itemGroup = getItemGroup(item);
-    const {
-      [itemGroup]: group,
-      ...rest
-    } = selectedItems;
-    const itemIndex = group.indexOf(item);
-    group.splice(itemIndex, 1);
-
-    if (group.length > 0) {
-      setSelectedItems({ ...rest,
-        [itemGroup]: group
-      });
-    } else {
-      setSelectedItems({ ...rest
-      });
-    }
-
-    if (notSelectedItems[itemGroup]) {
-      setNotSelectedItems({ ...notSelectedItems,
-        [itemGroup]: [...notSelectedItems[itemGroup], item]
-      });
-    } else {
-      setNotSelectedItems({ ...notSelectedItems,
-        [itemGroup]: [item]
-      });
-    }
-  }, [notSelectedItems, selectedItems, getItemGroup]);
-  const addGroup = useCallback(group => {
-    const {
-      [group]: removed,
-      ...rest
-    } = notSelectedItems;
-    setNotSelectedItems(rest);
-    setSelectedItems({ ...selectedItems,
-      [group]: mockData[group]
-    });
-  }, [mockData, notSelectedItems, selectedItems]);
-  const removeGroup = useCallback(group => {
-    const {
-      [group]: removed,
-      ...rest
-    } = selectedItems;
-    setSelectedItems(rest);
-    setNotSelectedItems({ ...notSelectedItems,
-      [group]: mockData[group]
-    });
-  }, [mockData, notSelectedItems, selectedItems]);
-
-  const renderItems = (list, type, handler) => {
-    if (!list) return null;
-    list.sort((a, b) => a.key - b.key);
-    return list.map(item => {
-      return /*#__PURE__*/React.createElement(PicklistItem, {
-        key: item.key,
-        type: type,
-        item: item,
-        onChange: handler
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "flex",
-          width: "100%"
-        }
-      }, /*#__PURE__*/React.createElement("p", {
-        style: {
-          fontWeight: 700,
-          margin: 0,
-          marginLeft: 24
-        }
-      }, item.title)));
-    });
-  };
-
-  const getTotalItems = items => {
-    let total = 0;
-    const groups = Object.values(items);
-    groups.forEach(item => {
-      total += item.length;
-    });
-    return total;
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DuellingPicklist, {
-    leftLabel: `List 1 (${getTotalItems(notSelectedItems)})`,
-    rightLabel: `List 2 (${getTotalItems(selectedItems)})`
-  }, /*#__PURE__*/React.createElement(Picklist, {
-    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
-      text: "Nothing to see here"
-    })
-  }, notSelectedItems.groupA && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group A"),
-    type: "add",
-    onChange: () => addGroup("groupA")
-  }, renderItems(notSelectedItems.groupA, "add", onAdd)), notSelectedItems.groupB && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group B"),
-    type: "add",
-    onChange: () => addGroup("groupB")
-  }, renderItems(notSelectedItems.groupB, "add", onAdd)), notSelectedItems.groupC && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group C"),
-    type: "add",
-    onChange: () => addGroup("groupC")
-  }, renderItems(notSelectedItems.groupC, "add", onAdd))), /*#__PURE__*/React.createElement(PicklistDivider, null), /*#__PURE__*/React.createElement(Picklist, {
-    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
-      text: "Nothing to see here"
-    })
-  }, selectedItems.groupA && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group A"),
-    type: "remove",
-    onChange: () => removeGroup("groupA")
-  }, renderItems(selectedItems.groupA, "remove", onRemove)), selectedItems.groupB && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group B"),
-    type: "remove",
-    onChange: () => removeGroup("groupB")
-  }, renderItems(selectedItems.groupB, "remove", onRemove)), selectedItems.groupC && /*#__PURE__*/React.createElement(PicklistGroup, {
-    title: /*#__PURE__*/React.createElement(Typography, {
-      variant: "b"
-    }, "Group C"),
-    type: "remove",
-    onChange: () => removeGroup("groupC")
-  }, renderItems(selectedItems.groupC, "remove", onRemove)))));
-};
-export const InDialog = () => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setIsDialogOpen(true)
-  }, "Open Duelling Picklist"), /*#__PURE__*/React.createElement(Dialog, {
-    open: isDialogOpen,
-    onCancel: () => setIsDialogOpen(false),
-    title: "Duelling Picklist",
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Default, null)));
-};
-Default.story = {
-  name: "default",
-  parameters: {
-    chromatic: {
-      disable: false
-    }
-  }
-};
-AlternativeSearch.story = {
-  name: "alternative search placement",
-  parameters: {
-    chromatic: {
-      disable: false
-    }
-  }
-};
-Grouped.story = {
-  name: "grouped",
-  parameters: {
-    chromatic: {
-      disable: false
-    }
-  }
-};
-InDialog.story = {
-  name: "in dialog",
-  parameters: {
-    chromatic: {
-      disable: true
-    }
-  }
-};

package/esm/components/menu/menu-test.stories.js

@@ -1,109 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState } from "react";
-import { action } from "@storybook/addon-actions";
-import { Menu } from ".";
-import MenuItem from "./menu-item";
-import MenuFullscreen from "./menu-full-screen";
-import Search from "../search";
-export default {
-  title: "Menu/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: false
-    }
-  },
-  argTypes: {
-    menuType: {
-      options: ["light", "dark"],
-      control: {
-        type: "select"
-      }
-    },
-    startPosition: {
-      options: ["left", "right"],
-      control: {
-        type: "select"
-      }
-    },
-    searchVariant: {
-      options: ["default", "dark"],
-      control: {
-        type: "select"
-      }
-    },
-    searchButton: {
-      options: [true, false],
-      control: {
-        type: "boolean"
-      }
-    }
-  }
-};
-export const MenuFullScreenStory = ({
-  menuType,
-  startPosition,
-  searchVariant,
-  searchButton
-}) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const onClose = evt => {
-    setIsOpen(false);
-    action("close icon clicked")(evt);
-  };
-
-  const handleOpen = () => {
-    setIsOpen(true);
-    action("open")();
-  };
-
-  return /*#__PURE__*/React.createElement(Menu, {
-    menuType: menuType
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    onClick: handleOpen
-  }, "Menu"), /*#__PURE__*/React.createElement(MenuFullscreen, {
-    startPosition: startPosition,
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Menu Item One"), /*#__PURE__*/React.createElement(MenuItem, {
-    onClick: evt => action("submenu item clicked")(evt),
-    submenu: "Menu Item Two"
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Submenu Item One"), /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Submenu Item Two")), /*#__PURE__*/React.createElement(MenuItem, {
-    variant: "alternate"
-  }, /*#__PURE__*/React.createElement(Search, {
-    placeholder: "Search...",
-    variant: searchVariant,
-    defaultValue: "",
-    searchButton: searchButton
-  })), /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Menu Item Three"), /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Menu Item Four"), /*#__PURE__*/React.createElement(MenuItem, {
-    submenu: "Menu Item Five"
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Submenu Item One"), /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Submenu Item Two")), /*#__PURE__*/React.createElement(MenuItem, {
-    href: "#"
-  }, "Menu Item Six")));
-};
-MenuFullScreenStory.story = {
-  name: "fullscreen menu",
-  args: {
-    menuType: "light",
-    startPosition: "left",
-    searchVariant: "default",
-    searchButton: true
-  }
-};

package/esm/components/multi-action-button/multi-action-button.d.ts

@@ -1,10 +0,0 @@
-import { SplitButtonProps } from "../split-button";
-
-export interface MultiActionButtonProps extends SplitButtonProps {
-  /** Button type: "primary" | "secondary" | "tertiary" */
-  buttonType?: "primary" | "secondary" | "tertiary";
-}
-
-declare function MultiActionButton(props: MultiActionButtonProps): JSX.Element;
-
-export default MultiActionButton;

package/esm/components/profile/profile-test.stories.js

@@ -1,55 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/* eslint-disable react/prop-types */
-import React from "react";
-import specialCharacters, { email as testEmail } from "../../../.storybook/utils/argTypes/specialCharacters";
-import Profile from "./profile.component";
-import { PROFILE_SIZES } from "./profile.config";
-export default {
-  title: "Profile/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: true
-    }
-  },
-  argTypes: {
-    size: {
-      control: {
-        type: "select",
-        options: PROFILE_SIZES
-      }
-    },
-    emailSpecialCharacters: {
-      options: [...specialCharacters.options, ...testEmail.options],
-      mapping: { ...specialCharacters.mapping,
-        ...testEmail.mapping
-      }
-    },
-    nameSpecialCharacters: specialCharacters
-  }
-};
-export const DefaultStory = ({
-  email,
-  emailSpecialCharacters,
-  name,
-  nameSpecialCharacters,
-  ...args
-}) => /*#__PURE__*/React.createElement(Profile, _extends({
-  email: email || emailSpecialCharacters,
-  name: name || nameSpecialCharacters
-}, args));
-DefaultStory.story = {
-  name: "default",
-  args: {
-    email: "johnsmith@sage.com",
-    initials: "JS",
-    size: PROFILE_SIZES[0],
-    name: "John Smith",
-    src: "",
-    emailSpecialCharacters: undefined,
-    nameSpecialCharacters: undefined
-  }
-};