Getting more controls working as expected.

uiowa · Dec 31, 2024 · eac16ac · eac16ac
1 parent 3fbcb18
commit eac16ac
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 70 deletions.
diff --git a/src/components/banner/Banner.stories.js b/src/components/banner/Banner.stories.js
@@ -17,10 +17,38 @@ export default {
   component: UidsBanner,
   tags: ['autodocs'],
   argTypes: {
+    // Utility arg for dynamically setting the background.
     background_media: {
       table: { disable: true },
     },
+    // Slots
+    pre_title: {
+      name: 'Pre-title',
+    },
+    title: {
+      name: 'Title',
+    },
+    content: {
+      name: 'Content',
+    },
     // Props
+    background: {
+      name: 'Background',
+      options: [
+        '',
+        ...Object.keys(Background.allBackgroundOptions),
+      ],
+      control: {
+        type: 'select',
+        labels: {
+          '': 'Image or video',
+          ...Background.allBackgroundOptions,
+        },
+      }
+    },
+    buttons: {
+      name: 'Buttons',
+    },
     button_color: {
       name: 'Button style',
       control: { type: 'select' },
@@ -39,7 +67,7 @@ export default {
       table: { category: 'Headline' },
     },
     headline_style: {
-      name: 'Headline options',
+      name: 'Headline style',
       options: ['uppercase', 'serif'],
       control: {
         type: 'select',
@@ -80,6 +108,7 @@ export default {
     },
     gradient: {
       name: 'Gradient',
+      default: 'dark',
       options: ['dark', 'light'],
       control: { type: 'select' },
       table: { category: 'Display options' },
@@ -106,6 +135,7 @@ const Template = {
     },
     template: `
     <uids-banner
+      :background="args.background"
       :headline_style="args.headline_style"
       :headline_size="args.headline_size"
       :headline_highlight="args.headline_highlight"
@@ -118,7 +148,7 @@ const Template = {
       :button_color="args.button_color"
       :mobile_content_below_image="args.mobile_content_below_image"
     >
-      <template #media>
+      <template #media v-if="args.background === ''">
         ${args.background_media}
       </template>
       <template #pre_title v-if="args.title"><span class="headline__heading" v-html="args.pre_title" ></span></template>
@@ -131,6 +161,7 @@ const Template = {
 export const BackgroundImage = {
   ...Template,
   args: {
+    background: '',
     background_media: `<example-image />`,
     pre_title: 'University of Iowa',
     title: 'Living on Campus',
@@ -156,9 +187,16 @@ export const BackgroundVideo = {
   args: {
     ...BackgroundImage.args,
     background_media: `<example-video-file />`,
-    props: {
-      ...BackgroundImage.args.props,
-    },
+  },
+}
+
+export const BackgroundPattern = {
+  ...Template,
+  args: {
+    ...BackgroundImage.args,
+    background: 'gold--pattern--particle',
+    background_media: '',
+    gradient: 'light',
   },
 }
 

diff --git a/src/components/banner/Banner.vue b/src/components/banner/Banner.vue
@@ -63,12 +63,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  media_type: {
+  background: {
     type: String,
     default: '',
   },
-  ...Background.props,
-  ...Media.props,
 });
 
 const slots = useSlots();
@@ -80,22 +78,18 @@ const classes = computed(() => {
   let classes = ['banner'];
   Background.addBackgroundClass(classes, props);
 
-  if (props.url || props.url_2) {
+  if (props.buttons.length === 1) {
     classes.push('click-container')
   }
 
-  if (props.gradient) {
+  if (props.gradient && props.background === '') {
     classes.push(`banner--gradient-${props.gradient}`);
   }
 
   if (props.height) {
     classes.push(`banner--${props.height}`);
   }
 
-  if (props.media_type) {
-    classes.push(`banner--${props.media_type}`);
-  }
-
   if (props.mobile_content_below_image === true) {
     classes.push(`banner--stacked`);
   }
@@ -125,10 +119,10 @@ const classes = computed(() => {
 });
 
 /**
- * Headline classes.
+ * Pre-title classes.
  */
-const additionalHeadlineClasses = computed(() => {
-  const classes = [];
+const preTitleClasses = computed(() => {
+  const classes = ['headline', 'banner__pre-title'];
 
   if (props.headline_size) {
     classes.push(`headline--${props.headline_size}`);
@@ -144,36 +138,10 @@ const additionalHeadlineClasses = computed(() => {
         break;
     }
   }
-  if (props.headline_highlight) {
-    classes.push('headline--highlight');
-  }
 
   return classes;
 });
 
-/**
- * Determine the linked element.
- */
-const linkedElement = computed(() => {
-  if (!props.url && !props.url_2 && !props.url_3) {
-    return null;
-  }
-
-  if (slots.title) {
-    return 'title';
-  }
-
-  if (props.button_label) {
-    return 'button';
-  }
-
-  if (slots.media) {
-    return 'image';
-  }
-
-  return 'button';
-});
-
 /**
  * Determine if the headline should be linked.
  */
@@ -206,12 +174,13 @@ onMounted(() => {
     <div class="banner__container">
       <div class="banner__content">
         <header class="banner__title" v-if="$slots.title || $slots.pre_title">
-          <div :class="[additionalHeadlineClasses, 'banner__pre-title', 'headline']" v-if="$slots.pre_title">
+          <div :class="preTitleClasses" v-if="$slots.pre_title">
             <slot name="pre_title"></slot>
           </div>
           <uids-headline
             :text_style="headline_style"
-            :class="additionalHeadlineClasses"
+            :highlight="headline_highlight"
+            :class="`headline--${props.headline_size}`"
           >
             <a v-if="headlineLink" :href="headlineLink" class="click-target">
               <slot name="title"></slot>

diff --git a/src/components/shared/background.ts b/src/components/shared/background.ts
@@ -1,31 +1,31 @@
-import { className } from '../utlity'
+import { className } from '../utlity';
 
 const colors = [
   '',
   'black',
   'gold',
   'gray',
   'white',
-]
+];
 
 const allBackgroundOptions = {
-  'bg--black': 'Black',
-  'bg--black--pattern--brain': 'Black - Brain pattern',
-  'bg--black--pattern--community': 'Black - Community pattern',
-  'bg--black--pattern--particle': 'Black - Particle pattern',
-  'bg--gold': 'Gold',
-  'bg--gold--pattern--brain': 'Gold - Brain pattern',
-  'bg--gold--pattern--community': 'Gold - Community pattern',
-  'bg--gold--pattern--particle': 'Gold - Particle pattern',
-  'bg--gray': 'Gray',
-  'bg--gray--pattern--brain': 'Gray - Brain pattern',
-  'bg--gray--pattern--community': 'Gray - Community pattern',
-  'bg--gray--pattern--particle': 'Gray - Particle pattern',
-  'bg--white': 'White',
-  'bg--white--pattern--brain': 'White - Brain pattern',
-  'bg--white--pattern--community': 'White - Community pattern',
-  'bg--white--pattern--particle': 'White - Particle pattern',
-}
+  'black': 'Black',
+  'black--pattern--brain': 'Black - Brain pattern',
+  'black--pattern--community': 'Black - Community pattern',
+  'black--pattern--particle': 'Black - Particle pattern',
+  'gold': 'Gold',
+  'gold--pattern--brain': 'Gold - Brain pattern',
+  'gold--pattern--community': 'Gold - Community pattern',
+  'gold--pattern--particle': 'Gold - Particle pattern',
+  'gray': 'Gray',
+  'gray--pattern--brain': 'Gray - Brain pattern',
+  'gray--pattern--community': 'Gray - Community pattern',
+  'gray--pattern--particle': 'Gray - Particle pattern',
+  'white': 'White',
+  'white--pattern--brain': 'White - Brain pattern',
+  'white--pattern--community': 'White - Community pattern',
+  'white--pattern--particle': 'White - Particle pattern',
+};
 
 const props = {
   /**
@@ -35,10 +35,23 @@ const props = {
     type: String,
     default: '',
     validator: function (value: string) {
-      return colors.indexOf(value) !== -1
+      return colors.indexOf(value) !== -1;
     },
   },
-}
+};
+
+const allBackgroundProps = {
+  /**
+   * Set the background color or pattern of the element.
+   */
+  background: {
+    type: String,
+    default: '',
+    validator: function (value: string) {
+      return value in allBackgroundOptions || value === '';
+    },
+  },
+};
 
 const argTypes = {
   background: {
@@ -55,17 +68,18 @@ const argTypes = {
       },
     },
   },
-}
+};
 
 const addBackgroundClass = (classes: Array<string>, props: Readonly<any>) => {
   if (props.background !== '') {
-    classes.push(`bg--${className(props.background)}`)
+    classes.push(`bg--${className(props.background)}`);
   }
-}
+};
 
 export default {
   props: props,
   argTypes: argTypes,
   addBackgroundClass: addBackgroundClass,
   allBackgroundOptions: allBackgroundOptions,
-}
+  allBackgroundProps: allBackgroundProps,
+};