explorer-1

What's Changed

• Fix: secondary nav z-index, main edu nav styles by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/508
• chore: integrating all page templates from www-frontend by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/510
• chore: bumping to version 3.1.3 by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/511

Full Changelog: https://github.com/nasa-jpl/explorer-1/compare/3.1.2...3.1.3

What's Changed

• Fix: changing strategy when using text-subtitle with @apply in _BlockTable.scss by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/502
• fix: share buttons on edu content pages by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/503
• fix: remove default size from BaseHeading by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/504
• bumping to version to 3.1.2 by @stephiescastle in https://github.com/nasa-jpl/explorer-1/pull/505

Full Changelog: https://github.com/nasa-jpl/explorer-1/compare/3.1.1...3.1.2

Changes

• adjusting dependencies for explorer-1/common (#478)

✨ Features

• Feature: EDU header and footer (#497)
• CI checks (#484)
• Feature: Updating colors to use new coordinated color steps (#485)
• removing hover mixin (#474)
• feature: edu news detail component (#469)
• Additional search and listing page tweaks, New BaseTag component (#467)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• Feature: migrating www components (#455)
• adjustments after testing @explorer-1/nuxt in a separate project (#451)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• Add theming capability to Explorer 1 (#433)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🐛 Bug Fixes

• chore: switching to fast-qs for esm-friendly build (#498)
• fixing lodash imports for cjs (#491)
• fix/Revert #479 (#489)
• fixing names of dynamic tokens in storybook (#483)
• Fix/dayjs default export (#479)
• minor fixes for pnpm publish (#476)
• Fix/workaround for nuxt module (#475)
• Fix/storybook warnings (#473)
• Fixes for pnpm publish (#472)
• Additional search and listing page tweaks, New BaseTag component (#467)
• fix: search component v-bindings (#466)
• fixes html storybook build (#457)
• fixing nuxt module build error (#452)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update AppBarInternal.stories.js (#437)
• Update build-deploy-storybook.yml (#436)

📘 Documentation

• chore: clarifying story names for hero components (#495)
• chore: consolidate components and docs into one Storybook (#494)
• fixing names of dynamic tokens in storybook (#483)
• Fix/storybook warnings (#473)
• Co-locate vue storybook stories with components (#470)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• fixes html storybook build (#457)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• updating storybook to 8.1.4 (#446)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update build-deploy-storybook.yml (#436)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🧰 Maintenance

• Bumping to v3.1.1 (#500)
• chore: clarifying story names for hero components (#495)
• chore: consolidate components and docs into one Storybook (#494)
• bumping package versions before publishing (#490)
• CI checks (#484)
• fix: minor cleanup (#477)
• Co-locate vue storybook stories with components (#470)
• updating storybook to 8.1.4 (#446)
• Bump @nuxt/module-builder from 0.6.0 to 0.7.0 (#441)
• Bump swiper from 8.4.7 to 11.1.3 (#443)
• Update build-deploy-storybook.yml (#436)

Changes

• adjusting dependencies for explorer-1/common (#478)
• Prepping for 3.0.0-alpha release (#456)

✨ Features

• CI checks (#484)
• Feature: Updating colors to use new coordinated color steps (#485)
• removing hover mixin (#474)
• feature: edu news detail component (#469)
• Additional search and listing page tweaks, New BaseTag component (#467)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• Feature: migrating www components (#455)
• adjustments after testing @explorer-1/nuxt in a separate project (#451)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• Add theming capability to Explorer 1 (#433)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🐛 Bug Fixes

• fix/Revert #479 (#489)
• fixing names of dynamic tokens in storybook (#483)
• Fix/dayjs default export (#479)
• minor fixes for pnpm publish (#476)
• Fix/workaround for nuxt module (#475)
• Fix/storybook warnings (#473)
• Fixes for pnpm publish (#472)
• Additional search and listing page tweaks, New BaseTag component (#467)
• fix: search component v-bindings (#466)
• fixes html storybook build (#457)
• fixing nuxt module build error (#452)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update AppBarInternal.stories.js (#437)
• Update build-deploy-storybook.yml (#436)

📘 Documentation

• fixing names of dynamic tokens in storybook (#483)
• Fix/storybook warnings (#473)
• Co-locate vue storybook stories with components (#470)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• fixes html storybook build (#457)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• updating storybook to 8.1.4 (#446)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update build-deploy-storybook.yml (#436)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🧰 Maintenance

• bumping package versions before publishing (#490)
• CI checks (#484)
• fix: minor cleanup (#477)
• Co-locate vue storybook stories with components (#470)
• updating storybook to 8.1.4 (#446)
• Bump @nuxt/module-builder from 0.6.0 to 0.7.0 (#441)
• Bump swiper from 8.4.7 to 11.1.3 (#443)
• Update build-deploy-storybook.yml (#436)

Full Changelog: https://github.com/nasa-jpl/explorer-1/compare/3.0.0...3.1.0

Changes

✨ Features

• feature: edu news detail component (#469)
• Additional search and listing page tweaks, New BaseTag component (#467)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• Feature: migrating www components (#455)
• adjustments after testing @explorer-1/nuxt in a separate project (#451)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• Add theming capability to Explorer 1 (#433)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🐛 Bug Fixes

• Additional search and listing page tweaks, New BaseTag component (#467)
• fix: search component v-bindings (#466)
• fixes html storybook build (#457)
• fixing nuxt module build error (#452)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update AppBarInternal.stories.js (#437)
• Update build-deploy-storybook.yml (#436)

📘 Documentation

• Co-locate vue storybook stories with components (#470)
• Feature: theming enhancements and additions (#459)
• Add VueCompareImage to Nuxt module (#458)
• fixes html storybook build (#457)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• updating storybook to 8.1.4 (#446)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update build-deploy-storybook.yml (#436)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🧰 Maintenance

• Co-locate vue storybook stories with components (#470)
• updating storybook to 8.1.4 (#446)
• Bump @nuxt/module-builder from 0.6.0 to 0.7.0 (#441)
• Bump swiper from 8.4.7 to 11.1.3 (#443)
• Update build-deploy-storybook.yml (#436)

Changes

✨ Features

• Feature: migrating www components (#455)
• Feature: more vue components, dynamic Light and Dark theme variants (#450)
• Add theming capability to Explorer 1 (#433)
• Feature: convert to monorepo, add a vue library and nuxt module (#432)

🐛 Bug Fixes

• fixing nuxt module build error (#452)
• fixes eslinting rules for storybook (#439)
• Fix/storybook monorepo issues (#438)
• Update AppBarInternal.stories.js (#437)
• Update build-deploy-storybook.yml (#436)

📘 Documentation

• Adds basic docs for Version 3.0.0-alpha (#456)

🧰 Maintenance

• updating storybook to 8.1.4 (#446)
• Bump @nuxt/module-builder from 0.6.0 to 0.7.0 (#441)
• Bump swiper from 8.4.7 to 11.1.3 (#443)
• Update build-deploy-storybook.yml (#436)

Changes

🐛 Bug Fixes

• fix: links to stories within storybook (#430)

🧰 Maintenance

• chore: upgrade to Storybook 8.1.1, fixing some docs display issues (#431)

Changes

🧰 Maintenance

• chore: Upgrade to Storybook 8, Tailwind 3, and npm v20+ (#428)

Changes

✨ Features

• Add examples of headings with icons (#420)

🧰 Maintenance

• Adds support for npm ^16.20.2 (#427)
• Removes support for npm 14

Changes

✨ Features

• Add Reddit icon and update X icon (#418)

🧰 Maintenance

• Add Node.js and npm version requirements (#415)

Changes

✨ Features

• Add circleimage / milestone card component (#409)
• Add back to top component (#408)

Changes

🐛 Bug Fixes

• Fix two minor issues with headings (#327)

Changes

✨ Enhancement

• Adjust H1 sizes to be less of a dramatic jump from H2 (#318)
• Reduce line-height of .text-stats-xl and .text-stats-lg to bring it back in line with what it was before (#318)

Changes

✨ Features

• Update type hierarchy (#313)

🐛 Bug Fixes

• fix: adding icon-only flag to image carousel buttons (#303)

Changes

✨ Features

• Adding an Internal Theme (#253)
• Adding Internal Header and Internal Footer (#277)

📘 Documentation

• Documentation for using the new internal theme, internal header, and internal footer (#253, #277)

🧰 Maintenance

• Bump Storybook to v6.5.10 and add workaround for heading anchors (#270, #285)

Migration Notes

Using the internal theme and components

You can find documentation on how to use the internal theme in our Storybook. If you plan to use this theme a la carte, be sure to also include the newly added SCSS partial:

// your main.scss

// Tailwind CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// Vendors
@import '@nasa-jpl/explorer-1/src/scss/vendors';

// Main elements: Explorer 1 base styles
@import '@nasa-jpl/explorer-1/src/scss/forms';
@import '@nasa-jpl/explorer-1/src/scss/hover';
@import '@nasa-jpl/explorer-1/src/scss/fonts';
@import '@nasa-jpl/explorer-1/src/scss/aspect-ratios';
@import '@nasa-jpl/explorer-1/src/scss/grid';
@import '@nasa-jpl/explorer-1/src/scss/typography';
@import '@nasa-jpl/explorer-1/src/scss/polyfills';
@import '@nasa-jpl/explorer-1/src/scss/animations';

// Themes: include this if you want to use the internal theme colors 
@import '@nasa-jpl/explorer-1/src/scss/themes/internal'; // ⬅️ include new partial here

// Components: include all components
@import '@nasa-jpl/explorer-1/src/scss/components';

Internal header and footer

You can learn how to use the internal header and footer in our new Global Layout section.

Container Padding

By default, .container now has a default padding of 1rem. For the most part, this should not affect your projects, unless you have built in your own paddings, or used any of the named grid lines for MixedBleed layouts. If so, you can easily override this globally in your tailwind config, or, to address specific use-cases, add .px-0 to the .container in question.

To override the container padding globally, add this to your Tailwind config:

// your-project/tailwind.config.js

// import Explorer 1's Tailwind config
const explorer1Config = require('@nasa-jpl/explorer-1/tailwind.config.js')

module.exports = {
  ...explorer1Config,
  theme: {
    ...explorer1Config.theme,
    container: {
      ...explorer1Config.theme.container,
      padding: '0', // ⬅️ override padding here
    },
  },
  purge: ['../**/*.html'], // your project's purge settings
}

Internal navigation class names

Internal WCP developers: the class names for internal navigation templates have changed to match the naming style of Explorer 1.

Changes

✨ Features

• Adding BlockAccordion component (#250)

🐛 Bug Fixes

• Set tracking-normal explicitly on H4 and H5 styles (#257)

Changes

✨ Features

• Adding more colors to tailwind.config.js (#236)

Changes

✨ Features

• Add basic styling for the <mark> element (#232)

🐛 Bug Fixes

• Making HeroLarge markup more consistent with the other hero sizes (#229)

Changes

✨ Features

• Adds HeroSmall component (#224)

🧰 Maintenance

• Deprecating BaseIframe CSS class (#206)
• Removing engines defined in package.json (#207)
• Bump prettier from 2.6.1 to 2.6.2 (#205)

Changes

✨ Features

• Improvements to BlockLinkCard and BlockLinkTile (#173)
• Reorganize and rename components (#171)
• Adding responsiveness to BlockIframeEmbed (#161)

🐛 Bug Fixes

• Update mime type for BaseImagePlaceholder background images (#167)
• Update Tailwind config to not activate dark mode based on user's OS-level setting (#165)
• Fixing the link to the Explorer 1 readme (#144)
• Issue templates: fixing labels in "Feature request" template (#142)

📘 Documentation

• Adding docs on how to test the npm package locally (#174)
• Reorganize and rename components (#171)
• Adding boilerplate config and documentation for Percy (#195)
• Fixing the link to the Explorer 1 readme (#144)
• Adding issue templates and fixing a typo in the developer's guide (#141)

🧰 Maintenance

• Bump parcel from 2.2.1 to 2.4.1, remove postcss-preset-env (#162, #199)
• Bump @storybook (6.4.20) and eslint-plugin-storybook (0.5.7) (#179, #198)
• Update tailwindcss to v2.2.19 and @tailwindcss/forms to v0.5.0 (#196)
• Adding boilerplate config and documentation for Percy (#195)
• Bump eslint from 8.8.0 to 8.12.0 (#177, #194)
• Bump prettier from 2.5.1 to 2.6.1 (#192)
• Add nvmrc, Bump actions/checkout and actions/setup-node to v3 (#186)
• Bump postcss from 8.4.6 to 8.4.12 (#180, #183)
• Updating caniuse-lite and rebuilding dist (#182)
• Bump browser-sync from 2.27.7 to 2.27.9 (#181)
• Bump swiper from 8.0.2 to 8.0.7 (#170)
• Bump @fancyapps/ui from 4.0.23 to 4.0.26 (#163)
• Issue templates: fixing labels in "Feature request" template (#142)
• Adding issue templates and fixing a typo in the developer's guide (#141)
• Remove prerelease overrides for Release Drafter (#140)

Migration guide: 1.0.0 to 1.1.0

Renamed Components

Various components have been renamed, including their corresponding SCSS and JavaScript includes. You should check your projects for any of the following and update accordingly. Note that all new names are documented in the table below, but not all new names require action. Deprecated component names will be supported until the next major release.

Recommended

If you are using Explorer 1 with a custom frontend framework, you may want to consider renaming your components, and/or creating a table documenting how your project's components map to the Explorer 1 design system.

New features added to BlockLinkCarousel

BlockLinkCarousel has a new "item type" argument. BlockLinkCard, the default selection, replicates what was formerly known as BlockArticleCarousel. A new option, BlockLinkTile, is now available as well.

BlockLinkCard and BlockLinkTile

Improvements have been made to BlockLinkCard and BlockLinkTile, including compact styles, and styles for a secondary label. Update your HTML templates as needed. If you were previously using BlockArticleCarouselItem, you will want to update to use the latest BlockLinkCard in its place.

MixinCarousel improvement

The -tile variant of MixinCarousel now includes pb-5 by default. When used in projects, the -tile variant required adding the pb-5 inline class to work properly with tiles. If this applies to your project, you can now remove the pb-5 inline class from the following selectors: .BaseCarouselCards.-tile or .MixinCarousel.-tile

Responsive BlockIframeEmbed

BlockIframeEmbed is now responsive for 16:9 embeds! To use this feature, you will need to make the following changes to your project:

• The template for BlockIframeEmbed has changed and you will need to update the markup in your projects.
• The scss partial for BlockIframeEmbed has been renamed to _BaseIframe.scss, so you will need to update your scss imports if you are using Explorer 1 a la carte.

Contributors

• @jamesray made their first contribution in https://github.com/nasa-jpl/explorer-1/pull/165
• @addisonhardy made their first contribution in https://github.com/nasa-jpl/explorer-1/pull/167
• @Scotchester
• @laespinoza
• @kaelynrichards
• @stephiescastle

Full Changelog: https://github.com/nasa-jpl/explorer-1/compare/1.0.0...1.1.0