uiowa · pyrello · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/index.html b/index.html
@@ -8,6 +8,9 @@
   </head>
   <body>
     <div id="app"></div>
+    <uids-wc-button
+      color="primary"
+    >Test <i slot="icon" class="fas fa-arrow-right"></i></uids-wc-button>
     <script type="module" src="/src/assets/js/click-a11y.js"></script>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "lit": "^3.1.1",
     "vue": "^3.2.31"
   },
   "devDependencies": {

diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
@@ -71,7 +71,7 @@
     top: 0;
     width: $sm;
     height: 100%;
-    border: 3px solid $primary;
+    border: 3px solid var(--brand-primary);
   }
 
   &:before {
@@ -237,13 +237,13 @@
     color: #fff;
 
     &.card__title {
-      color: $secondary;
+      color: var(--brand-secondary);
     }
   }
 }
 
 @mixin bg-black {
-  background-color: $secondary !important;
+  background-color: var(--brand-secondary) !important;
 
   h2,
   h3,
@@ -253,7 +253,7 @@
     color: #fff;
 
     &.card__title {
-      color: $secondary;
+      color: var(--brand-secondary);
     }
   }
 }
@@ -360,7 +360,7 @@
     bottom: 0;
     width: 100%;
     height: 4px;
-    background-color: $primary;
+    background-color: var(--brand-primary);
     transform-origin: center;
     transform: translate(-50%, 0) scaleX(0);
     transition: transform 0.3s ease-in-out;
@@ -377,8 +377,8 @@
 }
 
 @mixin bttn--primary {
-  color: $secondary;
-  background: $primary;
+  color: var(--brand-secondary);
+  background: var(--brand-primary);
 
   i,
   svg,
@@ -389,11 +389,11 @@
 
 @mixin bttn--secondary {
   color: $white;
-  background: $secondary;
+  background: var(--brand-secondary);
     i,
     svg,
     span {
-      color: $primary;
+      color: var(--brand-primary);
     }
 }
 
@@ -402,21 +402,21 @@
 }
 
 @mixin bttn--tertiary {
-  color: $secondary;
+  color: var(--brand-secondary);
   i,
   svg,
   span {
-    color: $primary;
+    color: var(--brand-primary);
   }
 }
 
 @mixin bttn--transparent {
   background: transparent;
-  color: $secondary;
+  color: var(--brand-secondary);
   i,
   svg,
   span {
-    color: $primary;
+    color: var(--brand-primary);
   }
 }
 

diff --git a/src/components/button/Button.stories.js b/src/components/button/Button.stories.js
@@ -1,5 +1,5 @@
 import UidsButton from './Button.vue';
-import Borderless from "../shared/borderless";
+import Borderless from '../shared/borderless';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {

diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
@@ -1,78 +1,26 @@
 <script setup lang="ts">
 import './button.scss';
 import { computed, useSlots } from 'vue';
-import Borderless from "../shared/borderless";
-import { className } from "../utlity";
-const name = 'uids-button'
-const props = defineProps({
-  url: {
-    type: String,
-    default: '',
-  },
-  color: {
-    type: String,
-    default: 'primary',
-    validator: function (value) {
-      return ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1;
-    },
-  },
-  size: {
-    type: String,
-    default: 'medium',
-    validator: function (value) {
-      return ['small', 'medium', 'large'].indexOf(value) !== -1;
-    },
-  },
-  ...Borderless.props,
-  full: {
-    type: Boolean,
-    default: false,
-  },
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-  light_font: {
-    type: Boolean,
-    default: false,
-  },
-  icon: {
-    type: String,
-    default: '',
-  }
-})
-
-const slots = useSlots();
-
-const classes = computed(() => {
-  let classes = ['bttn'];
-  ['full', 'transparent', 'light_font'].forEach((prop) => {
-    if (props[prop] === true) {
-      classes.push(`bttn--${ className(prop) }`);
-    }
-  });
-
-  if (props.color) {
-    classes.push(`bttn--${ className(props.color)}`);
-  }
-
-  if (props.size) {
-    classes.push(`bttn--${ className(props.size)}`);
-  }
-
-  if (!slots.default) {
-    classes.push(`bttn--no-text`);
-  }
-
-  Borderless.addBorderlessClass(classes, props);
-
-  return classes;
-});
+import Borderless from '../shared/borderless';
+import { ButtonBase } from './button-base.js';
+import { className } from '../utlity';
+const name = 'uids-v-button'
+const props = defineProps(ButtonBase.properties)
+window.customElements.define('uids-base-button', ButtonBase);
 </script>
 
 <template>
-  <a :class="classes" :href="url">
+  <uids-base-button
+    :url="url"
+    :transparent="transparent"
+    :size="size"
+    :color="color"
+    :full="full"
+    :light_font="light_font"
+    :icon="icon"
+    :borderless="borderless"
+  >
     <slot></slot>
-    <slot name="icon"></slot>
-  </a>
+    <span slot="icon"><slot name="icon"></slot></span>
+  </uids-base-button>
 </template>
diff --git a/src/components/button/button-base.js b/src/components/button/button-base.js
@@ -0,0 +1,92 @@
+import Borderless from '../shared/borderless.ts';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { className } from '../utlity.ts';
+import styles from './button.scss?inline';
+
+export class ButtonBase extends LitElement {
+  static styles = css`${unsafeCSS(styles)}`
+  static get properties() {
+    return {
+      url: {
+        type: String,
+        default: '',
+      },
+      color: {
+        type: String,
+        default: 'primary',
+        validator: function (value) {
+          return ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1;
+        },
+      },
+      size: {
+        type: String,
+        default: 'medium',
+        validator: function (value) {
+          return ['small', 'medium', 'large'].indexOf(value) !== -1;
+        },
+      },
+      ...Borderless.props,
+      full: {
+        type: Boolean,
+        default: false,
+      },
+      transparent: {
+        type: Boolean,
+        default: false,
+      },
+      light_font: {
+        type: Boolean,
+        default: false,
+      },
+      icon: {
+        type: String,
+        default: '',
+      },
+    };
+  }
+
+  classes() {
+    let classes = ['bttn'];
+    ['full', 'transparent', 'light_font'].forEach((prop) => {
+      if (this[prop] === true) {
+        console.log(prop, this[prop])
+        classes.push(`bttn--${className(prop)}`);
+      }
+    });
+
+    if (this.color) {
+      classes.push(`bttn--${className(this.color)}`);
+    }
+
+    if (this.size) {
+      classes.push(`bttn--${className(this.size)}`);
+    }
+
+    // if (this.defaultSlotElements().length === 0) {
+    //   classes.push(`bttn--no-text`);
+    // }
+
+    Borderless.addBorderlessClass(classes, this);
+
+    return classes.join(' ');
+  }
+
+  defaultSlotElements() {
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    console.log(slot);
+    return slot.assignedElements();
+  }
+
+  render() {
+    // Interpolate the property into our template
+    return html`
+      <a
+        class="${this.classes()}"
+        href="${this.url}"
+      >
+        <slot></slot>
+        <slot name="icon"></slot>
+      </a>
+    `;
+  }
+}
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -1,6 +1,7 @@
 @import '../../assets/scss/variables';
 @import '../../assets/scss/utilities';
 @import '../../assets/scss/border';
+@import '../../assets/scss/base';
 
 .bttn {
   @include bttn;
@@ -9,7 +10,7 @@
   [class*="bg--"] &,
   [class*="bg--"] [class*="bg--"] & {
     border-color: rgba(0, 0, 0, .425);
-    color: $secondary;
+    color: var(--brand-secondary);
   }
 
   [class*="bg--black"] & {
@@ -20,18 +21,18 @@
 .bttn--primary {
   @include bttn--primary;
   @include bttn--focus;
-  border-color: $primary;
-  color: $secondary;
+  border-color: var(--brand-primary);
+  color: var(--brand-secondary);
 
   [class*="bg--"] [class*="bg--gray"] &,
   [class*="bg--gray"] &,
   [class*="bg--"] [class*="bg--white"] &,
   [class*="bg--white"] & {
-    border-color: $primary;
+    border-color: var(--brand-primary);
   }
 
   &:after {
-    background-color: $secondary;
+    background-color: var(--brand-secondary);
   }
 }
 
@@ -78,14 +79,14 @@
     [class*="bg--white"] &,
     [class*="bg--gold"] [class*="bg--white"] &,
     [class*="bg--gold"] [class*="bg--gray"] & {
-      color: $primary;
+      color: var(--brand-primary);
     }
   }
 
   [class*="bg--black"] [class*="bg--white"] &,
   [class*="bg--black"] [class*="bg--gray"] &,
   [class*="bg--black"] [class*="bg--gold"] & {
-    color: $secondary;
+    color: var(--brand-secondary);
   }
 }
 
@@ -112,7 +113,7 @@
     i,
     span,
     svg {
-      color: $secondary;
+      color: var(--brand-secondary);
       [class*="bg--"] [class*="bg--black"] &,
       [class*="bg--black"] & {
         color: #fff;
@@ -121,15 +122,15 @@
       [class*="bg--white"] &,
       [class*="bg--"] [class*="bg--gray"] &,
       [class*="bg--"] [class*="bg--gold"] & {
-        color: $secondary;
+        color: var(--brand-secondary);
       }
     }
   }
   &.bttn--transparent.bttn--secondary {
     i,
     span,
     svg {
-      color: $secondary;
+      color: var(--brand-secondary);
     }
   }
 }