playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1097linterenhancedelement1728

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
@@ -22,6 +22,7 @@ type CollapsibleProps = {
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -33,6 +34,7 @@ const Collapsible = ({
   children = [],
   collapsed = true,
   data = {},
+  htmlOptions = {},
   icon,
   iconColor = 'default',
   iconSize,
@@ -60,6 +62,7 @@ const Collapsible = ({
   const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
     globalProps(props),
@@ -70,6 +73,7 @@ const Collapsible = ({
       <div
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
       >

data/app/pb_kits/playbook/pb_contact/_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 Body from '../pb_body/_body'
@@ -51,6 +51,7 @@ type ContactProps = {
   contactType?: string,
   contactValue: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -62,9 +63,11 @@ const Contact = (props: ContactProps) => {
     contactType,
     contactValue,
     data = {},
+    htmlOptions = {},
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_contact_kit'),
     globalProps(props),
@@ -74,6 +77,7 @@ const Contact = (props: ContactProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md

@@ -0,0 +1,14 @@
+![contact-default](https://github.com/powerhome/playbook/assets/92755007/4226a1e0-5f31-4445-a536-57e95b83768a)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBContact(type: .cell, value: "3491859988")
+  PBContact(value: "5555555555")
+  PBContact(type: .email, value: "email@example.com")
+  PBContact(type: .work, value: "3245627482")
+  PBContact(type: .workCell, value: "3245627482")
+}
+
+
+```

data/app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **detail** | `Bool` | Displays text describing the Contact's type | `false` | `true` `false` |
+| **contactValue** | `String` | Sets the Contact's text value |  |  |
+| **type** | `ContactType` | Sets the icon | `.home` | `cell` `email` `home` `work` `workCell` `wrongPhone` `ext` `custom` |

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md

@@ -0,0 +1,14 @@
+![contact-detail-indicator](https://github.com/powerhome/playbook/assets/92755007/2a29d4b5-6e7b-43ff-8e7c-0dbeec11627e)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBContact(type: .cell, value: "3491859988", detail: true)
+  PBContact(value: "5555555555", detail: true)
+  PBContact(type: .email, value: "email@example.com", detail: true)
+  PBContact(type: .work, value: "3245627482", detail: true)
+  PBContact(type: .ext, value: "1234", detail: true)
+}
+
+
+```

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

@@ -8,3 +8,9 @@ examples:
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+
+
+  swift:
+  - contact_default_swift: Default
+  - contact_with_detail_swift: Detail Indicator
+  - contact_props_swift: ""

data/app/pb_kits/playbook/pb_currency/_currency.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 Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -18,6 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -42,6 +43,7 @@ const Currency = (props: CurrencyProps) => {
     data = {},
     decimals = 'default',
     emphasized = true,
+    htmlOptions = {},
     id,
     unit,
     className,
@@ -65,6 +67,7 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_currency_kit', align, size),
     globalProps(props),
@@ -96,6 +99,7 @@ const Currency = (props: CurrencyProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_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 Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',
@@ -30,6 +31,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     statChange = {},
     statLabel,
@@ -38,6 +40,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_dashboard_value_kit', align),
     globalProps(props),
@@ -48,6 +51,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date/_date.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 DateTime from '../pb_kit/dateTime';
 
@@ -15,6 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps) => {
     alignment = "left",
     className,
     data = {},
+    htmlOptions = {},
     id,
     showDayOfWeek = false,
     showIcon = false,
@@ -43,8 +45,9 @@ const PbDate = (props: PbDateProps) => {
   const year = DateTime.toYear(value);
   const currentYear = new Date().getFullYear();
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss("pb_date_kit", alignment),
@@ -53,10 +56,12 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+    <div 
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {unstyled
         ? <>

data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md

@@ -0,0 +1,11 @@
+![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
+  PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md

@@ -0,0 +1,16 @@
+![date-default](https://github.com/powerhome/playbook/assets/92755007/0d9f151d-2a18-445c-add3-8194c343bfea)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .short)
+  PBDate(Date(), variant: .dayDate)
+  PBDate(Date(), variant: .standard)
+  Spacer()
+  PBDate(Date(), variant: .short, typography: .title4)
+  PBDate(Date(), variant: .dayDate, typography: .title4)
+  PBDate(Date(), variant: .standard, typography: .title4)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **datestamp** | `Date` | Sets the date |  |  |
+| **variant** | `Variant` | Changes the style | `.short` | `.short` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **typography** | `PBFont` | Sets the font | `.caption` | `.title1` `.title2` `.title3` `.title4` `.body` `.buttonText` `.largeCaption` `.caption` `.subcaption` `.monogram` `.badgeText` `.detail` |
+| **iconSize** | `PBIcon.IconSize` | Chances the icon's size | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **alignment** | `Alignment` | Changes the alignment | `.leading` | `.leading` `.trailing` |

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled_swift.md

@@ -0,0 +1,11 @@
+![date-unstyled](https://github.com/powerhome/playbook/assets/92755007/dc0ab7cf-0d97-407c-9aac-f53645eb6ee2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .short, typography: .body)
+  PBDate(Date(), variant: .standard, typography: .title1)
+  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .subcaption, iconSize: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md

@@ -0,0 +1,14 @@
+![date-varients](https://github.com/powerhome/playbook/assets/92755007/bb240082-afb9-4802-af5f-7aaccec37aae)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .caption, iconSize: .xSmall)
+  PBDate(Date(), variant: .standard, typography: .title4)
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1)
+  PBDate(Date(), variant: .dayDate, typography: .title4)
+  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .title4, iconSize: .x1)
+}
+
+```

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

@@ -12,3 +12,10 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_unstyled: Unstyled
+
+  swift:
+  - date_default_swift: Default
+  - date_variants_swift: Variants
+  - date_alignment_swift: Alignment
+  - date_unstyled_swift: Unstyled
+  - date_props_swift: ""

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
@@ -25,6 +25,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
@@ -67,6 +68,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     format = 'm/d/Y',
     hideIcon = false,
     hideLabel = false,
+    htmlOptions = {},
     id,
     inLine = false,
     inputAria = {},
@@ -95,6 +97,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
@@ -158,6 +161,7 @@ useEffect(() => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildCss, buildDataProps } from "../utilities/props";
+import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -16,6 +16,7 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -40,6 +41,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
     size = "sm",
     align = "left",
     data = {},
+    htmlOptions = {},
     startDate,
     endDate,
     className,
@@ -79,6 +81,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
@@ -94,6 +97,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
         {...dataProps}
+        {...htmlProps}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -15,21 +15,32 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
-  const { className, dark = false, endDate, startDate, data={} } = props
+  const { 
+    className, 
+    dark = false, 
+    endDate, 
+    htmlOptions={},
+    startDate, 
+    data={},
+  } = props
   const css = classnames(
     buildCss('pb_date_range_stacked'),
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div {...dataProps}
+    <div 
+        {...dataProps}
+        {...htmlProps}
         className={css}
     >
       <Flex vertical="center">

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import classnames from "classnames";
-import { buildCss, buildDataProps } from "../utilities/props";
+import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,6 +15,7 @@ type DateStackedProps = {
   dark?: boolean;
   data?: string;
   date: Date;
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -34,6 +35,7 @@ const DateStacked = (props: DateStackedProps) => {
     dark = false,
     date,
     data={},
+    htmlOptions={},
     size = "sm",
   } = props;
   const classes = classnames(
@@ -48,12 +50,15 @@ const DateStacked = (props: DateStackedProps) => {
   const currentYear = new Date().getFullYear()
   const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps}
-            className={classes}
+        <div 
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
         >
           <div className="pb_date_stacked_day_month">
             <Caption text={DateTime.toMonth(date).toUpperCase()} />
@@ -66,8 +71,10 @@ const DateStacked = (props: DateStackedProps) => {
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps}
-              className={classes}
+          <div 
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
           >
             <div className="pb_date_stacked_day_month">
               <Title

data/app/pb_kits/playbook/pb_date_time/_date_time.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 Flex from '../pb_flex/_flex'
@@ -14,6 +14,7 @@ type DateTimeProps = {
   className?: string,
   data?: { [key: string]: string; },
   datetime: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,
@@ -27,6 +28,7 @@ const DateTime = (props: DateTimeProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     showDayOfWeek = false,
     datetime,
     id,
@@ -37,6 +39,7 @@ const DateTime = (props: DateTimeProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_date_time', size),
     globalProps(props),
@@ -47,6 +50,7 @@ const DateTime = (props: DateTimeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 import Flex from '../pb_flex/_flex'
@@ -11,6 +11,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   date: Date,
   datetime: Date,
@@ -25,15 +26,18 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
+    htmlOptions = {},
     timeZone = 'America/New_York',
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <Flex
         inline={false}
         vertical="stretch"
+        {...htmlProps}
         {...props}
     >
       <FlexItem>

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -14,20 +14,31 @@ type DateYearStackedProps = {
   dark?: boolean,
   data?: string,
   date: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
-  const { align = 'left', className, dark = false, date, data={} } = props
+  const { 
+    align = 'left', 
+    className, 
+    dark = false, 
+    date, 
+    data={},
+    htmlOptions = {}, 
+  } = props
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div {...dataProps}
+    <div 
+        {...dataProps}
+        {...htmlProps}
         className={css}
     >
       <Title