aidos-ui 3.0.0 → 3.0.2

package/src/ListButtonItem.tsx

@@ -7,6 +7,7 @@ import {
   getInteractableListItemJSStyles,
 } from "./Interactable";
 import { BaseButton } from "./BaseButton";
+import { useListContext } from "./List";
 
 // @ts-ignore
 interface ListButtonItemProps extends BaseListItemProps {
@@ -16,7 +17,6 @@ interface ListButtonItemProps extends BaseListItemProps {
   body?: string;
   disabled?: boolean;
   selected?: boolean;
-  bare?: boolean;
   children?: void;
 }
 
@@ -30,11 +30,12 @@ export const ListButtonItem = React.forwardRef(
       jsStyle,
       gap,
       selected,
-      bare,
       ...otherProps
     }: ListButtonItemProps,
     ref?: React.Ref<HTMLButtonElement>
   ) => {
+    const { bare } = useListContext();
+
     return (
       <BaseListItem
         withDivider={!bare}
@@ -45,7 +46,6 @@ export const ListButtonItem = React.forwardRef(
         bodyColor={getGlyphColor(color, disabled, true)}
         selected={selected}
         aria-selected={selected}
-        bare={bare}
         {...otherProps}
         jsStyle={jsStyle}
       >

package/src/ListHeaderItem.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { BaseListItem } from "./BaseListItem";
 import { Position, cssVar } from "./jss";
+import { useListContext } from "./List";
 
 export function ListHeaderItem({
-  bare,
   highlight,
   headline,
   body,
@@ -11,7 +11,6 @@ export function ListHeaderItem({
   addOn,
   addOnPosition,
 }: {
-  bare?: boolean;
   highlight?: boolean;
   headline: string;
   body?: string;
@@ -19,9 +18,10 @@ export function ListHeaderItem({
   addOn?: ReactNode;
   addOnPosition?: Position;
 }) {
+  const { bare } = useListContext();
+
   return (
     <BaseListItem
-      bare={bare}
       headline={headline}
       headlineColor={highlight ? (bare ? "highlight" : "light") : "primary"}
       headlineBold={true}

package/src/ListItem.tsx

@@ -2,20 +2,22 @@ import React from "react";
 
 import { BaseListItem, BaseListItemProps } from "./BaseListItem";
 import { cssVar } from "./jss";
+import { useListContext } from "./List";
 
 // @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>) => {
+    const { bare } = useListContext();
+
     return (
       <BaseListItem
-        withDivider={!props.bare}
+        withDivider={!bare}
         {...props}
         jsStyle={props.jsStyle}
         ref={ref}

package/src/ListLinkItem.tsx

@@ -7,6 +7,7 @@ import {
   getInteractableListItemJSStyles,
 } from "./Interactable";
 import { BaseLink } from "./BaseLink";
+import { useListContext } from "./List";
 
 // @ts-ignore
 interface ListLinkItemProps extends BaseListItemProps {
@@ -18,7 +19,6 @@ interface ListLinkItemProps extends BaseListItemProps {
   body?: string;
   disabled?: boolean;
   selected?: boolean;
-  bare?: boolean;
   target?: string;
 }
 
@@ -32,13 +32,14 @@ export const ListLinkItem = React.forwardRef(
       jsStyle,
       gap,
       selected,
-      bare,
       color = "secondary",
       target,
       ...otherProps
     }: ListLinkItemProps,
     ref?: React.Ref<HTMLAnchorElement>
   ) => {
+    const { bare } = useListContext();
+
     return (
       <BaseListItem
         withDivider={!bare}
@@ -49,7 +50,6 @@ export const ListLinkItem = React.forwardRef(
         headlineColor={getGlyphColor(color, disabled, true)}
         bodyColor={getGlyphColor(color, disabled, true)}
         selected={selected}
-        bare={bare}
         {...otherProps}
         jsStyle={jsStyle}
       >

package/src/Sublist.tsx

@@ -4,18 +4,19 @@ import { Icon } from "./Icon";
 import { Box } from "./Box";
 import { Row } from "./Row";
 import { JSStyle } from "./jss";
+import { useListContext } from "./List";
 
 export function Sublist({
   children,
   label,
+  labelBold,
   initialState = { collapsed: false },
   jsStyle,
   secondaryAddOn,
-  bare,
 }: {
-  bare?: boolean;
   children: React.ReactNode;
   label: string;
+  labelBold?: boolean;
   initialState?: {
     collapsed: boolean;
   };
@@ -23,12 +24,11 @@ export function Sublist({
   secondaryAddOn?: ReactNode;
 }) {
   const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
-
   return (
     <>
       <ListButtonItem
-        bare={bare}
         headline={label}
+        headlineBold={labelBold}
         onClick={() => setCollapsed((x) => !x)}
         jsStyle={jsStyle}
         addOn={

package/src/docs/mdx.tsx

@@ -0,0 +1,99 @@
+import { MDXProvider } from "@mdx-js/react";
+import React from "react";
+import { PropsWithChildren } from "react";
+import { H1, H2, H3, Li, P, Span } from "../Text";
+import { BaseLink } from "../BaseLink";
+import { BaseView } from "../BaseView";
+import { ListDivider } from "../ListDivider";
+import { cssVar } from "../jss";
+import { Roboto } from "next/font/google";
+
+const monospace = Roboto({ weight: "400", subsets: ["latin"] });
+
+const components: any = {
+  h1: (props) => (
+    <H1 jsStyle={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
+  ),
+  h2: (props) => (
+    <H2
+      id={labelToID(props.children)}
+      jsStyle={{ marginBottom: cssVar("--spacing-l") }}
+      {...props}
+    />
+  ),
+  h3: (props) => {
+    return <H3 id={labelToID(props.children)} {...props} />;
+  },
+  p: (props) => (
+    <P jsStyle={{ marginBottom: cssVar("--spacing-m") }} {...props} />
+  ),
+  span: (props) => <Span {...props} />,
+  li: (props) => (
+    <Li jsStyle={{ marginBottom: cssVar("--spacing-s") }} {...props} />
+  ),
+  a: (props) => {
+    return (
+      <BaseLink
+        bare
+        color="positive"
+        jsStyle={{
+          display: "inline-block",
+          paddingBottom: cssVar("--spacing-s"),
+          paddingTop: cssVar("--spacing-s"),
+        }}
+        href={props.href}
+      >
+        {props.children}
+      </BaseLink>
+    );
+  },
+  hr: () => (
+    <BaseView
+      jsStyle={{
+        marginBottom: cssVar("--spacing-xxl"),
+        marginTop: cssVar("--spacing-xxl"),
+      }}
+    >
+      <ListDivider />
+    </BaseView>
+  ),
+  pre: (props) => {
+    return (
+      <pre
+        style={{ borderRadius: cssVar("--border-radius-l") }}
+        className={props.children.props.className}
+        tabIndex={0}
+      >
+        <code className={props.children.props.className}>
+          {props.children.props.children}
+        </code>
+      </pre>
+    );
+  },
+  code: ({ children }) => (
+    <span
+      className={monospace.className}
+      style={{
+        color: cssVar("--primary-text"),
+        backgroundColor: cssVar("--secondary-background"),
+        borderRadius: cssVar("--border-radius-m"),
+        padding: cssVar("--spacing-xs"),
+        border: `1px solid ${cssVar("--divider")}`,
+        display: "inline-block",
+      }}
+    >
+      {children}
+    </span>
+  ),
+};
+
+export function labelToID(string: string): string {
+  return string
+    .replace(/[A-Z]/g, (m) => m.toLowerCase())
+    .replace(/\s/g, "-")
+    .replace(/\?/g, "");
+}
+
+export function DocsMDXProvider({ children }: PropsWithChildren<{}>) {
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+}

package/src/docs/pages.ts

@@ -0,0 +1,112 @@
+import { Size } from "../jss";
+
+type PageLink = {
+  type: "link";
+  page: string;
+  name?: string;
+  headlineSize?: Size;
+  headlineBold?: boolean;
+};
+
+type Page =
+  | PageLink
+  | {
+      type: "section";
+      label: string;
+      content: Array<PageLink>;
+    };
+
+export const pages: Array<Page> = [
+  {
+    type: "link",
+    page: "",
+    name: "Aidos UI",
+    headlineSize: "large",
+    headlineBold: true,
+  },
+  {
+    type: "section",
+    label: "CSS",
+    content: [{ type: "link", page: "css-in-js", name: "jss" }],
+  },
+  {
+    type: "section",
+    label: "Primary components",
+    content: [
+      { type: "link", page: "FlexLayout" },
+      { type: "link", page: "Text" },
+      { type: "link", page: "TextPairing" },
+      { type: "link", page: "Icon" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Buttons and links",
+    content: [
+      { type: "link", page: "Button" },
+      { type: "link", page: "Link" },
+      { type: "link", page: "IconButton" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Inputs",
+    content: [
+      { type: "link", page: "TextInput" },
+      { type: "link", page: "RangeInput" },
+      { type: "link", page: "TimeInput" },
+      { type: "link", page: "Checkbox" },
+    ],
+  },
+  {
+    type: "section",
+    label: "List components",
+    content: [
+      { type: "link", page: "List" },
+      { type: "link", page: "ListHeader" },
+      { type: "link", page: "navigation", name: "List navigation" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Modals",
+    content: [
+      { type: "link", page: "Dialog" },
+      { type: "link", page: "Popover" },
+      { type: "link", page: "Tooltip" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Visual indicators",
+    content: [
+      { type: "link", page: "Badge" },
+      { type: "link", page: "ProgressBar" },
+      { type: "link", page: "ProgressCircle" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Complex components",
+    content: [
+      { type: "link", page: "Tabs" },
+      { type: "link", page: "Calendar" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Hooks",
+    content: [
+      { type: "link", page: "useCookie" },
+      { type: "link", page: "useNavigation" },
+      { type: "link", page: "useKeyboard" },
+      { type: "link", page: "useRefEffect" },
+      { type: "link", page: "usePromise" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Utils",
+    content: [{ type: "link", page: "Hashing" }],
+  },
+];