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

Feature: more vue components, dynamic Light and Dark theme variants #450

Merged
merged 11 commits into from
May 30, 2024

Conversation

stephiescastle
Copy link
Member

@stephiescastle stephiescastle commented May 29, 2024

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

Closes https://github.com/nasa-jpl/www/issues/19

This is a follow-up PR to #433 and addresses some needs in https://github.com/nasa-jpl/www/issues/26:

  • Theme colors and light/dark variants are now managed entirely in the TailwindCSS config (default, edu and internal themes)
  • Adds ability to switch themes and theme variants in Storybook
  • Replaces theme-color color in TailwindCSS config with action and emphasis rules (these labels are somewhat arbitrary and can change) and sets appropriate values for the three themes
  • removes Tailwindcss Themer, as we ended up not needing it
  • Modifies some theme colors to work with interchangable light, dark, and darker naming conventions. These colors will be updated to match the spec once finalized.
  • Adds more base blocks and a couple of streamfield blocks to the Vue library

Instructions to test

  1. pnpm i
  2. make vue-storybook
  3. View the BlockQuote stories: http://localhost:6006/?path=/docs/components-blocks-blockquote--docs
  4. Change the Theme and Variant options in the tool. Try different combinations.
  5. Browse to look at other stories to see similar effects (BlockQuote is the only one that uses EDU's "emphasis" color).

Tested in the following environments/browsers:

Operating System

  • macOS
  • iOS
  • iPadOS
  • Windows

Browser

  • Chrome
  • Firefox ESR
  • Firefox
  • Safari
  • Edge

@stephiescastle stephiescastle marked this pull request as draft May 29, 2024 21:02
@stephiescastle stephiescastle added minor Contains new features or enhancements storybook This issue relates to Storybook.js labels May 30, 2024
@stephiescastle stephiescastle marked this pull request as ready for review May 30, 2024 03:47
@stephiescastle stephiescastle merged commit ff9af3b into main May 30, 2024
1 check passed
@stephiescastle stephiescastle deleted the feature/adding-more-vue-components branch May 30, 2024 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature minor Contains new features or enhancements storybook This issue relates to Storybook.js
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants