2c:null 2d:["$","title",null,{"children":"Survey Slate | Common Components | categori.se | Observable"}] 32:Tab2,styles = html``33:[] 30:{"id":"6a35be87fa9e4ba9","slug":"surveyslate-common-components","title":"Survey Slate | Common Components","thumbnail":"dc794735d0c1477c7e8f70df60494c5b9bd8c676ced4b8842621c82a988a317c","access_level":"public","create_time":"$D2021-11-10T09:42:32.890Z","update_time":"$D2025-09-30T16:09:09.383Z","view_time":null,"first_public_time":"$D2023-02-02T01:10:28.629Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024"},"version":293,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"viewer"},{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"d65eaa19216f4bf8","slug":"survey-slate","title":"Survey Slate","owner":{"id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se"}},"type":"notebook","body":{"titling":"auto","title":"Survey Slate | Common Components","cells":[{"id":0,"value":"# Survey Slate | Common Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"toc({\n headers: \"h2,h3,h4,h5\",\n hideStartingFrom: \"Imports\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"viewof textNodeViewExample = textNodeView(\"hi\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"textNodeViewExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Logotype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`${logotype(\"Survey Slate\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"logotype = (name = \"Survey Slate\") => html`

${name}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Page Header","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## Page Footer\n\n${pageFooter()}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Spinner (Loader)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"spinner()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"spinner = () => { \n return html`${getIconHtml(\"loader\")}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"getIconHtml = (name, klasses = \"\") => `${getIconSvg(name, 24, {role: 'img'})}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"### Styles for the demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"import {tachyonsExt} from \"@categorise/tachyons-and-some-extras\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {mainColors, accentColors} from \"@categorise/brand\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import {getIconSvg} from \"@saneef/feather-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"import { substratum } from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"substratum({ invalidation })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"