[storybook]: broken usage guidelines links

[davidmenendez]

Package

Carbon for IBM Products

Description

minor thing here i've noticed throughout our storybook. there appears to be numerous broken links throughout the storybook. probably because the website was updated at some point. AboutModal and RemoveModal being just two examples

Component(s) impacted

i haven't audited every single component and pattern, but AboutModal and RemoveModal for starters

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.47

Suggested Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

carbon products

CodeSandbox or Stackblitz example

NA

Steps to reproduce the issue (if applicable)

1. Go to storybook
2. Go to docs tab of component or pattern
3. Verify that the required usage guidelines link is going to the appropriate place

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

  
  ### Components that have custom guidelines url

• [ ] ExpressiveCard
• [ ] ProductiveCard
• [ ] Datagrid
• [ ] Cascade
• [ ] APIKeyModal
• [ ] ImportModal
• [ ] RemoveModal
• [ ] ActionBar
• [ ] DelimitedList

[matthewgallo]

I started compiling a list but after further investigation, I think most of the issues come from how the url is created here.

One issue in particular is that for the "Components" section in our storybook the kind value will be Components, but the way the url is constructed now will cause it to be the following:

https://pages.github.ibm.com/cdai-design/pal/Componentss/${paramCase(...)}

the capital "C" and the extra s in Componentss cause 404s.

[davidmenendez]

i have verified the bug with the url construction.

AboutModal

• https://pages.github.ibm.com/cdai-design/pal/Patternss/about-modal/usage is incorrectly being created
• https://pages.github.ibm.com/cdai-design/pal/patterns/about-modal/usage/ is what it should be

Tearsheet

• https://pages.github.ibm.com/cdai-design/pal/Componentss/tearsheet/usage is incorrectly being created
• https://pages.github.ibm.com/cdai-design/pal/components/tearsheet/usage/ is what it should be

[davidmenendez]

shout out to @janhassel for implementing a fix that handles some of the broken urls.

i need to point out this comment i made that addresses the fact that this didn't solve everything though. we're still seeing some links that are broken in-spite of the capitalization and extra characters fix

[matthewgallo]

For those other components where the url doesn't match the standard, we can use the altGuidelinesHref prop in the <StoryDocsPage /> component to specify the exact url it should point to.