Merge branch 'main' into SHIELD-1195-selectable-search-input-state-up…

…date

.changeset/lovely-ghosts-reflect.md

@@ -0,0 +1,24 @@
+---
+'@commercetools-uikit/dropdown-menu': minor
+'@commercetools-frontend/ui-kit': minor
+---
+
+Added the new DropdownMenu component which allows to display floating panels to be rendered after clicking a triggering element.
+
+Example:
+```jsx
+<DropdownMenu
+  triggerElement={
+    <SecondaryButton label="Filters" iconLeft={<FilterIcon />} />
+  }
+  menuHorizontalConstraint={6}
+  menuPosition="right"
+>
+  <SpacingsStack scale="m">
+    <Text.Body>Store</Text.Body>
+    <CheckboxInput isChecked value="store" onChange={(event) => {}}>
+      Canada (FR)
+    </CheckboxInput>
+  </SpacingsStack>
+</DropdownMenu>
+```

docs/.storybook/decorators/section/section.js

@@ -8,6 +8,7 @@ const Section = (props) => {
       css={css`
         background-color: ${props.backgroundColor || designTokens.colorSurface};
         padding: 16px;
+        text-align: ${props.align || 'left'};
       `}
     >
       {props.children}
@@ -18,6 +19,7 @@ const Section = (props) => {
 Section.propTypes = {
   children: PropTypes.node.isRequired,
   backgroundColor: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'center', 'right']),
 };
 
 export default Section;

package.json

@@ -46,6 +46,7 @@
     "packages/*",
     "packages/components/*",
     "packages/components/buttons/*",
+    "packages/components/dropdowns/*",
     "packages/components/fields/*",
     "packages/components/inputs/*",
     "packages/components/spacings/*",
@@ -58,6 +59,7 @@
       "packages/*",
       "packages/components/*",
       "packages/components/buttons/*",
+      "packages/components/dropdowns/*",
       "packages/components/fields/*",
       "packages/components/inputs/*",
       "packages/components/spacings/*",

packages/components/dropdowns/dropdown-menu/CHANGELOG.md

@@ -0,0 +1 @@
+# @commercetools-uikit/dropdown-menu

packages/components/dropdowns/dropdown-menu/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/components/dropdowns/dropdown-menu/README.md

@@ -0,0 +1,112 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# DropdownMenu
+
+## Description
+
+This component should be used whenever you need to display a floating panel after clicking on an element.
+
+It allows to use any component as the element used to trigger the floating panel.
+
+The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case.
+
+Something to bear in mind is that, when the panel is open, the document scroll is blocked.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/dropdown-menu
+```
+
+```
+npm --save install @commercetools-uikit/dropdown-menu
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import CheckboxInput from '@commercetools-uikit/checkbox-input';
+import DropdownMenu from '@commercetools-uikit/dropdown-menu';
+import IconButton from '@commercetools-uikit/icon-button';
+import SecondaryButton from '@commercetools-uikit/secondary-button';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import Text from '@commercetools-uikit/text';
+import { ColumnsIcon, FilterIcon } from '@commercetools-uikit/icons';
+
+export const ListDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={<IconButton icon={<ColumnsIcon />} label="list" />}
+      menuHorizontalConstraint={6}
+      menuPosition="left"
+      menuType="list"
+    >
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 1
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}} isDisabled>
+        Option 2
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 3
+      </DropdownMenu.ListMenuItem>
+    </DropdownMenu>
+  );
+};
+
+export const CustomDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={
+        <SecondaryButton label="Filters" iconLeft={<FilterIcon />} />
+      }
+      menuHorizontalConstraint={6}
+      menuPosition="right"
+    >
+      <SpacingsStack scale="m">
+        <Text.Body>Store</Text.Body>
+        <CheckboxInput isChecked value="store" onChange={(event) => {}}>
+          Canada (FR)
+        </CheckboxInput>
+      </SpacingsStack>
+    </DropdownMenu>
+  );
+};
+```
+
+## Properties
+
+| Props                      | Type                                                  | Required | Default     | Description                                                                                                                                                             |
+| -------------------------- | ----------------------------------------------------- | :------: | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuPosition`             | `union`<br/>Possible values:<br/>`'left' , 'right'`   |          | `'left'`    | The position of the menu relative to the trigger element.                                                                                                               |
+| `triggerElement`           | `ReactElement`                                        |    ✅    |             | The element that triggers the dropdown.                                                                                                                                 |
+| `menuType`                 | `union`<br/>Possible values:<br/>`'default' , 'list'` |          | `'default'` | The type of the menu.&#xA;The 'default' type just renders a dropdown container but the 'list' type is intended to be used with the DropdownMenu.ListMenuItem component. |
+| `menuHorizontalConstraint` | `TMaxProp`                                            |          | `'auto'`    | The horizontal constraint of the menu.                                                                                                                                  |
+| `children`                 | `ReactNode`                                           |    ✅    |             | The content of the dropdown.                                                                                                                                            |
+
+# Additional info
+
+## ListMenuItem
+
+When using the list floating panel, the `DropdownMenu` component exposes an inner sub-component called `DropdownMenu.ListMenuItem` that should be used to render each item in the list.
+
+Clicking on an item will close the panel and call the `onClick` callback with the item's value.
+
+### Properties
+
+| Props        | Type         | Required | Default | Description                                       |
+| ------------ | ------------ | :------: | ------- | ------------------------------------------------- |
+| `isDisabled` | `boolean`    |          | `false` | Whether the item should be disabled.              |
+| `onClick`    | `() => void` |          |         | A callback to be called when the item is clicked. |
+| `children`   | `string`     |    ✅    |         | The label for the item.                           |

packages/components/dropdowns/dropdown-menu/docs/additional-info.md

@@ -0,0 +1,15 @@
+# Additional info
+
+## ListMenuItem
+
+When using the list floating panel, the `DropdownMenu` component exposes an inner sub-component called `DropdownMenu.ListMenuItem` that should be used to render each item in the list.
+
+Clicking on an item will close the panel and call the `onClick` callback with the item's value.
+
+### Properties
+
+| Props        | Type         | Required | Default | Description                                       |
+| ------------ | ------------ | :------: | ------- | ------------------------------------------------- |
+| `isDisabled` | `boolean`    |          | `false` | Whether the item should be disabled.              |
+| `onClick`    | `() => void` |          |         | A callback to be called when the item is clicked. |
+| `children`   | `string`     |    ✅    |         | The label for the item.                           |

packages/components/dropdowns/dropdown-menu/docs/description.md

@@ -0,0 +1,7 @@
+This component should be used whenever you need to display a floating panel after clicking on an element.
+
+It allows to use any component as the element used to trigger the floating panel.
+
+The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case.
+
+Something to bear in mind is that, when the panel is open, the document scroll is blocked.

packages/components/dropdowns/dropdown-menu/docs/usage-example.js

@@ -0,0 +1,47 @@
+import CheckboxInput from '@commercetools-uikit/checkbox-input';
+import DropdownMenu from '@commercetools-uikit/dropdown-menu';
+import IconButton from '@commercetools-uikit/icon-button';
+import SecondaryButton from '@commercetools-uikit/secondary-button';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import Text from '@commercetools-uikit/text';
+import { ColumnsIcon, FilterIcon } from '@commercetools-uikit/icons';
+
+export const ListDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={<IconButton icon={<ColumnsIcon />} label="list" />}
+      menuHorizontalConstraint={6}
+      menuPosition="left"
+      menuType="list"
+    >
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 1
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}} isDisabled>
+        Option 2
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 3
+      </DropdownMenu.ListMenuItem>
+    </DropdownMenu>
+  );
+};
+
+export const CustomDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={
+        <SecondaryButton label="Filters" iconLeft={<FilterIcon />} />
+      }
+      menuHorizontalConstraint={6}
+      menuPosition="right"
+    >
+      <SpacingsStack scale="m">
+        <Text.Body>Store</Text.Body>
+        <CheckboxInput isChecked value="store" onChange={(event) => {}}>
+          Canada (FR)
+        </CheckboxInput>
+      </SpacingsStack>
+    </DropdownMenu>
+  );
+};

packages/components/dropdowns/dropdown-menu/index.ts

@@ -0,0 +1,6 @@
+// This file exists  because we want jest to use our non-compiled code to run tests
+// if this file is missing, and you have a `module` or `main` that points to a non-existing file
+// (ie, a bundle that hasn't been built yet) then jest will fail if the bundle is not yet built.
+// all apps should export all their named exports from their root index.js
+export { default } from './src';
+export * from './src';

packages/components/dropdowns/dropdown-menu/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@commercetools-uikit/dropdown-menu",
+  "description": "The Dropdown Menu component represents a component that triggers the rendering of a floating menu.",
+  "version": "19.0.0",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/dropdowns/dropdown-menu"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-dropdown-menu.cjs.js",
+  "module": "dist/commercetools-uikit-dropdown-menu.esm.js",
+  "files": ["dist"],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/accessible-button": "19.0.0",
+    "@commercetools-uikit/constraints": "19.0.0",
+    "@commercetools-uikit/design-system": "19.0.0",
+    "@commercetools-uikit/hooks": "19.0.0",
+    "@commercetools-uikit/secondary-button": "19.0.0",
+    "@commercetools-uikit/spacings-inline": "19.0.0",
+    "@commercetools-uikit/spacings-stack": "19.0.0",
+    "@commercetools-uikit/utils": "19.0.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "prop-types": "15.8.1",
+    "react-intl": "^6.3.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}

packages/components/dropdowns/dropdown-menu/src/context/dropdown-menu-context.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react';
+
+export type TDropdownMenuContextProps = {
+  isOpen: boolean;
+  toggle: () => void;
+};
+const DropdownMenuContext = createContext<TDropdownMenuContextProps>({
+  isOpen: false,
+  toggle: () => {},
+});
+
+export function useDropdownMenuContext() {
+  const context = useContext(DropdownMenuContext);
+
+  if (!context) {
+    throw new Error(
+      '[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.'
+    );
+  }
+
+  return {
+    isOpen: context.isOpen,
+    toggle: context.toggle,
+  };
+}
+
+export default DropdownMenuContext;

packages/components/dropdowns/dropdown-menu/src/context/index.ts

@@ -0,0 +1,2 @@
+export { default, useDropdownMenuContext } from './dropdown-menu-context';
+export type { TDropdownMenuContextProps } from './dropdown-menu-context';