feat: pretty filter labels

package.json

@@ -49,6 +49,7 @@
     "packages/components/buttons/*",
     "packages/components/dropdowns/*",
     "packages/components/fields/*",
+    "packages/components/filters/*",
     "packages/components/inputs/*",
     "packages/components/spacings/*",
     "presets/*",
@@ -62,6 +63,7 @@
       "packages/components/buttons/*",
       "packages/components/dropdowns/*",
       "packages/components/fields/*",
+      "packages/components/filters/*",
       "packages/components/inputs/*",
       "packages/components/spacings/*",
       "presets/*"

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

@@ -102,6 +102,7 @@ const defaultProps: Pick<
 const Container = styled.div`
   position: relative;
   display: inline-block;
+  max-width: 100%;
 `;
 
 function DropdownMenu(props: TDropdownMenuProps) {

packages/components/fields/text-field/README.md

@@ -62,13 +62,13 @@ export default Example;
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                                                                                                                                                                    |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                                                                                                                                                          |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                                                                                                                                                                    |
-| `maxLength`            | `number`                                                                                              |          |           | Maximum number of characters allowed in the input field                                                                                                                                                                                                           |
 | `title`                | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |    ✅    |           | Title of the label                                                                                                                                                                                                                                                |
 | `hint`                 | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. |
 | `description`          | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Provides a description for the title.                                                                                                                                                                                                                             |
 | `onInfoButtonClick`    | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |           | Function called when info button is pressed. Info button will only be visible when this prop is passed.                                                                                                                                                           |
 | `hintIcon`             | `ReactElement`                                                                                        |          |           | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.                                                                                                                                                                    |
 | `badge`                | `ReactNode`                                                                                           |          |           | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                       |
+| `maxLength`            | `number`                                                                                              |          |           | Maximum number of characters allowed in the input. if this prop is used, It is recommended to inform the user about this limit in the InputField description, or otherwise                                                                                        |
 
 ## Signatures
 

packages/components/filters/filter-menu/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 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/filters/filter-menu/README.md

@@ -0,0 +1,49 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# FilterMenu
+
+## Description
+
+This component should be used to display an active filter in the `FiltersList`.
+
+It displays each selected filter option in the menu trigger, and allows for selecting options in the menu body.
+
+This description is a stub and should be expanded as development continues.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/filter-menu
+```
+
+```
+npm --save install @commercetools-uikit/filter-menu
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import FilterMenu from '@commercetools-uikit/filter-menu';
+
+/**TODO: EXPAND THIS */
+const Example = () => <FilterMenu />;
+
+export default Example;
+```
+
+## Properties
+
+| Props   | Type     | Required | Default | Description         |
+| ------- | -------- | :------: | ------- | ------------------- |
+| `label` | `string` |          |         | This is a stub prop |

packages/components/filters/filter-menu/docs/description.md

@@ -0,0 +1,5 @@
+This component should be used to display an active filter in the `FiltersList`.
+
+It displays each selected filter option in the menu trigger, and allows for selecting options in the menu body.
+
+This description is a stub and should be expanded as development continues.

packages/components/filters/filter-menu/docs/usage-example.js

@@ -0,0 +1,6 @@
+import FilterMenu from '@commercetools-uikit/filter-menu';
+
+/**TODO: EXPAND THIS */
+const Example = () => <FilterMenu />;
+
+export default Example;

packages/components/filters/filter-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/filters/filter-menu/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@commercetools-uikit/filter-menu",
+  "description": "The `FilterMenu` is the menu that displays the available and selected options for a specific filter in the `FiltersList`.",
+  "version": "19.11.0",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/filters/filter-menu"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-filter-menu.cjs.js",
+  "module": "dist/commercetools-uikit-filter-menu.esm.js",
+  "files": ["dist"],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/design-system": "workspace:^",
+    "@commercetools-uikit/dropdown-menu": "workspace:^",
+    "@commercetools-uikit/icon-button": "workspace:^",
+    "@commercetools-uikit/icons": "workspace:^",
+    "@commercetools-uikit/primary-button": "workspace:^",
+    "@commercetools-uikit/secondary-button": "workspace:^",
+    "@commercetools-uikit/secondary-icon-button": "workspace:^",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@radix-ui/react-popover": "^1.1.1",
+    "prop-types": "15.8.1",
+    "react-intl": "^6.3.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}

packages/components/filters/filter-menu/src/badge/badge.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Badge from './badge';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Badge', () => {
+  it('should render the badge', async () => {
+    await render(<Badge label="badge" />);
+    await screen.findByText('badge');
+  });
+});

packages/components/filters/filter-menu/src/badge/badge.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { designTokens } from '@commercetools-uikit/design-system';
+
+const { fontSize12, colorInfo } = designTokens;
+
+const Badge = styled.span({
+  fontSize: fontSize12,
+  backgroundColor: colorInfo,
+  color: 'white',
+  height: '1.375rem',
+  lineHeight: '1.375rem',
+  borderRadius: '1.25rem',
+  paddingLeft: '.375rem',
+  paddingRight: '.375rem',
+  userSelect: 'none',
+});
+
+export default Badge;

packages/components/filters/filter-menu/src/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from './badge';

packages/components/filters/filter-menu/src/chip/chip.spec.tsx

@@ -0,0 +1,12 @@
+import { screen, render } from '../../../../../../test/test-utils';
+import Chip from './chip';
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu Chip', () => {
+  it('should render the chip', async () => {
+    await render(<Chip label="chip" />);
+    await screen.findByText('chip');
+  });
+});

packages/components/filters/filter-menu/src/chip/chip.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { designTokens } from '@commercetools-uikit/design-system';
+
+const Chip = styled.span({
+  fontSize: designTokens.fontSize20,
+  backgroundColor: designTokens.colorPrimary95,
+  height: '1.5rem',
+  lineHeight: '1.5rem',
+  borderRadius: '1rem',
+  paddingLeft: '.5rem',
+  paddingRight: '.5rem',
+  userSelect: 'none',
+});
+
+export default Chip;

packages/components/filters/filter-menu/src/chip/index.ts

@@ -0,0 +1 @@
+export { default as Chip } from './chip';

packages/components/filters/filter-menu/src/export-types.ts

@@ -0,0 +1 @@
+export type { TFilterMenuProps } from './filter-menu';

packages/components/filters/filter-menu/src/filter-menu.readme.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import ReadMe from './../README.md?raw'
+
+<Meta tags={['local-dev']} title="components/Filters/FilterMenu/Readme" />
+
+<Markdown>{ReadMe}</Markdown>

packages/components/filters/filter-menu/src/filter-menu.spec.tsx

@@ -0,0 +1,21 @@
+import { screen, render } from '../../../../../test/test-utils';
+import FilterMenu from './filter-menu';
+
+const TestFilter = () => <div></div>;
+
+/**
+ * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
+ */
+describe('FilterMenu FilterMenu', () => {
+  it('should render the filter-menu', async () => {
+    await render(
+      <FilterMenu
+        filterKey="testKey"
+        filter={<TestFilter />}
+        label="filter menu"
+        appliedFilterValues={null}
+      />
+    );
+    await screen.findByRole('button', { name: /filter menu/i });
+  });
+});