feat(ui-byline): rework Byline

packages/ui-byline/package.json

@@ -66,18 +66,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "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"
+      "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/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "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"
     }
   }
 }

packages/ui-byline/src/Byline/v2/README.md

@@ -0,0 +1,59 @@
+---
+describes: Byline
+---
+
+A byline component with a visual and a caption:
+
+```js
+---
+type: example
+---
+<Byline description={lorem.sentence()}>
+  <Avatar name="Julia Childer" />
+</Byline>
+```
+
+Create a heading by using the `title` prop, and add space around the Byline
+component via the `margin` prop. To constrain the component's width, use
+the `size` prop.
+
+You can also adjust the alignment of the visual object with the descriptive text by
+setting the `alignContent` prop.
+
+```js
+---
+type: example
+---
+<Byline
+  margin="x-large auto"
+  size="small"
+  alignContent="top"
+  title="Graham Taylor"
+  description={lorem.paragraph()}
+>
+  <Avatar name="Graham Taylor" />
+</Byline>
+```
+
+```js
+---
+type: example
+---
+<Byline
+  description={
+    <View display="block" margin="0 0 0 x-small">
+      <Heading level="h2">
+        <Link href="#">Clickable Heading</Link>
+      </Heading>
+      <Text
+        size="x-small"
+        transform="uppercase"
+        letterSpacing="expanded"
+      >
+        Something here
+      </Text>
+    </View>
+  }>
+  <HeartInstUIIcon size="medium" color="successColor" />
+</Byline>
+```

packages/ui-byline/src/Byline/v1/__tests__/Byline.test.tsx → packages/ui-byline/src/Byline/v2/__tests__/Byline.test.tsx

@@ -30,7 +30,7 @@ import '@testing-library/jest-dom'
 import { Byline } from '../index'
 import { BylineProps } from '../props'
 import { runAxeCheck } from '@instructure/ui-axe-check'
-import { View } from '@instructure/ui-view/v11_6'
+import { View } from '@instructure/ui-view/latest'
 
 const TEST_TITLE = 'Test-title'
 const TEST_DESCRIPTION = 'Test-description'

packages/ui-byline/src/Byline/v2/index.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { omitProps } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { BylineProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withStyle(generateStyle)
+class Byline extends Component<BylineProps> {
+  static readonly componentId = 'Byline'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    alignContent: 'center'
+  }
+
+  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?.()
+  }
+
+  render() {
+    const passthroughProps = View.omitViewProps(
+      omitProps(this.props, Byline.allowedProps),
+      Byline
+    )
+
+    return (
+      <View
+        {...passthroughProps}
+        elementRef={this.handleRef}
+        css={this.props.styles?.byline}
+        margin={this.props.margin}
+        maxWidth={this.props.styles?.maxWidth}
+      >
+        <div css={this.props.styles?.figure}>{this.props.children}</div>
+        <div css={this.props.styles?.caption}>
+          {this.props.title && (
+            <span css={this.props.styles?.title}>{this.props.title}</span>
+          )}
+          {this.props.description && (
+            <div css={this.props.styles?.description}>
+              {this.props.description}
+            </div>
+          )}
+        </div>
+      </View>
+    )
+  }
+}
+
+export default Byline
+export { Byline }

packages/ui-byline/src/Byline/v2/props.ts

@@ -0,0 +1,93 @@
+/*
+ * 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 React from 'react'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  BylineTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type BylineOwnProps = {
+  /**
+   * the Byline visual/object
+   */
+  children: React.ReactNode
+  /**
+   * the Byline title
+   */
+  title?: React.ReactNode
+  /**
+   * the Byline description
+   */
+  description?: string | React.ReactNode
+  /**
+   * how should the title and description align
+   */
+  alignContent?: 'top' | 'center'
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  /*
+   * Determines the `max-width` of this element.
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof BylineOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BylineProps = BylineOwnProps &
+  WithStyleProps<BylineTheme, BylineStyle> &
+  OtherHTMLAttributes<BylineOwnProps>
+
+type BylineStyle = ComponentStyle<
+  'byline' | 'figure' | 'caption' | 'title' | 'description' | 'maxWidth'
+> & {
+  maxWidth?: string
+}
+const allowedProps: AllowedPropKeys = [
+  'alignContent',
+  'children',
+  'description',
+  'elementRef',
+  'margin',
+  'size',
+  'title'
+]
+
+export type { BylineProps, BylineStyle }
+export { allowedProps }