StorySource

Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.

Tests results

	Status	Full name	Title	Time(ms)
StorySource.test.ts(12 tests)
	passed	StorySource > overview	snapshot	283
	passed	StorySource > overview	accessibility	544
	passed	StorySource > theme	snapshot	107
	passed	StorySource > theme	accessibility	564
	passed	StorySource > themeSelector	snapshot	93
	passed	StorySource > themeSelector	accessibility	483
	passed	StorySource > customTitle	snapshot	62
	passed	StorySource > customTitle	accessibility	413
	passed	StorySource > notCollapsible	snapshot	40

total 12 tests

Tests coverage

	Kind	Total	Covered	Skipped	%
StorySource.tsx
	lines	11	11	0	100%
	functions	1	1	0	100%
	statements	12	12	0	100%
	branches	4	3	0	75%

browse

docs

issues

({ name, age }) => (
  <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

impact

description

serious

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

	summary	target
	Fix any of the following: Element has insufficient color contrast of 2.76 (foreground color: #728fcb, background color: #f0ede7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(1) > .css-8ihg5k.parameter.token
	Fix any of the following: Element has insufficient color contrast of 2.63 (foreground color: #728fcb, background color: #e6e8ef, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(1) > .css-1j85j7a.parameter.token
	Fix any of the following: Element has insufficient color contrast of 3.04 (foreground color: #728fcb, background color: #faf8f5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(2)
	Fix any of the following: Element has insufficient color contrast of 2.76 (foreground color: #728fcb, background color: #f0ede7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(2) > .css-8ihg5k.interpolation.template-string
	Fix any of the following: Element has insufficient color contrast of 3.04 (foreground color: #728fcb, background color: #faf8f5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(2)
	Fix any of the following: Element has insufficient color contrast of 2.63 (foreground color: #728fcb, background color: #e6e8ef, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(2) > .css-1j85j7a.interpolation.template-string
	Fix any of the following: Element has insufficient color contrast of 3.04 (foreground color: #728fcb, background color: #faf8f5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1xkyebe[data-testid="story-source"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > div > .css-eqxzio > pre > .token-line:nth-child(2)

Viewport

browse

docs

issues

({ name, age }) => (
  <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

320px

browse

docs

issues

({ name, age }) => (
  <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

375px

browse

docs

issues

({ name, age }) => (
  <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

768px

browse

docs

issues

({ name, age }) => (
  <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

1024px

Blocks/StoryData

Blocks/Subtitle

API

StorySource

Tests results

Tests coverage

A11y tests

Viewport