@@ -79,7 +79,7 @@
},
template: `
-
+
diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss
index a4b88f2..70c2fd7 100644
--- a/src/scss/components/_avatar.scss
+++ b/src/scss/components/_avatar.scss
@@ -91,20 +91,32 @@
color: $neutral-700;
}
- &.avatar-mint {
+ &.avatar-mint,
+ &.avatar-primary,
+ &.avatar-success {
background-color: $mint-100;
color: $mint-700;
}
- &.avatar-yellow {
+ &.avatar-yellow,
+ &.avatar-accent,
+ &.avatar-warning {
background-color: $yellow-100;
color: $yellow-800;
}
- &.avatar-lavender {
+ &.avatar-lavender,
+ &.avatar-secondary,
+ &.avatar-info {
background-color: $lavender-100;
color: $lavender-700;
}
+
+ &.avatar-danger,
+ &.avatar-error {
+ background-color: $danger-bg;
+ color: $danger-text;
+ }
}
.avatar-stack {
diff --git a/src/scss/components/_divider.scss b/src/scss/components/_divider.scss
index 0b5e6ad..0775710 100644
--- a/src/scss/components/_divider.scss
+++ b/src/scss/components/_divider.scss
@@ -25,8 +25,7 @@
&[data-orientation="vertical"] {
display: inline-block;
width: 1px;
- height: 100%;
- min-height: $space-6;
+ height: $space-6;
vertical-align: middle;
}
}
diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
index 9d6bf00..f25f431 100644
--- a/src/scss/components/_loader.scss
+++ b/src/scss/components/_loader.scss
@@ -27,6 +27,7 @@
align-items: center;
justify-content: center;
color: $neutral-900;
+ overflow: hidden;
&.loader-sm {
font-size: 16px;
diff --git a/src/vue/components/GnDropdown.js b/src/vue/components/GnDropdown.js
index 72951a9..09bdf55 100644
--- a/src/vue/components/GnDropdown.js
+++ b/src/vue/components/GnDropdown.js
@@ -31,6 +31,7 @@
return () => h("div", { class: "dropdown" }, [
h("button", {
+ class: "btn btn-sm btn-secondary",
type: "button",
"data-dropdown-trigger": "",
onClick: toggle
diff --git a/src/vue/components/GnLoader.js b/src/vue/components/GnLoader.js
index e0fc1b3..3dc1181 100644
--- a/src/vue/components/GnLoader.js
+++ b/src/vue/components/GnLoader.js
@@ -16,10 +16,11 @@
setup(props) {
const sizeClass = ["sm", "md", "lg"].includes(props.size) ? `loader-${props.size}` : "loader-md";
const typeClass = ["spin", "dots", "bar"].includes(props.type) ? `loader-${props.type}` : "loader-spin";
+ const isSpin = props.type === "spin";
return () => {
const indicator = h("span", {
- class: cx("loader", sizeClass, typeClass),
+ class: cx("loader", sizeClass, isSpin ? "" : typeClass),
role: props.type === "bar" ? "progressbar" : "status",
"aria-label": props.label
}, [
diff --git a/src/vue/components/GnPagination.js b/src/vue/components/GnPagination.js
index e1db55e..cbec12e 100644
--- a/src/vue/components/GnPagination.js
+++ b/src/vue/components/GnPagination.js
@@ -29,8 +29,9 @@
class: "pagination-item",
type: "button",
disabled: props.page <= 1,
+ "aria-label": "Previous page",
onClick: () => setPage(props.page - 1)
- }, [iconNode("ph-arrow-left")]),
+ }, [iconNode("ph-caret-left")]),
pages.map(page => h("button", {
class: cx("pagination-item", { "pagination-item-active": page === props.page }),
type: "button",
@@ -41,8 +42,9 @@
class: "pagination-item",
type: "button",
disabled: props.page >= props.totalPages,
+ "aria-label": "Next page",
onClick: () => setPage(props.page + 1)
- }, [iconNode("ph-arrow-right")])
+ }, [iconNode("ph-caret-right")])
]);
};
}
diff --git a/src/vue/utils.js b/src/vue/utils.js
index cf2feb5..d4bb38f 100644
--- a/src/vue/utils.js
+++ b/src/vue/utils.js
@@ -141,13 +141,23 @@
home: "buildings-&-landmarks/house/1",
list: "essentials/list-fill",
"credit-card": "banking-&-finance/credit-card",
+ "chart-bar": "banking-&-finance/chart/bars",
bell: "essentials/notification/1",
"cloud-arrow-up": "software/cloud-upload",
"cloud-upload": "software/cloud-upload",
+ "caret-up": "arrows/chevron/up",
+ "caret-down": "arrows/chevron/down",
+ "caret-left": "arrows/chevron/left",
+ "caret-right": "arrows/chevron/right",
+ "arrows-clockwise": "essentials/rotate-360",
+ circle: "essentials/gear",
package: "e-commerce/box-stack",
box: "e-commerce/box-stack",
- gear: "essentials/gear",
- settings: "essentials/gear",
+ stack: "e-commerce/box-stack",
+ gear: "essentials/gear/alt",
+ settings: "essentials/gear/alt",
+ truck: "navigation-&-transportation/truck",
+ "warning-octagon": "essentials/alert/circle",
information: "essentials/information/circle",
info: "essentials/information/circle",
alert: "essentials/alert-sign",
diff --git a/tests/demo-screenshot.spec.js b/tests/demo-screenshot.spec.js
index ede7d86..e254063 100644
--- a/tests/demo-screenshot.spec.js
+++ b/tests/demo-screenshot.spec.js
@@ -71,8 +71,19 @@
const element = locator.first();
await element.scrollIntoViewIfNeeded();
await page.waitForTimeout(300);
- await element.screenshot({
- path: path.join(SCREENSHOT_DIR, `section-${section.name}.png`)
+ const box = await element.evaluate(el => {
+ const rect = el.getBoundingClientRect();
+ return {
+ x: rect.x + window.scrollX,
+ y: rect.y + window.scrollY,
+ width: rect.width,
+ height: rect.height
+ };
+ });
+ await page.screenshot({
+ path: path.join(SCREENSHOT_DIR, `section-${section.name}.png`),
+ clip: box,
+ fullPage: true
});
}
});