carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
269 stars 156 forks source link

Component: lightbox (image viewer) - v1 #328

Closed jeffchew closed 4 years ago

jeffchew commented 5 years ago

Wonil-Suh1 created the following on Aug 06:

User story

As a user of IBM.com, I'd like to see images such as product shots and diagrams in a larger format, and flip through multiple when there are multiple without opening a new window/tab or going to a new page.

Notes

A typical interaction pattern is as follows:

  1. User reads description on a feature band with an image
  2. User clicks the embedded image in the band
  3. A lightbox opens with the image.
  4. The customer is able to cycle through multiple images when applicable.

This component will likely utilize the modal component, and implement mechanisms for slideshow, displaying descriptions, etc.

Component design folder

The MVP design is in this folder: https://ibm.box.com/s/mpeo1wy0jogkwxn68fahlg62q799ixox

Example

Here is a lightly updated design from last year's Duo + STUF studies: lightbox--design--1 0 0

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

jeffchew commented 5 years ago

On Aug 14, stuartji commented: @Wonil-Suh1 This is great. Regarding structured content, the challenge is accessibility. If the component is for highly informative images (and that would be the dominant use case), don't we have an outstanding story about what the solution is for providing long-form text in addition to alt attribute? I'd call that a dependency for this story to be considered 'done.' But I think you said that's another team's scope?

stale[bot] commented 4 years ago

We've marked this issue as stale because there hasn't been any activity for 30 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.