@inglorious/ui 0.1.0 → 1.0.0

package/src/navigation/drawer/style.css

@@ -0,0 +1,125 @@
+.iw-drawer {
+  width: 16rem;
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  transition:
+    margin var(--iw-transition-fast),
+    transform var(--iw-transition-fast),
+    width var(--iw-transition-fast),
+    min-width var(--iw-transition-fast),
+    max-width var(--iw-transition-fast);
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: var(--iw-z-modal, 1050);
+
+  .iw-drawer-header {
+    border-bottom: 1px solid var(--iw-color-border);
+    flex-shrink: 0;
+
+    .iw-drawer-title {
+      font-weight: var(--iw-font-weight-semibold);
+      white-space: nowrap;
+    }
+  }
+
+  .iw-drawer-body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+
+  .iw-drawer-footer {
+    border-top: 1px solid var(--iw-color-border);
+    flex-shrink: 0;
+  }
+
+  .iw-drawer-toggler > span {
+    transition: transform var(--iw-transition-fast);
+  }
+
+  .iw-list-item-inset,
+  .iw-list-item-content,
+  .iw-list-item-trailing,
+  .iw-list-nested,
+  .iw-list-title {
+    transition:
+      height var(--iw-transition-fast),
+      padding var(--iw-transition-fast),
+      opacity var(--iw-transition-fast);
+  }
+
+  &.iw-drawer-collapsed {
+    width: 4rem;
+    min-width: 4rem;
+    max-width: 4rem;
+
+    .iw-list-item-inset,
+    .iw-list-item-content,
+    .iw-list-item-trailing,
+    .iw-list-nested,
+    .iw-list-title {
+      height: 0;
+      padding: 0;
+      opacity: 0;
+    }
+
+    .iw-drawer-toggler > span {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.iw-drawer-left {
+  left: 0;
+  border-right: 1px solid var(--iw-color-border);
+  transform: translateX(-100%);
+}
+
+.iw-drawer-right {
+  right: 0;
+  border-left: 1px solid var(--iw-color-border);
+  transform: translateX(100%);
+}
+
+@media (min-width: 0rem) {
+  .iw-drawer {
+    box-shadow: var(--iw-shadow-lg);
+
+    &.iw-drawer-open {
+      transform: translateX(0);
+    }
+
+    .iw-drawer-footer {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 64rem) {
+  .iw-drawer {
+    transform: none;
+    box-shadow: none;
+
+    &.iw-drawer-left.iw-drawer-hidden {
+      transform: translateX(-100%);
+    }
+
+    &.iw-drawer-right.iw-drawer-hidden {
+      transform: translateX(100%);
+    }
+
+    & ~ .iw-drawer-backdrop {
+      display: none;
+    }
+
+    .iw-drawer-close {
+      display: none;
+    }
+
+    .iw-drawer-footer {
+      display: flex;
+    }
+  }
+}

package/src/navigation/drawer/template.js

@@ -0,0 +1,131 @@
+/**
+ * @typedef {import('../../../types/navigation/drawer').DrawerProps} DrawerProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html, when } from "@inglorious/web"
+
+import { button } from "../../controls/button"
+import { materialIcon } from "../../data-display/material-icon"
+import { backdrop } from "../../feedback/backdrop"
+import { flex } from "../../layout/flex"
+
+/**
+ * @param {DrawerProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    items, // eslint-disable-line no-unused-vars
+    isOpen = false,
+    isHidden = false,
+    anchor = "left",
+    isCollapsed = false,
+    hasBackdrop = true,
+    title,
+    children,
+    className = "",
+    onClose,
+    onCollapseToggle,
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const drawerClassName = [
+    "iw-drawer",
+    `iw-drawer-${anchor}`,
+    isOpen && "iw-drawer-open",
+    isHidden && "iw-drawer-hidden",
+    isCollapsed && "iw-drawer-collapsed",
+    ...Object.keys(extraClasses),
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  return html`
+    ${flex.render({
+      element: "aside",
+      direction: "column",
+      className: drawerClassName,
+      children: [
+        when(
+          title || onClose,
+          () => html`
+            ${flex.render({
+              align: "center",
+              justify: "between",
+              gap: "sm",
+              className: "iw-drawer-header",
+              children: [
+                when(
+                  title,
+                  () => html`<div class="iw-drawer-title">${title}</div>`,
+                ),
+                when(onClose, () =>
+                  button.render({
+                    color: "secondary",
+                    variant: "ghost",
+                    shape: "square",
+                    className: "iw-drawer-close",
+                    "aria-label": "Close",
+                    onClick: onClose,
+                    children: materialIcon.render({
+                      name: "close",
+                      size: "lg",
+                    }),
+                  }),
+                ),
+              ],
+            })}
+          `,
+        ),
+
+        flex.render({
+          direction: "column",
+          className: "iw-drawer-body",
+          children,
+        }),
+
+        when(
+          onCollapseToggle,
+          () => html`
+            ${flex.render({
+              justify: "end",
+              padding: "sm",
+              className: "iw-drawer-footer",
+              children: button.render({
+                color: "secondary",
+                variant: "ghost",
+                shape: "square",
+                className: "iw-drawer-toggler",
+                "aria-label": isCollapsed
+                  ? "Expand sidebar"
+                  : "Collapse sidebar",
+                onClick: onCollapseToggle,
+                children: materialIcon.render({
+                  name: "left_panel_close",
+                  size: "lg",
+                }),
+              }),
+            })}
+          `,
+        ),
+      ],
+      ...rest,
+    })}
+    ${when(isOpen && hasBackdrop, () =>
+      backdrop.render({
+        isOpen: true,
+        className: "iw-drawer-backdrop",
+        onClick: onClose,
+      }),
+    )}
+  `
+}

package/src/navigation/link/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const link = { render }

package/src/navigation/link/link.stories.js

@@ -0,0 +1,53 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { link } from "."
+
+export default {
+  title: "Navigation/Link",
+  tags: ["autodocs"],
+  render: createRender(link),
+  argTypes: {
+    href: { control: "text", description: "Destination URL." },
+    label: { control: "text", description: "Fallback text content." },
+    underline: {
+      control: "select",
+      options: ["always", "hover", "none"],
+      description: "Underline behavior.",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "inherit"],
+      description: "Color intent.",
+    },
+    isMuted: { control: "boolean", description: "Use muted text color." },
+    isExternal: {
+      control: "boolean",
+      description: "Opens in a new tab and adds safe rel attributes.",
+    },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Text navigation primitive for inline links and actions.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    href: "#docs",
+    label: "Read the docs",
+    underline: "hover",
+    color: "primary",
+  },
+}
+
+export const External = {
+  args: {
+    href: "https://example.com",
+    label: "External link",
+    isExternal: true,
+    underline: "always",
+  },
+}

package/src/navigation/link/style.css

@@ -0,0 +1,40 @@
+.iw-link {
+  color: var(--iw-color-primary);
+  text-decoration: none;
+  text-underline-offset: 0.15em;
+  transition:
+    color var(--iw-transition-fast),
+    text-decoration-color var(--iw-transition-fast);
+}
+
+.iw-link:hover {
+  color: var(--iw-color-primary-hover, var(--iw-color-primary));
+}
+
+.iw-link-underline-always {
+  text-decoration: underline;
+}
+
+.iw-link-underline-hover:hover {
+  text-decoration: underline;
+}
+
+.iw-link-underline-none {
+  text-decoration: none;
+}
+
+.iw-link-color-primary {
+  color: var(--iw-color-primary);
+}
+
+.iw-link-color-secondary {
+  color: var(--iw-color-text-secondary, var(--iw-color-text));
+}
+
+.iw-link-color-inherit {
+  color: inherit;
+}
+
+.iw-link-muted {
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/navigation/link/template.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {import('../../../types/navigation/link').LinkProps} LinkProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {LinkProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    href,
+    children,
+    label,
+    underline = "hover",
+    color = "primary",
+    isMuted = false,
+    isExternal = false,
+    className = "",
+    onClick,
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  return html`<a
+    href=${href ?? "#"}
+    class=${classMap({
+      "iw-link": true,
+      [`iw-link-underline-${underline}`]: true,
+      [`iw-link-color-${color}`]: !isMuted,
+      "iw-link-muted": isMuted,
+      "iw-link-external": isExternal,
+      ...extraClasses,
+    })}
+    target=${isExternal ? "_blank" : null}
+    rel=${isExternal ? "noreferrer noopener" : null}
+    @click=${onClick}
+    ${ref((el) => applyElementProps(el, rest))}
+  >
+    ${children ?? label}
+  </a>`
+}

package/src/navigation/menu/index.js

@@ -0,0 +1 @@
+export { menu } from "./template.js"

package/src/navigation/menu/menu.stories.js

@@ -0,0 +1,36 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { menu } from "."
+
+export default {
+  title: "Navigation/Menu",
+  tags: ["autodocs"],
+  render: createRender(menu),
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+      description: "Whether the menu is visible.",
+    },
+    items: { control: "object", description: "Menu items and separators." },
+    isDense: { control: "boolean", description: "Compact item spacing." },
+    onItemClick: { action: "onItemClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Floating action list with overridable `renderItem`.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    items: [
+      { label: "Profile", icon: "👤" },
+      { label: "Settings", icon: "⚙" },
+      { hasDivider: true },
+      { label: "Logout", trailing: "⌘Q" },
+    ],
+  },
+}

package/src/navigation/menu/style.css

@@ -0,0 +1,44 @@
+.iw-menu {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 12rem;
+  padding: var(--iw-space-2);
+  background: var(--iw-color-surface);
+  border: 1px solid var(--iw-color-border);
+  border-radius: var(--iw-radius-md);
+  box-shadow: var(--iw-shadow-lg);
+}
+
+.iw-menu-item {
+  border: 0 none;
+  background: transparent;
+  color: var(--iw-color-text);
+  display: flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  width: 100%;
+  padding: var(--iw-space-2) var(--iw-space-3);
+  border-radius: var(--iw-radius-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.iw-menu-item:hover:enabled,
+.iw-menu-item-selected {
+  background: color-mix(in srgb, var(--iw-color-primary) 12%, transparent);
+}
+
+.iw-menu-item-trailing {
+  margin-left: auto;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-menu-divider {
+  height: 1px;
+  margin: var(--iw-space-2) 0;
+  background: var(--iw-color-border);
+}
+
+.iw-menu-dense .iw-menu-item {
+  padding-block: var(--iw-space-1);
+}

package/src/navigation/menu/template.js

@@ -0,0 +1,81 @@
+/**
+ * @typedef {import('../../../types/navigation/menu').MenuProps} MenuProps
+ * @typedef {import('../../../types/navigation/menu').MenuItem} MenuItem
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+export const menu = {
+  /**
+   * @param {MenuProps} props
+   * @returns {TemplateResult | null}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      isOpen = false,
+      items = [],
+      isDense = false,
+      className = "",
+      ...rest
+    } = props
+
+    if (!isOpen) return null
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    return html`<div
+      class=${classMap({
+        "iw-menu": true,
+        "iw-menu-dense": isDense,
+        ...extraClasses,
+      })}
+      role="menu"
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${items.map((item, index) => this.renderItem(item, index, props))}
+    </div>`
+  },
+
+  /**
+   * @param {MenuItem} item
+   * @param {number} index
+   * @param {MenuProps} props
+   * @returns {TemplateResult}
+   */
+  renderItem(item, index, props) {
+    if (item.hasDivider) {
+      return html`<div class="iw-menu-divider" role="separator"></div>`
+    }
+
+    return html`<button
+      type="button"
+      class=${classMap({
+        "iw-menu-item": true,
+        "iw-menu-item-selected": item.isSelected,
+      })}
+      role="menuitem"
+      ?disabled=${item.isDisabled}
+      @click=${() => {
+        item.onClick?.(item.value ?? index)
+        props.onItemClick?.(item.value ?? index, item)
+      }}
+    >
+      ${item.icon
+        ? html`<span class="iw-menu-item-icon">${item.icon}</span>`
+        : null}
+      <span class="iw-menu-item-label">${item.label}</span>
+      ${item.trailing
+        ? html`<span class="iw-menu-item-trailing">${item.trailing}</span>`
+        : null}
+    </button>`
+  },
+}

package/src/navigation/navigation.css

@@ -0,0 +1,9 @@
+@import "./bottom-navigation/style.css";
+@import "./breadcrumbs/style.css";
+@import "./drawer/style.css";
+@import "./link/style.css";
+@import "./menu/style.css";
+@import "./pagination/style.css";
+@import "./speed-dial/style.css";
+@import "./stepper/style.css";
+@import "./tabs/style.css";

package/src/navigation/pagination/index.js

@@ -0,0 +1 @@
+export { pagination } from "./template.js"

package/src/navigation/pagination/pagination.stories.js

@@ -0,0 +1,61 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { pagination } from "."
+
+export default {
+  title: "Navigation/Pagination",
+  tags: ["autodocs"],
+  render: createRender(pagination),
+  argTypes: {
+    page: { control: "number", description: "Current page (1-based)." },
+    count: { control: "number", description: "Total number of pages." },
+    siblingCount: {
+      control: "number",
+      description: "Pages shown beside the current page.",
+    },
+    isFirstButtonVisible: {
+      control: "boolean",
+      description: "Show first page control.",
+    },
+    isLastButtonVisible: {
+      control: "boolean",
+      description: "Show last page control.",
+    },
+    isDisabled: { control: "boolean", description: "Disable all controls." },
+    buttonVariant: {
+      control: "select",
+      options: ["default", "outline", "ghost"],
+      description: "Button primitive variant used for pagination controls.",
+    },
+    buttonColor: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Button primitive color used for non-current controls.",
+    },
+    buttonSize: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Button primitive size used for controls.",
+    },
+    onChange: { action: "onChange" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Paged navigation with overridable page item rendering.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    page: 4,
+    count: 10,
+    siblingCount: 1,
+    isFirstButtonVisible: true,
+    isLastButtonVisible: true,
+    buttonVariant: "ghost",
+    buttonColor: "secondary",
+    buttonSize: "sm",
+  },
+}

package/src/navigation/pagination/style.css

@@ -0,0 +1,29 @@
+.iw-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  flex-wrap: wrap;
+}
+
+.iw-pagination-item,
+.iw-pagination-ellipsis {
+  min-width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--iw-radius-sm);
+}
+
+.iw-pagination-item {
+  border: 1px solid var(--iw-color-border);
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  cursor: pointer;
+}
+
+.iw-pagination-item-current {
+  background: var(--iw-color-primary);
+  color: var(--iw-color-primary-text, var(--iw-color-white));
+  border-color: var(--iw-color-primary);
+}