Skip to content

Version 1.6.0
Compare
Choose a tag to compare
@github-actions github-actions released this 12 Aug 00:39
· 290 commits to refs/heads/main since this release
1.6.0
5421e16

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.

Assets 2
Loading