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>
);
};
|