created:3/5/2021
updated:3/5/2021
loc
48
comments
13%
passed
14
coverage
33%
Source
Syntax highliting source code component. Uses prism for the actual source display.
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
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 | - |
Status | Full name | Title | Time(ms) | |
|---|---|---|---|---|
Source.test.ts(14 tests) | ||||
passed | Source > overview > 1 | snapshot | 149 | |
passed | Source > overview > 1 | accessibility | 200 | |
passed | Source > overview > 2 | snapshot | 56 | |
passed | Source > overview > 2 | accessibility | 132 | |
passed | Source > overview > 3 | snapshot | 123 | |
passed | Source > overview > 3 | accessibility | 137 | |
passed | Source > overview > 4 | snapshot | 64 | |
passed | Source > overview > 4 | accessibility | 145 | |
passed | Source > overview > 5 | snapshot | 105 | |
total 14 tests
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% | |
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
impact | id | description | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| serious | color-contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds... | ||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};