Finish card component

.gitignore

@@ -14,6 +14,7 @@ dist-ssr
 coverage
 *.local
 storybook-static
+package-lock.json
 
 /cypress/videos/
 /cypress/screenshots/

.nvmrc

@@ -1 +1 @@
-14
+14.15.1

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "singleAttributePerLine": true
+}

.storybook/main.js

@@ -5,7 +5,12 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+      },
+    },
     "@storybook/preset-scss",
     "@whitespace/storybook-addon-html",
   ],

.storybook/preview.js

@@ -5,6 +5,19 @@ 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 = {
+  // This is an example of a custom defined viewport.
+  // horizontalCard: {
+  //   name: 'Horizontal card',
+  //   styles: {
+  //     width: '780px',
+  //     height: '350px',
+  //   },
+  // },
+};
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: {
@@ -82,4 +95,11 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+  // More on viewports https://storybook.js.org/docs/react/essentials/viewport.
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      ...customViewports,
+    },
+  },
+};

README.md

@@ -18,40 +18,51 @@ The node-gyp package requires a C compiler. If you notice node-gyp errors after
 ### Install dependencies
 
 ```sh
-npm ci
+yarn install
 ```
 
-### Start the local server
+```sh
+yarn install
+```
+
+### Start the local server OR start Storybook
 Compile and hot-reload for development.
 
 ```sh
-npm run dev
+yarn 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
 
 ```sh
-npm run build
+yarn build
 ```
 
 ### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run test:unit
+yarn test:unit
 ```
 
 ### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
 
 ```sh
-npm run build
-npm run test:e2e # or `npm run test:e2e:ci` for headless testing
+yarn build
+yarn test:e2e # or `npm run test:e2e:ci` for headless testing
 ```
 
 ### Lint with [ESLint](https://eslint.org/)
 
 ```sh
-npm run lint
+yarn lint
 ```
 
 ## Contributing
@@ -62,24 +73,24 @@ While we have not done a perfect job of applying any of these standards, we reco
 ### Creating a PR
 When your feature branch is ready for testing or after you have made any requested changes, you need to run the following command to make sure that the distribution files get updated:
 ```bash
-npm run dist
+yarn dist
 ```
 
 ### Creating a Release
 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`
-6. `git push --tags`
-7. Go to https://github.com/uiowa/uids/releases/new.
-8. Enter the "Tag version" using the version _with_ the `v` at the front (e.g. "v3.1.1").
-9. Enter the "Release title" using the version _without_ the `v` at the front (e.g. "3.1.1").
-10. Paste in the compare link into the description area: `https://github.com/uiowa/uids/compare/v3.1.0...v3.1.1`
-11. Click the "Publish release" button.
-12. Profit!
+3. `npm version patch -m "https://github.com/uiowa/uids/compare/v3.1.0...v3.1.1"`
+4. `git push`
+5. `git push --tags`
+6. Go to https://github.com/uiowa/uids/releases/new.
+7. Enter the "Tag version" using the version _with_ the `v` at the front (e.g. "v3.1.1").
+8. Enter the "Release title" using the version _without_ the `v` at the front (e.g. "3.1.1").
+9. Paste in the compare link into the description area: `https://github.com/uiowa/uids/compare/v3.1.0...v3.1.1`
+10. Click the "Publish release" button.
+11. Profit!
 
 ### Components
 Learn about Fractal components here: https://fractal.build/guide/components/#what-defines-a-component. Note that this project uses Twig (`.twig`) instead of Handlebars (`.hbs`).

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',
+}

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>

src/components/button/Button.stories.js

@@ -3,7 +3,7 @@ import Borderless from "../shared/borderless";
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Basic/Button',
+  title: 'Elements/Button',
   component: UidsButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

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`);
   }

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.