From 4de7f12c2e9bab0f5ff8077db5800e3bd42162b8 Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Thu, 11 Jan 2024 15:19:36 -0600 Subject: [PATCH 1/3] Not fully functional yet. --- index.html | 1 + package.json | 1 + src/components/button/Button.stories.js | 2 +- src/components/button/Button.vue | 43 ++---------- src/components/button/button-base.js | 91 +++++++++++++++++++++++++ src/main.ts | 3 + yarn.lock | 55 +++++++++++++++ 7 files changed, 156 insertions(+), 40 deletions(-) create mode 100644 src/components/button/button-base.js diff --git a/index.html b/index.html index 1d9f38ceef..4179bea632 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+ 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/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..6f5e924997 100644 --- a/src/components/button/Button.vue +++ b/src/components/button/Button.vue @@ -1,46 +1,11 @@ diff --git a/src/components/button/button-base.js b/src/components/button/button-base.js index 6b01079c0b..bccf74648e 100644 --- a/src/components/button/button-base.js +++ b/src/components/button/button-base.js @@ -61,9 +61,9 @@ export class ButtonBase extends LitElement { classes.push(`bttn--${className(this.size)}`); } - if (this.defaultSlotElements().length === 0) { - classes.push(`bttn--no-text`); - } + // if (this.defaultSlotElements().length === 0) { + // classes.push(`bttn--no-text`); + // } Borderless.addBorderlessClass(classes, this); 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)) From 40130de87d09a70a0698e654ba472059dca36aad Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Thu, 11 Jan 2024 16:46:21 -0600 Subject: [PATCH 3/3] Got a couple more things working. --- index.html | 4 +++- src/assets/scss/_utilities.scss | 26 +++++++++++++------------- src/components/button/button-base.js | 1 + src/components/button/button.scss | 21 +++++++++++---------- 4 files changed, 28 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 4179bea632..8af75f818c 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,9 @@
- Test + Test 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-base.js b/src/components/button/button-base.js index bccf74648e..096aa03743 100644 --- a/src/components/button/button-base.js +++ b/src/components/button/button-base.js @@ -49,6 +49,7 @@ export class ButtonBase extends LitElement { let classes = ['bttn']; ['full', 'transparent', 'light_font'].forEach((prop) => { if (this[prop] === true) { + console.log(prop, this[prop]) classes.push(`bttn--${className(prop)}`); } }); 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); } } }