Drawer

() => {
	const [isDrawerOpen, openDrawer, closeDrawer] = useTernaryState(false);
	return (
		<React.Fragment>
			<Button onClick={openDrawer}>Open Drawer</Button>
			<Drawer
				isOpen={isDrawerOpen}
				onDismiss={closeDrawer}
				title="Drawer title"
				actions={
					<ButtonGroup>
						<Button onClick={closeDrawer}>Primary</Button>
						<Button variant="secondary" onClick={closeDrawer}>
							Secondary
						</Button>
						<Button variant="tertiary" onClick={closeDrawer}>
							Tertiary
						</Button>
					</ButtonGroup>
				}
			>
				<Text as="p">Drawer body area.</Text>
			</Drawer>
		</React.Fragment>
	);
};

() => {
	const [isDrawerOpen, openDrawer, closeDrawer] = useTernaryState(false);
	return (
		<React.Fragment>
			<Button onClick={openDrawer}>Open Medium Drawer</Button>
			<Drawer
				isOpen={isDrawerOpen}
				onDismiss={closeDrawer}
				title="Medium Drawer"
				actions={
					<ButtonGroup>
						<Button onClick={closeDrawer}>Primary</Button>
						<Button variant="secondary" onClick={closeDrawer}>
							Secondary
						</Button>
						<Button variant="tertiary" onClick={closeDrawer}>
							Tertiary
						</Button>
					</ButtonGroup>
				}
			>
				<Select
					label="Example filter"
					placeholder="Please select"
					options={[
						{ value: 'a', label: 'Option A' },
						{ value: 'b', label: 'Option B' },
						{ value: 'c', label: 'Option C' },
					]}
					hideOptionalLabel
					block
				/>
			</Drawer>
		</React.Fragment>
	);
};

() => {
	const [isDrawerOpen, openDrawer, closeDrawer] = useTernaryState(false);
	return (
		<React.Fragment>
			<Button onClick={openDrawer}>Open Large Drawer</Button>
			<Drawer
				isOpen={isDrawerOpen}
				onDismiss={closeDrawer}
				title="Large Drawer"
				width="lg"
				actions={
					<ButtonGroup>
						<Button onClick={closeDrawer}>Primary</Button>
						<Button variant="secondary" onClick={closeDrawer}>
							Secondary
						</Button>
						<Button variant="tertiary" onClick={closeDrawer}>
							Tertiary
						</Button>
					</ButtonGroup>
				}
			>
				<Prose>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
						cursus risus nec velit imperdiet, sit amet blandit libero
						ullamcorper. Maecenas vel fermentum sapien. Aenean mollis tincidunt
						imperdiet. Morbi efficitur consectetur quam nec aliquam. Quisque id
						consequat arcu, hendrerit vulputate libero. Morbi et libero
						placerat, ultrices lacus pulvinar, maximus massa. Nam tempor eu nisl
						dignissim malesuada. Quisque blandit turpis vel egestas posuere.
					</p>
					<p>
						Integer nec ex massa. Integer at semper enim. Vestibulum elit
						tortor, ultricies quis lectus elementum, tempor pharetra ex. In ut
						nulla vitae neque vehicula venenatis. Pellentesque faucibus eget
						tortor ac venenatis. Proin et vulputate nunc. Etiam vitae dui
						pellentesque, sollicitudin dolor congue, imperdiet mauris. Aliquam a
						massa magna. Suspendisse condimentum sapien id nisi luctus accumsan.
						Cras maximus sapien et lorem malesuada, et euismod mauris tincidunt.
						Nulla facilisi. Donec ultricies eros eget lobortis aliquam. Sed
						cursus ipsum et mauris sodales semper eget vel diam. Nulla tincidunt
						rutrum ipsum in molestie. In hac habitasse platea dictumst.
					</p>
				</Prose>
			</Drawer>
		</React.Fragment>
	);
};