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

package/src/Badge/v2/index.tsx

@@ -0,0 +1,170 @@
+/*
+ * 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, Children, ReactElement } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import {
+  safeCloneElement,
+  withDeterministicId
+} from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { BadgeProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyle)
+class Badge extends Component<BadgeProps> {
+  static readonly componentId = 'Badge'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    standalone: false,
+    type: 'count',
+    variant: 'primary',
+    display: 'inline-block',
+    pulse: false,
+    placement: 'top end',
+    elementRef: () => {},
+    formatOverflowText: (_count: number, countUntil: number) =>
+      `${countUntil - 1} +`
+  }
+
+  constructor(props: BadgeProps) {
+    super(props)
+    this._defaultId = this.props.deterministicId!()
+  }
+
+  _defaultId: string
+
+  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?.()
+  }
+
+  countOverflow() {
+    const { count, countUntil } = this.props
+
+    return countUntil && count && countUntil > 1 && count >= countUntil
+  }
+
+  renderOutput() {
+    const { count, countUntil, formatOverflowText, formatOutput, type } =
+      this.props
+
+    // If the badge count is >= than the countUntil limit, format the badge text
+    // via the formatOverflowText function prop
+    let formattedCount = (count || '').toString()
+    if (
+      count &&
+      countUntil &&
+      formatOverflowText &&
+      type === 'count' &&
+      this.countOverflow()
+    ) {
+      formattedCount = formatOverflowText(count, countUntil)
+    }
+
+    if (typeof formatOutput === 'function') {
+      return formatOutput(formattedCount)
+    } else {
+      return type === 'count' ? formattedCount : null
+    }
+  }
+
+  renderBadge() {
+    const { count, margin, standalone, type, styles } = this.props
+
+    return (
+      <View
+        margin={standalone ? margin : 'none'}
+        css={styles?.badge}
+        title={
+          type === 'count' && this.countOverflow() ? count?.toString() : ''
+        }
+        id={!standalone ? this._defaultId : undefined}
+        display={standalone ? 'inline-block' : 'block'}
+        {...(standalone && { elementRef: this.handleRef, 'data-cid': 'Badge' })}
+      >
+        {this.renderOutput()}
+      </View>
+    )
+  }
+
+  renderChildren() {
+    return Children.map(this.props.children, (child) => {
+      return safeCloneElement(child as ReactElement, {
+        'aria-describedby': this._defaultId
+      })
+    })
+  }
+
+  render() {
+    const { margin, standalone, display, as, styles } = this.props
+
+    if (standalone) {
+      return this.renderBadge()
+    } else {
+      return (
+        <View
+          as={as}
+          margin={margin}
+          elementRef={this.handleRef}
+          css={styles?.wrapper}
+          display={display}
+          data-cid="Badge"
+        >
+          {this.renderChildren()}
+          {this.renderBadge()}
+        </View>
+      )
+    }
+  }
+}
+
+export default Badge
+export { Badge }

package/src/Badge/v2/props.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 { AsElementType, BadgeTheme } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { PlacementPropValues } from '@instructure/ui-position'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { PropsWithChildren } from 'react'
+
+type BadgeOwnProps = {
+  count?: number
+  /**
+   * The number at which the count gets truncated by
+   * formatOverflowText. For example, a countUntil of 100
+   * would stop the count at 99.
+   */
+  countUntil?: number
+  /**
+   * Render Badge as a counter (`count`) or as a smaller dot (`notification`) with
+   * no count number displayed.
+   */
+  type?: 'count' | 'notification'
+  /**
+   * Render Badge as an inline html element that is not positioned relative
+   * to a child.
+   */
+  standalone?: boolean
+  /**
+   * Make the Badge slowly pulse twice to get the user's attention.
+   */
+  pulse?: boolean
+  variant?: 'primary' | 'success' | 'danger' | 'inverse'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+  formatOverflowText?: (count: number, countUntil: number) => string
+  formatOutput?: (formattedCount: string) => React.JSX.Element | string | number
+  as?: AsElementType
+  /**
+   * Specifies the display property of the container.
+   *
+   * __Use "block" only when the content inside the Badge also has "block" display.__
+   */
+  display?: 'inline-block' | 'block'
+  /**
+   * 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
+  /**
+   * Supported values are `top start`, `top end`, `end center`, `bottom end`,
+   * `bottom start`, and `start center`
+   */
+  placement?: PlacementPropValues
+} & PropsWithChildren<unknown> // <unknown is needed for React 17 support
+
+type PropKeys = keyof BadgeOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BadgeProps = BadgeOwnProps &
+  WithStyleProps<BadgeTheme, BadgeStyle> &
+  WithDeterministicIdProps
+
+type BadgeStyle = ComponentStyle<'badge' | 'wrapper'>
+const allowedProps: AllowedPropKeys = [
+  'count',
+  'countUntil',
+  'children',
+  'type',
+  'standalone',
+  'pulse',
+  'variant',
+  'placement',
+  'display',
+  'margin',
+  'elementRef',
+  'formatOverflowText',
+  'formatOutput',
+  'as'
+]
+
+export type { BadgeProps, BadgeStyle }
+export { allowedProps }

package/src/Badge/v2/styles.ts

@@ -0,0 +1,226 @@
+/*
+ * 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 { keyframes } from '@instructure/emotion'
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { BadgeProps, BadgeStyle } from './props'
+
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const pulseAnimation = keyframes`
+  to {
+    transform: scale(1);
+    opacity: 0.9;
+  }`
+
+/**
+ * ---
+ * 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: NewComponentTypes['Badge'],
+  props: BadgeProps
+): BadgeStyle => {
+  const { type, variant, placement = '', standalone, pulse } = props
+
+  const top = placement.indexOf('top') > -1
+  const bottom = placement.indexOf('bottom') > -1
+  const start = placement.indexOf('start') > -1
+  const end = placement.indexOf('end') > -1
+  const center = placement.indexOf('center') > -1
+
+  const variants = {
+    danger: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorDanger
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorDanger
+      }
+    },
+    success: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorSuccess
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorSuccess
+      }
+    },
+    primary: {
+      badge: {
+        color: componentTheme.color,
+        backgroundColor: componentTheme.colorPrimary
+      },
+      pulseBorder: {
+        borderColor: componentTheme.colorPrimary
+      }
+    },
+    inverse: {
+      // text and background colors are swapped
+      badge: {
+        color: componentTheme.colorInverse,
+        backgroundColor: componentTheme.color
+      },
+      pulseBorder: {
+        borderColor: componentTheme.color
+      }
+    }
+  }
+
+  const countPositions = {
+    ...(top && { top: `calc(-1 * ${componentTheme.countOffset})` }),
+    ...(bottom && { bottom: `calc(-1 * ${componentTheme.countOffset})` }),
+    ...(start && {
+      insetInlineStart: `calc(-1 * ${componentTheme.countOffset})`,
+      insetInlineEnd: 'auto'
+    }),
+    ...(end && {
+      insetInlineEnd: `calc(-1 * ${componentTheme.countOffset})`,
+      insetInlineStart: 'auto'
+    }),
+    ...(center && {
+      ...((end || start) && {
+        top: `calc(50% - (${componentTheme.size} / 2))`
+      }),
+      ...(start && {
+        insetInlineStart: 'auto',
+        insetInlineEnd: `calc(100% - ${componentTheme.countOffset})`
+      }),
+      ...(end && {
+        insetInlineEnd: 'auto',
+        insetInlineStart: `calc(100% - ${componentTheme.countOffset})`
+      })
+    })
+  }
+
+  const notificationPositions = {
+    ...(top && { top: componentTheme.notificationOffset }),
+    ...(bottom && { bottom: componentTheme.notificationOffset }),
+    ...(start && {
+      insetInlineStart: componentTheme.notificationOffset,
+      insetInlineEnd: 'auto'
+    }),
+    ...(end && {
+      insetInlineEnd: componentTheme.notificationOffset,
+      insetInlineStart: 'auto'
+    }),
+    ...(center && {
+      ...((end || start) && {
+        top: `calc(50% - (${componentTheme.sizeNotification} / 2))`
+      }),
+      ...(start && {
+        insetInlineStart: `calc(-1 * ${componentTheme.sizeNotification} / 2)`,
+        insetInlineEnd: 'auto'
+      }),
+      ...(end && {
+        insetInlineEnd: `calc(-1 * ${componentTheme.sizeNotification} / 2)`,
+        insetInlineStart: 'auto'
+      })
+    })
+  }
+
+  const notStandaloneTypeVariant = {
+    count: countPositions,
+    notification: notificationPositions
+  }
+
+  const typeVariant = {
+    count: {
+      lineHeight: componentTheme.size,
+      minWidth: componentTheme.size,
+      paddingInlineStart: componentTheme.padding,
+      paddingInlineEnd: componentTheme.padding
+    },
+    notification: {
+      width: componentTheme.sizeNotification,
+      height: componentTheme.sizeNotification
+    }
+  }
+
+  return {
+    badge: {
+      label: 'badge',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      boxSizing: 'border-box',
+      pointerEvents: 'none',
+      textAlign: 'center',
+      fontSize: componentTheme.fontSize,
+      whiteSpace: 'nowrap',
+      borderRadius: componentTheme.borderRadius,
+
+      ...variants[variant!].badge,
+
+      ...(pulse && {
+        position: 'relative',
+
+        '&::before': {
+          content: '""',
+          width: 'calc(100% + 0.5rem)',
+          height: 'calc(100% + 0.5rem)',
+          borderRadius: componentTheme.borderRadius,
+          position: 'absolute',
+          top: '-0.25rem',
+          insetInlineEnd: 'auto',
+          insetInlineStart: '-0.25rem',
+          boxSizing: 'border-box',
+          border: `${componentTheme.pulseBorderThickness} solid`,
+          opacity: 0,
+          transform: 'scale(0.75)',
+          animationName: pulseAnimation,
+          animationDuration: '1s',
+          animationIterationCount: '4',
+          animationDirection: 'alternate',
+          ...variants[variant!].pulseBorder
+        }
+      }),
+
+      ...typeVariant[type!],
+
+      ...(!standalone && {
+        position: 'absolute',
+        zIndex: componentTheme.notificationZIndex,
+        ...notStandaloneTypeVariant[type!]
+      })
+    },
+    wrapper: {
+      label: 'badge__wrapper',
+      position: 'relative',
+      boxSizing: 'border-box',
+
+      svg: { display: 'block' }
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -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.
+ */
+
+export { Badge } from '../Badge/v1'
+export type { BadgeProps } from '../Badge/v1/props'

package/src/exports/b.ts

@@ -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.
+ */
+
+export { Badge } from '../Badge/v2'
+export type { BadgeProps } from '../Badge/v2/props'