-{"description":"\n### Static Billboard\n\nUsed for empty states, 404 pages, redirects, etc.\n\n```js\n---\ntype: example\n---\n<Billboard\n size=\"medium\"\n heading=\"Well, this is awkward.\"\n message=\"Think there should be something here?\"\n hero={<Img src={placeholderImage(900, 500)} />}\n/>\n```\n\n### Structure\n\n- If Billboard has an `href` prop set, it will render as a link;\n if an `onClick` prop is set, the component will render as a button.\n- Use the `message` prop for your link or button text/call to action (Note:\n don't pass interactive content to the `message` prop if you have set the `href`\n or `onClick` props).\n- Use the `size` prop to adjust the size of the icon and text.\n- Pass [Instructure icons](icons-react) to the `hero` property via a function\n _(see examples)_, and they will be sized correctly based on the Billboard's\n `size`.\n\n```js\n---\ntype: example\n---\n<View as=\"div\" width=\"400px\" withVisualDebug>\n <Billboard\n margin=\"large\"\n heading=\"404\"\n message=\"Billboard is now a button\"\n size=\"small\"\n onClick={function () {\n alert('This Billboard was clicked!')\n }}\n hero={(size) => <IconUserLine size={size} />}\n />\n</View>\n```\n\n```js\n---\ntype: example\n---\n<View as=\"div\" width=\"600px\" withVisualDebug>\n <Billboard\n margin=\"large\"\n message=\"Click this link\"\n href=\"http://instructure.com\"\n hero={(size) => <IconGradebookLine size={size} />}\n />\n</View>\n```\n\n```js\n---\ntype: example\n---\n<Billboard\n readOnly\n message=\"Create a new Module\"\n size=\"large\"\n onClick={function () {\n alert('This Billboard was clicked!')\n }}\n hero={(size) => <IconPlusLine size={size} />}\n/>\n```\n\n### Disabled Billboard\n\n```js\n---\ntype: example\n---\n<Billboard\n size=\"small\"\n heading=\"This is disabled\"\n onClick={function () {\n alert('This Billboard was clicked!')\n }}\n hero={(size) => <IconUserLine size={size} />}\n disabled\n/>\n```\n","displayName":"Billboard","methods":[{"name":"handleRef","docblock":null,"modifiers":[],"params":[{"name":"el","optional":false,"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]}}],"returns":null},{"name":"renderHeading","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"SVGIconSize","docblock":null,"modifiers":["get"],"params":[],"returns":{"type":{"name":"union","raw":"'medium' | 'x-large' | 'large'","elements":[{"name":"literal","value":"'medium'"},{"name":"literal","value":"'x-large'"},{"name":"literal","value":"'large'"}]}}},{"name":"renderHero","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"renderContent","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"handleClick","docblock":null,"modifiers":[],"params":[{"name":"e","optional":false,"type":{"name":"MouseEvent","elements":[{"name":"intersection","raw":"ViewProps & Element","elements":[{"name":"ViewProps"},{"name":"Element"}]}],"raw":"MouseEvent<ViewProps & Element>","alias":"MouseEvent"}}],"returns":{"type":{"name":"void"}}}],"props":{"hero":{"required":false,"tsType":{"name":"union","raw":"React.ReactElement | ((iconSize: HeroIconSize) => React.ReactElement)","elements":[{"name":"ReactReactElement","raw":"React.ReactElement"},{"name":"unknown"}]},"description":"Provide an <Img> component or Instructure Icon for the hero image"},"size":{"required":false,"tsType":{"name":"union","raw":"'small' | 'medium' | 'large'","elements":[{"name":"literal","value":"'small'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'large'"}]},"description":"If you're using an icon, this prop will size it. Also sets the font-size\nof the headline and message.","defaultValue":{"value":"'medium'","computed":false}},"as":{"required":false,"tsType":{"name":"AsElementType"},"description":"the element type to render as","defaultValue":{"value":"'span'","computed":false}},"elementRef":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(element: Element | null) => void","signature":{"arguments":[{"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]},"name":"element"}],"return":{"name":"void"}}},"description":"provides a reference to the underlying html root element","defaultValue":{"value":"() => {}","computed":false}},"heading":{"required":false,"tsType":{"name":"string"},"description":"The headline for the Billboard. Is styled as an h1 element by default"},"headingAs":{"required":false,"tsType":{"name":"union","raw":"'h1' | 'h2' | 'h3' | 'span'","elements":[{"name":"literal","value":"'h1'"},{"name":"literal","value":"'h2'"},{"name":"literal","value":"'h3'"},{"name":"literal","value":"'span'"}]},"description":"Choose the appropriately semantic tag for the heading","defaultValue":{"value":"'span'","computed":false}},"headingLevel":{"required":false,"tsType":{"name":"union","raw":"'h1' | 'h2' | 'h3' | 'h4'","elements":[{"name":"literal","value":"'h1'"},{"name":"literal","value":"'h2'"},{"name":"literal","value":"'h3'"},{"name":"literal","value":"'h4'"}]},"description":"Choose the font-size for the heading (see the Heading component)","defaultValue":{"value":"'h1'","computed":false}},"message":{"required":false,"tsType":{"name":"Renderable"},"description":"Instructions or information for the Billboard. Note: you should not pass\ninteractive content to this prop if you are also providing an `href` or\n`onClick`. That would cause the Billboard to render as a button or link\nand would result in nested interactive content."},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(e: MouseEvent<ViewProps>) => void","signature":{"arguments":[{"type":{"name":"MouseEvent","elements":[{"name":"ViewProps"}],"raw":"MouseEvent<ViewProps>"},"name":"e"}],"return":{"name":"void"}}},"description":"If you add an onClick prop, the Billboard renders as a clickable button"},"href":{"required":false,"tsType":{"name":"string"},"description":"If `href` is provided, Billboard will render as a link"},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Whether or not to disable the billboard","defaultValue":{"value":"false","computed":false}},"readOnly":{"required":false,"tsType":{"name":"boolean"},"description":"Works just like disabled but keeps the same styles as if it were active","defaultValue":{"value":"false","computed":false}},"margin":{"required":false,"tsType":{"name":"Spacing"},"description":"Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,\n`small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via\nfamiliar CSS-like shorthand. For example: `margin=\"small auto large\"`."}},"category":"components","relativePath":"packages/ui-billboard/src/Billboard/v1/index.tsx","extension":".tsx","srcPath":"packages/ui-billboard/src/Billboard/v1/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-billboard/src/Billboard/v1/index.tsx","packageName":"@instructure/ui-billboard","requirePath":"@instructure/ui-billboard/lib/Billboard/v1/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/src/Billboard/v1/index.tsx').default","esPath":"@instructure/ui-billboard/es/Billboard/v1/index","themePath":"packages/ui-billboard/src/Billboard/v1/styles.ts","themeUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-billboard/src/Billboard/v1/styles.ts","id":"Billboard","title":"Billboard","componentVersion":"v1","componentDirName":"Billboard"}
0 commit comments