Cupcake website page creation - Components/Link page

[jeffchew]

chsanche created the following on Sep 23:

User Story

As an IBM.com page creator

I need to: have a good understanding of the components, patterns, etc

so that I can: do my day to day work without confusion.

Additional information

• Cupcake website page development priority can be viewed via https://github.com/carbon-design-system/ibm-dotcom-library/issues/475.
• Link page on v19a website can be viewed here.
• Link page on the current Carbon Design website can be viewed here

Task

• Collaborate with @Olivia-Flory for the content creation.

Acceptance criteria

• [ ] Content and design created and reviewed with the stream lead, the developer and Wonil.
• [ ] Shared with the Carbon and IDL team for feedback.
• [ ] Content and design accepted by Wonil and Linda.
• [ ] Create the dev. issue for coding as the next step.

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1749

[jeffchew]

On Oct 07, chsanche commented: @Wonil-Suh1 @Olivia-Flory

Below is the Cupcake version Link page. Please take a look and let me know what we need to edit, add, or take off.

FYI - The Documentation section is a placeholder.

Here is the demo set up for the three link variants

[jeffchew]

On Oct 07, chsanche commented: @Jeff-Chew @Kenny-Lam

Question: For the documentation, we only support react, correct? I have Angular just as an example if we are going to add more platforms we will be supporting.

FYI: Carbon is thinking to have the react code (under the demo) editable but no final decision yet.

[jeffchew]

On Oct 07, Jeff-Chew commented: @chsanche we shouldn't say Angular is coming soon, right now we should say React, with Vanilla coming soon.

cc: @Kenny-Lam

[jeffchew]

On Oct 07, Jeff-Chew commented: @linda-carotenuto @Wonil-Suh1 @chsanche for Angular and VueJS, should we have something like Open for Contributions? Just a thought...

[jeffchew]

On Oct 07, chsanche commented: @Jeff-Chew Got it. That's why I put the "FYI - The Documentation section is a placeholder." and needs your guidance on what to include with what status, etc.

[jeffchew]

On Oct 07, Olivia-Flory commented: @chsanche Thank you for sending! A few comments:

For the demo, here's a small update I think would make sense:

• remove Primary list
• change text + icon on the right to text + icon (same phrasing as button)
• disable the option for link and icon when inline is selected

---

For the content Is some of the content coming from Carbon?

I ask because I'm confused where a few of the things under "Styles" came from and if we should be adding those to the modifiers within the demo / if Carbon is planning to add those to their codebase? We don't have a few of them in the codebase:

• icon only
• link with tooltip
• I'm not sure if we want to include Text and icon left because we don't want to encourage people to use these.

Color missing "be", updated below The link color should be set to default.

Structure This bit is a little confusing to me because our links are not underlined by default, so maybe it should say something like: Links can be grouped horizontally or vertically, and must be underlined when in a group for accessibility. (Guessing that is why they "must be underlined"

There is no documentation / specs "following" showing the proper distance between links, we should write it out if we are including that. I'm guessing Carbon thinks 16 or 24px is the right amount, but we will need to check with them?

[jeffchew]

On Oct 08, chsanche commented: @Olivia-Flory Thank you for taking a look at the content.

For the demo, The primary list is removed. FYI: The modifier and status will change based on the variant selected, so for "Inline", we do not need to disable anything.

The "Styles" content is from our v19a website Link Usage page.

I took the Text and icon left option off and updated the color and structure section copy. Let me know if it works better now. You are correct, the underline recommendation is for an accessibility reason, but Carbon is taking the recommendation off soon since it's different than their component setting.

---

Updated mock up: