All files / Panel Panel.stories.tsx

100% Statements 19/19
100% Branches 0/0
100% Functions 8/8
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321                                          1x 1x                                                   1x 1x                                                       1x 1x                                                         1x 1x                                                         1x 1x                                                                                                 1x 1x   1x                                                                                   1x 1x   1x                                                                                   1x 1x   1x                                                                                
import React from 'react';
import { Meta, Story } from '@storybook/react';
 
import Button from '../Button/Button';
import Table from '../Table/Table';
import Panel, { IPanelProps } from './Panel';
import SettingsIcon from '../Icon/SettingsIcon/SettingsIcon';
 
export default {
	title: 'Layout/Panel',
	component: Panel,
	parameters: {
		docs: {
			description: {
				component: Panel.peek.description,
			},
		},
	},
} as Meta;
 
/* With Content */
export const WithContent: Story<IPanelProps> = (args) => {
	return (
		<Panel {...args}>
			Coloring book 8-bit gluten-free jean shorts, occupy blog intelligentsia
			pour-over biodiesel small batch waistcoat 90's pork belly. Intelligentsia
			fashion axe sartorial vinyl literally, post-ironic hoodie selfies keytar
			man braid kickstarter af PBR&B. Direct trade fanny pack pitchfork
			kombucha, salvia semiotics hell of gluten-free tumeric helvetica. Photo
			booth lyft fingerstache VHS lumbersexual shoreditch, subway tile vegan
			tumblr man bun PBR&B banjo. Banh mi sriracha hashtag, quinoa hell of
			subway tile sartorial normcore vexillologist godard. Asymmetrical fanny
			pack bicycle rights snackwave iPhone, single-origin coffee ramps truffaut
			hammock brooklyn 90's marfa trust fund. Cray fingerstache direct trade,
			you probably haven't heard of them chicharrones crucifix pok pok. Bicycle
			rights disrupt taxidermy YOLO chicharrones. Poke cronut chillwave, pug
			meditation knausgaard church-key marfa chicharrones bitters paleo neutra
			photo booth sustainable shoreditch. Microdosing polaroid vape drinking
			vinegar franzen. Next level kogi occupy, cornhole aesthetic subway tile
			waistcoat hoodie you probably haven't heard of them butcher flannel paleo
			church-key tumblr. Cornhole raw denim mustache schlitz mumblecore hammock
			twee, whatever kitsch gochujang irony. Migas crucifix cornhole prism
			messenger bag microdosing heirloom. Lyft kombucha pork belly swag.
		</Panel>
	);
};
 
/* With Header */
export const WithHeader: Story<IPanelProps> = (args) => {
	return (
		<Panel {...args}>
			<Panel.Header>
				<span>Header</span>
			</Panel.Header>
			Meditation literally chia, schlitz banh mi mlkshk vape ennui art party.
			Succulents tumeric tumblr echo park hella umami. Pickled four loko
			hashtag, tbh bitters tofu pinterest quinoa retro. Raclette cred fanny pack
			tattooed chartreuse wayfarers brooklyn pabst, mixtape shabby chic
			kombucha. Meggings hashtag sriracha raclette post-ironic. Umami brunch
			stumptown salvia, disrupt lomo activated charcoal retro. Pok pok irony yr,
			semiotics distillery pug sriracha ramps drinking vinegar fanny pack.
			Forage selfies poutine disrupt, fashion axe craft beer 8-bit stumptown
			pabst food truck slow-carb wolf photo booth DIY gastropub. Bushwick austin
			activated charcoal poutine small batch polaroid. Venmo poutine umami
			biodiesel, seitan four dollar toast cold-pressed jean shorts gentrify
			meditation leggings street art selfies. Squid raclette you probably
			haven't heard of them selfies church-key vice. Woke intelligentsia viral,
			green juice seitan listicle kale chips yr la croix organic vaporware
			vexillologist tattooed neutra. Chambray sustainable unicorn neutra
			aesthetic, 8-bit farm-to-table DIY organic authentic woke. YOLO four
			dollar toast pop-up, tacos listicle chicharrones single-origin coffee raw
			denim yuccie.
		</Panel>
	);
};
 
/* With Icon Header */
export const WithIconHeader: Story<IPanelProps> = (args) => {
	return (
		<Panel {...args}>
			<Panel.Header>
				<SettingsIcon size={32} style={{ marginRight: '15px' }} />
				<span>Header</span>
			</Panel.Header>
			Meditation literally chia, schlitz banh mi mlkshk vape ennui art party.
			Succulents tumeric tumblr echo park hella umami. Pickled four loko
			hashtag, tbh bitters tofu pinterest quinoa retro. Raclette cred fanny pack
			tattooed chartreuse wayfarers brooklyn pabst, mixtape shabby chic
			kombucha. Meggings hashtag sriracha raclette post-ironic. Umami brunch
			stumptown salvia, disrupt lomo activated charcoal retro. Pok pok irony yr,
			semiotics distillery pug sriracha ramps drinking vinegar fanny pack.
			Forage selfies poutine disrupt, fashion axe craft beer 8-bit stumptown
			pabst food truck slow-carb wolf photo booth DIY gastropub. Bushwick austin
			activated charcoal poutine small batch polaroid. Venmo poutine umami
			biodiesel, seitan four dollar toast cold-pressed jean shorts gentrify
			meditation leggings street art selfies. Squid raclette you probably
			haven't heard of them selfies church-key vice. Woke intelligentsia viral,
			green juice seitan listicle kale chips yr la croix organic vaporware
			vexillologist tattooed neutra. Chambray sustainable unicorn neutra
			aesthetic, 8-bit farm-to-table DIY organic authentic woke. YOLO four
			dollar toast pop-up, tacos listicle chicharrones single-origin coffee raw
			denim yuccie.
		</Panel>
	);
};
 
/* With Header And Footer */
export const WithHeaderAndFooter: Story<IPanelProps> = (args) => {
	return (
		<Panel {...args}>
			<Panel.Header>
				<strong>Header</strong>
			</Panel.Header>
			Thundercats fam glossier, affogato microdosing +1 photo booth yuccie
			flannel iceland. Umami wayfarers tousled, deep v glossier fanny pack
			single-origin coffee la croix tofu crucifix mlkshk edison bulb. Tofu four
			loko tbh, trust fund semiotics schlitz succulents snackwave. Tilde
			live-edge XOXO, stumptown skateboard flexitarian distillery trust fund
			semiotics selvage. Kale chips artisan twee humblebrag selfies. Scenester
			woke truffaut plaid meditation freegan. Prism everyday carry post-ironic
			+1 wolf, copper mug kale chips tilde ethical jianbing jean shorts
			flexitarian. Fanny pack quinoa heirloom put a bird on it, venmo banjo
			church-key +1 sartorial cardigan paleo edison bulb DIY. Scenester four
			loko synth unicorn cardigan shoreditch. Ugh seitan chambray swag vice.
			Pork belly hammock cardigan, live-edge snackwave intelligentsia biodiesel.
			Vegan meggings drinking vinegar crucifix iPhone hoodie. Kickstarter before
			they sold out distillery, next level umami echo park chillwave iceland
			fanny pack XOXO actually. Street art try-hard master cleanse listicle,
			microdosing sartorial raw denim squid.
			<Panel.Footer>
				<Button {...Button.defaultProps}>Save</Button>
			</Panel.Footer>
		</Panel>
	);
};
 
/* Scrollable Content */
export const ScrollableContent: Story<IPanelProps> = (args) => {
	return (
		<Panel {...args} style={{ height: 240 }}>
			<Panel.Header>
				<strong>Header</strong>
			</Panel.Header>
			Tacos everyday carry vexillologist, health goth poutine portland raw denim
			synth sriracha listicle iceland jianbing. Chambray tumeric tousled
			typewriter, bespoke franzen lomo. Yuccie live-edge ugh asymmetrical
			aesthetic cornhole. Salvia post-ironic schlitz, tbh kickstarter yuccie
			ramps shoreditch godard wolf live-edge next level vinyl. Live-edge chia
			hashtag, kale chips shoreditch salvia blog butcher brooklyn cornhole.
			Succulents literally venmo flannel pug direct trade. Cornhole squid
			selvage, thundercats photo booth paleo iceland chartreuse vexillologist
			hot chicken. Normcore kale chips unicorn vaporware cardigan mustache
			thundercats squid hexagon. Woke vinyl letterpress, tattooed artisan
			taxidermy craft beer tacos thundercats cardigan fap plaid gastropub pork
			belly. Pabst coloring book gochujang four dollar toast fixie. Photo booth
			skateboard gluten-free, neutra pug tousled jean shorts normcore crucifix
			banh mi 3 wolf moon. Shabby chic flexitarian umami, pabst literally
			pickled selvage everyday carry next level mixtape drinking vinegar four
			dollar toast coloring book. Cardigan vice schlitz, subway tile jean shorts
			deep v vexillologist lo-fi trust fund plaid brunch taxidermy shabby chic
			blue bottle gochujang. Meggings four loko before they sold out small
			batch. Activated charcoal meh vice irony kinfolk la croix, fam disrupt
			church-key shoreditch thundercats offal fanny pack. Mustache small batch
			portland hashtag blog, lo-fi cray hot chicken ramps. Cornhole green juice
			cardigan shoreditch butcher, literally microdosing freegan wolf la croix
			schlitz raclette occupy. Chicharrones authentic vexillologist marfa
			glossier. Next level heirloom street art small batch lyft narwhal. Etsy
			cornhole direct trade, narwhal celiac humblebrag chambray selvage.
			Gentrify master cleanse mixtape taxidermy shoreditch tofu, blue bottle
			banh mi meh tbh kale chips woke meggings fanny pack. Keffiyeh celiac
			cardigan, polaroid slow-carb bitters intelligentsia unicorn squid ugh.
			Farm-to-table venmo four dollar toast godard you probably haven't heard of
			them, truffaut fashion axe gastropub before they sold out retro organic
			thundercats pitchfork subway tile next level. Sriracha normcore roof party
			mustache flexitarian jianbing. Food truck blog meggings yuccie franzen
			forage. Mixtape woke blue bottle green juice yuccie. Meggings
			intelligentsia food truck, subway tile post-ironic activated charcoal chia
			authentic schlitz venmo. Quinoa offal vexillologist, skateboard YOLO marfa
			banh mi yr typewriter green juice.
			<Panel.Footer>
				<strong>Footer</strong>
			</Panel.Footer>
		</Panel>
	);
};
 
/* No Margins */
export const NoMargins: Story<IPanelProps> = (args) => {
	const { Thead, Tbody, Th, Tr, Td } = Table;
 
	return (
		<Panel {...args} hasMargin={false}>
			<Panel.Header>
				<strong>Header</strong>
			</Panel.Header>
 
			<Table style={{ width: '100%' }}>
				<Thead>
					<Tr>
						<Th>Cell</Th>
						<Th>Cell</Th>
						<Th>Cell</Th>
					</Tr>
				</Thead>
				<Tbody>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
				</Tbody>
			</Table>
		</Panel>
	);
};
 
/* No Content Padding */
export const NoContentPadding: Story<IPanelProps> = (args) => {
	const { Thead, Tbody, Th, Tr, Td } = Table;
 
	return (
		<Panel {...args} isGutterless={true}>
			<Panel.Header>
				<strong>Header</strong>
			</Panel.Header>
 
			<Table style={{ width: '100%' }}>
				<Thead>
					<Tr>
						<Th>Cell</Th>
						<Th>Cell</Th>
						<Th>Cell</Th>
					</Tr>
				</Thead>
				<Tbody>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
				</Tbody>
			</Table>
		</Panel>
	);
};
 
/* No Margins Or Content Padding */
export const NoMarginsOrContentPadding: Story<IPanelProps> = (args) => {
	const { Thead, Tbody, Th, Tr, Td } = Table;
 
	return (
		<Panel {...args} hasMargin={false} isGutterless={true}>
			<Panel.Header>
				<strong>Header</strong>
			</Panel.Header>
 
			<Table style={{ width: '100%' }}>
				<Thead>
					<Tr>
						<Th>Cell</Th>
						<Th>Cell</Th>
						<Th>Cell</Th>
					</Tr>
				</Thead>
				<Tbody>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
					<Tr>
						<Td>Cell</Td>
						<Td>Cell</Td>
						<Td>Cell</Td>
					</Tr>
				</Tbody>
			</Table>
		</Panel>
	);
};