313e6e1217
* scaffold dealticket package, remove trading views from react-helpers * add deal ticket component, add intent utils, expand dialog and form group styles * add splash component, show market not found message if market doesnt exist * tidy up error handling * add handleError method for vega tx hook * add better testname for provider test, flesh out tests a bit more for deal ticket * Add unit tests for useVegaTransaction and useOrderSubmit hooks * add wrapper component for order dialog styles * add vega styled loader to ui toolkit and use in order dialog * add title prop to order dialog * split limit and market tickets into own files * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * Make button always type=button unless type prop is passed * inline filter logic for tif selector * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * use enums in deal ticket logic * tidy up order state by moving submit and transaction hooks out of deal ticket * add comment for dialog styles * remove decimal from price input * add types package, delete old generated types from trading project * rename types package to graphql * update generate command to point to correct locations * fix use order submit test * use intent shadow helper * remove date-fns and format manually, update submit button error to use input-error * remove stray console.log
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import classNames from 'classnames';
|
|
import { getIntentShadow, Intent } from '../../utils/intent';
|
|
import { Icon, IconName } from '../icon';
|
|
|
|
export interface CalloutProps {
|
|
children?: React.ReactNode;
|
|
title?: React.ReactElement | string;
|
|
intent?: Intent;
|
|
iconName?: IconName;
|
|
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
}
|
|
|
|
export function Callout({
|
|
children,
|
|
title,
|
|
intent = Intent.Help,
|
|
iconName,
|
|
headingLevel,
|
|
}: CalloutProps) {
|
|
const className = classNames(
|
|
'border',
|
|
'border-black',
|
|
'dark:border-white',
|
|
'text-body-large',
|
|
'dark:text-white',
|
|
'p-8',
|
|
getIntentShadow(intent),
|
|
{
|
|
flex: !!iconName,
|
|
}
|
|
);
|
|
const TitleTag: keyof JSX.IntrinsicElements = headingLevel
|
|
? `h${headingLevel}`
|
|
: 'div';
|
|
const icon = iconName && (
|
|
<Icon name={iconName} className="fill-current ml-8 mr-16 mt-8" size={20} />
|
|
);
|
|
const body = (
|
|
<>
|
|
{title && <TitleTag className="text-h5">{title}</TitleTag>}
|
|
{children}
|
|
</>
|
|
);
|
|
return (
|
|
<div data-testid="callout" className={className}>
|
|
{icon}
|
|
{icon ? <div className="grow">{body}</div> : body}
|
|
</div>
|
|
);
|
|
}
|