Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CTA, cardlink] Missing card link option for CTA #5740

Closed
photodow opened this issue Apr 8, 2021 · 13 comments
Closed

[CTA, cardlink] Missing card link option for CTA #5740

photodow opened this issue Apr 8, 2021 · 13 comments
Assignees
@proeung @ariellalgilmore
Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 21-17

Comments

@photodow
Copy link
Contributor

photodow commented Apr 8, 2021 •
edited by RobertaJHahn
Loading

Looks like over time our CTA cards have misaligned. Misaligned between libraries, misaligned between specs, styles and intent.

Here is the problem:

In short, react and web components do not line up. React's CTA depends on Card link while Web components depends on Card. So changing card link in CSS impacts one differently than the other and impacts unwanted changes to other components. Also, Card link isn't to specs visually and functionally. Thirdly we missed a step which might have caused some of these problems, and don't account for both card and card link being used as a CTA.

Here is a small visual to see the difference. The red is where it breaks down and the problems line up.

image

Here is my proposal:

  1. Card link needs to go be refactor to align with the design specs and functional specs.
  2. CTA needs a new style called card link this requires a functional spec update as well.
  3. Update and distinguish components with correct CTA style card link or card. (e.g. content blocks get card link, card group gets card)
  4. There are a couple odd situations like content block with media, and logo grid that use card link directly. Those should be leveraging the content block CTA as specced out.
a quick visual to help see the new dependency tree I'm proposing.

image

HC Developer: Putra Bonaccorsi
HC Jira Ticket: https://jsw.ibm.com/browse/HC-2151
DDS Consulting Dev: Ari
@photodow photodow added bug Something isn't working Feature request A new adopter requested feature labels Apr 8, 2021
@photodow photodow mentioned this issue Apr 8, 2021
Merged
@photodow photodow added ba Needs some business analyst work dev Needs some dev work labels Apr 9, 2021
@RobertaJHahn
Copy link

RobertaJHahn commented Apr 15, 2021 •
edited
Loading

Adding to the 4/21 Engineering Huddle meeting agenda. Revisit the next steps in the 4/22 adopter issues review meeting.

@RobertaJHahn RobertaJHahn mentioned this issue Apr 20, 2021
Closed
@jeffchew jeffchew mentioned this issue Apr 21, 2021
Closed
2 tasks
@RobertaJHahn
Copy link

Roberta to reach out to Jeff about management. Epic? research issue? Schedule?

@RobertaJHahn
Copy link

RobertaJHahn commented Apr 26, 2021 •
edited
Loading

Decision will be made after the dev research is finished. (#5859 ) sprint 21-10

@RobertaJHahn RobertaJHahn added package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround and removed Feature request A new adopter requested feature labels May 6, 2021
@RobertaJHahn
Copy link

image.png

Added to the May 17 Engineering issues refinement agenda.

@RobertaJHahn RobertaJHahn added this to the Sprint 21-11 milestone May 17, 2021
@shixiedesign
Copy link
Contributor

shixiedesign commented May 20, 2021 •
edited
Loading

Had a discussion with @IgnacioBecerra & @photodow on Feature card's refactor, and during which we noticed that Web component could have Card build dependent on CTA. Please watch out for this when starting this ticket. The correct dependency is:

Card --> Feature card --> CTA --> Content block

@oliviaflory oliviaflory mentioned this issue May 26, 2021
Closed
@RobertaJHahn RobertaJHahn removed this from the Sprint 21-12 milestone Jun 8, 2021
@shixiedesign
Copy link
Contributor

FYI team here's the func spec for CTA - card link

image.png

Looks like we'd need this bug resolved soonish as CTA - card link is needed in Feature section component #6246

@RobertaJHahn
Copy link

@shixiedesign @jeffchew I have added this issue as a blocker to (#6246) Andy is working on the Feature Section, but it is 13 story points and we expect the work to move into next sprint. The code freeze for the July 7 release is June 25, the middle of sprint 21-13. I have added this issue to sprint 21-13 and added it to the June 21 engineering meeting agenda.

@RobertaJHahn RobertaJHahn added this to the Sprint 21-13 milestone Jun 14, 2021
@ljcarot
Copy link
Member

ljcarot commented Jun 14, 2021

@RobertaJHahn If this issue is a blocker to 6246, should someone start on it sooner since 6246 is a sprint must have.

@proeung proeung mentioned this issue Jun 14, 2021
Merged
@RobertaJHahn
Copy link

RobertaJHahn commented Jun 15, 2021 •
edited
Loading

@shixiedesign This work has been removed as a dependency in the issue for the Feature Section component based on the discussions in the engineering stand up today. This work will be done, but staged at a later time.

@shixiedesign shixiedesign removed the ba Needs some business analyst work label Jun 17, 2021
@RobertaJHahn RobertaJHahn changed the title [CTA, cardlink] Refactor and realign to specs [CTA, cardlink] Missing card link option for CTA Jun 21, 2021
kodiakhq bot pushed a commit that referenced this issue Jun 24, 2021
@proeung
feat(feature-section): add "Feature section" layout component (#6344)
80134c8 
### Related Ticket(s)
#6246

DDS Tickets: #6118
HC JIRA Ticket: https://jsw.ibm.com/browse/HC-1971

### Description
- This PR adds the "Feature Section" layout component/pattern that's needed in the new "Service" landing page template that will be implemented in the AEM CMS.
- This component is a variant of HC's [Module 11A](https://pages.github.ibm.com/MSC-Cloud/hc_fractal/components/detail/11a--default.html) and this iteration is the first version that will be going into the MVE state of the "Service" landing page.

### Design & Functional Specs
- https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website/wiki/Feature-section

![component--feature-card-block-large--visual-specs--max copy](https://user-images.githubusercontent.com/1815714/121596789-ea58b600-ca0d-11eb-9789-aaa4be7e7d58.jpg)


### Changelog

**New Components/Props**

- `<dds-feature-section>` – this new layout component is a variant/extension of the `<dds-feature-card>`.
- `<dds-feature-section-card-link>` – this component is an extension of the `<dds-card-link>` and needed because the feature section component requires a card-link with higher max-width.
- `media-alignment` - a prop  `(right (default) | left)` that can be passed as an attribute.

**Removed**

- N/A

**Note**

- The current implementation of the `<dds-card-link>` UI component doesn't offer CTA types such as Video, document, external, etc. The component looks to be extended from the `dds-card`, where it should be using `dds-cta-card` component.
- Looks like this is a known issue (see - #5740)


**Testing Instructions**
- Visit the `Feature section` - `/?path=/story/components-feature-section--default`
- Ensure that the component matches with the design specs for all breakpoints.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@jeffchew jeffchew modified the milestones: Sprint 21-13, Sprint 21-14 Jun 29, 2021
@jeffchew jeffchew modified the milestones: Sprint 21-15, Sprint 21-16 Jul 13, 2021
@RobertaJHahn RobertaJHahn mentioned this issue Aug 9, 2021
Closed
@shixiedesign shixiedesign mentioned this issue Aug 23, 2021
Merged
@proeung
Copy link
Contributor

proeung commented Aug 23, 2021

HC JIRA Ticket: https://jsw.ibm.com/browse/HC-2151
HC Engineer: @proeung

The implementation of this issue will be accounted for within this PR - #6934 (comment).

@shixiedesign
Copy link
Contributor

shixiedesign commented Aug 24, 2021 •
edited
Loading

Thank you @proeung 🙏 👍 !!

@RobertaJHahn
Copy link

Fixing this issue may also fix issue #6985. Once fixed, let Kenny know so that he can check on the status of that bug.
@proeung @annawen1 @kennylam

@RobertaJHahn RobertaJHahn mentioned this issue Aug 26, 2021
Closed
This was referenced Sep 3, 2021
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@proeung proeung

@ariellalgilmore ariellalgilmore

Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 21-17
Development

No branches or pull requests
9 participants
@jeffchew @proeung @photodow @shixiedesign @ariellalgilmore @ljcarot @DragosRistici @RobertaJHahn @andysherman2121