Create `ChipTabGroup` component

[zutigrm]

Feature Description

New ChipTabGroup component should be implemented, to support the selection panel layout updates. Said component should handle group switching, and styles, but it will not contain the implementation of full metrics selection and lists. That will be handled in separate issue.

As part of this issue assets/js/components/SelectionPanel/SelectionPanelItems.js should be used as a starting point for creating a key metrics specific SelectionPanelItems which will be rendering the ChipTabGroup component instead of the current markdown. A new story for the said SelectionPanelItems should be added, to visually test and develop new component. It shouldn't replace the usage of generic SelectionPanelItems in this issue.

Basic group filtering should be implemented as part of this issue

Check New Metric Grouping Logic Within Sidebar/Selection Panel - Tabbed Functionality section and more particularly Implementation of tabbed containers and tab functionality sub-section of the design doc

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• New ChipTabGroup component is created
• It should consist of the new group chips, and tab panel which will list the KMW items
  • The chips list all groups implemented in 9376
  • Tab panel shows a list of key metric items from the currently active/selected group chip
• Clicking on the inactive group chip should switch/replace the current metric list, by showing only the metric items from the selected group chip.
• Only 1 group chip can be active at the time (shouldn't be possible to select more)
• Current selection group chip will be listing the selected items, functionality will be expanded on in 9385 , so for now it can display an empty list.
• It should match figma designs
• New SelectionPanelItems component is also added to render the ChipTabGroup component
• Refer to the New Metric Grouping Logic Within Sidebar/Selection Panel - Tabbed Functionality section and more particularly Implementation of tabbed containers and tab functionality sub-section of the design doc
• As part of this issue only ChipTabGroup component within new key metrics specific selection panel items is added, together with the stories, excluding "new" badge implementation. It should support group chip switching only (filtering all KMW items by the active group), rest of the functionality, and implementation of new panel will come in later issue

Implementation Brief

• Follow the figma design while implementing the following components

Add assets/js/components/KeyMetrics/ChipTabGroup/Chip.js

• It should accept following props:
  • group, which will hold the group object - {SLUG: '...', LABEL: '...'}
  • active, a boolean value
  • selectedCount, number of selected metric items from the current group, if any.
  • onClick, a callback function. It should accept group slug as an argument, so it can switch the active group in the parent's component state
• Add Button component with class googlesitekit-chip-tab-group__chip-item for example
  • Use the group.LABEL for label.
  • Include selectedCount value as trailingIcon prop. You can wrap it in span and pass the value within parentheses ()
  • For onClick prop, pass the onClick callback prop, including the group.SLUG as an argument
  • If passed active prop matches the current group.SLUG, render an extra class in the button, for example googlesitekit-chip-tab-group__chip-item--active
• Add assets/sass/components/key-metrics/_googlesitekit-chip-tab-group.scss to include needed styling for both Chip and TabGroup components

Add assets/js/components/KeyMetrics/ChipTabGroup/TabGroup.js

• It should accept following prop:
  • metricItems - an array of metric item objects to render. This component is not concerned with filtering, and active group selection logic, it will only receive final list that should be output.
• Wrap the markup with main div.googlesitekit-chip-tab-group__tab-item for example
• Iterate over metricItems and render MetricItem component for each item, passing the needed props

Add assets/js/components/KeyMetrics/ChipTabGroup/index.js

• It should accept following prop for now (rest of the logic will be implemented in 9385):
  • allMetricItems - will hold the array of metric objects retrieved from KEY_METRICS_WIDGETS list
• Define a new group variable for Current selection, following the same structure how other existing groups are defined, for example {SLUG: 'currentSelection', LABEL: 'Current selection'}
• Define a local state that will be used to update active group, and active value will be passed to the Chip component. By default Current selection slug should be used as initial value.
• Define a callback which will be passed to the Chip component as onClick prop. It should accept a group slug as argument and update the local active state
• Filter the allMetricItems prop by the group property, only the items which fulfil this criteria item.group === active should be returned, and assigned to a new variable, say activeMetricItems
  • The resulting activeMetricItems will be passed to the TabGroup component as the metricItems prop
• Define selectedCount variable, for now assign it value 0 - this functionality will be implemented as part of the 9385
• Wrap the markup in main div with class googlesitekit-chip-tab-group for example
• Collect all ACR groups added in 9376, with Current selection being the first item in the array, and other groups should follow the order from the design.
  • Iterate over this list of groups, and render Chip component for each item, using the current group as group prop, and other props previously defined above

Add assets/js/components/KeyMetrics/SelectionPanelItems.js

• Use assets/js/components/SelectionPanel/SelectionPanelItems.js as a starting point
• It should be key metrics specific component, and render new ChipTabGroup component instead of the current markup.
  • Use KEY_METRICS_WIDGETS for the allMetricItems prop

Test Coverage

• Add stories file for the new assets/js/components/SelectionPanel/SelectionPanelItems.js component, which should render the new selection panel layout

QA Brief

Changelog entry

[eugene-manuilov]

@zutigrm, could you please remove all technical details from AC and leave only requirements that the new component should match.

[zutigrm]

@eugene-manuilov AC updated. Thanks

[eugene-manuilov]

Great! Thanks, @zutigrm. AC ✔️