@neo4j-ndl/react 4.16.8 → 4.16.9

package/skills/ndl-react/components/status-indicator.md

@@ -0,0 +1,57 @@
+# StatusIndicator
+
+Import: `import { StatusIndicator } from '@neo4j-ndl/react'`
+
+## Props
+
+### StatusIndicator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ref` | `Ref<SVGSVGElement>` |  |  | A ref to apply to the root element. |
+| `variant` | `'danger' \| 'info' \| 'success' \| 'unknown' \| 'warning'` |  | `unknown` | Type of the status indicator. |
+
+## Accessibility
+
+## Implementation guidelines
+
+The StatusIndicator component uses the `aria-hidden` attribute to hide it from screen readers. This component should be used as a visual indicator only, and the meaning that it represents should be conveyed through other means; like connected text, or a tooltip/aria-label if it's on a button.
+
+## Examples
+
+### Variants
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { StatusIndicator, Typography } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16">
+      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+        <StatusIndicator variant="unknown" />
+        <Typography variant="label">Unknown</Typography>
+      </div>
+      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+        <StatusIndicator variant="success" />
+        <Typography variant="label">Success</Typography>
+      </div>
+      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+        <StatusIndicator variant="info" />
+        <Typography variant="label">Info</Typography>
+      </div>
+      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+        <StatusIndicator variant="warning" />
+        <Typography variant="label">Warning</Typography>
+      </div>
+      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
+        <StatusIndicator variant="danger" />
+        <Typography variant="label">Danger</Typography>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```

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

@@ -0,0 +1,132 @@
+# StatusLabel
+
+Import: `import { StatusLabel } from '@neo4j-ndl/react'`
+
+## Props
+
+### StatusLabel
+
+| 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` | ✅ |  | The content displayed inside the status label |
+| `fill` | `'clean' \| 'filled' \| 'outlined' \| 'semi-filled'` |  | `filled` | Fill type of status label, determines the background and border styles. |
+| `hasIcon` | `boolean` |  | `false` | Whether the status label have an icon |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'small'` |  | `large` | Size of the status label |
+| `variant` | `'danger' \| 'default' \| 'discovery' \| 'info' \| 'success' \| 'warning'` |  | `default` | Color of the status label that indicates its purpose. |
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { StatusLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <StatusLabel>StatusLabel</StatusLabel>;
+};
+
+export default Component;
+```
+
+### Colors
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { StatusLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16 n-flex-wrap">
+      <StatusLabel variant="default">Default</StatusLabel>
+      <StatusLabel variant="info">Info</StatusLabel>
+      <StatusLabel variant="success">Success</StatusLabel>
+      <StatusLabel variant="warning">Warning</StatusLabel>
+      <StatusLabel variant="danger">Danger</StatusLabel>
+      <StatusLabel variant="discovery">Discovery</StatusLabel>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Fills
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { StatusLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-16 n-flex-wrap">
+      <StatusLabel fill="filled">Filled</StatusLabel>
+      <StatusLabel fill="outlined">Outlined</StatusLabel>
+      <StatusLabel fill="semi-filled">Semi-filled</StatusLabel>
+      <StatusLabel fill="clean" hasIcon>
+        Clean
+      </StatusLabel>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### With Icons
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { StatusLabel } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center">
+      <StatusLabel variant="default" hasIcon>
+        Default
+      </StatusLabel>
+      <StatusLabel variant="info" hasIcon>
+        Info
+      </StatusLabel>
+      <StatusLabel variant="success" hasIcon>
+        Success
+      </StatusLabel>
+      <StatusLabel variant="danger" hasIcon>
+        Danger
+      </StatusLabel>
+      <StatusLabel variant="warning" hasIcon>
+        Warning
+      </StatusLabel>
+      <StatusLabel variant="discovery" hasIcon>
+        Discovery
+      </StatusLabel>
+      <StatusLabel variant="default" fill="clean" hasIcon>
+        Default
+      </StatusLabel>
+      <StatusLabel variant="info" fill="clean" hasIcon>
+        Info
+      </StatusLabel>
+      <StatusLabel variant="success" fill="clean" hasIcon>
+        Success
+      </StatusLabel>
+      <StatusLabel variant="danger" fill="clean" hasIcon>
+        Danger
+      </StatusLabel>
+      <StatusLabel variant="warning" fill="clean" hasIcon>
+        Warning
+      </StatusLabel>
+      <StatusLabel variant="discovery" fill="clean" hasIcon>
+        Discovery
+      </StatusLabel>
+    </div>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/switch.md

@@ -0,0 +1,167 @@
+# Switch
+
+Import: `import { Switch } from '@neo4j-ndl/react'`
+
+## Props
+
+### Switch
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` |  |  | The aria label of the switch. Required if the label is not a string. |
+| `hasLeadingLabel` | `boolean` |  |  | Whether the label should be displayed before the switch |
+| `isChecked` | `boolean` |  |  | Whether the switch is checked |
+| `isDefaultChecked` | `boolean` |  |  | Checks the input by default in uncontrolled mode |
+| `isDisabled` | `boolean` |  | `false` | Whether the switch is disabled |
+| `isFluid` | `boolean` |  | `false` | Whether the switch & label should take the full available width of its container |
+| `isIndeterminate` | `boolean` |  | `false` | Whether the switch is indeterminate |
+| `label` | `ReactNode` |  |  | The label of the switch. If not a string, supply an aria label for screen reader support. |
+| `onChange` | `((event: ChangeEvent<HTMLInputElement, Element>) => void)` |  |  | The callback function triggered when the switch value changes |
+| `onClick` | `((event: MouseEvent<HTMLInputElement, MouseEvent>) => void)` |  |  | The callback function triggered when the switch is clicked |
+| `ref` | `Ref<HTMLInputElement>` |  |  | A ref to apply to the root element. |
+| `value` | `string \| number \| readonly string[]` |  |  | The value of the switch |
+
+## Accessibility
+
+## Implementation guidelines
+
+The Switch component uses implicit label wrapping to associate the visible label with the input for screen readers. If you omit the label prop or use an invalid label (no text content), the `ariaLabel` prop will be required to ensure an accessible name.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <Switch label="Label" />;
+};
+
+export default Component;
+```
+
+### Controlled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <Switch
+      isChecked={isChecked}
+      label="Controlled switch"
+      onChange={(event) => setIsChecked(event.target.checked)}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <Switch label="Label" isDisabled />;
+};
+
+export default Component;
+```
+
+### Full
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
+    console.info('Switch clicked!', event);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(event.target.checked);
+    console.info('Switch changed:', event.target.checked);
+  };
+
+  return (
+    <Switch
+      label="Label"
+      ariaLabel="Comprehensive switch example with all props"
+      isChecked={isChecked}
+      hasLeadingLabel={false}
+      isDisabled={false}
+      isFluid={false}
+      value="switch-value"
+      onClick={handleClick}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Has Label Before
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Switch
+      label="Label"
+      hasLeadingLabel
+      onClick={() => console.info('Clicked on the switch!')}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Indeterminate
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <Switch label="Label" isIndeterminate />;
+};
+
+export default Component;
+```
+
+### No Label
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Switch } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <Switch ariaLabel="Label" />;
+};
+
+export default Component;
+```