feat: ResourceListDetails doc block #3129

- components that have a valid page on the spectrum guidelines site have a componentGuidelinesName key now. - components that do not have a valid page on the spectrum guidelines site have a componentBetaName key that will point to the spectrum-contributions site. - for components that do not any guidelines, setting the componentGuidelinesName key to an empty string in the package.json will make sure the guidelines resource card doesn't render.

The ResourceListDetails fetches data from each storybook component's package.json, specifically utilizing the package name and optional componentGuidelinesName. It then creates links to the spectrum guidelines, github, and npm sites. If a component doesn't have a spectrum guidelines page, it uses the optional componentBetaName and the spectrum-contributions site instead. - creates new `styled` components related to the resource section, any element wrappers and links - creates ResourceListDetails doc block - creates ResourceListContent component (which are the individual resource cards) - adds some helper functions to generate SVGs corresponding to the links, switch statements, mapping text, etc.

this applies to form and meter. Form should no longer render a guidelines link card, and meter should navigate to its own guidelines page instead of progress bar's.

- update spacing for if() statement - render ResourceListDetails in ComponentDetails - console.warn instead of throw an error - hard codes styles for cards

- extracts SVG code to individual jsx files - imports those SVG jsx files to use a components - replaces/refactors svg functions to render new svg components

- creates a `spectrum` key in each component's package.json to use in ComponentDetails - `spectrum` array holds metadata for components and/or nested components, like the componentName, the guidelineLink, and rootClass - eventually we may be able to add designLink to add Figma links to this block

- reorganizes file so ResourceLinkContent and ResourceListDetails are closer to CopmonentDetails, and all fetching/processing helper functions are together - addresses missing field label guidelines link - removes some hardcoded nestedComponent code in favor for a for loop - indentation fixes

- removed componentName from field label and progress bar package.jsons - created docsPage parameter for form in the storyMeta - refactored the nested component for loop to check if the guidelines are defined, and if docsPage is undefined. If both of those check out, render the guidelines link. Form is the only component that needed this, since it's the only nested component that doesn't have a guidelines page while its parent (field label) does.

To better capture nested components, as well as components that may not have a guidelines page, this refactor double checks that the hasDocsPage prop is undefined, as well as that the spectrum.rootClass value includes a transformed component title. Adding the additional check of the rootClass helped ensure the proper guidelines link was rendering for nested components, as well as breaking when the condition was met.

- instead of comparing a story's title (because meter didn't have a unique rootClass), compare the spectrum.rootClass to the meta.args.rootClass. This is possible now because we have updated the default args for meter to be spectrum-Meter. - removes usage or reformatTitle and hasDocsPage functions and props - adds more thorough JSDoc comments

- white space removal

- change status prop name to isDeprecated - remove unnecessary skipBorder prop

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ResourceListDetails doc block #3129

feat: ResourceListDetails doc block #3129

Commits on Oct 18, 2024