@instructure/ui-byline 11.7.2-snapshot-21 → 11.7.2-snapshot-22

package/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 }

package/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 }

package/src/Byline/v2/styles.ts

@@ -0,0 +1,116 @@
+/*
+ * 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 type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { BylineProps, BylineStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Byline'],
+  params: BylineProps,
+  _sharedTokens: SharedTokens
+): BylineStyle => {
+  const { alignContent, size } = params
+
+  const widthSizeVariants: Record<string, string> = {
+    small: String(componentTheme.small),
+    medium: String(componentTheme.medium),
+    large: String(componentTheme.large)
+  }
+
+  const widthSizeVariant = widthSizeVariants[size!]
+
+  const alignContentVariants = {
+    top: { alignItems: 'flex-start' },
+    center: { alignItems: 'center' }
+  }
+
+  const bylineStyles = {
+    display: 'flex',
+    background: componentTheme.background,
+    margin: 0,
+    padding: 0,
+    fontFamily: componentTheme.fontFamily,
+    ...alignContentVariants[alignContent!]
+  }
+
+  const captionStyles = {
+    color: componentTheme.color,
+    margin: 0,
+    padding: 0
+  }
+
+  return {
+    byline: {
+      label: 'byline',
+      ...bylineStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figure)': bylineStyles,
+      '&:-webkit-any(figure)': bylineStyles
+    },
+    figure: {
+      label: 'byline__figure',
+      marginInlineStart: 0,
+      marginInlineEnd: componentTheme.figureMargin
+    },
+    caption: {
+      label: 'byline__caption',
+      ...captionStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figcaption)': captionStyles,
+      '&:-webkit-any(figcaption)': captionStyles
+    },
+    title: {
+      label: 'byline__title',
+      textRendering: 'optimizeLegibility',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      display: 'block',
+      margin: componentTheme.titleMargin,
+      fontSize: componentTheme.titleFontSize,
+      fontWeight: componentTheme.titleFontWeight,
+      lineHeight: componentTheme.titleLineHeight
+    },
+    description: {
+      label: 'byline__description',
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      fontWeight: componentTheme.descriptionFontWeight
+    },
+    maxWidth: widthSizeVariant
+  }
+}
+
+export default generateStyle

package/src/exports/b.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+export { Byline } from '../Byline/v2'
+export type { BylineProps } from '../Byline/v2/props'