diff --git a/demo/index.html b/demo/index.html index 3cac068..c5769f9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,6 +33,7 @@

Demo page placeholder. Component sections will be added here.

@@include('./partials/typography.html') + @@include('./partials/logos.html') @@include('./partials/palette.html') @@include('./partials/utilities.html') @@include('./partials/buttons.html') diff --git a/demo/partials/breadcrumbs.html b/demo/partials/breadcrumbs.html index 74cbe26..15eb67e 100644 --- a/demo/partials/breadcrumbs.html +++ b/demo/partials/breadcrumbs.html @@ -1,40 +1,85 @@

Breadcrumbs

-

Default

- +
+
+ + +
-

Collapsed

- +
+ + +
-

Inverted (dark surface)

-
- +
+ + +
+ +
+ + +
diff --git a/demo/partials/confirm-dialog.html b/demo/partials/confirm-dialog.html index 7450e4a..c5d9f78 100644 --- a/demo/partials/confirm-dialog.html +++ b/demo/partials/confirm-dialog.html @@ -2,7 +2,7 @@

Confirm Dialog

-
diff --git a/demo/partials/drawer.html b/demo/partials/drawer.html index 27edb5b..ecc92b1 100644 --- a/demo/partials/drawer.html +++ b/demo/partials/drawer.html @@ -2,10 +2,10 @@

Drawers

- -
diff --git a/demo/partials/dropdowns.html b/demo/partials/dropdowns.html index d0376e0..25010c1 100644 --- a/demo/partials/dropdowns.html +++ b/demo/partials/dropdowns.html @@ -1,8 +1,8 @@ -
+
- +
@@ -13,9 +13,9 @@ title: "Modal title", bodyHtml: "

Modal body content goes here. Press Escape or click the backdrop to close.

", actions: function (modal) { - const cancel = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-secondary", type: "button" }, "Cancel"); + const cancel = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-md btn-secondary", type: "button" }, "Cancel"); cancel.addEventListener("click", function () { modal.close(); }); - const confirm = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-primary", type: "button" }, "Confirm"); + const confirm = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-md btn-primary", type: "button" }, "Confirm"); confirm.addEventListener("click", function () { modal.close(); }); return [cancel, confirm]; } diff --git a/demo/partials/popover.html b/demo/partials/popover.html index 29e05ab..6ae34a5 100644 --- a/demo/partials/popover.html +++ b/demo/partials/popover.html @@ -2,7 +2,7 @@

Popover

- +

Popover title

This is a lightweight floating panel triggered by a button click.

diff --git a/demo/partials/toasts.html b/demo/partials/toasts.html index faea077..8ba09a9 100644 --- a/demo/partials/toasts.html +++ b/demo/partials/toasts.html @@ -2,16 +2,16 @@

Toasts

- - - -
diff --git a/demo/partials/tooltips.html b/demo/partials/tooltips.html index 5f184d5..8278fe1 100644 --- a/demo/partials/tooltips.html +++ b/demo/partials/tooltips.html @@ -1,24 +1,24 @@ -
+

Tooltips

- + Tooltip on top - + Tooltip on bottom - + Tooltip on left - + Tooltip on right
diff --git a/figma design parts/frames/logos/Type=Desktop.svg b/figma design parts/frames/logos/Type=Desktop.svg new file mode 100644 index 0000000..67a0dcf --- /dev/null +++ b/figma design parts/frames/logos/Type=Desktop.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/figma design parts/frames/logos/Type=Mobile.svg b/figma design parts/frames/logos/Type=Mobile.svg new file mode 100644 index 0000000..01e88e2 --- /dev/null +++ b/figma design parts/frames/logos/Type=Mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/figma design parts/frames/logos/Type=Type5.svg b/figma design parts/frames/logos/Type=Type5.svg new file mode 100644 index 0000000..76d54e8 --- /dev/null +++ b/figma design parts/frames/logos/Type=Type5.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/Type=Desktop.svg b/public/assets/logos/Type=Desktop.svg new file mode 100644 index 0000000..67a0dcf --- /dev/null +++ b/public/assets/logos/Type=Desktop.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/logos/Type=Mobile.svg b/public/assets/logos/Type=Mobile.svg new file mode 100644 index 0000000..01e88e2 --- /dev/null +++ b/public/assets/logos/Type=Mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/logos/Type=Type5.svg b/public/assets/logos/Type=Type5.svg new file mode 100644 index 0000000..76d54e8 --- /dev/null +++ b/public/assets/logos/Type=Type5.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/js/components/confirm-popup.js b/src/js/components/confirm-popup.js index f722235..b940052 100644 --- a/src/js/components/confirm-popup.js +++ b/src/js/components/confirm-popup.js @@ -16,12 +16,12 @@ }, actions: modalInstance => { const buttonNo = document.createElement("button"); - buttonNo.className = "btn btn-primary"; + buttonNo.className = "btn btn-md btn-primary"; buttonNo.type = "button"; buttonNo.textContent = "NO"; const buttonYes = document.createElement("button"); - buttonYes.className = "btn btn-warning"; + buttonYes.className = "btn btn-md btn-warning"; buttonYes.type = "button"; buttonYes.textContent = "YES"; diff --git a/src/js/components/editable-string.js b/src/js/components/editable-string.js index 1779690..a0f71e1 100644 --- a/src/js/components/editable-string.js +++ b/src/js/components/editable-string.js @@ -17,7 +17,7 @@ return `
${originalText} - +
@@ -25,8 +25,8 @@ ${input}
- - + +
`; } diff --git a/src/js/components/input-patterns.js b/src/js/components/input-patterns.js index e78653a..1a1bfd0 100644 --- a/src/js/components/input-patterns.js +++ b/src/js/components/input-patterns.js @@ -123,11 +123,30 @@ files.forEach((file, index) => { const figure = document.createElement("figure"); - figure.className = "file-upload-preview-item"; + figure.className = "file-attachment"; + if(file.type.startsWith("image/")) { + figure.classList.add("is-image"); + } figure.dataset.fileUploadIndex = String(index); + const header = document.createElement("div"); + header.className = "file-attachment-header"; + + const format = document.createElement("span"); + format.className = "file-attachment-format"; + format.textContent = getFileType(file); + + const remove = document.createElement("button"); + remove.className = "file-attachment-remove"; + remove.type = "button"; + remove.dataset.fileUploadRemove = String(index); + remove.setAttribute("aria-label", `Remove ${file.name}`); + remove.innerHTML = ``; + + header.append(format, remove); + const preview = document.createElement("div"); - preview.className = "file-upload-preview-visual"; + preview.className = "file-attachment-visual"; if(file.type.startsWith("image/")) { const image = document.createElement("img"); @@ -139,7 +158,7 @@ preview.append(image); } else { const type = document.createElement("span"); - type.className = "file-upload-preview-type"; + type.className = "file-attachment-type"; type.textContent = getFileType(file); preview.append(type); } @@ -147,22 +166,15 @@ const caption = document.createElement("figcaption"); const name = document.createElement("span"); - name.className = "file-upload-preview-name"; + name.className = "file-attachment-name"; name.textContent = file.name; const meta = document.createElement("span"); - meta.className = "file-upload-preview-meta"; + meta.className = "file-attachment-meta"; meta.textContent = `${getFileType(file)} / ${formatBytes(file.size)}`; - const remove = document.createElement("button"); - remove.className = "file-upload-preview-remove"; - remove.type = "button"; - remove.dataset.fileUploadRemove = String(index); - remove.setAttribute("aria-label", `Remove ${file.name}`); - remove.innerHTML = ``; - caption.append(name, meta); - figure.append(remove, preview, caption); + figure.append(header, preview, caption); previewNode.append(figure); }); diff --git a/src/scss/components/_drawer.scss b/src/scss/components/_drawer.scss index f1cbea6..53582cd 100644 --- a/src/scss/components/_drawer.scss +++ b/src/scss/components/_drawer.scss @@ -59,13 +59,13 @@ box-shadow: -16px 0 48px rgba($neutral-900, 0.16); transform: translateX(100%); transition: transform $motion-base $motion-ease; + } - .drawer-left & { - right: auto; - left: 0; - transform: translateX(-100%); - box-shadow: 16px 0 48px rgba($neutral-900, 0.16); - } + &.drawer-left .drawer-panel { + right: auto; + left: 0; + transform: translateX(-100%); + box-shadow: 16px 0 48px rgba($neutral-900, 0.16); } .drawer-header { diff --git a/src/scss/components/_editable-string.scss b/src/scss/components/_editable-string.scss index bcf4a79..dd393c8 100644 --- a/src/scss/components/_editable-string.scss +++ b/src/scss/components/_editable-string.scss @@ -23,25 +23,15 @@ } } - .edit-text-btn, - .apply-changes-btn, - .cancel-changes-btn { + .edit-text-btn { color: $neutral-700; &:hover:not(:disabled) { color: $neutral-900; - background-color: $yellow-400; + background-color: $neutral-100; } } - .apply-changes-btn { - color: $success-text; - } - - .cancel-changes-btn { - color: $danger-text; - } - .editable-string-form { display: inline-flex; align-items: center; diff --git a/src/scss/components/_modals.scss b/src/scss/components/_modals.scss index fa102c0..6bc902d 100644 --- a/src/scss/components/_modals.scss +++ b/src/scss/components/_modals.scss @@ -125,5 +125,11 @@ padding: $space-3 $space-5; border-top: 1px solid $neutral-100; background-color: $neutral-50; + + .actions { + display: flex; + align-items: center; + gap: $space-3; + } } } diff --git a/src/scss/demo.scss b/src/scss/demo.scss index febeb78..6dc8400 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -145,3 +145,59 @@ border-radius: $radius-md; background: rgba($neutral-900, 0.02); } + +.logo-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: $space-5; +} + +.logo-card { + display: flex; + flex-direction: column; + gap: $space-3; + margin: 0; + padding: $space-5; + border: 1px solid $neutral-100; + border-radius: $radius-lg; + background: $neutral-0; +} + +.logo-preview { + display: flex; + align-items: center; + justify-content: center; + min-height: 80px; + + img, + svg { + max-width: 100%; + height: auto; + } +} + +.logo-label { + color: $neutral-700; + font-size: 13px; + font-weight: $font-weight-semibold; + text-align: center; +} + +.breadcrumbs-demo { + padding: $space-5; + border-radius: $radius-xl; + background: $neutral-900; +} + +.breadcrumbs-demo-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: $space-4; + min-height: 44px; + margin-bottom: $space-6; + + &:last-child { + margin-bottom: 0; + } +} diff --git a/src/vue/utils.js b/src/vue/utils.js index 36143ae..fc93f1f 100644 --- a/src/vue/utils.js +++ b/src/vue/utils.js @@ -111,8 +111,8 @@ "chevron-left": "arrows/chevron/left", "chevron-up": "arrows/chevron/up", "chevron-down": "arrows/chevron/down", - "magnifying-glass": "essentials/search", - search: "essentials/search", + "magnifying-glass": "essentials/zoom/search", + search: "essentials/zoom/search", "warning-circle": "essentials/alert/circle", plus: "essentials/plus", minus: "essentials/minus", diff --git a/tests/demo-screenshot.spec.js b/tests/demo-screenshot.spec.js index beb5b60..ef7a73a 100644 --- a/tests/demo-screenshot.spec.js +++ b/tests/demo-screenshot.spec.js @@ -17,7 +17,20 @@ { name: "advanced-select", label: "Advanced Select" }, { name: "description-list", label: "Description List" }, { name: "page-header", label: "Page Header" }, - { name: "backgrounds", label: "Backgrounds" } + { name: "backgrounds", label: "Backgrounds" }, + { name: "logos", label: "Logos" }, + { name: "modals", label: "Modals" }, + { name: "popover", label: "Popover" }, + { name: "dropdowns", label: "Dropdowns" }, + { name: "tooltips", label: "Tooltips" }, + { name: "confirm-dialog", label: "Confirm Dialog" }, + { name: "input-group", label: "Input Group" }, + { name: "data-patterns", label: "Data patterns" }, + { name: "progress", label: "Progress" }, + { name: "timeline", label: "Timeline" }, + { name: "drawer", label: "Drawers" }, + { name: "toasts", label: "Toasts" }, + { name: "breadcrumbs", label: "Breadcrumbs" } ]; test.describe("@screenshot", () => {