@instructure/ui-billboard 11.6.0 → 11.6.1-snapshot-129

package/es/Billboard/v2/index.js

@@ -0,0 +1,188 @@
+var _dec, _class, _Billboard;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { Heading } from '@instructure/ui-heading/latest';
+import { View } from '@instructure/ui-view/latest';
+import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
+import { renderIconWithProps } from '@instructure/ui-icons';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+// Map Billboard sizes to icon sizes
+const billboardSizeToIconSize = {
+  small: 'illu-sm',
+  medium: 'illu-md',
+  large: 'illu-lg'
+};
+
+/**
+---
+category: components
+---
+**/
+let Billboard = (_dec = withStyle(generateStyle), _dec(_class = (_Billboard = class Billboard extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isHovered: false,
+      isActive: false
+    };
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleMouseEnter = () => {
+      this.setState({
+        isHovered: true
+      });
+    };
+    this.handleMouseLeave = () => {
+      this.setState({
+        isHovered: false,
+        isActive: false
+      });
+    };
+    this.handleMouseDown = () => {
+      this.setState({
+        isActive: true
+      });
+    };
+    this.handleMouseUp = () => {
+      this.setState({
+        isActive: false
+      });
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
+      if (readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  renderHeading() {
+    const _this$props4 = this.props,
+      headingLevel = _this$props4.headingLevel,
+      headingAs = _this$props4.headingAs,
+      heading = _this$props4.heading,
+      styles = _this$props4.styles;
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.heading,
+      children: _jsx(Heading, {
+        level: headingLevel,
+        as: headingAs,
+        color: "primary",
+        children: heading
+      })
+    });
+  }
+  renderHero() {
+    const _this$props5 = this.props,
+      hero = _this$props5.hero,
+      size = _this$props5.size;
+    const _this$state = this.state,
+      isHovered = _this$state.isHovered,
+      isActive = _this$state.isActive;
+    if (!hero) return null;
+    const iconSize = billboardSizeToIconSize[size];
+    // Priority: active > hover > default
+    const iconColor = isActive ? 'onColor' : isHovered ? 'infoColor' : 'baseColor';
+    return renderIconWithProps(hero, iconSize, iconColor);
+  }
+  renderContent() {
+    const _this$props6 = this.props,
+      heading = _this$props6.heading,
+      message = _this$props6.message,
+      hero = _this$props6.hero,
+      styles = _this$props6.styles;
+    return _jsxs("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.content,
+      children: [hero && _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.hero,
+        children: this.renderHero()
+      }), heading && this.renderHeading(), message && _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.message,
+        children: callRenderProp(message)
+      })]
+    });
+  }
+  render() {
+    const _this$props7 = this.props,
+      href = _this$props7.href,
+      disabled = _this$props7.disabled,
+      readOnly = _this$props7.readOnly,
+      margin = _this$props7.margin,
+      styles = _this$props7.styles;
+    const Element = getElementType(Billboard, this.props);
+    return _jsx(View, {
+      as: "div",
+      margin: margin,
+      children: _jsx(View, {
+        ...omitProps(this.props, [...Billboard.allowedProps, ...View.allowedProps]),
+        type: Element === 'button' ? 'button' : void 0,
+        as: Element,
+        elementRef: this.handleRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.billboard,
+        href: href,
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        disabled: disabled,
+        "aria-disabled": disabled || readOnly ? 'true' : void 0,
+        children: this.renderContent()
+      })
+    });
+  }
+}, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.allowedProps = allowedProps, _Billboard.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  headingAs: 'span',
+  headingLevel: 'h1',
+  as: 'span',
+  elementRef: () => {}
+}, _Billboard)) || _class);
+export default Billboard;
+export { Billboard };

package/es/Billboard/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['hero', 'size', 'as', 'elementRef', 'heading', 'headingAs', 'headingLevel', 'message', 'onClick', 'href', 'disabled', 'readOnly', 'margin'];
+export { allowedProps };

package/es/Billboard/v2/styles.js

@@ -0,0 +1,169 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const size = props.size,
+    href = props.href,
+    onClick = props.onClick,
+    disabled = props.disabled,
+    hero = props.hero,
+    heading = props.heading;
+  const clickable = href || onClick;
+  const sizeVariants = {
+    small: {
+      billboard: {
+        padding: componentTheme.paddingSmall
+      },
+      hero: {
+        fontSize: '3rem'
+      },
+      message: {
+        fontSize: componentTheme.messageFontSizeSmall
+      },
+      heading: {
+        ...(hero && {
+          margin: `${componentTheme.mediumMargin} 0 0`
+        })
+      }
+    },
+    medium: {
+      billboard: {
+        padding: componentTheme.paddingMedium
+      },
+      hero: {
+        fontSize: '5rem'
+      },
+      message: {
+        fontSize: componentTheme.messageFontSizeMedium
+      },
+      heading: {}
+    },
+    large: {
+      billboard: {
+        padding: componentTheme.paddingLarge
+      },
+      hero: {
+        fontSize: '10rem'
+      },
+      message: {
+        fontSize: componentTheme.messageFontSizeLarge
+      },
+      heading: {}
+    }
+  };
+  const clickableVariants = clickable ? {
+    appearance: 'none',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    userSelect: 'none',
+    touchAction: 'manipulation',
+    width: '100%',
+    margin: '0',
+    border: `${componentTheme.buttonBorderWidth} ${componentTheme.buttonBorderStyle} transparent`,
+    borderRadius: componentTheme.buttonBorderRadius,
+    background: componentTheme.backgroundColor,
+    textDecoration: 'none',
+    '&:hover': {
+      borderStyle: componentTheme.buttonHoverBorderStyle
+    },
+    '&:hover, &:focus': {
+      textDecoration: 'none',
+      outline: 'none',
+      borderColor: componentTheme.messageColorClickable
+    },
+    '&:active': {
+      background: componentTheme.clickableActiveBg,
+      borderColor: componentTheme.messageColorClickable,
+      '& [class$=-billboard__hero], & [class$=-billboard__message]': {
+        color: componentTheme.clickableActiveText
+      }
+    }
+  } : {
+    backgroundColor: componentTheme.backgroundColor
+  };
+  return {
+    billboard: {
+      label: 'billboard',
+      boxSizing: 'border-box',
+      position: 'relative',
+      fontFamily: componentTheme.fontFamily,
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      textAlign: 'center',
+      display: 'block',
+      ...sizeVariants[size].billboard,
+      ...clickableVariants,
+      ...(disabled && {
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      })
+    },
+    content: {
+      label: 'billboard__content',
+      display: 'block'
+    },
+    hero: {
+      label: 'billboard__hero',
+      display: 'block',
+      ...sizeVariants[size].hero,
+      '& > img, & > svg': {
+        maxWidth: '100%',
+        display: 'block',
+        margin: '0 auto'
+      },
+      '& > img': {
+        height: 'auto'
+      }
+    },
+    heading: {
+      label: 'billboard__heading',
+      display: 'block',
+      ...(hero && {
+        margin: `${componentTheme.largeMargin} 0 0`
+      }),
+      ...sizeVariants[size].heading
+    },
+    message: {
+      label: 'billboard__message',
+      display: 'block',
+      color: clickable ? componentTheme.messageColorClickable : componentTheme.messageColor,
+      ...((hero || heading) && {
+        margin: `${componentTheme.mediumMargin} 0 0`
+      }),
+      ...sizeVariants[size].message
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Billboard } from "./Billboard/index.js";
+export { Billboard } from "../Billboard/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Billboard } from './Billboard'
-export type { BillboardProps } from './Billboard/props'
+export { Billboard } from "../Billboard/v2/index.js";

package/lib/Billboard/{index.js → v1/index.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Billboard = void 0;
 var _react = require("react");
-var _Heading = require("@instructure/ui-heading/lib/Heading");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-heading/v11_6");
+var _v11_2 = require("@instructure/ui-view/v11_6");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
@@ -45,7 +45,7 @@ var _dec, _class, _Billboard;
 category: components
 ---
 **/
-let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Billboard = class Billboard extends _react.Component {
+let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Billboard = class Billboard extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -84,7 +84,7 @@ let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.defa
       styles = _this$props4.styles;
     return (0, _jsxRuntime.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.heading,
-      children: (0, _jsxRuntime.jsx)(_Heading.Heading, {
+      children: (0, _jsxRuntime.jsx)(_v11_.Heading, {
         level: headingLevel,
         as: headingAs,
         color: "primary",
@@ -136,11 +136,11 @@ let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.defa
       margin = _this$props6.margin,
       styles = _this$props6.styles;
     const Element = (0, _getElementType.getElementType)(Billboard, this.props);
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_v11_2.View, {
       as: "div",
       margin: margin,
-      children: (0, _jsxRuntime.jsx)(_View.View, {
-        ...(0, _omitProps.omitProps)(this.props, [...Billboard.allowedProps, ..._View.View.allowedProps]),
+      children: (0, _jsxRuntime.jsx)(_v11_2.View, {
+        ...(0, _omitProps.omitProps)(this.props, [...Billboard.allowedProps, ..._v11_2.View.allowedProps]),
         type: Element === 'button' ? 'button' : void 0,
         as: Element,
         elementRef: this.handleRef,

package/lib/Billboard/v2/index.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Billboard = void 0;
+var _react = require("react");
+var _latest = require("@instructure/ui-heading/latest");
+var _latest2 = require("@instructure/ui-view/latest");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Billboard;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// Map Billboard sizes to icon sizes
+const billboardSizeToIconSize = {
+  small: 'illu-sm',
+  medium: 'illu-md',
+  large: 'illu-lg'
+};
+
+/**
+---
+category: components
+---
+**/
+let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Billboard = class Billboard extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isHovered: false,
+      isActive: false
+    };
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleMouseEnter = () => {
+      this.setState({
+        isHovered: true
+      });
+    };
+    this.handleMouseLeave = () => {
+      this.setState({
+        isHovered: false,
+        isActive: false
+      });
+    };
+    this.handleMouseDown = () => {
+      this.setState({
+        isActive: true
+      });
+    };
+    this.handleMouseUp = () => {
+      this.setState({
+        isActive: false
+      });
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
+      if (readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  renderHeading() {
+    const _this$props4 = this.props,
+      headingLevel = _this$props4.headingLevel,
+      headingAs = _this$props4.headingAs,
+      heading = _this$props4.heading,
+      styles = _this$props4.styles;
+    return (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.heading,
+      children: (0, _jsxRuntime.jsx)(_latest.Heading, {
+        level: headingLevel,
+        as: headingAs,
+        color: "primary",
+        children: heading
+      })
+    });
+  }
+  renderHero() {
+    const _this$props5 = this.props,
+      hero = _this$props5.hero,
+      size = _this$props5.size;
+    const _this$state = this.state,
+      isHovered = _this$state.isHovered,
+      isActive = _this$state.isActive;
+    if (!hero) return null;
+    const iconSize = billboardSizeToIconSize[size];
+    // Priority: active > hover > default
+    const iconColor = isActive ? 'onColor' : isHovered ? 'infoColor' : 'baseColor';
+    return (0, _renderIconWithProps.renderIconWithProps)(hero, iconSize, iconColor);
+  }
+  renderContent() {
+    const _this$props6 = this.props,
+      heading = _this$props6.heading,
+      message = _this$props6.message,
+      hero = _this$props6.hero,
+      styles = _this$props6.styles;
+    return (0, _jsxRuntime.jsxs)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.content,
+      children: [hero && (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.hero,
+        children: this.renderHero()
+      }), heading && this.renderHeading(), message && (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.message,
+        children: (0, _callRenderProp.callRenderProp)(message)
+      })]
+    });
+  }
+  render() {
+    const _this$props7 = this.props,
+      href = _this$props7.href,
+      disabled = _this$props7.disabled,
+      readOnly = _this$props7.readOnly,
+      margin = _this$props7.margin,
+      styles = _this$props7.styles;
+    const Element = (0, _getElementType.getElementType)(Billboard, this.props);
+    return (0, _jsxRuntime.jsx)(_latest2.View, {
+      as: "div",
+      margin: margin,
+      children: (0, _jsxRuntime.jsx)(_latest2.View, {
+        ...(0, _omitProps.omitProps)(this.props, [...Billboard.allowedProps, ..._latest2.View.allowedProps]),
+        type: Element === 'button' ? 'button' : void 0,
+        as: Element,
+        elementRef: this.handleRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.billboard,
+        href: href,
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        disabled: disabled,
+        "aria-disabled": disabled || readOnly ? 'true' : void 0,
+        children: this.renderContent()
+      })
+    });
+  }
+}, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.allowedProps = _props.allowedProps, _Billboard.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  headingAs: 'span',
+  headingLevel: 'h1',
+  as: 'span',
+  elementRef: () => {}
+}, _Billboard)) || _class);
+var _default = exports.default = Billboard;

package/lib/Billboard/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['hero', 'size', 'as', 'elementRef', 'heading', 'headingAs', 'headingLevel', 'message', 'onClick', 'href', 'disabled', 'readOnly', 'margin'];