Menu Button

import {
	HeadingItemType,
	LinkItemType,
	MenuItemType,
	SeparatorItemType,
} from '@pantheon-systems/pds-toolkit-react';

export const dialogMsgBase = 'Activated menu item => ';

const sampleCallback = (item?: MenuItemType) => {
	window.alert(`${dialogMsgBase}${item?.label}`);
};

export const simpleMenuItems: (MenuItemType | LinkItemType)[] = [
	{
		label: 'Alpha item',
		callback: sampleCallback,
	},
	{
		label: 'Beta item',
		callback: sampleCallback,
	},
	{
		label: 'Gamma item',
		callback: sampleCallback,
	},
	{
		label: 'Epsilon item',
		callback: sampleCallback,
	},
	{
		isLink: true,
		linkContent: <a href='#'>Zeta item (link)</a>,
	},
];

export const iconMenuItems: MenuItemType[] = [
	{
		label: 'Alpha item',
		iconName: 'arrowRight',
		id: 'alpha-arrow',
		testId: 'alpha-arrow-test',
		callback: sampleCallback,
	},
	{
		label: 'Beta item',
		iconName: 'bolt',
		callback: sampleCallback,
	},
	{
		label: 'Gamma item',
		iconName: 'gear',
		callback: sampleCallback,
	},
];

export const complexMenuItems: (
	HeadingItemType | MenuItemType | SeparatorItemType
)[] = [
	{
		label: 'Business options',
		isHeading: true,
	},
	{
		label: 'Alpha item',
		iconName: 'gear',
		description: 'Optional short description.',
		callback: sampleCallback,
	},
	{
		label: 'Beta item',
		callback: sampleCallback,
	},
	{
		label: 'Gamma item',
		callback: sampleCallback,
	},
	{
		isSeparator: true,
	},
	{
		label: 'Corporate options',
		isHeading: true,
	},
	{
		label: 'Alpha item',
		callback: sampleCallback,
	},
	{
		label: 'Beta item',
		callback: sampleCallback,
		disabled: true,
	},
	{
		label: 'Delete workspace',
		callback: sampleCallback,
		isCritical: true,
		criticalLabel: 'Warning:',
	},
];