\n
\n );\n}\n\nexport default Playground;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport './Illustration.css';\nimport { Client } from '@atelierdisko/dsk';\n\nfunction Illustration(props) {\n return (\n \n
\n {annotations.length > 0 && \n {annotationMarkers}\n\n {/* This wrapper doesn’t do any styling, we just need the content to be isolated for stuff like :first-child to work */}\n
\n {props.children}
\n {annotations}
}\n \n
\n );\n}\n\nexport default Illustration;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport { slugify } from '../utils';\nimport { withRoute } from 'react-router5';\n\nimport './Heading.css';\n\n// props.children[0] has the textContent.\nfunction Heading(props) {\n const levels = {\n alpha: 1,\n beta: 2,\n gamma: 3,\n delta: 4,\n };\n const Tag = `h${levels[props.level]}`;\n\n if (!props.isJumptarget) {\n return \n
\n {props.children}
\n \n {props.title &&
\n );\n}\n\nexport default Banner;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport './CodeBlock.css';\nimport { copyTextToClipboard } from '../utils';\nimport { Client } from '@atelierdisko/dsk';\n\nimport hljs from 'highlight.js';\nimport './CodeTheme.css';\n\n// There are two possible ways this component is used, in the first case\n// children is a React object, in the second children is a string with\n// (escaped) HTML.\n//\n// We see the first case when the component is used explictly and the second,\n// when it is instantiated by the DocTransformer, turning a {props.title}
}\n {props.children}
\n into a\n// CodeBlock.\nfunction CodeBlock(props) {\n const [code, setCode] = useState(null);\n const [title, setTitle] = useState(null);\n const [copyText, setCopyText] = useState('Copy');\n let isEscaped = !!props.escaped;\n const codeRef = React.createRef();\n\n // Sometimes a CodeBlock start with a empty line, because of the way\n // codeblocks have to be formated in Markdown. We consider this undesirable\n // and remove the first line, if it is empty.\n function trimInitialLine(content) {\n if (content.charAt(0) === '\\n') {\n return content.substring(1);\n }\n return content;\n }\n\n function copyCode() {\n setCopyText('Copied!');\n copyTextToClipboard(codeRef.current.textContent);\n\n setTimeout(() => {\n setCopyText('Copy');\n }, 2000);\n }\n\n useEffect(() => {\n if (props.title) {\n setTitle(props.title);\n } else if (props['data-node-asset']) {\n setTitle(props['data-node-asset']);\n } else if (props.src) {\n setTitle(props.src);\n }\n }, [props.title, props.src, props['data-node-asset']]);\n\n useEffect(() => {\n if (props.src) {\n Client.fetch(props.src, 'text').then(data => setCode({data}));\n } else {\n let content;\n\n if (props.children === undefined) {\n content = '';\n } else if (typeof props.children === 'object') {\n content = ReactDOMServer.renderToStaticMarkup(props.children);\n } else if (typeof props.children === 'string') {\n content = props.children;\n }\n content = trimInitialLine(content);\n\n if (isEscaped) {\n setCode({content});\n }\n }\n }, [props.src, props.children, isEscaped]);\n\n useEffect(() => {\n if (props.language && codeRef.current) {\n const nodes = codeRef.current.querySelectorAll('code');\n\n for (let i = 0; i < nodes.length; i++) {\n hljs.highlightBlock(nodes[i]);\n }\n }\n }, [code, props.language, codeRef]);\n\n return (\n \n {title && (\n \n {title}\n \n )}\n \n \n {copyText}\n \n \n {code}\n \n \n \n );\n}\n\nexport default CodeBlock;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState } from 'react';\nimport './ColorCard.css';\nimport { copyTextToClipboard } from '../utils';\nimport contrast from 'get-contrast';\n\nfunction ColorCard(props) {\n const [showCopiedIndicator, setShowCopiedIndicator] = useState(false);\n\n let classes = ['color-card'];\n\n let colorValue = props.color.toLowerCase();\n\n if (isColor(props.color) && contrast.ratio(colorValue, 'white') < 1.5) {\n classes.push('color-card--is-ultra-light');\n }\n\n if (props.compact) {\n classes.push('color-card--is-compact');\n }\n\n function copyCode() {\n setShowCopiedIndicator(true);\n copyTextToClipboard(props.color);\n\n setTimeout(() => {\n setShowCopiedIndicator(false);\n }, 1000);\n }\n\n return (\n \n );\n}\n\nexport default ColorCard;\n\nconst isColor = strColor => {\n const s = new Option().style;\n s.color = strColor;\n return s.color !== '';\n};\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState } from 'react';\nimport './DpaColorCard.css';\nimport { copyTextToClipboard } from '../utils';\nimport contrast from 'get-contrast';\nimport ColorCard from '../ColorCard';\n\nfunction DpaColorCard(props) {\n return (\n \n {`${props.children}-dark`} }\n \n );\n}\n\nexport default DpaColorCard;\n\nconst isColor = strColor => {\n const s = new Option().style;\n s.color = strColor;\n return s.color !== '';\n};\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport './ColorGroup.css';\nimport { Client } from '@atelierdisko/dsk';\nimport ColorCard from '../ColorCard';\n\nfunction ColorGroup(props) {\n const [colors, setColors] = useState([]);\n\n useEffect(() => {\n if (props.src) {\n Client.fetch(props.src).then(data => setColors(data.colors));\n }\n }, [props.src]);\n\n let classes = ['color-group'];\n\n let content = props.children;\n\n if (props.compact) {\n classes.push('color-group--is-compact');\n\n // We have to make sure the compact property is set on all\n // children as well\n content = React.Children.map(props.children, c => {\n return React.cloneElement(c, { compact: true });\n });\n }\n\n // If the src prop is set, the information about the colors should\n // be loaded via the API\n if (props.src) {\n content = colors.map(c => {\n return (\n \n {c.name}\n \n );\n });\n }\n\n return {content};\n}\n\nexport default ColorGroup;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './DoDont.css';\nimport Playground from '../Playground';\n\nexport function Do(props) {\n return (\n <>\n \n \n \n {props.children}\n \n \n \n\n \n Do\n {props.caption}\n \n \n );\n}\n\nexport function Dont(props) {\n return (\n <>\n \n {props.strikethrough && (\n \n )}\n \n \n {props.children}\n \n \n \n\n \n Don’t\n {props.caption}\n \n \n );\n}\n\nfunction DoDont(props) {\n return (\n \n {props.children}\n \n );\n}\n\nexport default DoDont;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport { useGlobal } from 'reactn';\nimport './FigmaEmbed.css';\n\nfunction FigmaEmbed(props) {\n const [config] = useGlobal('config');\n const [image, setImage] = useState(null);\n const [frameId, setFrameId] = useState(null);\n const [errorMessage, setErrorMessage] = useState(null);\n const [loadingMessage, setLoadingMessage] = useState(null);\n\n // Retrieves document.\n useEffect(() => {\n if (!config.figma.accessToken) {\n setErrorMessage(\n 'Missing personal access token, please visit: https://rundsk.com/tree/The-Frontend/Configuration'\n );\n return;\n }\n if (!props.document) {\n setErrorMessage('No document given.');\n return;\n }\n setLoadingMessage('Loading document …');\n\n fetch(`https://api.figma.com/v1/files/${props.document}`, {\n method: 'GET',\n headers: new Headers({\n 'X-Figma-Token': config.figma.accessToken,\n }),\n })\n .then(response => {\n if (response.status === 200) {\n return response.json();\n } else {\n setErrorMessage('Something went wrong.');\n }\n })\n .then(findId)\n .catch(err => {\n console.log(err);\n setErrorMessage('Something went wrong.');\n });\n }, [props.document, props.frame, config]);\n\n function findId(data) {\n let nameWeAreLookingFor = props.frame;\n let nodeId = undefined;\n\n let filter = node => {\n if (node.name === nameWeAreLookingFor) {\n nodeId = node.id;\n } else {\n if (node.children && node.children.length > 0) {\n node.children.forEach(filter);\n }\n }\n };\n\n filter(data.document);\n\n if (nodeId === undefined) {\n setErrorMessage('No frame with the specified title was found in your document.');\n return;\n }\n\n getImage(nodeId);\n }\n\n function getImage(nodeId) {\n if (nodeId && props.document && config.figma.accessToken) {\n setLoadingMessage(`Loading image for “${props.frame}” …`);\n\n return fetch(`https://api.figma.com/v1/images/${props.document}?ids=${nodeId}`, {\n method: 'GET',\n headers: new Headers({\n 'X-Figma-Token': config.figma.accessToken,\n }),\n })\n .then(response => {\n if (response.status === 200) {\n return response.json();\n } else {\n setErrorMessage('Something went wrong.');\n }\n })\n .then(data => {\n setImage(data.images[nodeId]);\n setFrameId(nodeId);\n })\n .catch(err => {\n console.log(err);\n setErrorMessage('Something went wrong.');\n });\n }\n }\n\n return (\n \n {image && 
}\n {!image && !errorMessage && (\n \n {loadingMessage ? loadingMessage : `Loading “${props.frame}” from Figma…`}\n \n )}\n {errorMessage && {errorMessage}}\n\n \n Edit in Figma\n \n \n );\n}\n\nexport default FigmaEmbed;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport './TypographySpecimen.css';\nimport { Client } from '@atelierdisko/dsk';\n\nfunction TypographySpecimen(props) {\n const [styles, setStyles] = useState([]);\n\n // https://forums.appleinsider.com/discussion/57707/a-better-font-sentence\n // https://www.answers.com/Q/What_are_some_examples_of_pangram_sentences_besides_The_quick_brown_fox_jumps_over_the_lazy_dog\n const sentences = [\n 'Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.',\n 'Ebenezer unexpectedly bagged two tranquil aardvarks with his jiffy vacuum cleaner.',\n 'Six javelins thrown by the quick savages whizzed forty paces beyond the mark.',\n 'The explorer was frozen in his big kayak just after making queer discoveries.',\n 'The July sun caused a fragment of black pine wax to ooze on the velvet quilt.',\n 'The public was amazed to view the quickness and dexterity of the juggler.',\n 'While Suez sailors wax parquet decks, Afghan jews vomit jauntily abaft.',\n 'We quickly seized the black axle and just saved it from going past him.',\n 'Six big juicy steaks sizzled in a pan as five workmen left the quarry.',\n 'While making deep excavations we found some quaint bronze jewelry.',\n 'Jaded zombies acted quaintly but kept driving their oxen forward.',\n 'A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.',\n 'The job requires extra pluck and zeal from every young wage earner.',\n 'A quart jar of oil mixed with zinc oxide makes a very bright paint.',\n 'Whenever the black fox jumped the squirrel gazed suspiciously.',\n 'We promptly judged antique ivory buckles for the next prize.',\n 'How razorback-jumping frogs can level six piqued gymnasts!',\n 'Crazy Fredericka bought many very exquisite opal jewels.',\n 'Sixty zippers were quickly picked from the woven jute bag.',\n 'Cozy lummox gives smart squid who asks for job pen.',\n 'Adjusting quiver and bow, Zompyc killed the fox.',\n 'My faxed joke won a pager in the cable TV quiz show.',\n 'The quick brown fox jumps over the lazy dog.',\n 'Pack my box with five dozen liquor jugs.',\n 'Jackdaws love my big sphinx of quartz.',\n 'The five boxing wizards jump quickly.',\n 'How quickly daft jumping zebras vex.',\n 'Bright vixens jump; dozy fowl quack.',\n 'Quick wafting zephyrs vex bold Jim.',\n 'Quick zephyrs blow, vexing daft Jim.',\n 'Sphinx of black quartz, judge my vow.',\n 'Waltz, nymph, for quick jigs vex Bud.',\n ];\n\n // const sentencesShort = [\n // \"Jelly-like above the high wire, six qu…\",\n // \"Ebenezer unexpectedly bagged two tranq…\",\n // \"Six javelins thrown by the quick savag…\",\n // \"The explorer was frozen in his big kay…\",\n // \"The July sun caused a fragment of blac…\",\n // \"The public was amazed to view the quic…\",\n // \"While Suez sailors wax parquet decks, …\",\n // \"We quickly seized the black axle and j…\",\n // \"Six big juicy steaks sizzled in a pan …\",\n // \"While making deep excavations we found…\",\n // \"Jaded zombies acted quaintly but kept …\",\n // \"A mad boxer shot a quick, gloved jab t…\",\n // \"The job requires extra pluck and zeal …\",\n // \"A quart jar of oil mixed with zinc oxi…\",\n // \"Whenever the black fox jumped the squi…\",\n // \"We promptly judged antique ivory buckl…\",\n // \"How razorback-jumping frogs can level …\",\n // \"Crazy Fredericka bought many very exqu…\",\n // \"Sixty zippers were quickly picked from…\",\n // \"Cozy lummox gives smart squid who asks…\",\n // \"Adjusting quiver and bow, Zompyc kille…\",\n // \"My faxed joke won a pager in the cable TV…\",\n // \"The quick brown fox jumps over the lazy dog.\",\n // \"Pack my box with five dozen liquor jugs.\",\n // \"Jackdaws love my big sphinx of quartz.\",\n // \"The five boxing wizards jump quickly.\",\n // \"How quickly daft jumping zebras vex.\",\n // \"Bright vixens jump; dozy fowl quack.\",\n // \"Quick wafting zephyrs vex bold Jim.\",\n // \"Quick zephyrs blow, vexing daft Jim.\",\n // \"Sphinx of black quartz, judge my vow.\",\n // \"Waltz, nymph, for quick jigs vex Bud.\"\n // ];\n\n useEffect(() => {\n if (props.src) {\n Client.fetch(props.src).then(data => setStyles(data.styles));\n }\n }, [props.src]);\n\n return (\n \n {styles.map(s => {\n if (s.extends) {\n let extending = styles.find(style => style.id === s.extends);\n\n s = {\n ...extending,\n ...s,\n };\n }\n\n let style = {\n fontFamily: s.fontFamily,\n fontSize: s.fontSize + 'px',\n fontWeight: s.fontWeight,\n lineHeight: s.lineHeight + 'px',\n letterSpacing: s.letterSpacing + 'px',\n color: s.color,\n textTransform: s.textTransform,\n };\n\n let demoSentence = props.sentence;\n if (!demoSentence) {\n demoSentence = sentences[Math.floor(Math.random() * sentences.length)];\n }\n\n return (\n \n \n {s.name} {s.id && ({s.id})}\n \n {s.comment}\n \n {demoSentence}\n \n \n {s.fontFamily ? s.fontFamily : ''}\n {s.fontWeight ? ' (' + s.fontWeight + ')' : ''}\n
\n {s.fontSize ? ' ' + s.fontSize + 'px' : ''}\n {s.lineHeight ? ' / ' + s.lineHeight + 'px' : ''}\n {s.letterSpacing ? ' / ' + s.letterSpacing + 'px' : ''}\n
\n {s.color ? s.color : ''}\n {s.extends ? ' Extends ' + s.extends : ''}\n \n \n );\n })}\n \n );\n}\n\nexport default TypographySpecimen;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './Asciinema.css';\n\nfunction Asciinema(props) {\n return (\n \n \n \n );\n}\n\nexport default Asciinema;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './Glitch.css';\n\nfunction Glitch(props) {\n return (\n \n \n \n );\n}\n\nexport default Glitch;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './FAQ.css';\n\nfunction FAQ(props) {\n return (\n \n {props.question && {props.question}}\n {props.children}\n \n );\n}\n\nexport default FAQ;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './Background.css';\n\nfunction Background(props) {\n return (\n \n {props.question && {props.question}}\n {props.children}\n \n );\n}\n\nexport default Background;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './CodeSandbox.css';\n\nfunction CodeSandbox(props) {\n return (\n \n into a\n// Werteinheit.\nfunction Werteinheit(props) {\n const [data, setData] = useState(null);\n const [image, setImage] = useState(null);\n const [highlight, setHighlight] = useState([0, '100%', 0, 0]);\n const [highlightIsVisible, setHighlightIsVisible] = useState(false);\n const [activeItem, setActiveItem] = useState('');\n const [imageSize, setImageSize] = useState([undefined, undefined]);\n\n useEffect(() => {\n if (props.src) {\n Client.fetch(props.src).then(d => {\n setImage(d.image);\n setData(d);\n });\n }\n }, [props.src]);\n\n if (!data) {\n return ;\n }\n\n let structure = data.structure.map(element => {\n let path = element.title;\n let elementClasses = ['werteinheit-tree__node werteinheit-tree__node--element'];\n\n if (element.variants) {\n elementClasses.push('werteinheit-tree__node--placeholder');\n }\n\n if (activeItem.includes(path)) {\n elementClasses.push('werteinheit-tree__node--is-active');\n }\n\n let content = [\n {\n if (element.image) {\n setImage(element.image);\n } else if (element.states && element.states.length > 0 && element.states[0].image) {\n setImage(element.states[0].image);\n }\n\n if (element.highlight) {\n setHighlight(element.highlight);\n setHighlightIsVisible(true);\n } else if (element.states && element.states.length > 0 && element.states[0].highlight) {\n setHighlight(element.states[0].highlight);\n setHighlightIsVisible(true);\n } else {\n setHighlightIsVisible(false);\n }\n\n if (element.states && element.states.length > 0) {\n setActiveItem(path + '/' + element.states[0].title);\n } else {\n setActiveItem(path);\n }\n }}\n >\n {element.title}\n ,\n ];\n\n if (element.states && element.states.length > 0) {\n let states = element.states.map(state => {\n let path = `${element.title}/${state.title}`;\n let stateClasses = ['werteinheit-tree__node werteinheit-tree__node--state'];\n\n if (activeItem.includes(path)) {\n stateClasses.push('werteinheit-tree__node--is-active');\n }\n\n return (\n \n {\n if (state.image) {\n setImage(state.image);\n } else if (element.image) {\n setImage(element.image);\n }\n\n if (state.highlight) {\n setHighlight(state.highlight);\n setHighlightIsVisible(true);\n } else if (element.highlight) {\n setHighlight(element.highlight);\n setHighlightIsVisible(true);\n } else {\n setHighlightIsVisible(false);\n }\n\n setActiveItem(path);\n }}\n >\n {state.title}\n \n \n );\n });\n\n content.push({states}
);\n }\n\n if (element.variants && element.variants.length > 0) {\n let variants = element.variants.map(variant => {\n let path = `${element.title}/${variant.title}`;\n let variantClasses = ['werteinheit-tree__node werteinheit-tree__node--variant'];\n\n if (activeItem.includes(path)) {\n variantClasses.push('werteinheit-tree__node--is-active');\n }\n\n let variantContent = [\n {\n if (variant.image) {\n setImage(variant.image);\n } else if (variant.states && variant.states.length > 0 && variant.states[0].image) {\n setImage(element.states[0].image);\n } else if (element.image) {\n setImage(element.image);\n }\n\n if (variant.highlight) {\n setHighlight(variant.highlight);\n setHighlightIsVisible(true);\n } else if (variant.states && variant.states.length > 0 && variant.states[0].highlight) {\n setHighlight(variant.states[0].highlight);\n setHighlightIsVisible(true);\n } else if (element.highlight) {\n setHighlight(element.highlight);\n setHighlightIsVisible(true);\n } else {\n setHighlightIsVisible(false);\n }\n\n if (variant.states && variant.states.length > 0) {\n setActiveItem(path + '/' + variant.states[0].title);\n } else {\n setActiveItem(path);\n }\n }}\n >\n {variant.title}\n ,\n ];\n\n if (variant.states && variant.states.length > 0) {\n let states = variant.states.map(state => {\n let path = `${element.title}/${variant.title}/${state.title}`;\n\n let stateClasses = ['werteinheit-tree__node werteinheit-tree__node--state'];\n\n if (activeItem.includes(path)) {\n stateClasses.push('werteinheit-tree__node--is-active');\n }\n\n return (\n \n {\n if (state.image) {\n setImage(state.image);\n } else if (variant.image) {\n setImage(variant.image);\n } else if (element.image) {\n setImage(element.image);\n }\n\n if (state.highlight) {\n setHighlight(state.highlight);\n setHighlightIsVisible(true);\n } else if (variant.highlight) {\n setHighlight(variant.highlight);\n setHighlightIsVisible(true);\n } else if (element.highlight) {\n setHighlight(element.highlight);\n setHighlightIsVisible(true);\n } else {\n setHighlightIsVisible(false);\n }\n\n setActiveItem(path);\n }}\n >\n {state.title}\n \n \n );\n });\n\n variantContent.push({states}
);\n }\n\n return {variantContent} ;\n });\n\n content.push({variants}
);\n }\n\n return {content} ;\n });\n\n return (\n \n {data.title}\n \n Struktur\n {structure}
\n \n \n Beispiel\n \n {\n let width = ev.target.naturalWidth;\n let height = ev.target.naturalHeight;\n\n if (image.includes('@2x')) {\n setImageSize([width / 2, height / 2]);\n } else {\n setImageSize([width, height]);\n }\n }}\n />\n \n \n \n );\n}\n\nexport default withRoute(Werteinheit);\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React from 'react';\nimport './Tabs.css';\nimport { slugify } from '../utils';\n\nexport function Tab() {\n return ;\n}\n\nfunction TabBar(props) {\n let tabs = [];\n\n tabs =\n props.tabs &&\n props.tabs.map((t, i) => {\n let classes = ['tab-bar__tab'];\n\n // If no active tab is set, the first on is considered active\n if (props.activeTab === undefined && i === 0) {\n classes.push('tab-bar__tab--is-active');\n }\n\n if (props.activeTab === slugify(t)) {\n classes.push('tab-bar__tab--is-active');\n }\n\n return (\n {\n ev.preventDefault();\n props.onSetActiveTab(t);\n }}\n >\n {t}\n \n );\n });\n\n let rightSideTabs = [];\n\n rightSideTabs =\n props.rightSideTabs &&\n props.rightSideTabs.map((t, i) => {\n let classes = ['tab-bar__tab'];\n\n if (props.activeTab === slugify(t)) {\n classes.push('tab-bar__tab--is-active');\n }\n\n return (\n {\n ev.preventDefault();\n props.onSetActiveTab(t);\n }}\n >\n {t}\n \n );\n });\n\n return (\n \n {tabs}\n {rightSideTabs}\n \n );\n}\n\nexport default TabBar;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState } from 'react';\nimport './Tabs.css';\nimport TabBar from '../dpa-TabBar';\nimport { slugify } from '../utils';\n\nfunction Tabs(props) {\n const [activeTab, setActiveTab] = useState(undefined);\n\n let tabs = React.Children.map(props.children, c => {\n return c.props.title;\n });\n\n let tabToShow;\n React.Children.forEach(props.children, c => {\n if (slugify(c.props.title) === activeTab) {\n tabToShow = c;\n }\n });\n\n if (!activeTab) {\n tabToShow = props.children[0];\n }\n\n return (\n \n \n {\n setActiveTab(slugify(a));\n }}\n activeTab={activeTab}\n tabs={tabs}\n />\n \n {tabToShow}\n \n );\n}\n\nexport default Tabs;\n\nexport function Panel(props) {\n return {props.children};\n}\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useState } from 'react';\nimport jwtDecode from 'jwt-decode';\nimport './JWTDecoder.css';\nimport CodeBlock from '../dpa-CodeBlock';\n\nfunction JWTDecoder() {\n const [data, setData] = useState(undefined);\n const [error, setError] = useState(null);\n\n let payload = null;\n\n if (data) {\n payload = Object.keys(data).map(key => {\n return (\n \n - \n {key}: {data[key]}\n
\n
\n );\n });\n }\n\n let isValid = !error && data !== undefined;\n let isInvalid = error && data !== undefined;\n\n return (\n \n {\n if (event.target.value.length <= 0) {\n setError(null);\n setData(undefined);\n return;\n }\n\n try {\n setData(JSON.stringify(jwtDecode(event.target.value), null, 2));\n setError(null);\n } catch (error) {\n setError(error.message);\n setData(null);\n\n return;\n }\n }}\n placeholder=\"Your JWT\"\n />\n\n {data || error || 'Please paste a JWT.'} \n\n \n {isValid ? '✓ Your token is valid' : ''}\n {isInvalid ? '× Your token is invalid' : ''}\n \n\n {/* {payload}\n {error && {error}
} */}\n \n );\n}\n\nexport default JWTDecoder;\n","/**\n * Copyright 2019 Atelier Disko. All rights reserved. This source\n * code is distributed under the terms of the BSD 3-Clause License.\n */\n\nimport React, { useEffect } from 'react';\nimport { transform } from '@atelierdisko/dsk';\nimport { withRoute } from 'react-router5';\n\nimport './Doc.css';\n\nimport Heading from '../dpa-Heading';\nimport Image from '../Image';\nimport Link from '../Link';\n\nimport Banner from '../dpa-Banner';\nimport CodeBlock from '../dpa-CodeBlock';\nimport DpaColorCard from '../dpa-ColorCard';\nimport ColorGroup from '../ColorGroup';\nimport Playground from '../Playground';\nimport DoDont, { Do, Dont } from '../DoDont';\nimport FigmaEmbed from '../FigmaEmbed';\nimport TypographySpecimen from '../TypographySpecimen';\nimport Asciinema from '../dpa-Asciinema';\nimport Glitch from '../dpa-Glitch';\nimport FAQ from '../dpa-FAQ';\nimport Illustration from '../dpa-Illustration';\nimport Background from '../dpa-Background';\nimport CodeSandbox from '../dpa-CodeSandbox';\nimport Werteinheit from '../dpa-Werteinheit';\nimport Tabs, { Panel } from '../dpa-Tabs';\nimport JWTDecoder from '../dpa-JWTDecoder';\n\nfunction Doc(props) {\n useEffect(() => {\n // window.requestAnimationFrame should ensure that the rendering\n // has finished.\n window.requestAnimationFrame(() => {\n if (props.onRender) {\n props.onRender();\n }\n });\n });\n\n if (!props.htmlContent) {\n return {props.children};\n }\n\n // Allow to use this inside the `transforms` constant. We cannot use\n // `props.title` there as that refers to the component/element that is being\n // transformed. The title is needed as to calculate the `Heading`'s jump\n // anchor.\n let docTitle = props.title;\n let docUrl = props.url;\n\n const transforms = {\n Banner: props => directly within documents, its contents aren't\n // automatically protected from interpration as HTML, when they processed\n // by the DocTransformer. Thus we expect users to wrap their literal code\n // in