google / google/site-kit-wp

Build the detail-panel sub-tab content (Description / Requirements / Screenshots)

Open
#13,331 4 comments 0 reactions 0 assignees View on GitHub
P0 Team M Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 12h
Merged PRs (30d)
80

Description

## Feature Description

The feature detail panel (#13330) answers three questions about a feature, one per sub-tab: what it is and why it's worth having, what setting it up will ask of the user, and what it looks like in use.

This issue builds those three bodies. All of their content comes from the feature's own catalog entry (#13247), so the panel presents whatever the catalog holds for the feature being viewed and knows nothing feature-specific itself.

For reference, see the [The feature detail panel](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.tlohhdyhro2s) and [The feature catalog & datastore](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.uh8h09rhh8ww) sections in the design doc, and the [Description](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-13327), [Requirements](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-14360) and [Screenshots](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-14629) designs in Figma.

---------------

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

## Acceptance criteria

- The **Description** sub-tab shows two sections: *"What is this feature?"*, describing what the feature does, and a *"Why use …?"* section naming the feature or its service, listing its benefits — each a short bold benefit with a supporting line beneath it.
- The **Requirements** sub-tab shows, in order:
- **Setup Effort** — the same effort indicator and label the feature's card carries (#13320).
- **Service requirements** — what the user needs to have or agree to before they can use the feature, such as an account with the service or accepting its terms.
- **Setup checklist** — the steps setting the feature up will take them through, as a list.
- A closing line offering further help, linking the feature's documentation and the support forum. The links open in a new tab.
- The **Screenshots** sub-tab shows the feature's preview images, in the order the catalog gives them.
- Every sub-tab presents the content held for the feature, and a feature that has nothing for a given section — no service requirements, for instance — omits that section rather than showing an empty heading.
- Content that's too tall for the panel scrolls, with the panel's header, sub-tabs and footer (#13330) staying in place.
- Switching sub-tabs shows the selected sub-tab's content.
- The three sub-tabs match the Figma designs.

## Implementation Brief

If not already addressed in #13247, make these changes to the catalog:

- [ ] In `assets/js/googlesitekit/datastore/feature-discovery/types.ts`
- Change the types of each string property in `FeatureDetail` to `ReactNode`, to support links and markup.
- Remove `requirements.setupComplete`.
- Add `requirements.documentationURL: string`.
- [ ] In each `assets/js/modules/*/feature-discovery.ts`
- Change each `requirements.setupComplete` to be the last item in `requirements.setupList`.
- Add `detail.requirements.documentationURL` and populate with the _Documentation link_ column from [the spreadsheet](https://docs.google.com/spreadsheets/d/1I3LvR-r0CY_uOiI2jZh_iy1m6AgCf9ypmhRBQBggzN0/edit?gid=1534835736#gid=1534835736).
- For any `detail` fields that have inline links in the spreadsheet that are missing in the catalog, use `createInterpolateElement()` to add the links.

Then implement:

- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/FeatureDetailDescription.tsx`
- Accept `feature: Feature` prop.
- Render `What is this feature?` and `feature.detail.description.whyUseHeading` headings in ``.
- Render `feature.detail.description.whatIs` in a `

`.
- Render a `

` and each `feature.description.whyUse` as:
- `{term}`.
- `{description}`.
- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/FeatureDetailRequirements.tsx`
- Accept `feature: Feature` prop.
- Render `Setup effort?`, `Service requirements` and `Setup checklist` as ``.
- Render `feature.effort` as ``.
- Render `feature.detail.requirements.serviceRequirements` as `

`.
- Render a `

    ` and each `feature.detail.requirements.setupList` as ``.
    - Render "You can always get help in our documentation or support forum." as a `

    `, using `createInterpolateElement()` to link "documentation" to `feature.detail.requirements.documentationURL` and "support forum" to `https://wordpress.org/support/plugin/google-site-kit/`.
    - [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/FeatureDetailScreenshots`
    - Render each `feature.detail.screenshots` as ``.

    ### Test Coverage

    - Update stories for `FeatureDetailPanel` (#13330) to add generate VRTs and commit references.

    ## QA Brief

    -

    ## Changelog entry

    -

Contributor guide

Open the contributing guide

Research direction

Start with the FeatureDetailPanel stories and read assets/js/googlesitekit/datastore/feature-discovery/types.ts, then inspect the feature-discovery.ts catalog entries under assets/js/modules/*/. Implement the three specified panel subcomponents using the catalog fields and update the stories to generate VRTs with commit references. Done means each tab displays ordered catalog content, omits empty sections, supports scrolling, and matches the referenced designs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.