diff --git a/index.html b/index.html
index 1d9f38ceef..8af75f818c 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
+ Test
diff --git a/package.json b/package.json
index dcdb8d870d..20cec70240 100644
--- 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
index 577bffc612..d5e7c5acdc 100755
--- 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
index 5247acfff7..f0af40eb8c 100644
--- 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
index 722b0aabde..26cd992779 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,78 +1,26 @@
-
+
-
-
+
+
diff --git a/src/components/button/button-base.js b/src/components/button/button-base.js
new file mode 100644
index 0000000000..096aa03743
--- /dev/null
+++ 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`
+
+
+
+
+ `;
+ }
+}
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 74f813d349..2d10b844c1 100755
--- 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,7 +122,7 @@
[class*="bg--white"] &,
[class*="bg--"] [class*="bg--gray"] &,
[class*="bg--"] [class*="bg--gold"] & {
- color: $secondary;
+ color: var(--brand-secondary);
}
}
}
@@ -129,7 +130,7 @@
i,
span,
svg {
- color: $secondary;
+ color: var(--brand-secondary);
}
}
}
diff --git a/src/main.ts b/src/main.ts
index 01433bca2a..3e09eaef7a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,7 @@
import { createApp } from 'vue'
import App from './App.vue'
+import { ButtonBase } from '@/components/button/button-base.js'
+
+window.customElements.define('uids-wc-button', ButtonBase);
createApp(App).mount('#app')
diff --git a/vite.config.ts b/vite.config.ts
index ad15b9a0f3..cde8080a27 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,7 +23,16 @@ export default defineConfig({
},
},
},
- plugins: [vue()],
+ plugins: [
+ vue({
+ template: {
+ compilerOptions: {
+ // treat all tags with a dash as custom elements
+ isCustomElement: (tag) => tag.includes('base')
+ }
+ }
+ })
+ ],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
diff --git a/yarn.lock b/yarn.lock
index 3f1ec5cb43..4d9294ea6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1908,6 +1908,22 @@ __metadata:
languageName: node
linkType: hard
+"@lit-labs/ssr-dom-shim@npm:^1.1.2":
+ version: 1.1.2
+ resolution: "@lit-labs/ssr-dom-shim@npm:1.1.2"
+ checksum: 73fd787893851d4ec4aaa5c775405ed2aae4ca0891b2dd3c973b32c2f4bf70ada5481dd0224e52b786d037aa8a00052186ad1623c44551affd66f6409cca8da6
+ languageName: node
+ linkType: hard
+
+"@lit/reactive-element@npm:^2.0.0":
+ version: 2.0.3
+ resolution: "@lit/reactive-element@npm:2.0.3"
+ dependencies:
+ "@lit-labs/ssr-dom-shim": ^1.1.2
+ checksum: 0da8311bfbe025670f098496a55a727db47fd99443d4d43dbf343f3a6087d92bcf506df5167b036ad1effe1a159ebf24dc5bd2c5f9eb532ee00fc6db5d549037
+ languageName: node
+ linkType: hard
+
"@mdx-js/react@npm:^2.1.5":
version: 2.3.0
resolution: "@mdx-js/react@npm:2.3.0"
@@ -3788,6 +3804,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/trusted-types@npm:^2.0.2":
+ version: 2.0.7
+ resolution: "@types/trusted-types@npm:2.0.7"
+ checksum: 8e4202766a65877efcf5d5a41b7dd458480b36195e580a3b1085ad21e948bc417d55d6f8af1fd2a7ad008015d4117d5fdfe432731157da3c68678487174e4ba3
+ languageName: node
+ linkType: hard
+
"@types/unist@npm:^2, @types/unist@npm:^2.0.0":
version: 2.0.10
resolution: "@types/unist@npm:2.0.10"
@@ -8477,6 +8500,37 @@ __metadata:
languageName: node
linkType: hard
+"lit-element@npm:^4.0.0":
+ version: 4.0.3
+ resolution: "lit-element@npm:4.0.3"
+ dependencies:
+ "@lit-labs/ssr-dom-shim": ^1.1.2
+ "@lit/reactive-element": ^2.0.0
+ lit-html: ^3.1.0
+ checksum: 78e7789c33bdedca6a9d9883976b597e0cb9826e10b24fbf6874df41a96d855bd264aa037998d8b450775285f206887c5b205a6311c325a3bebeb2f829f2e5ea
+ languageName: node
+ linkType: hard
+
+"lit-html@npm:^3.1.0":
+ version: 3.1.1
+ resolution: "lit-html@npm:3.1.1"
+ dependencies:
+ "@types/trusted-types": ^2.0.2
+ checksum: 66dba5a736b426e6d202a2145018b8ae2cf1e0b1399dec2239f43c9ec5505b55e9bfda34b93baffa9c5f05837227248054530741f8705f8cadca989687787a1f
+ languageName: node
+ linkType: hard
+
+"lit@npm:^3.1.1":
+ version: 3.1.1
+ resolution: "lit@npm:3.1.1"
+ dependencies:
+ "@lit/reactive-element": ^2.0.0
+ lit-element: ^4.0.0
+ lit-html: ^3.1.0
+ checksum: 1c145e074f89483b5115a200b6963e75eb180393856bdb2eb5641fb5641e086e41a132f97478c5a1e5a88fc243a11a5306c1dbed64f51853f7833a65e21d4534
+ languageName: node
+ linkType: hard
+
"loader-utils@npm:^2.0.0":
version: 2.0.4
resolution: "loader-utils@npm:2.0.4"
@@ -11502,6 +11556,7 @@ __metadata:
eslint-plugin-storybook: ^0.6.15
eslint-plugin-vue: ^8.2.0
jsdom: ^19.0.0
+ lit: ^3.1.1
prettier: ^2.8.8
react: ^18.2.0
react-dom: ^18.2.0