@dbcdk/react-components 0.0.1 → 0.0.3

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,18 @@
+export type TabItem = {
+    header: string;
+    headerIcon?: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+interface TabsProps {
+    header?: string;
+    variant: 'filled' | 'outlined';
+    panelStyle?: boolean;
+    tabs: TabItem[];
+    activeIndex?: number;
+    onTabChange?: (index: number) => void;
+    addition?: React.ReactNode;
+}
+export declare function Tabs({ variant, header, tabs, activeIndex, onTabChange, addition, panelStyle, }: TabsProps): React.ReactNode;
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import styles from './Tabs.module.css';
+import { Headline } from '../headline/Headline';
+
+function Tabs({
+  variant,
+  header,
+  tabs,
+  activeIndex = 0,
+  onTabChange,
+  addition,
+  panelStyle
+}) {
+  const [currentIndex, setCurrentIndex] = useState(activeIndex);
+  useEffect(() => {
+    if (activeIndex !== void 0) {
+      setCurrentIndex(activeIndex);
+    }
+  }, [activeIndex]);
+  const setActiveTab = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+    },
+    [setCurrentIndex]
+  );
+  const handleTabChange = useCallback(
+    (index) => {
+      if (!onTabChange) {
+        setActiveTab(index);
+      }
+      onTabChange == null ? void 0 : onTabChange(index);
+    },
+    [onTabChange]
+  );
+  const filteredTabs = useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
+  return /* @__PURE__ */ jsxs("div", { className: "grow-container", children: [
+    header && /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
+      /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, children: header }),
+      addition
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.tabList, children: filteredTabs.map((tab, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-index": index,
+          className: `${styles.tab} ${currentIndex === index ? styles.active : ""}`,
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: `${styles.tabButton}`,
+              onClick: () => handleTabChange(index),
+              disabled: tab.disabled,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }),
+                /* @__PURE__ */ jsx("span", { className: styles.header, children: tab.header })
+              ]
+            }
+          )
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: `${styles.tabContent} scrollable`, children: tabs[currentIndex].content })
+    ] })
+  ] });
+}
+
+export { Tabs };

package/dist/components/tabs/Tabs.module.css

@@ -0,0 +1,113 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--spacing-xl);
+  overflow: hidden;
+}
+
+/* ========== Filled variant ========== */
+.tabs.filled .tab.active {
+  background: var(--opac-bg-brand);
+  color: var(--color-primary);
+  border: var(--border-width-thin) solid var(--opac-bg-dark);
+  border-block-end: 0;
+}
+.tabs.filled {
+  gap: 0;
+}
+.tabs.filled .tabList {
+  border-start-start-radius: var(--border-radius-default);
+  border-start-end-radius: var(--border-radius-default);
+  inline-size: fit-content;
+}
+.tabs.filled .tab {
+  border: var(--border-width-thin) solid transparent;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  z-index: 3;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+  border-start-start-radius: var(--border-radius-default);
+  border-start-end-radius: var(--border-radius-default);
+}
+.tabs.filled .tab:not(.active):hover {
+  color: var(--color-primary);
+}
+.tabs.filled .tabContent {
+  border: var(--border-width-thin) solid var(--opac-bg-dark);
+  background: var(--color-background);
+  padding: var(--spacing-lg);
+  flex-grow: 1;
+  overflow: auto;
+}
+
+/* ========== Panel style variant ========== */
+.panelStyle .tabList {
+  border: var(--border-width-thin) solid var(--color-border);
+  border-block-end: 0;
+}
+.panelStyle .tab.active {
+  border: 0 !important;
+}
+.panelStyle .tab {
+  border: 0 !important;
+}
+
+.tabButton {
+  text-transform: var(--tab-label-transform);
+  font-size: var(--font-size-sm);
+  color: inherit;
+  display: inline-flex;
+  white-space: nowrap;
+  background: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  border: 0;
+  border-radius: 0;
+  padding-block: calc(var(--spacing-sm) + var(--density));
+  padding-inline: var(--spacing-md);
+  cursor: pointer;
+  transition:
+    border var(--transition-normal) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+.tabButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ========== Tablist and tabs ========== */
+.tabList {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+  border-block-end: 2px solid var(--color-border);
+}
+.tab.active {
+  border-block-end-color: var(--color-primary);
+}
+
+.tab .icon {
+  display: contents;
+  color: inherit;
+}
+.tab .icon svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--spacing-lg);
+}

package/dist/components/text-area/Textarea.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Textarea.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Textarea({
+  value,
+  inputChanged,
+  disabled,
+  loading,
+  rows = 3,
+  showCount,
+  tooltip,
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  ...props
+}) {
+  const onInput = react.useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      const currentTextValue = textarea.value;
+      if (adjustHeight && textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      }
+      inputChanged(currentTextValue);
+    },
+    [inputChanged, adjustHeight]
+  );
+  const inputField = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        placeholder,
+        rows,
+        value,
+        onInput,
+        disabled,
+        ...props
+      }
+    ),
+    [value, disabled, placeholder, rows, onInput]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    showTooltip ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: tooltip, children: inputField }) : inputField,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { children: loading }),
+      showCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.internalCount, children: [
+        value == null ? void 0 : value.length,
+        " tegn i denne boks"
+      ] })
+    ] })
+  ] });
+}
+
+exports.Textarea = Textarea;

package/dist/components/text-area/Textarea.d.ts

@@ -0,0 +1,14 @@
+type TextareaProps = {
+    value: string;
+    inputChanged: (value: string) => void;
+    disabled?: boolean;
+    loading?: React.ReactNode;
+    rows: number;
+    showCount?: boolean;
+    tooltip?: string;
+    showTooltip?: boolean;
+    adjustHeight?: boolean;
+    placeholder?: string;
+};
+export declare function Textarea({ value, inputChanged, disabled, loading, rows, showCount, tooltip, showTooltip, placeholder, adjustHeight, ...props }: TextareaProps & React.HtmlHTMLAttributes<HTMLTextAreaElement>): React.ReactNode;
+export {};

package/dist/components/text-area/Textarea.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, useMemo } from 'react';
+import styles from './Textarea.module.css';
+
+function Textarea({
+  value,
+  inputChanged,
+  disabled,
+  loading,
+  rows = 3,
+  showCount,
+  tooltip,
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  ...props
+}) {
+  const onInput = useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      const currentTextValue = textarea.value;
+      if (adjustHeight && textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      }
+      inputChanged(currentTextValue);
+    },
+    [inputChanged, adjustHeight]
+  );
+  const inputField = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        placeholder,
+        rows,
+        value,
+        onInput,
+        disabled,
+        ...props
+      }
+    ),
+    [value, disabled, placeholder, rows, onInput]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    showTooltip ? /* @__PURE__ */ jsx("span", { title: tooltip, children: inputField }) : inputField,
+    /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+      loading && /* @__PURE__ */ jsx("div", { children: loading }),
+      showCount && /* @__PURE__ */ jsxs("div", { className: styles.internalCount, children: [
+        value == null ? void 0 : value.length,
+        " tegn i denne boks"
+      ] })
+    ] })
+  ] });
+}
+
+export { Textarea };

package/dist/components/text-area/Textarea.module.css

@@ -0,0 +1,3 @@
+.container textarea {
+    width: 100%;
+}

package/dist/components/tooltip/Tooltip.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Tooltip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Tooltip = ({
+  children,
+  content,
+  placement = "top",
+  className,
+  open,
+  flip = true,
+  offset = 8,
+  ...rest
+}) => {
+  const id = react.useId();
+  const wrapperRef = react.useRef(null);
+  const bubbleRef = react.useRef(null);
+  const [resolvedPlacement, setResolvedPlacement] = react.useState(placement);
+  react.useEffect(() => setResolvedPlacement(placement), [placement]);
+  const recomputePlacement = () => {
+    if (!flip) return setResolvedPlacement(placement);
+    const wrapper = wrapperRef.current;
+    const bubble = bubbleRef.current;
+    if (!wrapper || !bubble) return;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
+    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
+    if (placement === "top") {
+      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
+    } else if (placement === "bottom") {
+      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
+    } else {
+      setResolvedPlacement(placement);
+    }
+  };
+  react.useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const onShow = () => recomputePlacement();
+    const onResize = () => recomputePlacement();
+    const onScroll = () => recomputePlacement();
+    wrapper.addEventListener("mouseenter", onShow);
+    wrapper.addEventListener("focusin", onShow);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    if (open) recomputePlacement();
+    return () => {
+      wrapper.removeEventListener("mouseenter", onShow);
+      wrapper.removeEventListener("focusin", onShow);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [open, placement, flip, offset]);
+  const rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: rootClass,
+      "data-open": open ? "true" : void 0,
+      "data-placement": resolvedPlacement,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.trigger, "aria-describedby": id, tabIndex: 0, children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles__default.default.bubble, children: content })
+      ]
+    }
+  );
+};
+
+exports.Tooltip = Tooltip;

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    open?: boolean;
+    flip?: boolean;
+    offset?: number;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import styles from './Tooltip.module.css';
+
+const Tooltip = ({
+  children,
+  content,
+  placement = "top",
+  className,
+  open,
+  flip = true,
+  offset = 8,
+  ...rest
+}) => {
+  const id = useId();
+  const wrapperRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const [resolvedPlacement, setResolvedPlacement] = useState(placement);
+  useEffect(() => setResolvedPlacement(placement), [placement]);
+  const recomputePlacement = () => {
+    if (!flip) return setResolvedPlacement(placement);
+    const wrapper = wrapperRef.current;
+    const bubble = bubbleRef.current;
+    if (!wrapper || !bubble) return;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
+    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
+    if (placement === "top") {
+      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
+    } else if (placement === "bottom") {
+      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
+    } else {
+      setResolvedPlacement(placement);
+    }
+  };
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const onShow = () => recomputePlacement();
+    const onResize = () => recomputePlacement();
+    const onScroll = () => recomputePlacement();
+    wrapper.addEventListener("mouseenter", onShow);
+    wrapper.addEventListener("focusin", onShow);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    if (open) recomputePlacement();
+    return () => {
+      wrapper.removeEventListener("mouseenter", onShow);
+      wrapper.removeEventListener("focusin", onShow);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [open, placement, flip, offset]);
+  const rootClass = [styles.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: rootClass,
+      "data-open": open ? "true" : void 0,
+      "data-placement": resolvedPlacement,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.trigger, "aria-describedby": id, tabIndex: 0, children }),
+        /* @__PURE__ */ jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles.bubble, children: content })
+      ]
+    }
+  );
+};
+
+export { Tooltip };

package/dist/components/tooltip/Tooltip.module.css

@@ -0,0 +1,84 @@
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+.trigger {
+  width: 100%;
+}
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-default);
+}
+
+.bubble {
+  position: absolute;
+  background: var(--color-text);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-xs);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+  line-height: var(--line-height-tight);
+  white-space: nowrap;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, -8px);
+  left: 50%;
+  bottom: calc(100% + var(--spacing-xs));
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.container[data-placement='top'] .bubble {
+  left: 50%;
+  bottom: calc(100% + var(--spacing-xs));
+  transform: translate(-50%, -8px);
+}
+.container[data-placement='bottom'] .bubble {
+  top: calc(100% + var(--spacing-xs));
+  left: 50%;
+  transform: translate(-50%, 8px);
+}
+.container[data-placement='left'] .bubble {
+  right: calc(100% + var(--spacing-xs));
+  top: 50%;
+  transform: translate(-8px, -50%);
+}
+.container[data-placement='right'] .bubble {
+  left: calc(100% + var(--spacing-xs));
+  top: 50%;
+  transform: translate(8px, -50%);
+}
+
+.container:hover .bubble,
+.container:focus-within .bubble,
+.container[data-open='true'] .bubble {
+  opacity: 1;
+  height: fit-content;
+  transform: translate(-50%, 0);
+}
+
+.container[data-placement='bottom']:hover .bubble,
+.container[data-placement='bottom']:focus-within .bubble,
+.container[data-placement='bottom'][data-open='true'] .bubble {
+  transform: translate(-50%, 0);
+}
+.container[data-placement='left']:hover .bubble,
+.container[data-placement='left']:focus-within .bubble,
+.container[data-placement='left'][data-open='true'] .bubble {
+  transform: translate(0, -50%);
+}
+.container[data-placement='right']:hover .bubble,
+.container[data-placement='right']:focus-within .bubble,
+.container[data-placement='right'][data-open='true'] .bubble {
+  transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble {
+    transition: none;
+  }
+}

package/dist/components/user-display/UserDisplay.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Avatar = require('../avatar/Avatar');
+var styles = require('./UserDisplay.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function UserDisplay({
+  id,
+  name,
+  email,
+  role,
+  avatarUrl
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.userInfo, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: email }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: role })
+    ] })
+  ] });
+}
+
+exports.UserDisplay = UserDisplay;

package/dist/components/user-display/UserDisplay.d.ts

@@ -0,0 +1,9 @@
+interface UserDisplayProps {
+    id?: string;
+    name?: string;
+    email?: string;
+    role?: string;
+    avatarUrl?: string;
+}
+export declare function UserDisplay({ id, name, email, role, avatarUrl, }: UserDisplayProps): React.ReactNode;
+export {};

package/dist/components/user-display/UserDisplay.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Avatar } from '../avatar/Avatar';
+import styles from './UserDisplay.module.css';
+
+function UserDisplay({
+  id,
+  name,
+  email,
+  role,
+  avatarUrl
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.userInfo, children: [
+      /* @__PURE__ */ jsx("h4", { children: name }),
+      /* @__PURE__ */ jsx("p", { children: email }),
+      /* @__PURE__ */ jsx("p", { children: role })
+    ] })
+  ] });
+}
+
+export { UserDisplay };

package/dist/components/user-display/UserDisplay.module.css

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  padding: var(--spacing-xs);
+  background-color: var(--opac-bg-light);
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  flex-grow: 0;
+  color: var(--color-text-muted);
+}
+
+.userInfo h4 {
+  color: var(--color-text);
+  margin: 0;
+}
+
+.userInfo p {
+  margin: 0;
+}