@box/blueprint-web 12.3.1 → 12.4.0

package/dist/lib-esm/accordion/accordion.js

@@ -1,14 +1,27 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
-import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
+import { PointerChevron, Alert, ClockBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, SurfaceBadgeErrorSurface, SurfaceBadgePagesSurface } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
+import { createElement } from 'react';
 import { Ghost } from '../ghost/ghost.js';
 import { InlineNotice } from '../inline-notice/inline-notice.js';
 import { Status } from '../status/status.js';
 import { isDefined } from '../utils/isDefined.js';
 import styles from './accordion.module.js';
 
+const accordionIconVariantToIconProps = {
+  'alert-error': {
+    icon: Alert,
+    iconColor: GrayWhite,
+    backgroundColor: SurfaceBadgeErrorSurface
+  },
+  'status-pending': {
+    icon: ClockBadge,
+    iconColor: GrayWhite,
+    backgroundColor: SurfaceBadgePagesSurface
+  }
+};
 /**
  * The root component that contains all the parts of a accordion.
  *
@@ -67,12 +80,19 @@ const Item = props => {
   // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
+    iconVariant,
+    iconAriaLabel,
     title,
     disabled,
     error,
     errorIconAriaLabel,
     ...itemRest
   } = props;
+  const {
+    backgroundColor,
+    iconColor,
+    icon
+  } = iconVariant ? accordionIconVariantToIconProps[iconVariant] : {};
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -91,6 +111,18 @@ const Item = props => {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
+            }), icon && jsx("div", {
+              className: styles.accordionIconWrapper,
+              style: {
+                backgroundColor
+              },
+              children: /*#__PURE__*/createElement(icon, {
+                color: iconColor,
+                role: 'img',
+                height: '0.625rem',
+                width: '0.625rem',
+                'aria-label': iconAriaLabel
+              })
             }), jsx(PointerChevron, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon

package/dist/lib-esm/accordion/accordion.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--eb917","slideDown":"bp_accordion_module_slideDown--eb917","slideUp":"bp_accordion_module_slideUp--eb917","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--eb917","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--eb917","accordionItem":"bp_accordion_module_accordionItem--eb917","accordionFixedContent":"bp_accordion_module_accordionFixedContent--eb917","accordionHeader":"bp_accordion_module_accordionHeader--eb917","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--eb917","accordionStatus":"bp_accordion_module_accordionStatus--eb917","accordionTrigger":"bp_accordion_module_accordionTrigger--eb917","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--eb917"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--13004","slideDown":"bp_accordion_module_slideDown--13004","slideUp":"bp_accordion_module_slideUp--13004","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--13004","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--13004","accordionItem":"bp_accordion_module_accordionItem--13004","accordionFixedContent":"bp_accordion_module_accordionFixedContent--13004","accordionHeader":"bp_accordion_module_accordionHeader--13004","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--13004","accordionStatus":"bp_accordion_module_accordionStatus--13004","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--13004","accordionTrigger":"bp_accordion_module_accordionTrigger--13004","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--13004"};
 
 export { styles as default };

package/dist/lib-esm/accordion/types.d.ts

@@ -16,6 +16,23 @@ interface Errorable {
      */
     errorIconAriaLabel?: string;
 }
+interface IconProps {
+    /**
+     * Variant of icon displayed next to the title
+     * */
+    iconVariant: 'alert-error' | 'status-pending';
+    /**
+     * ARIA label of icon displayed next to the title
+     * */
+    iconAriaLabel: string;
+}
+type StatusProps = {
+    status?: number;
+    iconVariant?: never;
+    iconAriaLabel?: never;
+} | ({
+    status?: never;
+} & RequireAllOrNone<IconProps, keyof IconProps>);
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -33,15 +50,11 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Header text displayed
      */
     title: string;
-    /**
-     * Number displayed in a status pill next to the title
-     * */
-    status?: number;
     /**
      * Disabled state of the section.
      */
     disabled?: boolean;
-};
+} & StatusProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/index.css

@@ -612,19 +612,19 @@
 .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
   background-color:var(--surface-status-surface-green-focus);
 }
-.bp_accordion_module_accordionContent--eb917[data-state=open]{
-  animation:bp_accordion_module_slideDown--eb917 .15s ease-out;
+.bp_accordion_module_accordionContent--13004[data-state=open]{
+  animation:bp_accordion_module_slideDown--13004 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--eb917[data-state=closed]{
-  animation:bp_accordion_module_slideUp--eb917 .15s ease-out;
+.bp_accordion_module_accordionContent--13004[data-state=closed]{
+  animation:bp_accordion_module_slideUp--13004 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--eb917{
+.bp_accordion_module_accordionContent--13004{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--eb917{
+@keyframes bp_accordion_module_slideDown--13004{
   from{
     height:0;
   }
@@ -632,7 +632,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--eb917{
+@keyframes bp_accordion_module_slideUp--13004{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -640,7 +640,7 @@
     height:0;
   }
 }
-.bp_accordion_module_accordionContentWrapper--eb917{
+.bp_accordion_module_accordionContentWrapper--13004{
   display:flex;
   flex-direction:column;
   gap:var(--space-4);
@@ -649,20 +649,20 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--eb917{
+.bp_accordion_module_accordionInlineErrorWrapper--13004{
   padding-block-start:var(--space-4);
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionItem--eb917{
+.bp_accordion_module_accordionItem--13004{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   min-width:320px;
 }
-.bp_accordion_module_accordionItem--eb917,.bp_accordion_module_accordionItem--eb917 > [data-state=open]{
+.bp_accordion_module_accordionItem--13004,.bp_accordion_module_accordionItem--13004 > [data-state=open]{
   background-color:var(--surface-accordion-surface);
 }
 
-.bp_accordion_module_accordionFixedContent--eb917{
+.bp_accordion_module_accordionFixedContent--13004{
   background-color:var(--surface-surface);
   display:flex;
   flex-direction:column;
@@ -671,7 +671,7 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionHeader--eb917{
+.bp_accordion_module_accordionHeader--13004{
   color:var(--text-text-on-light);
   display:flex;
   font-family:var(--title-small-font-family);
@@ -688,16 +688,26 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionHeaderTrigger--eb917{
+.bp_accordion_module_accordionHeaderTrigger--13004{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionStatus--eb917{
+.bp_accordion_module_accordionStatus--13004{
   margin-inline-start:var(--space-2);
 }
 
-.bp_accordion_module_accordionTrigger--eb917{
+.bp_accordion_module_accordionIconWrapper--13004{
+  align-items:center;
+  border-radius:var(--radius-half);
+  display:flex;
+  height:var(--size-4);
+  justify-content:center;
+  margin-inline-start:var(--space-2);
+  width:var(--size-4);
+}
+
+.bp_accordion_module_accordionTrigger--13004{
   align-items:center;
   background-color:var(--surface-surface);
   border:none;
@@ -708,31 +718,31 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--eb917:active{
+.bp_accordion_module_accordionTrigger--13004:active{
   background-color:var(--surface-surface);
 }
-.bp_accordion_module_accordionTrigger--eb917:hover{
+.bp_accordion_module_accordionTrigger--13004:hover{
   background-color:var(--surface-accordion-surface-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--eb917:focus-visible{
+.bp_accordion_module_accordionTrigger--13004:focus-visible{
   background-color:var(--surface-surface-hover);
   box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--eb917:disabled{
+.bp_accordion_module_accordionTrigger--13004:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--eb917:disabled:hover{
+.bp_accordion_module_accordionTrigger--13004:disabled:hover{
   background-color:var(--gray-white);
 }
-.bp_accordion_module_accordionTrigger--eb917 .bp_accordion_module_accordionTriggerIcon--eb917{
+.bp_accordion_module_accordionTrigger--13004 .bp_accordion_module_accordionTriggerIcon--13004{
   color:var(--gray-50);
   flex-shrink:0;
   margin-inline-start:var(--space-3);
 }
-.bp_accordion_module_accordionTrigger--eb917[data-state=open] .bp_accordion_module_accordionTriggerIcon--eb917{
+.bp_accordion_module_accordionTrigger--13004[data-state=open] .bp_accordion_module_accordionTriggerIcon--13004{
   transform:rotate(180deg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.3.1",
+    "version": "12.4.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {