import React from 'react';
import { IconHelp } from '../../src/lib/components/iconhelper/IconHelper';
import { Text } from '../../src/lib/components/text/Text.component';
import { Stack } from '../../src/lib/spacing';
import { Wrapper } from '../common';
export default {
title: 'Components/IconHelp',
component: IconHelp,
decorators: [(story: () => React.ReactNode) => {story()}],
};
export const Simple = {
name: 'Simple',
render: () => (
Replication policy
),
};
export const WithPlacement = {
name: 'Tooltip placement',
render: () => (
Placement top
Placement right (default)
Placement bottom
Placement left
),
};
const KeyValueRow = ({
label,
labelHelp,
labelAriaLabel,
value,
helpMessage,
helpAriaLabel,
}: {
label: string;
labelHelp?: React.ReactNode;
labelAriaLabel?: string;
value: React.ReactNode;
helpMessage?: React.ReactNode;
helpAriaLabel?: string;
}) => (
{label}
{labelHelp && (
)}
{value}
{helpMessage && (
)}
);
export const InKeyValueList = {
name: 'Explaining keys and values',
render: () => (
),
};