Additional search and listing page tweaks, New BaseTag component (#467)

* adjustments after more search testing

* fixing topic display in search results list

* adding BaseTag and adding it to HeroMedium

* changing way theme is set (not set by module). minor EDU theme tweaks

* differentiating font weight in BaseTag between default and edu themes

* lint

apps/vue-storybook/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     BasePlaceholder: typeof import('./node_modules/@explorer-1/vue/src/components/BasePlaceholder/BasePlaceholder.vue')['default']
     BaseRadioGroup: typeof import('./node_modules/@explorer-1/vue/src/components/BaseRadioGroup/BaseRadioGroup.vue')['default']
     BaseSwimlane: typeof import('./node_modules/@explorer-1/vue/src/components/BaseSwimlane/BaseSwimlane.vue')['default']
+    BaseTag: typeof import('./node_modules/@explorer-1/vue/src/components/BaseTag/BaseTag.vue')['default']
     BaseTimer: typeof import('./node_modules/@explorer-1/vue/src/components/BaseTimer/BaseTimer.vue')['default']
     BaseUnitToggle: typeof import('./node_modules/@explorer-1/vue/src/components/BaseUnitToggle/BaseUnitToggle.vue')['default']
     BaseVideo: typeof import('./node_modules/@explorer-1/vue/src/components/BaseVideo/BaseVideo.vue')['default']

apps/vue-storybook/stories/components/BaseTag.stories.js

@@ -0,0 +1,34 @@
+import BaseTag from '@explorer-1/vue/src/components/BaseTag/BaseTag.vue'
+
+export default {
+  title: 'Components/Base/BaseTag',
+  component: BaseTag,
+  argTypes: {
+    variant: {
+      type: { name: 'string', required: false },
+      description: 'The variant (color) of the tag',
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'action']
+    },
+    size: {
+      type: { name: 'string', required: false },
+      description: 'The size of the tag',
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    }
+  },
+  parameters: {
+    slots: {
+      default: 'Default slot'
+    }
+  }
+}
+
+// stories
+export const PrimaryMedium = {
+  args: { size: 'md', variant: 'primary', default: 'Psyche Asteroid' }
+}
+
+export const SecondarySmall = {
+  args: { size: 'sm', variant: 'secondary', default: 'Do it yourself' }
+}

apps/vue-storybook/stories/components/HeroListingIndex.stories.js

@@ -15,6 +15,7 @@ export default {
 export const HeroListingIndexData = {
   listingPage: {
     featured: {
+      topicLabel: 'Mars',
       url: '/news/new-maps-open-roads-to-research/',
       title: 'Creating Robots to go Where Humans Can’t',
       image: {
@@ -41,21 +42,22 @@ export const HeroListingIndexData = {
 export const Default = {
   args: {
     customLabel: 'Featured',
-    data: HeroListingIndexData.listingPage
+    pageData: HeroListingIndexData.listingPage
   }
 }
 
 export const NewsImageHero = {
   args: {
     customLabel: 'Featured',
-    data: {
+    pageData: {
       featured: {
+        topicLabel: 'Mars',
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',
         heroBlocks: [
           {
             blockType: 'ImageChooserBlock',
-            image: {
+            listingPageHeroImage: {
               src: {
                 url: 'https://picsum.photos/id/973/1800/1200',
                 width: 1800,
@@ -80,8 +82,9 @@ export const NewsImageHero = {
 export const NewsVideoHero = {
   args: {
     customLabel: 'Featured',
-    data: {
+    pageData: {
       featured: {
+        topicLabel: 'Mars',
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',
         heroBlocks: [
@@ -101,16 +104,17 @@ export const NewsVideoHero = {
 export const NewsCarouselHero = {
   args: {
     customLabel: 'Featured',
-    data: {
+    pageData: {
       featured: {
+        topicLabel: 'Mars',
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',
         heroBlocks: [
           {
             blockType: 'CarouselBlock',
             blocks: [
               {
-                image: {
+                listingPageHeroImage: {
                   src: {
                     url: 'https://picsum.photos/id/973/1800/1200',
                     width: 1800,
@@ -127,7 +131,7 @@ export const NewsCarouselHero = {
                 }
               },
               {
-                image: {
+                listingPageHeroImage: {
                   src: {
                     url: 'https://picsum.photos/id/973/1800/1200',
                     width: 1800,

apps/vue-storybook/stories/components/HeroMedium.stories.js

@@ -56,6 +56,7 @@ export const HeroMediumData = {
 
 export const Default = {
   args: {
+    customTag: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,

packages/common/tailwind.colors.ts

@@ -123,7 +123,15 @@ export const ThemeWww = {
     '--color-primary': foundationColors['jpl-red-light'],
     '--color-primary-light': foundationColors['jpl-red-light'],
     '--color-primary-dark': foundationColors['jpl-red'],
-    '--color-primary-darker': foundationColors['jpl-red-dark']
+    '--color-primary-darker': foundationColors['jpl-red-dark'],
+    '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-light': 'var(--color-primary-light)',
+    '--color-secondary-dark': 'var(--color-primary-dark)',
+    '--color-secondary-darker': 'var(--color-primary-darker)',
+    '--color-action': 'var(--color-primary)',
+    '--color-action-light': 'var(--color-primary-light)',
+    '--color-action-dark': 'var(--color-primary-dark)',
+    '--color-action-darker': 'var(--color-primary-darker)'
   }
 }
 

packages/nuxt/dist/module.d.mts

@@ -1,8 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu';
 interface ModuleOptions {
-    theme: Explorer1Theme;
     includeStyles: boolean;
     includeComponents: boolean;
     includePageTemplates: boolean;

packages/nuxt/dist/module.d.ts

@@ -1,8 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu';
 interface ModuleOptions {
-    theme: Explorer1Theme;
     includeStyles: boolean;
     includeComponents: boolean;
     includePageTemplates: boolean;

packages/nuxt/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, installModule, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, installModule, addComponentsDir, addImportsSources } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -7,7 +7,6 @@ const module = defineNuxtModule({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    theme: "defaultTheme",
     includeStyles: true,
     includeComponents: true,
     includePageTemplates: true,
@@ -29,30 +28,6 @@ const module = defineNuxtModule({
     addPlugin(resolver.resolve(pluginDir, "filters"));
     addPlugin(resolver.resolve(pluginDir, "vue-click-outside"));
     addPlugin(resolver.resolve(pluginDir, "vue-compare-image.client"));
-    if (options.includeStore) {
-      switch (options.theme) {
-        case "defaultTheme":
-          addPlugin(resolver.resolve(pluginDir, "set-theme-default"));
-          break;
-        case "ThemeEdu":
-          addPlugin(resolver.resolve(pluginDir, "set-theme-edu"));
-          break;
-        case "ThemeInternal":
-          addPlugin(resolver.resolve(pluginDir, "set-theme-internal"));
-          break;
-        default:
-          addPlugin(resolver.resolve(pluginDir, "set-theme-default"));
-      }
-    }
-    if (!nuxt.options.app.head.htmlAttrs) {
-      nuxt.options.app.head["htmlAttrs"] = {
-        class: [options.theme]
-      };
-    } else if (!nuxt.options.app.head.htmlAttrs.class) {
-      nuxt.options.app.head.htmlAttrs["class"] = options.theme;
-    } else {
-      nuxt.options.app.head.htmlAttrs.class = options.theme;
-    }
     if (options.includeStyles) {
       await installModule("@nuxtjs/tailwindcss", {
         configPath: resolver.resolve(runtimeDir, "tailwind.config")
@@ -99,6 +74,10 @@ const module = defineNuxtModule({
         extensions: [".vue"]
       });
     }
+    addImportsSources({
+      from: "@explorer-1/vue/src/interfaces",
+      imports: ["ImageObject", "Explorer1Theme"]
+    });
     if (options.includePageTemplates) {
       addComponentsDir({
         path: resolver.resolve("./../node_modules/@explorer-1/vue/src/templates"),
@@ -109,8 +88,17 @@ const module = defineNuxtModule({
     }
     if (options.includeStore) {
       await installModule("@pinia/nuxt", {
+        autoImports: ["useThemeStore"],
         storesDirs: ["./store/**", resolver.resolve(runtimeDir, "store")]
       });
+      addImportsSources({
+        from: "@explorer-1/vue/src/store/theme",
+        imports: ["useThemeStore"]
+      });
+      addImportsSources({
+        from: "@explorer-1/vue/src/store/header",
+        imports: ["useHeaderStore"]
+      });
     }
   }
 });

packages/nuxt/playground/nuxt.config.ts

@@ -1,7 +1,5 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  explorer1: {
-    theme: 'ThemeEdu'
-  },
+  explorer1: {},
   devtools: { enabled: true }
 })

packages/nuxt/src/module.ts

@@ -5,14 +5,10 @@ import {
   addImports,
   addPlugin,
   installModule,
-  createResolver
+  createResolver,
+  addImportsSources
 } from '@nuxt/kit'
-
-// TODO: Note: importing this type from elsewhere (such as @explorer-1/vue/src/interfaces) breaks the module build
-type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
-
 export interface ModuleOptions {
-  theme: Explorer1Theme
   includeStyles: boolean
   includeComponents: boolean
   includePageTemplates: boolean
@@ -26,7 +22,6 @@ export default defineNuxtModule<ModuleOptions>({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    theme: 'defaultTheme',
     includeStyles: true,
     includeComponents: true,
     includePageTemplates: true,
@@ -51,32 +46,6 @@ export default defineNuxtModule<ModuleOptions>({
     addPlugin(resolver.resolve(pluginDir, 'filters'))
     addPlugin(resolver.resolve(pluginDir, 'vue-click-outside'))
     addPlugin(resolver.resolve(pluginDir, 'vue-compare-image.client'))
-    if (options.includeStore) {
-      switch (options.theme) {
-        case 'defaultTheme':
-          addPlugin(resolver.resolve(pluginDir, 'set-theme-default'))
-          break
-        case 'ThemeEdu':
-          addPlugin(resolver.resolve(pluginDir, 'set-theme-edu'))
-          break
-        case 'ThemeInternal':
-          addPlugin(resolver.resolve(pluginDir, 'set-theme-internal'))
-          break
-        default:
-          addPlugin(resolver.resolve(pluginDir, 'set-theme-default'))
-      }
-    }
-
-    // TODO: Find a more elegant way to set htmlAttrs.class
-    if (!nuxt.options.app.head.htmlAttrs) {
-      nuxt.options.app.head['htmlAttrs'] = {
-        class: [options.theme]
-      }
-    } else if (!nuxt.options.app.head.htmlAttrs.class) {
-      nuxt.options.app.head.htmlAttrs['class'] = options.theme
-    } else {
-      nuxt.options.app.head.htmlAttrs.class = options.theme
-    }
 
     if (options.includeStyles) {
       await installModule('@nuxtjs/tailwindcss', {
@@ -130,7 +99,11 @@ export default defineNuxtModule<ModuleOptions>({
         pathPrefix: false,
         extensions: ['.vue']
       })
-    }
+    } // types
+    addImportsSources({
+      from: '@explorer-1/vue/src/interfaces',
+      imports: ['ImageObject', 'Explorer1Theme']
+    })
     if (options.includePageTemplates) {
       // add @explorer-1/vue page template components
       addComponentsDir({
@@ -142,8 +115,17 @@ export default defineNuxtModule<ModuleOptions>({
     }
     if (options.includeStore) {
       await installModule('@pinia/nuxt', {
+        autoImports: ['useThemeStore'],
         storesDirs: ['./store/**', resolver.resolve(runtimeDir, 'store')]
       })
+      addImportsSources({
+        from: '@explorer-1/vue/src/store/theme',
+        imports: ['useThemeStore']
+      })
+      addImportsSources({
+        from: '@explorer-1/vue/src/store/header',
+        imports: ['useHeaderStore']
+      })
     }
   }
 })