Version 1.3.0

Changes

✨ Features

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

🐛 Bug Fixes

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

Version 1.2.0

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)

Version 1.1.0

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.

Old name	New name	All users	A la carte: SCSS updates	A la carte: JS updates
BaseCarouselCards	MixinCarousel	Update CSS class name in html template	Renamed to _MixinCarousel.scss	Update /src/js/vendors/_swiper.js and /src/js/vendors/_swiperOptions.js. If importing exports directly from _swiperOptions, note that the export name has changed to MixinCarousel
AnimationCaret	MixinAnimationCaret	Update CSS class name in html template	Renamed to _MixinAnimationCaret.scss	N/A
BaseVideoBg	MixinVideoBg	N/A	N/A	N/A
HeroFeature	HeroMedium	Update CSS class name in html template	Renamed to _HeroMedium.scss	N/A
HeroFocalPoint	HeroLarge	Update CSS class name in html template	Renamed to _HeroLarge.scss	N/A
BlockArticleCarousel	BlockLinkCarousel	Update CSS class name in html template	N/A	N/A
BlockArticleCarouselItem	BlockLinkCard	N/A	N/A	N/A
BlockFactCards	BlockCardGroup	Update CSS class name in html template	N/A	N/A
BlockFactCardsItem	BlockCard	N/A	N/A	N/A

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 #165
• @addisonhardy made their first contribution in #167
• @Scotchester
• @laespinoza
• @kaelynrichards
• @stephiescastle

Full Changelog: 1.0.0...1.1.0

Version 1.0.0

Changes

✨ Features

• Add browserslist, update postcss-preset-env, and remove dependencies we don't need to install on their own (#111)

🐛 Bug Fixes

• Storybook: fix gallery function in carousel lightboxes (#118)
• BaseCarouselCards: consistent display breakpoints for navigation arrows (#133)

📘 Documentation

• Update README and Getting Started guide (#98)
• Storybook: reorganize docs and add more guides (#137)
• Storybook: clean up component organization and add a table of contents for each section (#133)
• Storybook: change storyDecorator to storyRoot (#113)

🧰 Maintenance

• Bumping dependencies and removing unused ones

  • Bump Swiper from 6.6.2 to 8.0.2 and migrating templates from v6 to v8 (#71, #131, #136)
  • Bump @fancyapps/ui from 4.0.5 to 4.0.23 (#105, #124, #135)
  • Bump @storybook/html from 6.4.17 to 6.4.18 (#134)
  • Bump postcss from 8.3.6 to 8.4.6 (#93, #132)
  • Bump eslint from 7.32.0 to 8.8.0 (#115, #128)
  • Bump postcss-preset-env from 6.7.0 to 7.3.0 (#66, #126)
  • Bump storybook dependencies from 6.4.14 to 6.4.17 (#88, #120, #125)
  • Bump eslint-plugin-storybook from 0.5.5 to 0.5.6 (#116)
  • Bump parcel from 2.1.1 to 2.2.1 (#109)
  • Bump lazysizes from 5.3.0 to 5.3.2 (#97)
  • Bump prettier from 2.4.1 to 2.5.1 (#87)
  • Bump stylelint-config-prettier from 8.0.2 to 9.0.3 (#89)
  • Bump JamesIves/github-pages-deploy-action from 4.1.5 to v4.x (currently 4.2.2) (#80)
  • Bump browser-sync from 2.26.14 to 2.27.7 (#65, #112)
  • Bump parcel, @parcel/transformer-sass, parcel-namer-rewrite (#84)
  • Remove babel-loader as independent dependency (#108)
  • Remove unused postcss-loader (#96)
  • Remove postcss-cli (#92)

• Release Drafter: Add 'dependencies' label to the Maintenance category (#91)

Migration guide: 1.0.0-beta.3 to 1.0.0

• Change all instances of CSS class name .swiper-container to .swiper. Also check templates for usage of this class.
• A change has been made to the BaseCarouselCards template, which affects BlockArticleCarousel and BlockFactCards templates as well. The navigation div, <div class="swiper-navigation lg:block">, should change lg:block to xl:block. This ensures the navigation arrows only appear when the space between each card is 56px (i.e. the 1280px breakpoint).

For a la carte users

A few more migration steps are necessary for projects that are bundling their own frontend assets.

• Syntax for importing the Swiper js library has changed. If you were importing the library from swiper/core and using the SwiperCore class, you will need to update your implementation to import Swiper from swiper. Refer to Explorer 1's implementation as an example.
• Optional: modules can now be passed with SwiperOptions. Instead of Swiper.use([Navigation, Lazy, A11y]), you can pass them as modules: [Navigation, Lazy, A11y]
• The /src/js/ folder has been reorganized. If you are importing JavaScript files from /src/js/, you will need to update your paths:

  Old path	New path
  src/js/_lazysizes	src/js/vendors/_lazysizes
  src/js/_swiper	src/js/vendors/_swiper
  src/js/_swiperOptions	src/js/vendors/_swiperOptions
  src/js/_HeroMedia	src/js/components/_HeroMedia

---

Full Changelog: 1.0.0-beta.3...1.0.0

Version 1.0.0-beta.3

Notable Changes

Breaking Changes

Fixing a sass deprecation warning in #62 has led to some breaking changes for projects that use scss assets a la carte. Your project now needs to use a sass compiler that supports usage of @use directives, and also use a version of sass that includes the sass:math module.

Projects using Parcel as their frontend bundler with node-sass as their sass compiler will likely encounter the following build error:

🚨 Build failed.
@parcel/transformer-sass: Undefined function.
   ╷
11 │       padding-bottom: math.div($height, $width) * 100%;

To fix, remove node-sass to default to Parcel's built-in dart-sass. If that still doesn't work, you may need to install [email protected] to override the version of sass bundled with Parcel.

Projects using sass-loader

• remove node-sass and install sass

Style changes:

• .BlockTable - This CSS class has been extended to include styles for various types of content within in a table, spefically for use with Wagtail's TypedTableBlock. Check your usage of BlockTable for any unexpected visual changes
• Pagination in .BlockImageCarousel and .BlockImageGallery has additional styles applied. If your project has configured swiper with different pagination rules, then these styles may conflict. Be sure to check the mobile pagination of these blocks when updating.
• Additional focus styles have been applied to BaseButton
• WCP: HeroMedia styles are now part of Explorer-1, specifically styles for the show/hide caption on mobile. These styles can now be removed from WCP and imported from Explorer-1.

Script changes:

• WCP: JavaScript for HeroMedia is now provided by Explorer-1. _HeroMedia.js can be removed and imported from Explorer-1. instead.

Summary of Changes

Features

• Extend BlockTable styles to support new content types by @Scotchester in #79

Maintenance and Docs

• Storybook: Add BlockRelatedLinks component by @laespinoza in #45
• Storybook: Add BlockTeaser component by @laespinoza in #47
• Storybook: Add BlockTable component by @laespinoza in #46
• Storybook: Add BlockVideoEmbed component by @laespinoza in #48
• Storybook: Add HeroFeature component by @laespinoza in #49
• Storybook: Add HeroFocalPoint component by @laespinoza in #50
• Storybook: adding descriptions to BaseLink and HeroFocalPoint by @stephiescastle in #51
• Storybook: Add RoboticsDetailFactsItem component by @laespinoza in #53
• Storybook: Add HeroMedia component by @laespinoza in #52
• Storybook: Add SearchResultCard component by @laespinoza in #54
• Storybook: Add BlockImageCarousel component by @laespinoza in #56
• Storybook: Add BlockImageGallery component by @laespinoza in #57
• Storybook: adding all icon stories by @stephiescastle in #63
• Storybook: update storybook version, add storybook linter, fix deprecation warnings by @stephiescastle in #62
• Storybook: Add BaseCarouselCards, ArticleCarousel, and RoboticsDetailFacts components by @stephiescastle in #70
• Adding dependabot config by @stephiescastle in #61

Full Changelog: 1.0.0-beta.2...1.0.0-beta.3

Version 1.0.0-beta.2

Changes

✨ Features

• Adds semantic colors and base styles for form elements (#43)
• Adds @fancyapps/ui for modals and lightboxes (#38)

📘 Documentation

• Storybook: Add BlockQuote component (#44)
• Storybook: Add BlockImage component (#38)
• Storybook: Add BlockInlineImage component (#35)
• Storybook: Add BlockImage component (as well as Fancybox) (#38)
• Storybook: Add BlockKeyPoints component (#39)
• Storybook: Add BlockText component (#31)
• Storybook: Add BlockIframeEmbed component (#29)
• Storybook: Add BasePlaceholder component (#26)
• Storybook: Add BaseImageCaption component (#25)
• Storybook: Add ArticleCarouselItem component (#22)

🧰 Maintenance

• Re-ordering Tailwind imports and adding ignore files for linters (#36)
• Set up linters and GitHub Actions workflow to run them on PRs (#30)
• Set up Release Drafter workflow in GitHub Actions (#24)

Migration guide

• Input fields will now default to having a gray-light-mid border. For input fields that should not have a border, add class border-0 to them.
• Projects applying a border-color to their inputs should remove those styles in order to inherit those from Explorer-1.
• Projects importing SCSS partials a la carte will need to import the new _forms.scss partial as one of the first imports in the main SCSS file.
• Projects that have defined their own semantic colors should remove those color definitions from their TailwindCSS config and use those provided by Explorer-1 instead.

Version 1.0.0-beta.1 – Initial public release

This marks the first public release of the Explorer 1 Design System! 🎉

For users of the internal alpha releases, please note that this release contains breaking changes with regard to support for Internet Explorer:

The following resources were deleted and need to be removed from your project's JS and SCSS imports:

• src/js/_detect-ie.js, including the node polyfill for global
• src/scss/components/_RoboticsDetailFacts.scss
• src/scss/components/_SearchResultCard.scss
• all .woff files
  • This has been accounted for in explorer-1's styles, but be aware of this in case you are importing .woff files a la carte.