@neo4j-ndl/react 4.16.7 → 4.16.9

package/skills/ndl-react/components/graph-label.md

@@ -0,0 +1,167 @@
+# GraphLabel
+
+Import: `import { GraphLabel } from '@neo4j-ndl/react'`
+
+## Props
+
+### GraphLabel
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` |  |  | Content displayed inside the label |
+| `color` | `string` |  |  | The background color of the label |
+| `isDisabled` | `boolean` |  | `false` | Whether the label is disabled |
+| `isFluid` | `boolean` |  | `false` | Whether the label should expand to full available width |
+| `isSelected` | `boolean` |  | `false` | Whether the label is selected |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function that is called when the label is clicked |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'small'` |  | `large` | The size of the label |
+| `type` | `'node' \| 'propertyKey' \| 'relationship' \| 'relationshipLeft' \| 'relationshipRight'` |  | `node` | The type of label |
+
+## Examples
+
+### Color
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { tokens } from '@neo4j-ndl/base';
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16">
+      <GraphLabel type="node" color={tokens.graph['1']}>
+        Node
+      </GraphLabel>
+      <GraphLabel type="node" color={tokens.graph['3']}>
+        Node
+      </GraphLabel>
+      <GraphLabel type="node" color={tokens.graph['12']}>
+        Node
+      </GraphLabel>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <GraphLabel type="node" isDisabled>
+      Node
+    </GraphLabel>
+  );
+};
+
+export default Component;
+```
+
+### Fluid
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <GraphLabel type="relationship" isFluid={true}>
+      Long long long long long long long long long long long long label text
+      that is fluid
+    </GraphLabel>
+  );
+};
+
+export default Component;
+```
+
+### Non Interactive
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <GraphLabel type="node" as="span">
+      Label
+    </GraphLabel>
+  );
+};
+
+export default Component;
+```
+
+### Selected
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <GraphLabel type="node" isSelected>
+      Label
+    </GraphLabel>
+  );
+};
+
+export default Component;
+```
+
+### Sizes
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16">
+      <GraphLabel type="node" size="small">
+        Label
+      </GraphLabel>
+      <GraphLabel type="node" size="large">
+        Label
+      </GraphLabel>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Types
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { GraphLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16">
+      <GraphLabel type="node">Node</GraphLabel>
+      <GraphLabel type="propertyKey">Property Key</GraphLabel>
+      <GraphLabel type="relationship">Relationship</GraphLabel>
+      <GraphLabel type="relationshipLeft">Relationship Left</GraphLabel>
+      <GraphLabel type="relationshipRight">Relationship Right</GraphLabel>
+    </div>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/icon-button-array.md

@@ -0,0 +1,187 @@
+# IconButtonArrayComponent
+
+Import: `import { IconButtonArrayComponent } from '@neo4j-ndl/react'`
+
+## Props
+
+### IconButtonArrayComponent
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` | ✅ |  | Content displayed in the icon button array |
+| `isFloating` | `boolean` |  | `false` | Whether the icon button array is floating |
+| `orientation` | `'horizontal' \| 'vertical'` |  | `horizontal` | Orientation of the icon button array |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the icon button array |
+
+### IconButtonArray.CollapsibleButtonWrapper
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactElement<CleanIconButtonButtonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>, string \| JSXElementConstructor<...>> \| ReactElement<...>[]` | ✅ |  | Icon buttons to be displayed in the collapsible button wrapper |
+
+## Examples
+
+### Collapsible
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
+import {
+  FunnelIconOutline,
+  MagnifyingGlassIconOutline,
+  PencilIconOutline,
+  UserCircleIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButtonArray orientation="horizontal" size="medium">
+      <CleanIconButton description="Search">
+        <MagnifyingGlassIconOutline />
+      </CleanIconButton>
+      <CleanIconButton description="Filter">
+        <FunnelIconOutline />
+      </CleanIconButton>
+      <IconButtonArray.CollapsibleButtonWrapper>
+        <CleanIconButton description="User">
+          <UserCircleIconOutline />
+        </CleanIconButton>
+        <CleanIconButton description="Edit">
+          <PencilIconOutline />
+        </CleanIconButton>
+      </IconButtonArray.CollapsibleButtonWrapper>
+    </IconButtonArray>
+  );
+};
+
+export default Component;
+```
+
+### Floating
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
+import {
+  FunnelIconOutline,
+  MagnifyingGlassIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButtonArray orientation="horizontal" isFloating={true} size="medium">
+      <CleanIconButton description="Search">
+        <MagnifyingGlassIconOutline />
+      </CleanIconButton>
+      <CleanIconButton description="Filter">
+        <FunnelIconOutline />
+      </CleanIconButton>
+    </IconButtonArray>
+  );
+};
+
+export default Component;
+```
+
+### Horizontal
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
+import {
+  FunnelIconOutline,
+  MagnifyingGlassIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButtonArray orientation="horizontal" size="medium">
+      <CleanIconButton description="Search">
+        <MagnifyingGlassIconOutline />
+      </CleanIconButton>
+      <CleanIconButton description="Filter">
+        <FunnelIconOutline />
+      </CleanIconButton>
+    </IconButtonArray>
+  );
+};
+
+export default Component;
+```
+
+### Sizes
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
+import {
+  FunnelIconOutline,
+  MagnifyingGlassIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-items-start n-gap-token-16">
+      <IconButtonArray orientation="horizontal" size="small">
+        <CleanIconButton description="Search">
+          <MagnifyingGlassIconOutline />
+        </CleanIconButton>
+        <CleanIconButton description="Filter">
+          <FunnelIconOutline />
+        </CleanIconButton>
+      </IconButtonArray>
+      <IconButtonArray orientation="horizontal" size="medium">
+        <CleanIconButton description="Search">
+          <MagnifyingGlassIconOutline />
+        </CleanIconButton>
+        <CleanIconButton description="Filter">
+          <FunnelIconOutline />
+        </CleanIconButton>
+      </IconButtonArray>
+      <IconButtonArray orientation="horizontal" size="large">
+        <CleanIconButton description="Search">
+          <MagnifyingGlassIconOutline />
+        </CleanIconButton>
+        <CleanIconButton description="Filter">
+          <FunnelIconOutline />
+        </CleanIconButton>
+      </IconButtonArray>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Vertical
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { CleanIconButton, IconButtonArray } from '@neo4j-ndl/react';
+import {
+  FunnelIconOutline,
+  MagnifyingGlassIconOutline,
+} from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButtonArray orientation="vertical" size="medium">
+      <CleanIconButton description="Search">
+        <MagnifyingGlassIconOutline />
+      </CleanIconButton>
+      <CleanIconButton description="Filter">
+        <FunnelIconOutline />
+      </CleanIconButton>
+    </IconButtonArray>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/icon-button.md

@@ -0,0 +1,193 @@
+# IconButton
+
+Import: `import { IconButton } from '@neo4j-ndl/react'`
+
+## Props
+
+### IconButton
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `children` | `ReactNode` |  |  |  |
+| `description` | `string \| null` | ✅ |  | A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} |
+| `descriptionKbdProps` | `(KbdProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  | The Kbd components that will be displayed in the tooltip after the description text, this does not include the keyboard shortcut functionality this only displays the Kbd components. |
+| `isActive` | `boolean` |  |  | Active - used for open context menus for example |
+| `isDisabled` | `boolean` |  | `false` | If the icon button is in disabled state |
+| `isFloating` | `boolean` |  | `false` | If the button is in floating state |
+| `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
+| `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
+| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Click handler |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
+| `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |
+| `variant` | `'danger' \| 'neutral'` |  | `neutral` | Variant of the button |
+
+## Accessibility
+
+## Implementation guidelines
+
+An IconButton must have the `description` prop set for it to be accessible. The description is used as the aria-label for screen readers, unless aria-label is set manually. IconButtons are interactive elements that allow users to trigger actions with either `Space` or `Enter`. Try to avoid disabling buttons since they are removed from the accessibility tree. Instead, give the user feedback on the action.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButton description="Search">
+      <MagnifyingGlassIconOutline />
+    </IconButton>
+  );
+};
+
+export default Component;
+```
+
+### Active
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButton description="Search" isActive>
+      <MagnifyingGlassIconOutline />
+    </IconButton>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButton description="Search" isDisabled>
+      <MagnifyingGlassIconOutline />
+    </IconButton>
+  );
+};
+
+export default Component;
+```
+
+### Floating
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButton description="Search" isFloating>
+      <MagnifyingGlassIconOutline />
+    </IconButton>
+  );
+};
+
+export default Component;
+```
+
+### Loading
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <IconButton description="Search" isLoading loadingMessage="Loading">
+      <MagnifyingGlassIconOutline />
+    </IconButton>
+  );
+};
+
+export default Component;
+```
+
+### Sizes
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton, Typography } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-gap-token-16">
+      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+        <IconButton description="Search" size="small">
+          <MagnifyingGlassIconOutline />
+        </IconButton>
+        <Typography variant="label"> Small</Typography>
+      </div>
+      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+        <IconButton description="Search" size="medium">
+          <MagnifyingGlassIconOutline />
+        </IconButton>
+        <Typography variant="label"> Medium</Typography>
+      </div>
+      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+        <IconButton description="Search" size="large">
+          <MagnifyingGlassIconOutline />
+        </IconButton>
+        <Typography variant="label"> Large</Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Tone
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { IconButton, Typography } from '@neo4j-ndl/react';
+import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-gap-token-16">
+      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+        <IconButton description="Search" variant="neutral">
+          <MagnifyingGlassIconOutline />
+        </IconButton>
+        <Typography variant="label">Default</Typography>
+      </div>
+      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+        <IconButton description="Search" variant="danger">
+          <MagnifyingGlassIconOutline />
+        </IconButton>
+        <Typography variant="label">Danger</Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```