@explorer-1/vue 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @explorer-1/vue
 
+## 0.3.6
+
+### Patch Changes
+
+- Updated dependencies [c307f7b]
+  - @explorer-1/common@1.3.3
+
+## 0.3.5
+
+### Patch Changes
+
+- 0a83db1: Documentation updates, Storybook improvements.
+
 ## 0.3.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.3.2"
+    "@explorer-1/common": "1.3.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js

@@ -6,12 +6,12 @@ export default {
   excludeStories: /.*Data$/,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+      template: `<div id="storyRoot" class="mt-20"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator' // to omit decorators from html output
+      root: '#storyRoot' // to omit decorators from html output
     }
   },
   argTypes: {

package/src/components/BaseAccordionItem/BaseAccordionItem.stories.js

@@ -1,15 +1,59 @@
 import BaseAccordionItem from './BaseAccordionItem.vue'
-import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
 export default {
   title: 'Components/Base/BaseAccordionItem',
-  component: BaseAccordionItem
+  component: BaseAccordionItem,
+  argTypes: {
+    headingLevel: {
+      type: 'string',
+      control: { type: 'select' },
+      options: ['h2', 'h3', 'h4', 'h5', 'h6']
+    },
+    accordionItemOpened: {
+      type: '@click emit',
+      description: 'Fires when an item is opened'
+    },
+    accordionItemClosed: {
+      type: '@click emit',
+      description: 'Fires when an item is closed'
+    },
+    header: {
+      type: 'html',
+      control: { type: 'none' },
+      description:
+        'The entire clickable area of the item, including `heading`. Override with `<template #header>`. Will need to reconstruct `handleClick()` behavior.'
+    },
+    heading: {
+      type: 'html',
+      control: { type: 'none' },
+      description:
+        'Just the heading text within the item header. Override with `<template #heading>`'
+    },
+    default: {
+      type: 'html',
+      control: { type: 'none' },
+      description:
+        'The entire contents of expanded item, including `panelContents`. Override with `<template #default>`. Will need to reconstruct `aria-labelledby` attributes.'
+    },
+    panelContents: {
+      type: { name: 'html', required: true },
+      control: { type: 'none' },
+      description:
+        'Contents of expanded accordion item. There is no default template. Override with `<template #panelContents>`'
+    }
+  }
 }
 
 // stories
 export const BaseStory = {
   name: 'BaseAccordionItem',
   args: {
-    headingLevel: 'h3',
-    item: { title: 'Title for the accordion', body: BlockStreamfieldTruncatedData.body }
+    headingLevel: 'h5',
+
+    item: {
+      title: 'Title for the accordion',
+      body: [{ text: 'No default body template. Customize with the `panelContents` slot.' }]
+    },
+
+    header: '<h3>Test</h3>'
   }
 }

package/src/components/BaseAudio/BaseAudio.stories.js

@@ -5,22 +5,20 @@ export default {
   component: BaseAudio,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="bg-black p-4 pb-5"><story/></div>`
+      template: `<div id="storyRoot" class="bg-black p-4 pb-5"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/
 }
 
-// shared data
-export const BaseAudioData = {
+const BaseAudioData = {
   file: '/audio/file_example_MP3_700KB.mp3',
-  autoPlay: false,
-  loop: false
+  autoPlay: false
 }
 
 export const BaseStory = {

package/src/components/BaseButton/BaseButton.stories.ts

@@ -8,11 +8,13 @@ export default {
   tags: ['autodocs'],
   parameters: {
     slots: {
-      default: 'BaseStory slot content'
+      default: 'The contents of the button, usually text. Override with `<template #default>`',
+      icon: 'Appears to the right of the `default` slot. Override with `<template #icon>`',
+      afterIcon: 'Appears to the right of the `icon` slot. Override with `<template #afterIcon>`'
     },
     docs: {
       description: {
-        component: 'Simple button with several style variations.'
+        component: 'Simple button with style variations.'
       }
     }
   },
@@ -20,7 +22,7 @@ export default {
     ariaLabel: {
       type: 'string',
       description:
-        "ARIA label. Recommended if your button label isn't descriptive, or if it only contains an icon."
+        "ARIA label. Recommended if your button text isn't descriptive, or if it only contains an icon."
     },
     variant: {
       type: 'string',
@@ -32,13 +34,18 @@ export default {
       table: {
         defaultValue: { summary: 'default' }
       }
+    },
+    to: {
+      description: 'If populated, a router-link will be generated. Overrides `href`'
+    },
+    click: {
+      type: '@click emit'
     }
   }
 }
 
 export const BaseButtonData = {
-  label: 'Explore',
-  ariaLabel: 'Explore',
+  ariaLabel: 'Link to learn more',
   compact: false,
   disabled: false,
   to: '/',
@@ -63,4 +70,5 @@ export const DarkButton = {
     ...BaseButtonData,
     variant: 'dark'
   }
+  // globals: { themeVariant: 'ThemeVariantDark' }
 }

package/src/components/BaseHeading/BaseHeading.stories.js

@@ -16,14 +16,14 @@ export default {
     level: {
       type: { name: 'string', required: false },
       description:
-        'The semantic heading tag if different from the display size (ex: a heading looks like an `h4`, but semantically, it is an `h1`.',
+        'The semantic heading tag if different from the display size (ex: a heading needs to look like an `h4`, but semantically, it is an `h1`.',
       control: { type: 'select' },
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
     }
   },
   parameters: {
     slots: {
-      default: 'BaseStory slot content'
+      default: 'The contents of the heading, usually text. Override with `<template #default>`'
     },
     docs: {
       description: {
@@ -71,4 +71,11 @@ const TemplateHeadingsWithIcons = (args) => ({
 })
 
 export const HeadingsWithIcons = TemplateHeadingsWithIcons.bind({})
-HeadingsWithIcons.args = { size: 'h1', level: 'h1', default: 'Heading 1' }
+HeadingsWithIcons.args = { size: 'h3', level: 'h3', default: 'Heading 3 with Icon' }
+HeadingsWithIcons.parameters = {
+  docs: {
+    description: {
+      story: 'Example of overriding the default slot to include an icon component.'
+    }
+  }
+}

package/src/components/BaseImage/BaseImage.stories.ts

@@ -33,7 +33,12 @@ export const BaseImageData = {
 // stories
 export const BaseStory = {
   args: BaseImageData,
-  decorators: [() => ({ template: '<div class="max-w-full"><story /></div>' })]
+  decorators: [() => ({ template: '<div id="storyDecorator" class="max-w-full"><story /></div>' })],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  }
 }
 
 export const LazyLoading = {
@@ -41,12 +46,12 @@ export const LazyLoading = {
   decorators: [
     () => ({
       template:
-        '<div class="max-w-full"><div style="height:3500px">Scroll down and watch the network tab ⬇️</div><div id="storyRoot"><story /></div></div>'
+        '<div class="max-w-full"><div style="height:3500px">Scroll down and watch the network tab ⬇️</div><div id="storyDecorator"><story /></div></div>'
     })
   ],
   parameters: {
     html: {
-      root: '#storyRoot'
+      root: '#storyDecorator'
     }
   }
 }

package/src/components/BaseImageCaption/BaseImageCaption.stories.js

@@ -9,6 +9,17 @@ export default {
         component: 'Caption text used with both images and videos.'
       }
     }
+  },
+  argTypes: {
+    customLink: {
+      type: 'string',
+      description:
+        'Appends a link to the end of the caption. Overrides "Full Image Details" link, if it exists.'
+    },
+    customLinkText: {
+      type: 'string',
+      description: 'Text for the custom link.'
+    }
   }
 }
 

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BaseImagePlaceholder,
   excludeStories: /.*Data$/,
   decorators: () => ({
-    template: '<div class="w-2/3"><story /></div>'
+    template: '<div id="storyRoot" class="w-3/4"><story /></div>'
   }),
   tags: ['autodocs'],
   parameters: {
@@ -16,6 +16,9 @@ export default {
         template: `<BaseImage :object-fit-class="args.BaseImageProps.objectFitClass" :loading="args.BaseImageProps.loading" :src="args.BaseImageProps.src" :srcset="args.BaseImageProps.srcset" :alt="args.BaseImageProps.alt" :width="args.BaseImageProps.width" :height="args.BaseImageProps.height" />`
       }
     },
+    html: {
+      root: '#storyRoot'
+    },
     docs: {
       description: {
         component:
@@ -29,6 +32,8 @@ export default {
       options: Object.keys(aspectRatios)
     },
     responsiveAspectRatio: {
+      description:
+        'Custom tailwind classes to combine screen-size directives with aspect ratios. Example: `md:aspect-ratio-four-three lg:aspect-ratio-twelve-nine`. Overrides `aspectRatio` setting.',
       control: { type: 'text' }
     }
   }
@@ -38,7 +43,8 @@ export default {
 export const BaseImagePlaceholderData = {
   aspectRatio: '12:9',
   darkMode: true,
-  transparentMode: false
+  transparentMode: false,
+  noLogo: false
 }
 
 export const WithImage = {
@@ -60,6 +66,7 @@ export const BaseStory = {
   name: 'No Image',
   args: {
     ...BaseImagePlaceholderData,
+
     BaseImageProps: {
       src: '',
       srcset: '',
@@ -68,6 +75,10 @@ export const BaseStory = {
       height: '',
       objectFitClass: 'scaleDown',
       loading: ''
-    }
+    },
+
+    noLogo: true,
+    aspectRatio: '16:9',
+    responsiveAspectRatio: 'md:aspect-ratio-four-three lg:aspect-ratio-twelve-nine'
   }
 }

package/src/components/BaseLink/BaseLink.stories.js

@@ -4,13 +4,58 @@ export default {
   component: BaseLink,
   parameters: {
     slots: {
-      default: 'BaseStory slot content'
+      default: 'Text or markup contained in the link'
     }
   },
   argTypes: {
     variant: {
       control: { type: 'select' },
-      options: Object.keys(variants)
+      options: Object.keys(variants),
+      description: 'Preset variants'
+    },
+    to: {
+      description: 'If populated, a router-link will be generated. Overrides `href`'
+    },
+    linkClicked: {
+      type: '@click emit',
+      description: 'Event emitted at the root-level (globally available)'
+    },
+    specificLinkClicked: {
+      type: '@click emit',
+      description: 'Locally emitted event (includes event attributes)'
+    },
+    linkClass: {
+      description: 'Apply classes directly to the `<a>` element.'
+    },
+    externalTargetBlank: {
+      description: 'Autmatically sets target to `_blank` for external (non-router) links.'
+    },
+    exact: {
+      description:
+        "Maps to the `exact` prop in Nuxt's native `NuxtLink` component. If `true`, `active-class` will be applied to the link only if the current path is an exact match. Only affects router links."
+    },
+    usePrimaryColor: {
+      type: 'boolean',
+      description: "Overrides the theme's `active` color and uses the `primary` color instead."
+    },
+    caret: {
+      description:
+        'If a caret icon should be appended to the link. Set automatically when using the `primary` link variant.'
+    },
+    caretColor: {
+      control: { type: 'text' },
+      description: 'Tailwind text color class for the caret. Ex: `text-primary`'
+    },
+    caretWrapperClass: {
+      description: 'Add classes to the caret wrapper'
+    },
+    caretClass: {
+      description:
+        "Apply classes directly to the caret. Maps to `MixinAnimationCaret`'s `arrowClass` prop."
+    },
+    caretInline: { description: 'Apply `inline` class to the caret wrapper' },
+    caretMarginLeft: {
+      description: 'Customize the left margin of the caret using Tailwind classes.'
     }
   },
   excludeStories: /.*Data$/
@@ -21,8 +66,6 @@ export const BaseLinkData = {
   variant: 'primary',
   to: '/',
   href: '/',
-  caret: false,
-  caretColor: 'text-primary',
   default: 'Link Text'
 }
 

package/src/components/BasePill/BasePill.stories.js

@@ -7,19 +7,20 @@ export default {
   argTypes: {
     variant: {
       type: { name: 'string', required: false },
-      description: 'The variant (color) of the tag',
+      description: 'The variant (color) of the pill',
       control: { type: 'select' },
       options: ['primary', 'secondary', 'action']
     },
     size: {
       type: { name: 'string', required: false },
-      description: 'The size of the tag',
+      description: 'The size of the pill',
       control: { type: 'select' },
       options: ['sm', 'md', 'lg']
     },
     contentType: {
       control: { type: 'select' },
-      options: Object.keys(eduMetadataDictionary)
+      options: Object.keys(eduMetadataDictionary),
+      description: 'Maps to EDU Resource types. Must use `ThemeEdu` to have an effect.'
     }
   }
 }
@@ -39,5 +40,10 @@ export const SecondarySmall = {
 }
 
 export const WithType = {
-  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
+  args: {
+    size: 'sm',
+    variant: 'primary',
+    text: 'Student Project',
+    contentType: 'EDUStudentProjectPage'
+  }
 }

package/src/components/BasePill/BasePill.vue

@@ -22,15 +22,13 @@ interface BasePillProps {
   variant?: string
   size?: string
   contentType?: string
-  invert?: boolean
 }
 
 // define props
 const props = withDefaults(defineProps<BasePillProps>(), {
   variant: 'primary',
   size: 'md',
-  contentType: undefined,
-  invert: false
+  contentType: undefined
 })
 
 const metadataType = computed(() => {

package/src/components/BaseTimer/BaseTimer.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BaseTimer,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="w-full"><story/></div>`
+      template: `<div id="storyRoot" class="w-full"><story/></div>`
     })
   ]
 }

package/src/components/BlockAccordion/BlockAccordion.stories.js

@@ -70,5 +70,7 @@ export const BlockAccordionData = {
 // stories
 export const BaseStory = {
   name: 'BlockAccordion',
-  args: { data: BlockAccordionData }
+  args: {
+    data: BlockAccordionData
+  }
 }

package/src/components/BlockCardGridItem/BlockCardGridItem.stories.js

@@ -6,12 +6,12 @@ export default {
   tags: ['!autodocs'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
+      template: `<div id="storyRoot" class="lg:w-1/3"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockCardGridItem/BlockCardGridItemElement.vue

@@ -26,7 +26,7 @@
     </div>
     <div class="px-6 py-6 ThemeVariantLight">
       <template v-if="label">
-        <div class="text-primary text-subtitle">
+        <div class="text-primary text-subtitle internal:text-black">
           {{ label }}
         </div>
         <hr

package/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js

@@ -7,7 +7,7 @@ export default {
   tags: ['!autodocs'],
   decorators: [
     () => ({
-      template: `<div class="relative max-w-xl mx-auto container"><story/></div>`
+      template: `<div id="storyRoot" class="relative max-w-xl mx-auto container"><story/></div>`
     })
   ],
   argTypes: {
@@ -18,6 +18,7 @@ export default {
     }
   },
   parameters: {
+    html: { root: '#storyRoot' },
     slots: {
       icon: {
         description: 'Icon slot',

package/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js

@@ -5,12 +5,12 @@ export default {
   component: BlockIframeEmbed,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mx-auto max-w-screen-md"><story/></div>`
+      template: `<div id="storyRoot" class="mx-auto max-w-screen-md"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockImageCarousel/BlockImageCarousel.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BlockImageCarousel,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container"><story/></div>`
+      template: `<div id="storyRoot" class="container"><story/></div>`
     })
   ],
   argTypes: {
@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BlockImageCarouselItem,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
     })
   ],
   argTypes: {
@@ -24,7 +24,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockImageComparison/BlockImageComparison.stories.js

@@ -5,12 +5,12 @@ export default {
   component: BlockImageComparison,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockImageGallery/BlockImageGallery.stories.js

@@ -6,7 +6,7 @@ export default {
   component: BlockImageGallery,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
   argTypes: {
@@ -20,7 +20,7 @@ export default {
 
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockInlineImage/BlockInlineImage.stories.js

@@ -4,6 +4,14 @@ import BlockInlineImage from './BlockInlineImage.vue'
 export default {
   title: 'Components/Blocks/BlockInlineImage',
   component: BlockInlineImage,
+  argTypes: {
+    variant: {
+      type: 'string',
+      description: 'Text size variant',
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large']
+    }
+  },
   excludeStories: /.*(Data)$/
 }
 
@@ -30,7 +38,7 @@ export const BlockInlineImageData = {
 
 export const BaseStory = {
   name: 'Align Right',
-  args: { data: BlockInlineImageData.block }
+  args: { data: BlockInlineImageData.block, variant: 'large' }
 }
 
 export const CustomCaption = {
@@ -64,6 +72,8 @@ export const PortraitImage = {
           width: 500
         }
       }
-    }
+    },
+
+    variant: 'large'
   }
 }