aidos-ui 3.0.0

package/src/Interactable.tsx

@@ -0,0 +1,159 @@
+import { JSStyle, Padding, TextColor, cssVar, getPadding } from "./jss";
+
+export type InteractableColor = "positive" | "secondary" | "negative";
+
+const jsStyles = {
+  root: {
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    transition: "opacity 0.1s ease-in",
+    outlineColor: "var(--outline)",
+    "[aria-disabled=true]": {
+      color: "var(--secondary-text)",
+      backgroundColor: "var(--background-button-secondary)",
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: -2,
+    },
+  },
+  positive: {
+    backgroundColor: "var(--background-button-positive)",
+    "[aria-disabled=true]": {
+      backgroundColor: "var(--background-button-disabled)",
+    },
+  },
+  secondary: {
+    backgroundColor: "var(--background-button-secondary)",
+    "[aria-disabled=true]": {
+      backgroundColor: "var(--background-button-disabled)",
+    },
+  },
+  negative: {
+    backgroundColor: "var(--background-button-negative)",
+    "[aria-disabled=true]": {
+      backgroundColor: "var(--background-button-disabled)",
+    },
+  },
+  disabled: {
+    cursor: "default",
+  },
+  bare: {
+    backgroundColor: "inherit",
+    outlineColor: "var(--outline)",
+    "[aria-disabled=true]": {
+      backgroundColor: "inherit",
+    },
+    "[aria-disabled=true]:hover": {
+      backgroundColor: "inherit",
+    },
+  },
+  opacityHover: {
+    ":hover": {
+      opacity: 0.8,
+    },
+    "[aria-disabled=true]:hover": {
+      opacity: 1,
+    },
+  },
+  colorHover: {},
+};
+
+export function getInteractableJSStyles({
+  color,
+  bare,
+  disabled,
+  animateInteraction,
+  padding,
+}: {
+  color: InteractableColor;
+  bare: boolean;
+  disabled: boolean;
+  animateInteraction: boolean;
+  padding: Padding;
+}): Array<JSStyle> {
+  return [
+    jsStyles.root,
+    color === "positive" && jsStyles.positive,
+    color === "secondary" && jsStyles.secondary,
+    color === "negative" && jsStyles.negative,
+    bare && jsStyles.bare,
+    disabled && jsStyles.disabled,
+    !bare && jsStyles.opacityHover,
+    animateInteraction &&
+      !disabled && {
+        position: "relative",
+        ":active": {
+          opacity: 0.95,
+          top: 1,
+        },
+        "[aria-disabled=true]:active": {
+          top: 0,
+          opacity: 1,
+        },
+      },
+    getPadding(padding),
+  ];
+}
+
+export const getGlyphColor = (
+  color: InteractableColor,
+  disabled: boolean | undefined,
+  bare: boolean | undefined
+): TextColor => {
+  if (disabled) {
+    return "subtle";
+  }
+
+  switch (color) {
+    case "positive":
+      return bare ? "highlight" : "light";
+    case "negative":
+      return bare ? "negative" : "light";
+    case "secondary":
+      return bare ? "primary" : "secondary";
+  }
+};
+
+export const getInteractableListItemJSStyles = ({
+  bare,
+  selected,
+}: {
+  bare: boolean;
+  selected: boolean;
+}) => {
+  return [
+    {
+      overflow: "hidden",
+      flexGrow: 1,
+      borderRadius: bare ? cssVar("--border-radius-m") : null,
+      textDecoration: "none",
+      ":hover": {
+        backgroundColor: "var(--hovered-background)",
+      },
+      ":active:hover": {
+        backgroundColor: "var(--pressed-background)",
+      },
+      "[aria-disabled=true]": {
+        backgroundColor: "var(--primary-background)",
+      },
+      "[aria-disabled=true]:active:hover": {
+        backgroundColor: "var(--primary-background)",
+      },
+    },
+    selected && {
+      backgroundColor: bare
+        ? cssVar("--light-highlight")
+        : cssVar("--selected-background"),
+      boxShadow: bare ? "" : "inset 1px 1px 2px -1px #0000004a",
+      ":hover": {
+        backgroundColor: "var(--hovered-background)",
+      },
+      ":active:hover": {
+        backgroundColor: "var(--pressed-background)",
+      },
+    },
+  ];
+};

package/src/Link.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import { BaseLink, BaseLinkProps } from "./BaseLink";
+import { Text } from "./Text";
+import { IconType } from "./IconType";
+import { Row } from "./Row";
+import { Icon } from "./Icon";
+import { FlexLayoutProps } from "./FlexLayout";
+import { InteractableColor, getGlyphColor } from "./Interactable";
+import { Size, Align, Gap, Justify, cssVar } from "./jss";
+
+export interface LinkProps extends BaseLinkProps {
+  label: string;
+  color: InteractableColor;
+  size?: Size;
+  icon?: IconType;
+  iconSize?: Size;
+  children?: undefined;
+  iconPosition?: "left" | "right";
+  rowProps?: FlexLayoutProps;
+  align?: Align;
+  gap?: Gap;
+  justify?: Justify;
+}
+
+export const Link = React.forwardRef(
+  (
+    {
+      label,
+      color,
+      bare,
+      disabled,
+      icon,
+      iconSize = "medium",
+      iconPosition = "left",
+      align = "center",
+      gap = "small",
+      justify = "center",
+      jsStyle,
+      size = "medium",
+      ...otherProps
+    }: LinkProps,
+    ref?: React.Ref<HTMLAnchorElement>
+  ) => {
+    return (
+      <BaseLink
+        {...otherProps}
+        bare={bare}
+        ref={ref}
+        color={color}
+        disabled={disabled}
+        jsStyle={[
+          {
+            borderRadius: "var(--border-radius-m)",
+            justifyContent: "center",
+            userSelect: "none",
+            padding: cssVar("--spacing-m"),
+            display: "inline-flex",
+            textDecoration: "none",
+          },
+          jsStyle,
+        ]}
+      >
+        <Row grow={true} align={align} gap={gap} justify={justify}>
+          {icon && iconPosition === "left" && (
+            <Icon
+              icon={icon}
+              size={iconSize}
+              color={getGlyphColor(color, disabled, bare)}
+            />
+          )}
+          <Text size={size} color={getGlyphColor(color, disabled, bare)}>
+            {label}
+          </Text>
+          {icon && iconPosition === "right" && (
+            <Icon
+              icon={icon}
+              size={iconSize}
+              color={getGlyphColor(color, disabled, bare)}
+            />
+          )}
+        </Row>
+      </BaseLink>
+    );
+  }
+);

package/src/List.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { BaseList, BaseListProps } from "./BaseList";
+import { useNavigation } from "./useNavigation";
+import { cssVar } from "./jss";
+
+interface ListProps extends BaseListProps {
+  ariaLabel: string;
+  bare?: boolean;
+  autofocus?: boolean;
+  role?: undefined;
+  navigation?: boolean;
+}
+
+export function List({
+  ariaLabel,
+  jsStyle,
+  autofocus = false,
+  navigation = true,
+  bare,
+  ...otherProps
+}: ListProps) {
+  const rootRef = useNavigation({ autofocus, enabled: navigation });
+
+  return (
+    <BaseList
+      role="grid"
+      aria-label={ariaLabel}
+      ref={rootRef}
+      jsStyle={[
+        { overflow: "hidden" },
+        !bare && {
+          border: `1px solid ${cssVar("--divider")}`,
+          borderRadius: cssVar("--border-radius-l"),
+          backgroundColor: cssVar("--overlay-background"),
+        },
+        jsStyle,
+      ]}
+      {...otherProps}
+    />
+  );
+}

package/src/ListButtonItem.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+import { BaseListItem, BaseListItemProps } from "./BaseListItem";
+import {
+  InteractableColor,
+  getGlyphColor,
+  getInteractableListItemJSStyles,
+} from "./Interactable";
+import { BaseButton } from "./BaseButton";
+
+// @ts-ignore
+interface ListButtonItemProps extends BaseListItemProps {
+  color: InteractableColor;
+  onClick: () => void;
+  headline: string;
+  body?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  bare?: boolean;
+  children?: void;
+}
+
+export const ListButtonItem = React.forwardRef(
+  (
+    {
+      onClick,
+      color = "secondary",
+      disabled = false,
+      padding = "medium",
+      jsStyle,
+      gap,
+      selected,
+      bare,
+      ...otherProps
+    }: ListButtonItemProps,
+    ref?: React.Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <BaseListItem
+        withDivider={!bare}
+        disabled={disabled}
+        padding="none"
+        gap={gap}
+        headlineColor={getGlyphColor(color, disabled, true)}
+        bodyColor={getGlyphColor(color, disabled, true)}
+        selected={selected}
+        aria-selected={selected}
+        bare={bare}
+        {...otherProps}
+        jsStyle={jsStyle}
+      >
+        {({ content }) => (
+          <BaseButton
+            padding={padding}
+            disabled={disabled}
+            animateInteraction={false}
+            bare={true}
+            color={bare ? "secondary" : color}
+            ref={ref}
+            jsStyle={getInteractableListItemJSStyles({ bare, selected })}
+            onClick={onClick}
+          >
+            {content}
+          </BaseButton>
+        )}
+      </BaseListItem>
+    );
+  }
+);

package/src/ListDivider.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { BaseView } from "./BaseView";
+
+const jsStyles = {
+  root: {
+    width: "100%",
+    borderBottom: "1px solid var(--divider)",
+  },
+};
+
+export function ListDivider() {
+  return <BaseView jsStyle={jsStyles.root} />;
+}

package/src/ListHeaderItem.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { BaseListItem } from "./BaseListItem";
+import { Position, cssVar } from "./jss";
+
+export function ListHeaderItem({
+  bare,
+  highlight,
+  headline,
+  body,
+  withDivider,
+  addOn,
+  addOnPosition,
+}: {
+  bare?: boolean;
+  highlight?: boolean;
+  headline: string;
+  body?: string;
+  withDivider?: boolean;
+  addOn?: ReactNode;
+  addOnPosition?: Position;
+}) {
+  return (
+    <BaseListItem
+      bare={bare}
+      headline={headline}
+      headlineColor={highlight ? (bare ? "highlight" : "light") : "primary"}
+      headlineBold={true}
+      body={body}
+      addOn={addOn}
+      addOnPosition={addOnPosition}
+      withDivider={bare ? false : withDivider}
+      jsStyle={
+        bare
+          ? null
+          : {
+              backgroundColor: highlight
+                ? cssVar("--highlight")
+                : cssVar("--secondary-background"),
+            }
+      }
+    >
+      {({ content }) => content}
+    </BaseListItem>
+  );
+}

package/src/ListItem.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { BaseListItem, BaseListItemProps } from "./BaseListItem";
+import { cssVar } from "./jss";
+
+// @ts-ignore
+interface ListItemProps extends BaseListItemProps {
+  headline: string;
+  body?: string;
+  bare?: boolean;
+  children?: void;
+}
+
+export const ListItem = React.forwardRef(
+  (props: ListItemProps, ref?: React.Ref<HTMLLIElement>) => {
+    return (
+      <BaseListItem
+        withDivider={!props.bare}
+        {...props}
+        jsStyle={props.jsStyle}
+        ref={ref}
+      >
+        {({ content }) => content}
+      </BaseListItem>
+    );
+  }
+);

package/src/ListLinkItem.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import { BaseListItem, BaseListItemProps } from "./BaseListItem";
+import {
+  InteractableColor,
+  getGlyphColor,
+  getInteractableListItemJSStyles,
+} from "./Interactable";
+import { BaseLink } from "./BaseLink";
+
+// @ts-ignore
+interface ListLinkItemProps extends BaseListItemProps {
+  color?: InteractableColor;
+  children?: void;
+  onClick?: () => void;
+  href: string;
+  headline: string;
+  body?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  bare?: boolean;
+  target?: string;
+}
+
+export const ListLinkItem = React.forwardRef(
+  (
+    {
+      onClick,
+      href,
+      disabled = false,
+      padding = "medium",
+      jsStyle,
+      gap,
+      selected,
+      bare,
+      color = "secondary",
+      target,
+      ...otherProps
+    }: ListLinkItemProps,
+    ref?: React.Ref<HTMLAnchorElement>
+  ) => {
+    return (
+      <BaseListItem
+        withDivider={!bare}
+        disabled={disabled}
+        aria-selected={selected}
+        padding="none"
+        gap={gap}
+        headlineColor={getGlyphColor(color, disabled, true)}
+        bodyColor={getGlyphColor(color, disabled, true)}
+        selected={selected}
+        bare={bare}
+        {...otherProps}
+        jsStyle={jsStyle}
+      >
+        {({ content }) => (
+          <BaseLink
+            target={target}
+            padding={padding}
+            aria-current={selected ? "page" : undefined}
+            disabled={disabled}
+            animateInteraction={false}
+            bare={true}
+            color={color}
+            href={href}
+            ref={ref}
+            jsStyle={getInteractableListItemJSStyles({ bare, selected })}
+            onClick={onClick}
+          >
+            {content}
+          </BaseLink>
+        )}
+      </BaseListItem>
+    );
+  }
+);

package/src/ListSpacer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { BaseView } from "./BaseView";
+
+const jsStyles = {
+  root: {
+    height: "var(--spacing-xl)",
+    backgroundColor: "var(--secondary-background)",
+    width: "100%",
+  },
+};
+
+export function ListSpacer() {
+  return <BaseView jsStyle={jsStyles.root} />;
+}

package/src/OnVisible.tsx

@@ -0,0 +1,42 @@
+import React, { useRef, useCallback, ReactElement } from "react";
+
+export function OnVisible({
+  children,
+  onVisible,
+}: {
+  children: (refCallback: React.RefCallback<HTMLElement>) => ReactElement;
+  onVisible: () => void;
+}) {
+  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+
+  const refCallback = useCallback((element) => {
+    if (element == null) {
+      return;
+    }
+
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            onVisible();
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+      }
+    );
+
+    intersectionObserverRef.current = intersectionObserver;
+    intersectionObserver.observe(element);
+
+    return () => {
+      intersectionObserver.unobserve(element);
+      intersectionObserverRef.current = null;
+    };
+    // eslint-disable-next-line
+  }, []);
+
+  return children(refCallback);
+}