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

package/lib/Badge/v2/styles.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * 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.
+ */
+
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const pulseAnimation = (0, _emotion.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, props) => {
+  const type = props.type,
+    variant = props.variant,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? '' : _props$placement,
+    standalone = props.standalone,
+    pulse = props.pulse;
+  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'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

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

package/lib/exports/b.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-badge",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A badge component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-position": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-position": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "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",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -38,17 +38,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/Badge/{index.tsx → v1/index.tsx}

@@ -24,13 +24,13 @@
 
 import { Component, Children, ReactElement } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import {
   safeCloneElement,
   withDeterministicId
 } 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'

package/src/Badge/v2/README.md

@@ -0,0 +1,277 @@
+---
+describes: Badge
+---
+
+### Making badges accessible
+
+Badge counts are automatically fed to screenreaders through the `aria-describedby`
+attribute. Often a stand alone number doesn't give a screenreader user enough context (_"3" vs. "You have 3 unread emails"_).
+The examples below use the `formatOutput` prop to make the badge more screenreader-friendly.
+
+```js
+---
+type: example
+---
+  <div>
+    <Badge
+      count={99}
+      pulse
+      margin="0 medium 0 0"
+      formatOutput={function (formattedCount) {
+        return (
+          <AccessibleContent alt={`You have ${formattedCount} new edits to review`}>
+            {formattedCount}
+          </AccessibleContent>
+        )
+      }}
+    >
+      <IconButton
+        renderIcon={<UserRoundInstUIIcon />}
+        screenReaderLabel="Edits"
+        withBorder={false}
+        withBackground={false}
+      />
+    </Badge>
+    <Badge
+      type="notification"
+      formatOutput={function () {
+        return <ScreenReaderContent>You have new edits to review</ScreenReaderContent>
+      }}
+    >
+      <IconButton
+        renderIcon={<UserRoundInstUIIcon />}
+        screenReaderLabel="Edits"
+        withBorder={false}
+        withBackground={false}
+      />
+    </Badge>
+  </div>
+```
+
+> Note the use of the `pulse` prop in the first example to make the Badge slowly pulse twice on mount.
+
+### Limit the count
+
+Use the `countUntil` prop to set a limit for the count. The default for `formatOverflowText` is a "+" symbol.
+
+```js
+---
+type: example
+---
+<div>
+  <Badge count={105} countUntil={100} margin="0 medium 0 0">
+    <Button>Inbox</Button>
+  </Badge>
+  <Badge count={250} countUntil={100}>
+    <Button>Assignments</Button>
+  </Badge>
+</div>
+```
+
+### Standalone, notification and color variants
+
+Setting the `standalone` prop to `true` renders Badge as a standalone
+element that is not positioned relative to a child and displays inline-block.
+Setting `type="notification"` will render small circles that should not contain any visible text.
+
+```js
+---
+type: example
+---
+<div>
+  <Flex padding='small' display='inline-flex' alignItems="center">
+    <Badge standalone count={6} margin='0 small 0 0' />
+    <Badge
+      type="notification"
+      standalone
+      formatOutput={function () {
+        return <ScreenReaderContent>This is a notification</ScreenReaderContent>
+      }}
+    />
+  </Flex>
+  <Flex padding='small' display='inline-flex' alignItems="center">
+    <Badge standalone variant="success" count={12} margin='0 small 0 0' />
+    <Badge
+      variant="success"
+      type="notification"
+      standalone
+      formatOutput={function () {
+        return <ScreenReaderContent>This is a success notification</ScreenReaderContent>
+      }}
+    />
+  </Flex>
+  <Flex padding='small' display='inline-flex' alignItems="center">
+    <Badge standalone variant="danger" count={18} countUntil={10} margin='0 small 0 0' />
+    <Badge
+      variant="danger"
+      type="notification"
+      standalone
+      formatOutput={function () {
+        return <ScreenReaderContent>This is a danger notification</ScreenReaderContent>
+      }}
+    />
+  </Flex>
+  <View display='inline-flex' background='primary-inverse'>
+    <Flex padding='small' display='inline-flex' alignItems="center" background='primary-inverse'>
+      <Badge standalone variant="inverse" count={8} margin='0 small 0 0' />
+      <Badge
+        variant="inverse"
+        type="notification"
+        standalone
+        formatOutput={function () {
+          return <ScreenReaderContent>This is a danger notification</ScreenReaderContent>
+        }}
+      />
+    </Flex>
+  </View>
+</div>
+```
+
+### Placement
+
+Default is `top end`. **Note that standalone badges can't be placed.**
+
+```js
+---
+type: example
+---
+const EditButton = () => (
+  <IconButton
+    renderIcon={<UserRoundInstUIIcon />}
+    screenReaderLabel="Edit page"
+    withBorder={false}
+    withBackground={false}
+  />
+)
+
+const Example = () => (
+  <div>
+    <View as="div" margin="0 0 medium">
+      <Badge count={21} margin="0 large 0 0" placement="top start">
+        <EditButton />
+      </Badge>
+      <Badge count={21} margin="0 large 0 0">
+        <EditButton />
+      </Badge>
+      <Badge count={21} margin="0 large 0 0" placement="bottom start">
+        <EditButton />
+      </Badge>
+      <Badge count={21} margin="0 large 0 0" placement="bottom end">
+        <EditButton />
+      </Badge>
+      <Badge count={21} margin="0 large 0 0" placement="start center">
+        <EditButton />
+      </Badge>
+      <Badge count={21} placement="end center">
+        <EditButton />
+      </Badge>
+    </View>
+    <View as="div">
+      <Badge
+        type="notification"
+        margin="0 large 0 0"
+        placement="top start"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+      <Badge
+        type="notification"
+        margin="0 large 0 0"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+      <Badge
+        type="notification"
+        margin="0 large 0 0"
+        placement="bottom start"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+      <Badge
+        type="notification"
+        margin="0 large 0 0"
+        placement="bottom end"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+      <Badge
+        type="notification"
+        margin="0 large 0 0"
+        placement="start center"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+      <Badge
+        type="notification"
+        placement="end center"
+        formatOutput={function () {
+          return (
+            <ScreenReaderContent>
+              Updates are available for your account
+            </ScreenReaderContent>
+          )
+        }}
+      >
+        <EditButton />
+      </Badge>
+    </View>
+  </div>
+)
+
+render(<Example />)
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="yes" title="Do">
+    <Figure.Item>Use count for up to 2 digits of numbers</Figure.Item>
+    <Figure.Item>Use "+" symbol for more than 2 digits (99+)</Figure.Item>
+    <Figure.Item>Use for numeric count (like unread messages)</Figure.Item>
+    <Figure.Item>Provide accessible text for what the number represents</Figure.Item>
+  </Figure>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Use as a status indicator refer to Pill</Figure.Item>
+    <Figure.Item>Use for text strings</Figure.Item>
+  </Figure>
+</Guidelines>
+```