Releases: nasa-jpl/explorer-1
Version 2.0.1
Version 2.0.0
Version 1.10.0
Version 1.9.0
Version 1.8.0
Version 1.7.2
Version 1.7.1
Version 1.7.0
Version 1.6.0
Changes
✨ Features
📘 Documentation
🧰 Maintenance
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.