31:Tab2,styles = html``32:[] 2f:{"title":"Survey Slate | Common Components","cells":[{"id":0,"value":"# Survey Slate | Common Components","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"md`\n

👋 Welcome! This notebook is about **Survey Slate**—an [assemblage of Observable web-based notebooks](https://observablehq.com/collection/@categorise/survey-slate) allowing organizations to host custom surveys for end users on their own AWS infrastructure. Check out the [Technical Overview](https://observablehq.com/@categorise/surveyslate-docs) to get started! ✨

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"toc({\n headers: \"h2,h3,h4,h5\",\n hideStartingFrom: \"Imports\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"## TextNodeView\n\nA textNodeView syncs its value to a simple textNode DOM element. Because its a view, it can be added to a view-literal expression in quite a simple way.","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"viewof textNodeViewExample = textNodeView(\"hi\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"textNodeViewExample","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"Inputs.button(\"Randomize textNodeViewExample\", {\n reduce: () => {\n viewof textNodeViewExample.value = Math.random();\n viewof textNodeViewExample.dispatchEvent(new Event('input', {bubbles: true}))\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"textNodeView = (value = '') => {\n const node = document.createTextNode(value)\n return Object.defineProperty(node, 'value', {\n get: () => node.textContent,\n set: (val) => node.textContent = val,\n enumerable: true\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Logotype","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"html`${logotype(\"Survey Slate\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"logotype = (name = \"Survey Slate\") => html`

${name}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"## Page Header","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"### One title\n\n${pageHeader(['One title'])}\n\n
\n\n### Multiple titles\n\n${pageHeader(['Level One', 'Level Two', 'Level Three'])}","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"pageHeader = (titles, brandName = \"Survey Slate\") => {\n const header = html`

\n ${logotype(brandName)}\n

\n ${titles.reduce((acc,t, i, arr) => {\n const isLast = i === arr.length - 1;\n const commonClasses = \"lh-solid ma0\";\n const specialClasses = isLast ? \"b\" : \"dn db-ns mid-gray\";\n const seperator = isLast ? \"\" : `/`;\n\n return `${acc}

${t}${seperator}

`;\n }, \"\")}\n

`\n\n return header;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Page Footer\n\n${pageFooter()}","pinned":true,"hidden":false,"mode":"md"},{"id":71,"value":"pageFooter = (brandName = \"Survey Slate\") => {\n const linkClasses = \"link brand underline-hover\";\n const year = new Date().getFullYear();\n\n return html`\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"## Spinner (Loader)","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"spinner()","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"spinner = () => { \n return html`${getIconHtml(\"loader\")}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"## Button Label\n\nUse `buttonLabel()` to generate HTML to populate label element in `Inputs.button`. This label generator supports icons. ","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"html`

\n${Inputs.button(buttonLabel({label: 'Text only label'}))}\n${Inputs.button(buttonLabel({ariaLabel: 'Button with only Icon', iconLeft: 'circle'}))}\n${Inputs.button(buttonLabel({label: 'Left label', iconLeft: 'circle'}))}\n${Inputs.button(buttonLabel({label: 'Right label', iconLeft: 'circle'}))}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"buttonLabel = ({label, iconLeft, iconRight, iconRightClass, iconLeftClass, ariaLabel}) => {\n let labelHtml = \"\";\n if (iconLeft) {\n labelHtml += `${getIconHtml(iconLeft, `icon--sm ${iconLeftClass || \"\"}`)} `;\n }\n\n if(label) {\n labelHtml += `${label}`;\n }\n\n if (iconRight) {\n labelHtml += `${getIconHtml(iconRight, `icon--sm ${iconRightClass || \"\"}`)} `;\n }\n\n if (ariaLabel) {\n labelHtml += `${ariaLabel}`;\n }\n \n return html`${labelHtml}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"getIconHtml = (name, klasses = \"\") => `${getIconSvg(name, 24, {role: 'img'})}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"// Thanks @mootari, https://observablehq.com/@saneef/is-observable-inputs-style-able\nns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"### Styles for the demo","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"tachyonsExt({\n colors: {\n brand: mainColors[900], // or, provide and color hex code\n accent: accentColors[900], // or, provide and color hex code\n // The color of text which are usually displayed on top of the brand or accent colors.\n \"text-on-brand\": \"#ffffff\",\n },\n fonts: {\n \"brand-font\": `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"import {tachyonsExt} from \"@categorise/tachyons-and-some-extras\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import {mainColors, accentColors} from \"@categorise/brand\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import {getIconSvg} from \"@saneef/feather-icons\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"import { substratum } from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"substratum({ invalidation })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}