All files / Expander Expander.stories.tsx

92.85% Statements 13/14
50% Branches 1/2
83.33% Functions 5/6
92.85% Lines 13/14

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