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

package/lib/Billboard/v2/styles.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ */
+
+/**
+ * ---
+ * 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
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Billboard", {
   enumerable: true,
   get: function () {
-    return _Billboard.Billboard;
+    return _v.Billboard;
   }
 });
-var _Billboard = require("./Billboard");
+var _v = require("../Billboard/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Billboard", {
+  enumerable: true,
+  get: function () {
+    return _v.Billboard;
+  }
+});
+var _v = require("../Billboard/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-billboard",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component to display empty states, 404 pages, redirects, etc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,23 +15,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-heading": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-img": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-heading": "11.6.1-snapshot-129",
+    "@instructure/ui-img": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -41,17 +41,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Billboard/{index.tsx → v1/index.tsx}

@@ -24,22 +24,22 @@
 
 import { Component, MouseEvent } from 'react'
 
-import { Heading } from '@instructure/ui-heading'
-import { View } from '@instructure/ui-view'
+import { Heading } from '@instructure/ui-heading/v11_6'
+import { View } from '@instructure/ui-view/v11_6'
 import {
   omitProps,
   callRenderProp,
   getElementType
 } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { BillboardProps, HeroIconSize } from './props'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 
 /**
 ---

package/src/Billboard/{props.ts → v1/props.ts}

@@ -32,7 +32,7 @@ import type {
   BillboardTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 import { MouseEvent } from 'react'
 import { Renderable } from '@instructure/shared-types'
 type HeroIconSize = 'medium' | 'x-large' | 'large'

package/src/Billboard/v2/README.md

@@ -0,0 +1,95 @@
+---
+describes: Billboard
+---
+
+### Static Billboard
+
+Used for empty states, 404 pages, redirects, etc.
+
+```js
+---
+type: example
+---
+<Billboard
+  size="medium"
+  heading="Well, this is awkward."
+  message="Think there should be something here?"
+  hero={<Img src={placeholderImage(900, 500)} />}
+/>
+```
+
+### Structure
+
+- If Billboard has an `href` prop set, it will render as a link;
+  if an `onClick` prop is set, the component will render as a button.
+- Use the `message` prop for your link or button text/call to action (Note:
+  don't pass interactive content to the `message` prop if you have set the `href`
+  or `onClick` props).
+- Use the `size` prop to adjust the size of the icon and text.
+- Pass [Instructure icons](icons-react) to the `hero` property via a function
+  _(see examples)_, and they will be sized correctly based on the Billboard's
+  `size`.
+
+```js
+---
+type: example
+---
+<View as="div" width="400px" withVisualDebug>
+  <Billboard
+    margin="large"
+    heading="404"
+    message="Billboard is now a button"
+    size="small"
+    onClick={function () {
+      alert('This Billboard was clicked!')
+    }}
+    hero={(size) => <UserInstUIIcon size={size} />}
+  />
+</View>
+```
+
+```js
+---
+type: example
+---
+<View as="div" width="600px" withVisualDebug>
+  <Billboard
+    margin="large"
+    message="Click this link"
+    href="http://instructure.com"
+    hero={(size) => <BookCheckInstUIIcon size={size} />}
+  />
+</View>
+```
+
+```js
+---
+type: example
+---
+<Billboard
+  readOnly
+  message="Create a new Module"
+  size="large"
+  onClick={function () {
+    alert('This Billboard was clicked!')
+  }}
+  hero={(size) => <PlusInstUIIcon size={size} />}
+/>
+```
+
+### Disabled Billboard
+
+```js
+---
+type: example
+---
+<Billboard
+  size="small"
+  heading="This is disabled"
+  onClick={function () {
+    alert('This Billboard was clicked!')
+  }}
+  hero={(size) => <UserInstUIIcon size={size} />}
+  disabled
+/>
+```

package/src/Billboard/v2/index.tsx

@@ -0,0 +1,202 @@
+/*
+ * 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, MouseEvent } 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'
+
+import { allowedProps } from './props'
+import type { BillboardProps } from './props'
+import type { ViewProps } from '@instructure/ui-view/latest'
+
+// Map Billboard sizes to icon sizes
+const billboardSizeToIconSize = {
+  small: 'illu-sm',
+  medium: 'illu-md',
+  large: 'illu-lg'
+} as const
+
+/**
+---
+category: components
+---
+**/
+@withStyle(generateStyle)
+class Billboard extends Component<
+  BillboardProps,
+  { isHovered: boolean; isActive: boolean }
+> {
+  static readonly componentId = 'Billboard'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    disabled: false,
+    readOnly: false,
+    size: 'medium',
+    headingAs: 'span',
+    headingLevel: 'h1',
+    as: 'span',
+    elementRef: () => {}
+  } as const
+
+  state = {
+    isHovered: false,
+    isActive: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderHeading() {
+    const { headingLevel, headingAs, heading, styles } = this.props
+
+    return (
+      <span css={styles?.heading}>
+        <Heading level={headingLevel} as={headingAs} color="primary">
+          {heading}
+        </Heading>
+      </span>
+    )
+  }
+
+  handleMouseEnter = () => {
+    this.setState({ isHovered: true })
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ isHovered: false, isActive: false })
+  }
+
+  handleMouseDown = () => {
+    this.setState({ isActive: true })
+  }
+
+  handleMouseUp = () => {
+    this.setState({ isActive: false })
+  }
+
+  renderHero() {
+    const { hero, size } = this.props
+    const { isHovered, isActive } = this.state
+
+    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 { heading, message, hero, styles } = this.props
+
+    return (
+      <span css={styles?.content}>
+        {hero && <span css={styles?.hero}>{this.renderHero()}</span>}
+        {heading && this.renderHeading()}
+        {message && (
+          <span css={styles?.message}>{callRenderProp(message)}</span>
+        )}
+      </span>
+    )
+  }
+
+  handleClick = (e: MouseEvent<ViewProps & Element>): void => {
+    const { readOnly, onClick } = this.props
+
+    if (readOnly) {
+      e.preventDefault()
+      e.stopPropagation()
+    } else if (typeof onClick === 'function') {
+      onClick(e)
+    }
+  }
+
+  render() {
+    const { href, disabled, readOnly, margin, styles } = this.props
+
+    const Element = getElementType(Billboard, this.props)
+
+    return (
+      <View as="div" margin={margin}>
+        <View
+          {...omitProps(this.props, [
+            ...Billboard.allowedProps,
+            ...View.allowedProps
+          ])}
+          type={Element === 'button' ? 'button' : undefined}
+          as={Element}
+          elementRef={this.handleRef}
+          css={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' : undefined}
+        >
+          {this.renderContent()}
+        </View>
+      </View>
+    )
+  }
+}
+
+export default Billboard
+export { Billboard }