@gemeentenijmegen/components-css 0.0.1-alpha.11 → 0.0.1-alpha.111

package/toolbar-button/index.js

@@ -0,0 +1,29 @@
+class ToolbarButton {
+  component;
+  #toolbarButtonClass = '.nijmegen-theme nijmegen-toolbar-button';
+
+  constructor() {
+    this.component = document.querySelectorAll(this.#toolbarButtonClass);
+    if (this.component) {
+      this.#initToolbarButtonListeners();
+    }
+  }
+
+  #initToolbarButtonListeners() {
+    this.component.forEach((button) => {
+      button.addEventListener(
+        'click',
+        (event) => {
+          this.toolbarButtonClickHandler(event);
+        },
+        { once: true },
+      );
+    });
+  }
+
+  static toolbarButtonClickHandler(event) {
+    event.target.ariaExpanded = event.target.ariaExpanded === 'true' ? 'false' : 'true';
+  }
+}
+
+export default ToolbarButton;

package/toolbar-button/index.scss

@@ -0,0 +1,51 @@
+@import "~@utrecht/button-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "./mixin";
+.nijmegen-toolbar-button {
+  @include utrecht-button;
+  @include utrecht-button-appearance-properties("utrecht-button", "subtle");
+
+  column-gap: var(--nijmegen-toolbar-button-column-gap);
+  cursor: pointer;
+  padding-block-end: var(--nijmegen-toolbar-button-padding-block-end);
+  padding-block-start: var(--nijmegen-toolbar-button-padding-block-start);
+  padding-inline-end: var(--nijmegen-toolbar-button-padding-inline-end);
+  padding-inline-start: var(--nijmegen-toolbar-button-padding-inline-start);
+
+  &.nijmegen-toolbar-button--icon {
+    &-menu {
+      &::before {
+        mask-image: var(
+          --nijmegen-toolbar-button-menu-icon-image,
+          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-menu-2" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" /> </svg>')
+        );
+      }
+      @include toolbar-button-icon;
+    }
+    &-search {
+      &::before {
+        mask-image: var(
+          --nijmegen-toolbar-button-search-icon-image,
+          url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>')
+        );
+      }
+      @include toolbar-button-icon;
+    }
+  }
+
+  &:focus-visible,
+  &.nijmegen-toolbar-button--focus-visible {
+    @include utrecht-button--focus;
+    @include utrecht-button--focus-visible;
+  }
+
+  &:active:not(:disabled, [aria-disabled="true"]),
+  &.nijmegen-toolbar-button--active {
+    @include utrecht-button--active;
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]),
+  &.nijmegen-toolbar-button--hover {
+    @include utrecht-button--hover;
+  }
+}

package/top-task-card/index.scss

@@ -0,0 +1,57 @@
+.nijmegen-toptask-card {
+  background-color: var(--utrecht-toptask-link-background-color);
+  color: var(--utrecht-toptask-link-color);
+  display: flex;
+  flex-direction: column;
+
+  font-family: var(--todo-toptask-link-font-family); /* stylelint-disable-line */
+  font-size: var(--utrecht-toptask-link-font-size);
+  font-weight: var(--todo-toptask-link-font-weight); /* stylelint-disable-line */
+  line-height: var(--utrecht-toptask-link-line-height);
+
+  border-radius: var(--todo-toptask-link-border-radius); /* stylelint-disable-line */
+  max-inline-size: var(--utrecht-toptask-link-max-inline-size);
+  min-block-size: var(--utrecht-toptask-link-min-block-size);
+  min-inline-size: var(--utrecht-toptask-link-min-inline-size);
+  padding-block-end: var(--utrecht-toptask-link-padding-block-end);
+  padding-block-start: var(--utrecht-toptask-link-padding-block-start);
+  padding-inline-end: var(--utrecht-toptask-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-toptask-link-padding-inline-start);
+  text-decoration: none;
+}
+
+.nijmegen-toptask-card--hover,
+.nijmegen-toptask-card:hover {
+  background-color: var(--utrecht-toptask-link-hover-background-color, var(--utrecht-toptask-link-background-color));
+  color: var(--utrecht-toptask-link-hover-color, var(--utrecht-toptask-link-color));
+  transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
+}
+
+.nijmegen-toptask-card--focus-visible,
+.nijmegen-toptask-card:focus-visible {
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+}
+
+.nijmegen-toptask-card--focus,
+.nijmegen-toptask-card:focus {
+  background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
+  color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
+}
+
+.nijmegen-toptask-card__title {
+  display: block;
+}
+
+.nijmegen-toptask-card__icon {
+  display: block;
+  width: var(--utrecht-toptask-link-icon-size); /* stylelint-disable-line property-disallowed-list */
+
+  svg {
+    fill: currentColor;
+  }
+}