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