uiowa · bspeare · Oct 12, 2022 · Oct 12, 2022 · Oct 12, 2022 · Oct 12, 2022
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ dist-ssr
 coverage
 *.local
 storybook-static
+package-lock.json
 
 /cypress/videos/
 /cypress/screenshots/

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14
+14.15.1
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "singleAttributePerLine": true
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -5,6 +5,18 @@ import '../src/assets/scss/headings.scss';
 import '../src/assets/scss/paragraph.scss';
 import '../src/assets/scss/lists.scss';
 
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const customViewports = {
+  horizontalCard: {
+    name: 'Horizontal card',
+    styles: {
+      width: '769px',
+      height: '260px',
+    },
+  },
+};
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: {
@@ -82,4 +94,11 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+  // More on viewports https://storybook.js.org/docs/react/essentials/viewport.
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      ...customViewports,
+    },
+  },
+};
diff --git a/README.md b/README.md
@@ -17,16 +17,27 @@ The node-gyp package requires a C compiler. If you notice node-gyp errors after
 
 ### Install dependencies
 
+```sh
+npm install
+```
+
 ```sh
 npm ci
 ```
 
-### Start the local server
+### Start the local server OR start Storybook
 Compile and hot-reload for development.
 
 ```sh
 npm run dev
 ```
+
+**OR**
+
+```sh
+yarn storybook
+```
+
 The command will output the server URL to visit in your browser, ex. http://localhost:3000.
 
 ### Type-Check, Compile and Minify for Production
@@ -69,7 +80,7 @@ npm run dist
 The following is an example of the workflow and not meant to be copied and pasted verbatim. Please review the summary at https://semver.org/ to understand which type of release you should be creating. The version numbers you will use when you are actually going through this process will depend on the current version number and what type of release you are creating.
 
 To see the full options for the command, run `npm version --help`.
-1. `git checkout 3.x` - Make sure you are on the `3.x` branch.
+1. `git checkout 4.x` - Make sure you are on the `4.x` branch.
 2. `git pull` - Make sure you have the most recent updates.
 4. `npm version patch -m "https://github.com/uiowa/uids/compare/v3.1.0...v3.1.1"`
 5. `git push`

diff --git a/src/assets/images/viewbook/sections/herky2.jpeg b/src/assets/images/viewbook/sections/herky2.jpeg
diff --git a/src/components/banner/Banner.stories.js b/src/components/banner/Banner.stories.js
@@ -0,0 +1,37 @@
+import UidsBanner from './Banner.vue'
+import media_image from '../../assets/images/viewbook/sections/122.jpg'
+
+export default {
+  title: 'Components/Banner',
+  component: UidsBanner,
+  argTypes: {
+    media: {
+      control: 'text',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { UidsBanner },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-banner
+      :title="args.title"
+      :image="args.image"
+      :url="args.url"
+    >
+      <template #media v-if="args.media"><span v-html="args.media" ></span></template>
+      <template #default><div v-html="args.default"></div></template>
+    </uids-banner>
+  `
+})
+
+export const Default = Template.bind({})
+
+Default.args = {
+  media: '<img src="' + media_image + '" alt="Alt">',
+  title: 'Write Your Story',
+  url: 'https://uiowa.edu',
+}
diff --git a/src/components/banner/Banner.vue b/src/components/banner/Banner.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import UidsHeadline from '../headline/Headline.vue';
-import UidsButton from '../button/Button.vue';
-import { computed } from 'vue';
-import Background from "../shared/background";
+import { computed, useSlots } from 'vue'
+import { className } from '../utlity'
+import UidsHeadline from '../headline/Headline.vue'
+import UidsButton from '../button/Button.vue'
+import Background from '../shared/background'
+import '../background/background.scss'
 
 const name = 'uids-banner'
 
@@ -11,9 +13,6 @@ const props = defineProps({
   image: { type: String },
   url: { type: String },
   text: { type: String },
-  headline_settings: {
-    type: Object,
-  },
   button_text: {
     type: String,
   },
@@ -34,22 +33,25 @@ const props = defineProps({
   // title_classes?: string
   // button_link?: string
   // button_text?: string
-})
+});
 
 // Compose a string out of the classes passed to the component.
 const classes = computed(() => {
-  let classes = ["banner"];
+  let classes = ['banner'];
+
+  ['overlay_color', 'overlay_to', 'size', 'vertical_alignment', 'horizontal_alignment'].forEach((prop) => {
+    if (props[prop] === true) {
+      classes.push(`banner--${ className(prop) }`);
+    }
+  });
+
+  Background.addBackgroundClass(classes, props);
+
   if (props.url) {
     classes.push('click-container')
   }
-  // @todo Add classes.
-  Array.prototype.forEach.call(['overlay_color', 'overlay_to', 'size', 'vertical_alignment', 'horizontal_alignment'], setting => {
-      // @todo Check if the setting is set and then add a class for it.
-      classes.push('banner--' + props[setting])
-    }
-  );
-  Background.addBackgroundClass(classes, props);
-  return classes.join(" ");
+
+  return classes;
 })
 
 const getHeadlineSettings = computed(() => {
@@ -83,7 +85,7 @@ const getHeadlineSettings = computed(() => {
           <uids-headline
             v-if="title"
             :level="getHeadlineSettings.level"
-            :class="banner_title_classes"
+            :class="getHeadlineSettings.classes"
             :href="url"
           >{{ title }}</uids-headline>
         </slot>

diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
@@ -60,7 +60,6 @@ const classes = computed(() => {
     classes.push(`bttn--${ className(props.size)}`);
   }
 
-  console.log(slots.default);
   if (!slots.default) {
     classes.push(`bttn--no-text`);
   }

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -146,6 +146,34 @@
   }
 }
 
+.bttn--circle {
+  padding: .55rem .7em;
+  border-radius: 50%;
+  transform: none;
+  line-height: 1;
+
+  &:after {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    background-color: transparent;
+    transition: border-color .3s ease-in-out;
+    transform: none;
+    position: absolute;
+  }
+
+  &:hover:after,
+  &:focus:after {
+    transform: none;
+    transition: none;
+    border: 3px solid;
+    border-color: inherit;
+    background-color: transparent;
+  }
+}
+
 .bttn--large {
   padding: 1.5rem 2.5rem 1.5rem;
   // @todo Change this to use css variables, calc the size.