A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
48
comments
13%
passed
14
coverage
33%

Source

avatar of atanasster

Syntax highliting source code component. Uses prism for the actual source display.

Overview

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};

Test data

select
#
dark
children
1
Johnny Oberbrunner
2
Jolie Beahan Sr.
3
Cleo Lindgren
4
Tyler Blanda
5
Krista Zulauf
5 data rows
Name
Description
Default
Controls
children

source code to be displayed.

(string & (boolean | ReactChild | ReactFragment | ReactPortal | null))
language

source lnguage used, by default "jsx".

markupbashclikeccppcssjavascriptjsxcoffeescriptactionscriptcss-extrdiffgitgographqlhandlebarsjsonlessmakefilemarkdownobjectivecocamlpythonreasonsassscsssqlstylustsxtypescriptwasmyaml
-
dark

used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.

boolean
-

Tests results

Status
Full name
Title
Time(ms)
Source.test.ts(14 tests)
passed
Source > overview > 1
snapshot
817
passed
Source > overview > 1
accessibility
314
passed
Source > overview > 2
snapshot
64
passed
Source > overview > 2
accessibility
202
passed
Source > overview > 3
snapshot
77
passed
Source > overview > 3
accessibility
233
passed
Source > overview > 4
snapshot
91
passed
Source > overview > 4
accessibility
236
passed
Source > overview > 5
snapshot
107
total 14 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Source.tsx
lines
17
12
0
70.58%
functions
3
1
0
33.33%
statements
19
13
0
68.42%
branches
7
4
0
57.14%

A11y tests

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};

Viewport

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};
320px
export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};
375px
export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};
768px
export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};
1024px