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.

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

Storybook: Add BlockImage component (as well as Fancybox) #38

Merged
merged 8 commits into from
Oct 5, 2021

Conversation

laespinoza
Copy link
Contributor

@laespinoza laespinoza commented Sep 30, 2021

Checklist

  • Include a description of your pull request and instructions for the reviewer to verify your work.
  • Link to the issue if this PR is issue-specific.
  • Create/update the corresponding story if this includes a UI component.
  • Create/update documentation. If not included, tell us why.
  • List the environments / browsers in which you tested your changes.
  • Tests, linting, or other required checks are passing.
  • PR has an informative and human-readable title
    • PR titles are used to generate the change log in releases; good ones make that easier to scan.
    • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
  • PR has been tagged with a SemVer label and a general category label, or skip-changelog.
    • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
    • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

Adding BlockImage to our components list. This PR also adds Fancybox (scss and template classes taken from WCP), addresses issue #33 .

Instructions to test

  1. Pull this branch
  2. npm run storybook

View it under Components > Blocks > BlockImage

You can test the lightbox option by clicking on the expand icon in the top right corner of the image.

WWW Storybook equivalent: https://designlab.jpl.nasa.gov/storybook/?path=/docs/components-blocks-blockimage--streamfield-block

Tested in the following environments/browsers:

Operating System

  • macOS
  • iOS
  • iPadOS
  • Windows

Browser

  • Chrome
  • Firefox ESR
  • Firefox
  • Safari
  • Edge

@laespinoza laespinoza self-assigned this Sep 30, 2021
@github-actions github-actions bot added documentation Improvements or additions to documentation storybook This issue relates to Storybook.js labels Sep 30, 2021
@laespinoza laespinoza linked an issue Sep 30, 2021 that may be closed by this pull request
changing setting to use full bleed image data
@laespinoza laespinoza added the enhancement New feature or request label Sep 30, 2021
Copy link
Member

@stephiescastle stephiescastle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @laespinoza86, this is great! Also a nice feature for those who need easy modals.

I had some thoughts about the LayoutHelper class, and I also think we should eventually add a story for the Fancybox Button.

Copy link
Member

@stephiescastle stephiescastle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the changes @laespinoza86 !

@laespinoza laespinoza merged commit d7b440b into main Oct 5, 2021
@laespinoza laespinoza deleted the docs/storybook/blockimage branch October 5, 2021 19:13
@Scotchester Scotchester removed the enhancement New feature or request label Oct 6, 2021
@Scotchester Scotchester changed the title Storybook: Add BlockImage component Storybook: Add Fancybox and BlockImage component Oct 6, 2021
@Scotchester Scotchester added the enhancement New feature or request label Oct 6, 2021
@Scotchester Scotchester changed the title Storybook: Add Fancybox and BlockImage component Storybook: Add BlockImage component (as well as Fancybox) Oct 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request storybook This issue relates to Storybook.js
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add FancyBox modal
3 participants