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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import Expander, { IExpanderProps } from './Expander';
import Button from '../Button/Button';
import EditIcon from '../Icon/EditIcon/EditIcon';
import CloseIcon from '../Icon/CloseIcon/CloseIcon';
export default {
title: 'Layout/Expander',
component: Expander,
parameters: {
docs: {
description: {
component: Expander.peek.description,
},
},
},
args: Expander.defaultProps,
} as Meta;
/* Basic */
export const Basic: Story<IExpanderProps> = (args) => {
return (
<Expander>
<Expander.Label>Show Stuff</Expander.Label>
<p>
Tacos craft beer humblebrag meditation. Cold-pressed next level man bun
readymade beard, wayfarers fanny pack keytar helvetica knausgaard
biodiesel lumbersexual. Knausgaard echo park whatever four loko
messenger bag hella. Cardigan church-key brooklyn letterpress artisan
venmo, gastropub hella. Single-origin coffee selfies four loko,
biodiesel health goth truffaut migas sustainable kale chips disrupt
locavore meggings mustache actually retro. Mlkshk poutine flexitarian
scenester 3 wolf moon, vice kinfolk chia blog ennui bitters brooklyn
quinoa marfa. Literally before they sold out gochujang pork belly
franzen.
</p>
<p>
Sriracha put a bird on it chia, locavore wolf affogato tote bag neutra
umami food truck austin keytar cronut man bun. Kitsch man braid occupy
art party, tousled waistcoat tilde YOLO keytar street art selvage.
Salvia pour-over keytar intelligentsia. Marfa yr stumptown, before they
sold out lo-fi literally art party williamsburg blue bottle slow-carb
brooklyn. Gochujang post-ironic aesthetic kickstarter, dreamcatcher four
dollar toast whatever tattooed quinoa. Single-origin coffee blog lomo,
freegan next level ramps small batch put a bird on it listicle
stumptown. Stumptown mumblecore vinyl, mustache street art wayfarers
lumbersexual everyday carry irony pitchfork gochujang pug DIY gentrify.
</p>
<p>
Kale chips pug jean shorts cardigan, ramps plaid mlkshk photo booth
migas whatever. Ramps affogato bespoke, crucifix ennui PBR&B
asymmetrical meggings kombucha banh mi meh skateboard artisan man braid.
Ugh semiotics intelligentsia sustainable, craft beer next level meggings
before they sold out heirloom iPhone try-hard. Listicle blog literally
marfa plaid brooklyn humblebrag retro, VHS thundercats man braid
waistcoat ennui. Church-key knausgaard austin organic farm-to-table
neutra franzen bespoke, mlkshk narwhal DIY raw denim retro. Mlkshk
locavore try-hard roof party flexitarian. Letterpress beard fixie, umami
waistcoat salvia ennui four loko seitan lomo franzen pickled shoreditch
master cleanse.
</p>
<p>
Tacos craft beer humblebrag meditation. Cold-pressed next level man bun
readymade beard, wayfarers fanny pack keytar helvetica knausgaard
biodiesel lumbersexual. Knausgaard echo park whatever four loko
messenger bag hella. Cardigan church-key brooklyn letterpress artisan
venmo, gastropub hella. Single-origin coffee selfies four loko,
biodiesel health goth truffaut migas sustainable kale chips disrupt
locavore meggings mustache actually retro. Mlkshk poutine flexitarian
scenester 3 wolf moon, vice kinfolk chia blog ennui bitters brooklyn
quinoa marfa. Literally before they sold out gochujang pork belly
franzen.
</p>
<p>
Sriracha put a bird on it chia, locavore wolf affogato tote bag neutra
umami food truck austin keytar cronut man bun. Kitsch man braid occupy
art party, tousled waistcoat tilde YOLO keytar street art selvage.
Salvia pour-over keytar intelligentsia. Marfa yr stumptown, before they
sold out lo-fi literally art party williamsburg blue bottle slow-carb
brooklyn. Gochujang post-ironic aesthetic kickstarter, dreamcatcher four
dollar toast whatever tattooed quinoa. Single-origin coffee blog lomo,
freegan next level ramps small batch put a bird on it listicle
stumptown. Stumptown mumblecore vinyl, mustache street art wayfarers
lumbersexual everyday carry irony pitchfork gochujang pug DIY gentrify.
</p>
<p>
Kale chips pug jean shorts cardigan, ramps plaid mlkshk photo booth
migas whatever. Ramps affogato bespoke, crucifix ennui PBR&B
asymmetrical meggings kombucha banh mi meh skateboard artisan man braid.
Ugh semiotics intelligentsia sustainable, craft beer next level meggings
before they sold out heirloom iPhone try-hard. Listicle blog literally
marfa plaid brooklyn humblebrag retro, VHS thundercats man braid
waistcoat ennui. Church-key knausgaard austin organic farm-to-table
neutra franzen bespoke, mlkshk narwhal DIY raw denim retro. Mlkshk
locavore try-hard roof party flexitarian. Letterpress beard fixie, umami
waistcoat salvia ennui four loko seitan lomo franzen pickled shoreditch
master cleanse.
</p>
</Expander>
);
};
Basic.args = {
...Expander.defaultProps,
};
export const InteractiveWithChangingLabels: Story<IExpanderProps> = (args) => {
const [isExpanded, setIsExpanded] = useState(false);
const handleExpanded = (isExpanded: any) => {
setIsExpanded(isExpanded);
};
return (
<Expander isExpanded={isExpanded} onToggle={handleExpanded}>
<Expander.Label>{isExpanded ? 'Show Less' : 'Show More'}</Expander.Label>
<p>
Artisan helvetica quinoa kogi fingerstache, biodiesel church-key blue
bottle everyday carry schlitz seitan locavore. Retro +1 tilde, normcore
post-ironic chillwave PBR&B umami. Mlkshk mumblecore meh, kitsch pickled
wolf helvetica man bun cronut keffiyeh meggings ramps. Banh mi stumptown
cronut wayfarers. Banh mi venmo street art chicharrones, put a bird on
it yuccie cornhole poutine knausgaard echo park tilde retro. Occupy XOXO
etsy meh pabst blue bottle. Photo booth four loko biodiesel, cornhole
chicharrones echo park actually pork belly gochujang DIY gluten-free
plaid microdosing salvia pinterest.
</p>
<p>
Cred lumbersexual organic, echo park hashtag roof party pinterest shabby
chic green juice salvia scenester hella ramps. Schlitz knausgaard
church-key disrupt, four loko XOXO bicycle rights post-ironic four
dollar toast fixie butcher mustache tousled humblebrag. Bushwick 8-bit
swag, wolf intelligentsia kickstarter roof party cred meh semiotics
flannel. Typewriter umami narwhal irony, slow-carb VHS street art
cold-pressed wayfarers sriracha everyday carry church-key wolf
humblebrag. Skateboard polaroid man braid organic, chambray mustache
mixtape freegan humblebrag brunch ugh. Wayfarers VHS brooklyn, fashion
axe green juice next level kombucha cray shabby chic lo-fi. Lumbersexual
pug farm-to-table, authentic chartreuse street art church-key.
</p>
<p>
3 wolf moon pickled messenger bag knausgaard venmo, retro aliquip
portland asymmetrical cliche non pabst pinterest culpa. Laboris beard
intelligentsia, pickled viral brooklyn YOLO tempor do cliche fugiat.
Messenger bag fanny pack reprehenderit bicycle rights tilde, tumblr
neutra do intelligentsia godard street art. Gentrify consectetur
laboris, pug venmo literally you probably haven't heard of them actually
locavore distillery commodo occupy franzen umami. Slow-carb bespoke
pariatur four dollar toast, selfies tofu salvia artisan tousled meggings
kinfolk chambray marfa direct trade single-origin coffee. Exercitation
fap umami mollit deep v wolf, sint lomo sunt four dollar toast elit
selvage vegan truffaut. Cillum pickled sartorial flexitarian chartreuse
brooklyn.
</p>
<p>
Artisan helvetica quinoa kogi fingerstache, biodiesel church-key blue
bottle everyday carry schlitz seitan locavore. Retro +1 tilde, normcore
post-ironic chillwave PBR&B umami. Mlkshk mumblecore meh, kitsch pickled
wolf helvetica man bun cronut keffiyeh meggings ramps. Banh mi stumptown
cronut wayfarers. Banh mi venmo street art chicharrones, put a bird on
it yuccie cornhole poutine knausgaard echo park tilde retro. Occupy XOXO
etsy meh pabst blue bottle. Photo booth four loko biodiesel, cornhole
chicharrones echo park actually pork belly gochujang DIY gluten-free
plaid microdosing salvia pinterest.
</p>
<p>
Cred lumbersexual organic, echo park hashtag roof party pinterest shabby
chic green juice salvia scenester hella ramps. Schlitz knausgaard
church-key disrupt, four loko XOXO bicycle rights post-ironic four
dollar toast fixie butcher mustache tousled humblebrag. Bushwick 8-bit
swag, wolf intelligentsia kickstarter roof party cred meh semiotics
flannel. Typewriter umami narwhal irony, slow-carb VHS street art
cold-pressed wayfarers sriracha everyday carry church-key wolf
humblebrag. Skateboard polaroid man braid organic, chambray mustache
mixtape freegan humblebrag brunch ugh. Wayfarers VHS brooklyn, fashion
axe green juice next level kombucha cray shabby chic lo-fi. Lumbersexual
pug farm-to-table, authentic chartreuse street art church-key.
</p>
<p>
3 wolf moon pickled messenger bag knausgaard venmo, retro aliquip
portland asymmetrical cliche non pabst pinterest culpa. Laboris beard
intelligentsia, pickled viral brooklyn YOLO tempor do cliche fugiat.
Messenger bag fanny pack reprehenderit bicycle rights tilde, tumblr
neutra do intelligentsia godard street art. Gentrify consectetur
laboris, pug venmo literally you probably haven't heard of them actually
locavore distillery commodo occupy franzen umami. Slow-carb bespoke
pariatur four dollar toast, selfies tofu salvia artisan tousled meggings
kinfolk chambray marfa direct trade single-origin coffee. Exercitation
fap umami mollit deep v wolf, sint lomo sunt four dollar toast elit
selvage vegan truffaut. Cillum pickled sartorial flexitarian chartreuse
brooklyn.
</p>
</Expander>
);
};
/* Interactive With Changing Labels And Additional Label Content */
export const InteractiveWithChangingLabelsAndAdditionalLabelContent: Story<
IExpanderProps
> = (args) => {
return (
<Expander>
<Expander.Label>Show Stuff</Expander.Label>
<Expander.AdditionalLabelContent>
<Button kind='invisible'>
<EditIcon />
Edit
</Button>
<Button kind='invisible'>
<CloseIcon />
Clear All
</Button>
</Expander.AdditionalLabelContent>
<p>
Tacos craft beer humblebrag meditation. Cold-pressed next level man bun
readymade beard, wayfarers fanny pack keytar helvetica knausgaard
biodiesel lumbersexual. Knausgaard echo park whatever four loko
messenger bag hella. Cardigan church-key brooklyn letterpress artisan
venmo, gastropub hella. Single-origin coffee selfies four loko,
biodiesel health goth truffaut migas sustainable kale chips disrupt
locavore meggings mustache actually retro. Mlkshk poutine flexitarian
scenester 3 wolf moon, vice kinfolk chia blog ennui bitters brooklyn
quinoa marfa. Literally before they sold out gochujang pork belly
franzen.
</p>
<p>
Sriracha put a bird on it chia, locavore wolf affogato tote bag neutra
umami food truck austin keytar cronut man bun. Kitsch man braid occupy
art party, tousled waistcoat tilde YOLO keytar street art selvage.
Salvia pour-over keytar intelligentsia. Marfa yr stumptown, before they
sold out lo-fi literally art party williamsburg blue bottle slow-carb
brooklyn. Gochujang post-ironic aesthetic kickstarter, dreamcatcher four
dollar toast whatever tattooed quinoa. Single-origin coffee blog lomo,
freegan next level ramps small batch put a bird on it listicle
stumptown. Stumptown mumblecore vinyl, mustache street art wayfarers
lumbersexual everyday carry irony pitchfork gochujang pug DIY gentrify.
</p>
<p>
Kale chips pug jean shorts cardigan, ramps plaid mlkshk photo booth
migas whatever. Ramps affogato bespoke, crucifix ennui PBR&B
asymmetrical meggings kombucha banh mi meh skateboard artisan man braid.
Ugh semiotics intelligentsia sustainable, craft beer next level meggings
before they sold out heirloom iPhone try-hard. Listicle blog literally
marfa plaid brooklyn humblebrag retro, VHS thundercats man braid
waistcoat ennui. Church-key knausgaard austin organic farm-to-table
neutra franzen bespoke, mlkshk narwhal DIY raw denim retro. Mlkshk
locavore try-hard roof party flexitarian. Letterpress beard fixie, umami
waistcoat salvia ennui four loko seitan lomo franzen pickled shoreditch
master cleanse.
</p>
<p>
Tacos craft beer humblebrag meditation. Cold-pressed next level man bun
readymade beard, wayfarers fanny pack keytar helvetica knausgaard
biodiesel lumbersexual. Knausgaard echo park whatever four loko
messenger bag hella. Cardigan church-key brooklyn letterpress artisan
venmo, gastropub hella. Single-origin coffee selfies four loko,
biodiesel health goth truffaut migas sustainable kale chips disrupt
locavore meggings mustache actually retro. Mlkshk poutine flexitarian
scenester 3 wolf moon, vice kinfolk chia blog ennui bitters brooklyn
quinoa marfa. Literally before they sold out gochujang pork belly
franzen.
</p>
<p>
Sriracha put a bird on it chia, locavore wolf affogato tote bag neutra
umami food truck austin keytar cronut man bun. Kitsch man braid occupy
art party, tousled waistcoat tilde YOLO keytar street art selvage.
Salvia pour-over keytar intelligentsia. Marfa yr stumptown, before they
sold out lo-fi literally art party williamsburg blue bottle slow-carb
brooklyn. Gochujang post-ironic aesthetic kickstarter, dreamcatcher four
dollar toast whatever tattooed quinoa. Single-origin coffee blog lomo,
freegan next level ramps small batch put a bird on it listicle
stumptown. Stumptown mumblecore vinyl, mustache street art wayfarers
lumbersexual everyday carry irony pitchfork gochujang pug DIY gentrify.
</p>
<p>
Kale chips pug jean shorts cardigan, ramps plaid mlkshk photo booth
migas whatever. Ramps affogato bespoke, crucifix ennui PBR&B
asymmetrical meggings kombucha banh mi meh skateboard artisan man braid.
Ugh semiotics intelligentsia sustainable, craft beer next level meggings
before they sold out heirloom iPhone try-hard. Listicle blog literally
marfa plaid brooklyn humblebrag retro, VHS thundercats man braid
waistcoat ennui. Church-key knausgaard austin organic farm-to-table
neutra franzen bespoke, mlkshk narwhal DIY raw denim retro. Mlkshk
locavore try-hard roof party flexitarian. Letterpress beard fixie, umami
waistcoat salvia ennui four loko seitan lomo franzen pickled shoreditch
master cleanse.
</p>
</Expander>
);
};
/** IsExpanded */
export const IsExpanded: Story<IExpanderProps> = (args) => {
return (
<Expander isExpanded={true}>
<Expander.Label>Show Less</Expander.Label>
<p>
You can't get rid of me. Keep clicking that icon as much as you want,
but I'm here to stay!
</p>
</Expander>
);
};
/* Highlighted */
export const Highlighted: Story<IExpanderProps> = (args) => {
return (
<Expander kind='highlighted'>
<Expander.Label>Show Less</Expander.Label>
<p>
You can't get rid of me. Keep clicking that icon as much as you want,
but I'm here to stay!
</p>
</Expander>
);
};
|