[Lightbox media viewer] Web Component: Change component to include a carousel

RobertaJHahn commented 3 years ago

Engineering info:

Innovation Team engineer: @andy-blum
Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2453
DPO consulting engineer: @emyarod

User Story

As a [user role below]: Carbon for ibm.com developer

I need to: create/change the LIghtbox media viewer

so that I can: provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

Story within Storybook with corresponding knobs
Utilize Carbon
Create with Shadow DOM and Custom Elements standards
See the Epic for the Design and Functional specs information
Web Components Visual QA consulting issue (#6376 )
- Designs were done by Kirby Evans. DDS consulting designer should be included in the PR. See the Visual QA consulting issue for DDS designer.
- Design specs: PDF and Sketch file
Functional specs can be found here: https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website/wiki/Lightbox-media-viewer#3-carousel
Web Components Prod QA testing issue (#6378 )
- Once dev is finished, reach out to Putra and schedule a demo of this feature in the Engineering Office Hours for their education.

Acceptance criteria

[ ] Include README for the web component and corresponding styles
[ ] Create Web Components styles in styles package
[ ] Do not create knobs in Storybook that include JSON objects
[ ] Break out Storybook stories into multiple variation stories, if applicable
[ ] Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
[ ] Minimum 80% unit test coverage
[ ] Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
[ ] Use the Visual QA checklist to verify design quality
[ ] Update the e2e test scripts, if needed.
[ ] Confirm e2e test results have no major errors.
[ ] DDS design consultant is included as a Reviewer in the Pull Request
[ ] Provide a direct link to the deploy preview for the designer in the Pull Request description
[ ] A comment is posted in the Prod QA issue, tagging Praveen when development is finished

shixiedesign commented 3 years ago

Func spec done. @RobertaJHahn this is ready for Monday's engineering refinement. Looks like James is not feeling well the past few days, so I can present the specs.

emyarod commented 2 years ago

currently trying to integrate the modal lightbox, carousel, and image/video viewers but finding potential discrepancies between spec and implementation esp when scrolling content is in the mix

https://user-images.githubusercontent.com/8265238/134738754-6b3fe560-f217-4b01-bf75-7403daef22e8.mov

may also run into positioning issues due to style conflicts related to previous changes to the component but still more exploration required

https://user-images.githubusercontent.com/8265238/134739215-b3a08af1-f92e-4e75-b9a1-ab2eeb4b2e6e.mov

also gets a bit tricky based on OS scroll bar settings

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