playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1097linterenhancedelement1728

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

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .default)
+  PBMultipleUsersStacked(users: twoUsers, size: .default)
+  PBMultipleUsersStacked(users: multipleUsers, size: .default)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser)
+  PBMultipleUsersStacked(users: twoUsers)
+  PBMultipleUsersStacked(users: multipleUsers)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+ HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
+  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
+  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
+}
+
+```

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

@@ -6,3 +6,9 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
+
+  swift: 
+  - multiple_users_stacked_default_swift: Default
+  - multiple_users_stacked_small_swift: Small
+  - multiple_users_stacked_xsmall_swift: xSmall
+  - multiple_users_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_nav/_item.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, GlobalProps } from "../utilities/globalProps";
 
 import Icon from "../pb_icon/_icon";
@@ -21,6 +21,7 @@ type NavItemProps = {
   data?: object;
   dark?: boolean;
   fontSize?: "normal" | "small";
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   iconLeft?: string;
   iconRight?: string | string[];
   onIconRightClick?: () => void;
@@ -67,6 +68,7 @@ const NavItem = (props: NavItemProps) => {
     data = {},
     dark = false,
     fontSize = "normal",
+    htmlOptions = {},
     iconLeft,
     iconRight,
     onIconRightClick,
@@ -158,7 +160,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const fontWeightClass = fontWeightMapping[fontWeight];
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
 
   const tagClasses = classnames(
     collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
@@ -216,6 +219,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
               <Tag
                 {...ariaProps}
                 {...dataProps}
+                {...htmlProps}
                 className={classes}
                 id={id}
                 href={link}
@@ -256,6 +260,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         <Tag
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
           href={link}

data/app/pb_kits/playbook/pb_nav/_nav.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, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
@@ -15,6 +15,7 @@ type NavProps = {
   data?: object,
   dark?: boolean,
   highlight?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
@@ -33,6 +34,7 @@ const Nav = (props: NavProps) => {
     data = {},
     dark = false,
     highlight = true,
+    htmlOptions = {},
     id,
     link = '#',
     onClick = () => { },
@@ -44,6 +46,7 @@ const Nav = (props: NavProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const cardCss = classnames(
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
@@ -70,6 +73,7 @@ const childrenWithProps = React.Children.map(children, (child) => {
     <nav
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={cardCss}
       id={id}
     >

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -2,12 +2,13 @@ import React 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'
 
 type OnlineStatusProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: {[key: string]: string | number},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   status?: "online" | "offline" | "away",
 } & GlobalProps
@@ -17,6 +18,7 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     status = 'offline',
   } = props
@@ -25,12 +27,14 @@ const OnlineStatus = (props: OnlineStatusProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     />

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo, useState } 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'
@@ -20,6 +20,7 @@ type PassphraseProps = {
   className?: string,
   data?: object,
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inputProps?: {},
   label?: string,
@@ -37,6 +38,7 @@ const Passphrase = (props: PassphraseProps) => {
     confirmation = false,
     data = {},
     dark = false,
+    htmlOptions = {},
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
@@ -82,7 +84,8 @@ const Passphrase = (props: PassphraseProps) => {
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   const popoverReference = (
     <CircleIconButton
@@ -98,6 +101,7 @@ const Passphrase = (props: PassphraseProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_person/_person.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -16,6 +17,7 @@ type PersonProps = {
   className?: string | string[],
   data?: { [key: string]: string },
   firstName: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   lastName: string,
 }
@@ -25,12 +27,14 @@ const Person = (props: PersonProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     firstName,
     id,
     lastName } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_person_kit'),
     globalProps(props),
@@ -41,6 +45,7 @@ const Person = (props: PersonProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_person_contact/_person_contact.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 Caption from '../pb_caption/_caption'
@@ -19,6 +19,7 @@ type PersonContactProps = {
   className?: string | string[],
   data?: object,
   firstName: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   lastName: string,
   contacts?: ContactItem[],
@@ -31,12 +32,14 @@ const PersonContact = (props: PersonContactProps) => {
     contacts = [],
     data = {},
     firstName,
+    htmlOptions = {},
     id,
     lastName,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_person_contact_kit'),
     globalProps(props),
@@ -59,6 +62,7 @@ const PersonContact = (props: PersonContactProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >