3
zv0E3*RQC-dM*Txht!DILNgR`qxgW^733)gj>lo_1i^-|wJ>ctLp;V!dfnLpfQirTM
gO>Yo`QwLe>pC0`#yh)B1w()Q3YShv7Rc;9W9}8Wk_y7O^
literal 0
HcmV?d00001
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_carbon-imports.scss b/packages/ibm-products-styles/src/components/FilterPanel/_carbon-imports.scss
new file mode 100644
index 0000000000..178afd4773
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_carbon-imports.scss
@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Import any Carbon component styles used from FilterPanel in this file.
+// FilterPanel uses the following Carbon components:
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss
new file mode 100644
index 0000000000..317ddd890a
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss
@@ -0,0 +1,32 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
+$label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+
+// Set Carbon's Checkbox label to 100% the width of its container.
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+ width: 100%;
+}
+
+.#{$block-class} .#{$label}__text {
+ @include type.type-style('body-compact-01');
+}
+
+.#{$block-class} .#{$label}__count {
+ @include type.type-style('label-01');
+}
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss
new file mode 100644
index 0000000000..30f846fd1b
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss
@@ -0,0 +1,47 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+
+.#{$block-class} {
+ display: flex;
+ align-items: center;
+}
+
+.#{$block-class}__text {
+ overflow: hidden;
+ flex: 1 1;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.#{$block-class}__count {
+ margin-left: $spacing-04;
+ color: $text-secondary;
+}
+
+// Surround the value with parentheses.
+.#{$block-class}__count::before {
+ content: '(';
+}
+.#{$block-class}__count::after {
+ content: ')';
+}
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss
new file mode 100644
index 0000000000..f4e1df5933
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss
@@ -0,0 +1,29 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
+
+.#{$block-class}__title {
+ @include type.type-style('body-compact-01');
+
+ margin-top: $spacing-04;
+ margin-bottom: $spacing-04;
+}
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_index-with-carbon.scss b/packages/ibm-products-styles/src/components/FilterPanel/_index-with-carbon.scss
new file mode 100644
index 0000000000..db8f053a65
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_index-with-carbon.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './filter-panel';
+@use './filter-panel-checkbox';
+@use './filter-panel-label';
diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_index.scss b/packages/ibm-products-styles/src/components/FilterPanel/_index.scss
new file mode 100644
index 0000000000..2cc40c8413
--- /dev/null
+++ b/packages/ibm-products-styles/src/components/FilterPanel/_index.scss
@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './filter-panel';
+@use './filter-panel-checkbox';
+@use './filter-panel-label';
diff --git a/packages/ibm-products-styles/src/components/_index-with-carbon.scss b/packages/ibm-products-styles/src/components/_index-with-carbon.scss
index 347f09f811..3cf9234be8 100644
--- a/packages/ibm-products-styles/src/components/_index-with-carbon.scss
+++ b/packages/ibm-products-styles/src/components/_index-with-carbon.scss
@@ -71,3 +71,4 @@
@use './StringFormatter/index-with-carbon' as *;
@use './UserAvatar/index-with-carbon' as *;
@use './StatusIndicator/index-with-carbon' as *;
+@use './FilterPanel/index-with-carbon' as *;
diff --git a/packages/ibm-products-styles/src/components/_index.scss b/packages/ibm-products-styles/src/components/_index.scss
index aeaa505b5e..d776f6d745 100644
--- a/packages/ibm-products-styles/src/components/_index.scss
+++ b/packages/ibm-products-styles/src/components/_index.scss
@@ -79,3 +79,4 @@
@use './StringFormatter';
@use './UserAvatar';
@use './StatusIndicator';
+@use './FilterPanel';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.js b/packages/ibm-products/src/components/FilterPanel/FilterPanel.js
new file mode 100644
index 0000000000..c756b66f44
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanel.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--filter-panel`;
+const componentName = 'FilterPanel';
+
+/**
+ * The container for filter panel subcomponents.
+ */
+export let FilterPanel = React.forwardRef(
+ ({ children, className, title, ...rest }, ref) => {
+ return (
+
+ {title && {title}
}
+ {children}
+
+ );
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanel = pkg.checkComponentEnabled(FilterPanel, componentName);
+
+FilterPanel.displayName = componentName;
+
+FilterPanel.propTypes = {
+ /**
+ * Provide the contents of the FilterPanel.
+ */
+ children: PropTypes.node,
+
+ /**
+ * Provide an optional class to be applied to the containing node.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Title text for the filter panel.
+ */
+ title: PropTypes.node,
+};
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.mdx b/packages/ibm-products/src/components/FilterPanel/FilterPanel.mdx
new file mode 100644
index 0000000000..a6f90ae77a
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanel.mdx
@@ -0,0 +1,27 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
+import { FilterPanel } from '.';
+import * as FilterPanelStories from './FilterPanel.stories';
+
+# FilterPanel
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Example usage](#example-usage)
+- [Component API](#component-api)
+
+## Overview
+
+The `FilterPanel` allows for an optional title, and acts as the container for
+its subcomponents.
+
+## Example usage
+
+
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.stories.js b/packages/ibm-products/src/components/FilterPanel/FilterPanel.stories.js
new file mode 100644
index 0000000000..8c495baa31
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanel.stories.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import uuidv4 from '../../global/js/utils/uuidv4';
+
+import { FilterPanel, FilterPanelCheckbox } from '.';
+import mdx from './FilterPanel.mdx';
+
+import styles from './_storybook-styles.scss';
+
+const storyClass = 'filter-panel-stories';
+
+export default {
+ title: 'IBM Products/Components/Filter panel/Filter Panel',
+ component: FilterPanel,
+ tags: ['autodocs'],
+ parameters: {
+ styles,
+ docs: {
+ page: mdx,
+ },
+ },
+ argTypes: {
+ children: { control: { type: {} } },
+ className: { control: { type: {} } },
+ title: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'No title',
+ 1: 'Plain text',
+ 2: 'Using markup',
+ },
+ },
+ mapping: {
+ 0: null,
+ 1: 'Filter panel title',
+ 2: (
+ <>
+ Filter panel title
+
+ ),
+ },
+ options: [0, 1, 2],
+ },
+ },
+ args: {
+ title: 1,
+ },
+};
+
+const Template = (args) => {
+ return (
+
+
+
+ action('FilterPanelCheckbox onChange')(checked, id, event)
+ }
+ />
+
+ action('FilterPanelCheckbox onChange')(checked, id, event)
+ }
+ />
+
+ action('FilterPanelCheckbox onChange')(checked, id, event)
+ }
+ />
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.storyName = 'Filter Panel';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.test.js b/packages/ibm-products/src/components/FilterPanel/FilterPanel.test.js
new file mode 100644
index 0000000000..978883bf31
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanel.test.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { pkg } from '../../settings';
+import uuidv4 from '../../global/js/utils/uuidv4';
+
+import { FilterPanel } from '.';
+
+const blockClass = `${pkg.prefix}--filter-panel`;
+const componentName = FilterPanel.displayName;
+
+// values to use
+const children = `hello, world (${uuidv4()})`;
+const className = `class-${uuidv4()}`;
+const dataTestId = uuidv4();
+
+const renderComponent = ({ ...rest } = {}) =>
+ render();
+
+describe(componentName, () => {
+ it('renders a component FilterPanel', async () => {
+ renderComponent();
+ expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
+ });
+
+ it('has no accessibility violations', async () => {
+ const { container } = renderComponent();
+ expect(container).toBeAccessible(componentName);
+ expect(container).toHaveNoAxeViolations();
+ });
+
+ it(`renders children`, async () => {
+ renderComponent({ children: children });
+ expect(screen.getByText(children)).toBeInTheDocument();
+ });
+
+ it('applies className to the containing node', async () => {
+ renderComponent({ className: className });
+ expect(screen.getByTestId(dataTestId)).toHaveClass(className);
+ });
+
+ it('forwards a ref to an appropriate node', async () => {
+ const ref = React.createRef();
+ renderComponent({ className: className, ref: ref });
+ expect(ref.current).toHaveClass(blockClass);
+ });
+});
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js
new file mode 100644
index 0000000000..1e2cb0a192
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Checkbox } from '@carbon/react';
+import { FilterPanelLabel } from '../FilterPanelLabel';
+
+import { getDevtoolsProps } from '../../../global/js/utils/devtools';
+import { pkg } from '../../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--filter-panel-checkbox`;
+const componentName = 'FilterPanelCheckbox';
+
+/**
+ * Provides a checkbox, label, and count.
+ */
+export let FilterPanelCheckbox = React.forwardRef(
+ ({ className, count, labelText, title, ...rest }, ref) => {
+ return (
+
+ }
+ ref={ref}
+ {...getDevtoolsProps(componentName)}
+ />
+ );
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanelCheckbox = pkg.checkComponentEnabled(
+ FilterPanelCheckbox,
+ componentName
+);
+
+FilterPanelCheckbox.displayName = componentName;
+
+FilterPanelCheckbox.propTypes = {
+ /**
+ * IMPORTANT NOTE
+ *
+ * This component is returning Carbon's Checkbox.
+ *
+ * All of Carbon Checkbox's props are directly available
+ * through "...rest", including id, onClick, etc.
+ */
+
+ /**
+ * Optional class to be applied to the containing node.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Number to be displayed with the checkbox.
+ */
+ count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /**
+ * Unique identifier.
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * Label to be displayed with the checkbox.
+ */
+ labelText: PropTypes.node.isRequired,
+
+ /**
+ * Optional title attribute for the label.
+ */
+ title: PropTypes.string,
+};
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.mdx b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.mdx
new file mode 100644
index 0000000000..9376c6ff91
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.mdx
@@ -0,0 +1,22 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { CodesandboxLink } from '../../../global/js/utils/story-helper';
+import { FilterPanelCheckbox } from '.';
+import * as FilterPanelCheckboxStories from './FilterPanelCheckbox.stories';
+
+# FilterPanelCheckbox
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Example usage](#example-usage)
+- [Component API](#component-api)
+
+## Example usage
+
+
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.stories.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.stories.js
new file mode 100644
index 0000000000..766770739b
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.stories.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import uuidv4 from '../../../global/js/utils/uuidv4';
+
+import { FilterPanel, FilterPanelCheckbox } from '..';
+import mdx from './FilterPanelCheckbox.mdx';
+
+import styles from '../_storybook-styles.scss';
+
+const storyClass = 'filter-panel-stories';
+
+export default {
+ title: 'IBM Products/Components/Filter panel/Filter Panel Checkbox',
+ component: FilterPanelCheckbox,
+ tags: ['autodocs'],
+ argTypes: {
+ className: { control: { type: {} } },
+ id: { table: { disable: true } },
+ onChange: { table: { disable: true } },
+ count: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'As number: 10',
+ 1: 'As string: "1,500"',
+ },
+ },
+ mapping: {
+ 0: 10,
+ 1: '1,500',
+ },
+ options: [0, 1],
+ },
+ labelText: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'Plain text',
+ 1: 'Very long text',
+ 2: 'Using markup',
+ },
+ },
+ mapping: {
+ 0: 'Label',
+ 1: 'Really, really long label name',
+ 2: (
+ <>
+ Formatted label
+
+ ),
+ },
+ options: [0, 1, 2],
+ },
+ },
+ args: {
+ count: 0,
+ labelText: 0,
+ // Pass-through prop: Carbon's Checkbox onChange handler.
+ onChange: (event, { checked, id }) =>
+ action('FilterPanelCheckbox onChange')(checked, id, event),
+ },
+ parameters: {
+ styles,
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+const Template = (args) => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.storyName = 'Filter Panel Checkbox';
+Default.args = {
+ id: uuidv4(),
+ title: '',
+};
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.test.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.test.js
new file mode 100644
index 0000000000..06a9b2fb5f
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.test.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { pkg } from '../../../settings';
+import uuidv4 from '../../../global/js/utils/uuidv4';
+
+import { FilterPanelCheckbox } from '.';
+
+const blockClass = `${pkg.prefix}--filter-panel-checkbox`;
+const componentName = FilterPanelCheckbox.displayName;
+
+// values to use
+const className = `class-${uuidv4()}`;
+const dataTestId = uuidv4();
+const id = uuidv4();
+const labelText = `hello, world (${uuidv4()})`;
+
+const renderComponent = ({ ...rest } = {}) =>
+ render(
+
+ );
+
+describe(componentName, () => {
+ it('renders a component FilterPanelCheckbox', async () => {
+ const { container } = renderComponent();
+
+ // NOTE
+ // FilterPanelCheckbox returns the Carbon Checkbox directly.
+ // Carbon Checkbox renders and applies props as:
+ //
+ //
+ //
+
+ // Test wrapper div exists.
+ expect(container.querySelector(`.${blockClass}`)).toBeInTheDocument();
+ // Test checkbox exists.
+ expect(screen.getByRole('checkbox')).toBeInTheDocument();
+ });
+
+ it('has no accessibility violations', async () => {
+ const { container } = renderComponent();
+ expect(container).toBeAccessible(componentName);
+ expect(container).toHaveNoAxeViolations();
+ });
+
+ it('applies className to the containing node', async () => {
+ const { container } = renderComponent({ className: className });
+ expect(container.querySelector(`.${blockClass}`)).toHaveClass(className);
+ });
+
+ it('adds additional props to the containing node', async () => {
+ renderComponent({ 'data-testid': dataTestId });
+ screen.getByTestId(dataTestId);
+ });
+
+ it('forwards a ref to an appropriate node', async () => {
+ const ref = React.createRef();
+ renderComponent({ ref: ref });
+ expect(ref.current).toBeInTheDocument();
+ });
+
+ it('adds the Devtools attribute to the containing node', async () => {
+ renderComponent({ 'data-testid': dataTestId });
+ expect(screen.getByTestId(dataTestId)).toHaveDevtoolsAttribute(
+ componentName
+ );
+ });
+});
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js
new file mode 100644
index 0000000000..234c92987f
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FilterPanelCheckbox } from './FilterPanelCheckbox';
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js
new file mode 100644
index 0000000000..c718fe5879
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../../global/js/utils/devtools';
+import { pkg } from '../../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--filter-panel-label`;
+const componentName = 'FilterPanelLabel';
+
+/**
+ * A container with a label and optional count.
+ */
+export let FilterPanelLabel = React.forwardRef(
+ ({ className, count, labelText, title, ...rest }, ref) => {
+ return (
+
+
+ {labelText}
+
+
+ {count}
+
+ );
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanelLabel = pkg.checkComponentEnabled(FilterPanelLabel, componentName);
+
+FilterPanelLabel.displayName = componentName;
+
+FilterPanelLabel.propTypes = {
+ /**
+ * Optional class to be applied to the containing node.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Number to be displayed with the label.
+ */
+ count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /**
+ * The label for the component.
+ */
+ labelText: PropTypes.node.isRequired,
+
+ /**
+ * Optional title attribute for the label.
+ */
+ title: PropTypes.string,
+};
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.mdx b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.mdx
new file mode 100644
index 0000000000..753b27cb62
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.mdx
@@ -0,0 +1,24 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { CodesandboxLink } from '../../../global/js/utils/story-helper';
+import { FilterPanelLabel } from '.';
+import * as FilterPanelLabelStories from './FilterPanelLabel.stories';
+
+# FilterPanelLabel
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Example usage](#example-usage)
+- [Component API](#component-api)
+
+## Overview
+
+`FilterPanelLabel` _**is for internal use only by the FilterPanel.**_
+
+
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.stories.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.stories.js
new file mode 100644
index 0000000000..781d452cd6
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.stories.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { FilterPanel, FilterPanelLabel } from '..';
+import mdx from './FilterPanelLabel.mdx';
+
+import styles from '../_storybook-styles.scss';
+
+const storyClass = 'filter-panel-stories';
+
+export default {
+ title: 'IBM Products/Internal/FilterPanelLabel',
+ component: FilterPanelLabel,
+ tags: ['autodocs'],
+ parameters: {
+ styles,
+ docs: {
+ page: mdx,
+ },
+ },
+ argTypes: {
+ className: { control: { type: {} } },
+ onChange: { table: { disable: true } },
+ count: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'As number: 10',
+ 1: 'As string: "1,500"',
+ },
+ },
+ mapping: {
+ 0: 10,
+ 1: '1,500',
+ },
+ options: [0, 1],
+ },
+ labelText: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'Plain text',
+ 1: 'Very long text',
+ 2: 'Using markup',
+ },
+ },
+ mapping: {
+ 0: 'Label',
+ 1: 'Really, really long label name',
+ 2: (
+ <>
+ Formatted label
+
+ ),
+ },
+ options: [0, 1, 2],
+ },
+ },
+ args: {
+ count: 0,
+ labelText: 0,
+ },
+};
+
+const Template = (args) => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.storyName = 'Filter Panel Label';
+Default.args = {
+ title: '',
+};
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.test.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.test.js
new file mode 100644
index 0000000000..efdbc4e31c
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/FilterPanelLabel.test.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { pkg } from '../../../settings';
+import uuidv4 from '../../../global/js/utils/uuidv4';
+
+import { FilterPanelLabel } from '.';
+
+const blockClass = `${pkg.prefix}--filter-panel-label`;
+const componentName = FilterPanelLabel.displayName;
+
+// values to use
+const className = `class-${uuidv4()}`;
+const dataTestId = uuidv4();
+const count = 5;
+const labelText = `hello, world (${uuidv4()})`;
+
+const renderComponent = ({ ...rest } = {}) =>
+ render(
+
+ );
+
+describe(componentName, () => {
+ it('renders a component FilterPanelLabel', async () => {
+ renderComponent();
+ expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
+ });
+
+ it('renders a count', async () => {
+ const { container } = renderComponent({ count: count });
+ expect(container.querySelector(`.${blockClass}__count`).textContent).toBe(
+ '5'
+ );
+ });
+
+ it('has no accessibility violations', async () => {
+ const { container } = renderComponent();
+ expect(container).toBeAccessible(componentName);
+ expect(container).toHaveNoAxeViolations();
+ });
+
+ it('applies className to the containing node', async () => {
+ renderComponent({ className: className });
+ expect(screen.getByTestId(dataTestId)).toHaveClass(className);
+ });
+
+ it('forwards a ref to an appropriate node', async () => {
+ const ref = React.createRef();
+ renderComponent({ className: className, ref: ref });
+ expect(ref.current).toHaveClass(blockClass);
+ });
+
+ it('adds the Devtools attribute to the containing node', async () => {
+ renderComponent();
+
+ expect(screen.getByTestId(dataTestId)).toHaveDevtoolsAttribute(
+ componentName
+ );
+ });
+});
diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js
new file mode 100644
index 0000000000..31b7b9df32
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/FilterPanelLabel/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FilterPanelLabel } from './FilterPanelLabel';
diff --git a/packages/ibm-products/src/components/FilterPanel/_storybook-styles.scss b/packages/ibm-products/src/components/FilterPanel/_storybook-styles.scss
new file mode 100644
index 0000000000..817e54a4ad
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/_storybook-styles.scss
@@ -0,0 +1,17 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable carbon/layout-token-use */
+
+@forward '../../../../ibm-products-styles/src/global/styles/project-settings';
+
+// TODO: add any additional styles used by FilterPanel.stories.js
+.filter-panel-stories__viewport {
+ // outline: 1px dashed #9cf; // TODO: DELETE ME
+ width: 16rem;
+ padding: 1rem;
+}
diff --git a/packages/ibm-products/src/components/FilterPanel/index.js b/packages/ibm-products/src/components/FilterPanel/index.js
new file mode 100644
index 0000000000..b85b33687f
--- /dev/null
+++ b/packages/ibm-products/src/components/FilterPanel/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FilterPanel } from './FilterPanel';
+export { FilterPanelCheckbox } from './FilterPanelCheckbox/FilterPanelCheckbox';
+export { FilterPanelLabel } from './FilterPanelLabel/FilterPanelLabel';
diff --git a/packages/ibm-products/src/components/index.js b/packages/ibm-products/src/components/index.js
index 0250e6ddfd..7cc7901e12 100644
--- a/packages/ibm-products/src/components/index.js
+++ b/packages/ibm-products/src/components/index.js
@@ -115,3 +115,8 @@ export { Nav } from './Nav';
export { StringFormatter } from './StringFormatter';
export { UserAvatar } from './UserAvatar';
export { StatusIndicator } from './StatusIndicator';
+export {
+ FilterPanel,
+ FilterPanelCheckbox,
+ FilterPanelLabel,
+} from './FilterPanel';
diff --git a/packages/ibm-products/src/global/js/package-settings.js b/packages/ibm-products/src/global/js/package-settings.js
index 159567b54e..0b81d671ec 100644
--- a/packages/ibm-products/src/global/js/package-settings.js
+++ b/packages/ibm-products/src/global/js/package-settings.js
@@ -75,6 +75,9 @@ const defaults = {
StringFormatter: false,
StatusIndicator: false,
StatusIndicatorStep: false,
+ FilterPanel: false,
+ FilterPanelCheckbox: false,
+ FilterPanelLabel: false,
/* new component flags here - comment used by generate CLI */