@explorer-1/vue 0.2.67 → 0.2.70

package/src/components/BlockRichTable/BlockRichTable.stories.js

@@ -72,3 +72,97 @@ export const BaseStory = {
     table: BlockRichTableData
   }
 }
+export const MixedColumnWidths = {
+  args: {
+    table: {
+      blockType: 'RichTableBlock',
+      tableCaption:
+        'Ut dapibus cursus quam, non dapibus diam pellentesque ac. Maecenas ultrices porta dui eget placerat. Curabitur ornare congue interdum.',
+      tableContent: {
+        tableHead: [
+          [
+            {
+              text: 'Image'
+            },
+            {
+              text: 'Type'
+            },
+            {
+              text: 'Description'
+            }
+          ]
+        ],
+        tableBody: [
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'Internal'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'External'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Morbi pretium, massa non convallis facilisis, lectus eros vulputate turpis, et imperdiet eros metus eu enim. Cras consequat iaculis leo eget auctor. Sed bibendum, nulla vel ultricies aliquam, augue mauris sagittis massa, nec malesuada massa justo id sem. In hac habitasse platea dictumst. Sed ullamcorper bibendum libero vitae pellentesque.</p>\n'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: false,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'N/A'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Maecenas vel dapibus ligula, pretium <a href="#">dictum est</a>. Proin venenatis massa vulputate <strong>est rhoncus</strong>, sed ornare ex sagittis. Donec iaculis magna in rhoncus malesuada.</p>\n'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'Internal'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+            }
+          ]
+        ]
+      }
+    }
+  }
+}

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -25,15 +25,24 @@ export default defineComponent({
   >
     <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto !mb-0">
       <table
-        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
+        v-if="table.tableContent"
+        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto m-0 p-0"
       >
+        <caption
+          v-if="table.tableCaption"
+          class="sr-only"
+        >
+          {{
+            table.tableCaption
+          }}
+        </caption>
         <thead v-if="table.tableContent.tableHead?.length">
           <tr>
             <th
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              class="min-w-[12rem] bg-jpl-blue-darker edu:bg-jpl-teal-dark text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
+              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
             >
               {{ headCell.text }}
             </th>
@@ -47,7 +56,7 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-[12rem] bg-white text-gray-dark border-gray-light-mid"
+              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid lg:p-5 p-3 align-top"
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">
@@ -75,11 +84,12 @@ export default defineComponent({
       </table>
     </div>
     <template v-if="table.tableCaption">
-      <caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
-        {{
-          table.tableCaption
-        }}
-      </caption>
+      <div
+        class="max-w-screen-3xl mx-auto block text-left px-0 text-gray-mid-dark text-body-sm mt-4"
+        aria-hidden
+      >
+        {{ table.tableCaption }}
+      </div>
     </template>
   </div>
 </template>

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -16,6 +16,7 @@ import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
 import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
 import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
 import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
 import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 
 export default {
@@ -127,6 +128,45 @@ export const BlockStreamfieldData = {
       alignTo: 'left'
     },
     BlockRichTableData,
+    MixedColumnWidths.args.table,
+    {
+      blockType: 'RichTableBlock',
+      tableCaption: 'table caption',
+      tableContent: {
+        tableHead: [
+          [
+            {
+              text: '1. Learn'
+            }
+          ]
+        ],
+        tableBody: [
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>My custom caption.</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            }
+          ],
+          [
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Rich text. Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+            }
+          ],
+
+          [
+            {
+              blockType: 'CharBlock',
+              value:
+                "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
+            }
+          ]
+        ]
+      }
+    },
     {
       blockType: 'ListBlock',
       field: 'card_grid',

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -11,7 +11,7 @@ interface MetadataEduResourceProps {
   resource: EduResourceCardObject
   compact?: boolean
   variant?: string
-  showTime: boolean
+  showTime?: boolean
 }
 
 // define props

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -23,7 +23,7 @@ const clearSearch = () => {
 const submitSearch = () => {
   emit('submitForm')
   router.push({
-    path: themeStore.isEdu ? '/edu/search/' : '/search',
+    path: themeStore.isEdu ? '/edubeta/search/' : '/search',
     query: { query: searchQuery.value }
   })
 }

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -29,6 +29,7 @@
         }
       }"
       show-calendar-chip
+      use-featured-styles
     />
     <EventCard
       v-else-if="isEvents"

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -28,6 +28,7 @@
       :heading-level="headingLevel"
       size="sm"
       show-calendar-chip
+      use-featured-styles
     />
     <BlockLinkCard
       v-else-if="typename === 'News'"

package/src/constants.ts

@@ -1,6 +1,12 @@
 import type { PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUNewsPage: {
+    label: 'News',
+    variant: 'primary',
+    icons: 'primary',
+    type: undefined
+  },
   EDUEventPage: {
     label: 'Event',
     variant: 'primary',