playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1090csstokens1675

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -17,6 +17,7 @@ type LabelValueProps = {
   dark?: boolean;
   data?: object;
   date?: Date;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   label: string;
   value?: string;
@@ -42,6 +43,7 @@ const LabelValue = (props: LabelValueProps) => {
     data = {},
     date,
     description,
+    htmlOptions = {},
     icon,
     id,
     label,
@@ -51,7 +53,8 @@ const LabelValue = (props: LabelValueProps) => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -63,6 +66,7 @@ const LabelValue = (props: LabelValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
         title={title}

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import { globalProps } from '../utilities/globalProps'
 
@@ -12,6 +12,7 @@ type LayoutPropTypes = {
   dark?: boolean,
   data?: object,
   full?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   position?: "left" | "right",
   responsive?: boolean,
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
@@ -106,6 +107,7 @@ const Layout = (props: LayoutPropTypes) => {
     dark = false,
     data = {},
     full = false,
+    htmlOptions = {},
     position = 'left',
     responsive = false,
     size = 'md',
@@ -116,6 +118,8 @@ const Layout = (props: LayoutPropTypes) => {
   const responsiveClass = responsive ? '_responsive' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const layoutCss =
     layout == 'collection'
       ? `pb_layout_kit_${layout}`
@@ -159,6 +163,7 @@ const Layout = (props: LayoutPropTypes) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(
         layoutCss,
         layoutCollapseCss,

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -13,6 +13,7 @@ type LegendProps = {
   color?: string,
   dark?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   prefixText?: string,
   text: string,
@@ -25,6 +26,7 @@ const Legend = (props: LegendProps) => {
     color = 'data_1',
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     prefixText,
     text,
@@ -32,6 +34,7 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const customColor = color.charAt(0) === '#' && color
 
@@ -50,6 +53,7 @@ const Legend = (props: LegendProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={bodyCss}
         id={id}
     >

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
@@ -23,6 +24,7 @@ type LightboxHeaderProps = {
   className?: string;
   closeable?: boolean;
   data?: { [key: string]: string | number };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   icon?: string;
   id?: string;
   onClickRight?: () => void;
@@ -38,6 +40,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     onClickRight,
     spacing = "between",
     text,
@@ -48,7 +51,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const api: any = useContext(LightboxContext);
   const headerCSS = buildCss("lightbox_header");
   const headerSpacing = globalProps(props, { paddingY: "sm" });
@@ -112,6 +116,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <Flex
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(headerCSS, headerSpacing, className)}
         spacing={spacing}
       >

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useRef, useState, useEffect } from 'react'
 import { useKbdControls } from './hooks/useKbdControls'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
@@ -15,6 +15,7 @@ type LightboxType = {
   currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   photos: [],
   initialPhoto?: number,
@@ -35,6 +36,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     currentPhotoIndex,
     data = {},
     description,
+    htmlOptions = {},
     id = '',
     initialPhoto = 0,
     photos,
@@ -60,6 +62,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_lightbox_kit'),
     globalProps(props),
@@ -96,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
         <div
             {...ariaProps}
             {...dataProps}
+            {...htmlProps}
             className={classes}
             id={id}
             ref={lightboxRef}

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -22,6 +22,7 @@ type LineGraphProps = {
     data: number[];
   }[];
   gradient?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id: string;
   pointStart: number;
   subTitle?: string;
@@ -47,6 +48,7 @@ const LineGraph = ({
   dark = false,
   gradient = false,
   type = "line",
+  htmlOptions = {},
   id,
   legend = false,
   toggleLegendClick = true,
@@ -66,8 +68,11 @@ const LineGraph = ({
   colors = [],
   ...props
 }: LineGraphProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -138,6 +143,7 @@ const LineGraph = ({
         id: id,
         ...ariaProps,
         ...dataProps,
+        ...htmlProps
       }}
       highcharts={Highcharts}
       options={options}

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type ListProps = {
@@ -10,6 +10,7 @@ type ListProps = {
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
   data?: object;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   layout?: "" | "left" | "right";
   ordered?: boolean;
@@ -29,6 +30,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     layout = "",
     ordered = false,
@@ -53,7 +55,8 @@ const List = (props: ListProps) => {
     }
   );
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_list_kit", layoutClass[layout], size, {
       dark: dark,
@@ -71,6 +74,7 @@ const List = (props: ListProps) => {
         <ol
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}
@@ -82,6 +86,7 @@ const List = (props: ListProps) => {
         <ul
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ListItemProps = {
@@ -8,6 +8,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tabIndex?: number,
 }
@@ -18,12 +19,14 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     tabIndex,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_item_kit'),
     globalProps(props),
@@ -35,6 +38,7 @@ const ListItem = (props: ListItemProps) => {
       <li
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
           tabIndex={tabIndex}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -21,11 +22,13 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss(`pb_loading_inline_kit_${align}`),
     globalProps(props),
@@ -36,6 +39,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import MapControls from './_map_controls';
@@ -10,6 +10,7 @@ type MapProps = {
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   zoomBtns?: boolean,
   flyTo?: boolean, 
@@ -24,6 +25,7 @@ const Map = (props: MapProps) => {
   children,
   className,
   data = {},
+  htmlOptions = {},
   id,
   zoomBtns = false,
   flyTo = false,
@@ -34,12 +36,15 @@ const Map = (props: MapProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const classes = classnames(buildCss('pb_map'), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -21,6 +21,7 @@ type MessageProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   message: string,
@@ -39,6 +40,7 @@ const Message = (props: MessageProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     label,
     message,
@@ -49,6 +51,7 @@ const Message = (props: MessageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const shouldDisplayAvatar = avatarUrl || avatarName
   const baseClassName = shouldDisplayAvatar
     ? 'pb_message_kit_avatar'
@@ -64,6 +67,7 @@ const Message = (props: MessageProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_message/_message_mention.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type MessageMentionProps = {
@@ -8,6 +8,7 @@ type MessageMentionProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   variant: 'user' | 'self',
 }
@@ -18,11 +19,13 @@ const MessageMention = (props: MessageMentionProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     variant = 'user',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_message_mention', variant),
     globalProps(props),
@@ -33,6 +36,7 @@ const MessageMention = (props: MessageMentionProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react"
 import classnames from "classnames"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
 import Radio from "../pb_radio/_radio"
 import Body from "../pb_body/_body"
@@ -24,6 +24,7 @@ type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  htmlOptions?: {[key: string]: string | number | boolean | Function}
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
@@ -40,6 +41,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
@@ -53,6 +55,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
@@ -418,6 +421,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -13,6 +13,7 @@ type MultipleUsersProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
@@ -26,6 +27,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     maxDisplayedUsers = 4,
     reverse = false,
@@ -41,6 +43,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_multiple_users_kit', reverseClass),
     globalProps(props),
@@ -56,6 +59,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-default](https://github.com/powerhome/playbook/assets/92755007/73dffd55-14f7-468e-b6ea-4e700980183d)
+
+```swift
+
+let twoUsers = [andrew, picAndrew]
+
+PBDoc(title: "xSmall") {
+  PBMultipleUsers(users: twoUsers, size: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `AvatarSize` | Changes the size of the avatars  | `.small` | `.xSmall` `.small` |
+| **Reversed** | `Bool` | Changes the order of the avatars | `false` | `true` `false` |
+| **Max Displayed Users** | `Int` | Limits the number of avatars displayed | `4` |  |

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md

@@ -0,0 +1,13 @@
+![multiple-users-reverse](https://github.com/powerhome/playbook/assets/92755007/be3f6f7d-f699-40f2-bbb6-8a99144a8744)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+let twoUsers = [andrew, picAndrew]
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
+  PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-size](https://github.com/powerhome/playbook/assets/92755007/5c15b862-fb32-4e0a-a826-bc25b1db555e)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+PBDoc(title: "Small") {
+  PBMultipleUsers(users: multipleUsers, size: .small)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml

@@ -10,3 +10,9 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+
+  swift:
+  - multiple_users_default_swift: Default
+  - multiple_users_reverse_swift: Reverse
+  - multiple_users_size_swift: Small
+  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
@@ -12,6 +12,7 @@ type MultipleUsersStackedProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   users: Array<{ [key: string]: string }>,
 }
@@ -22,6 +23,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     users,
   } = props
@@ -33,6 +35,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
     { single: onlyOne }), globalProps(props), className)
@@ -85,6 +88,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >