playbook_ui 13.12.0.pre.alpha.play10281596 → 13.12.0

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -9,7 +9,7 @@ import {
   buildCss,
   buildDataProps,
   noop,
-  buildHtmlProps } from '../utilities/props'
+} from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 import Checkbox from '../pb_checkbox/_checkbox'
@@ -28,9 +28,8 @@ type SelectableCardProps = {
   disabled?: boolean,
   error?: boolean,
   icon?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
-  inputId?: string,
   id?: string,
+  inputId?: string,
   multi?: boolean,
   name?: string,
   onChange: (event: React.FormEvent<HTMLInputElement>) => void,
@@ -49,7 +48,6 @@ const SelectableCard = (props: SelectableCardProps) => {
     data = {},
     disabled = false,
     error = false,
-    htmlOptions = {},
     icon = false,
     inputId = null,
     multi = true,
@@ -61,7 +59,6 @@ const SelectableCard = (props: SelectableCardProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(buildCss('pb_selectable_card_kit',
     {
@@ -112,7 +109,6 @@ const SelectableCard = (props: SelectableCardProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
     >
       <input

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx

@@ -6,7 +6,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps,
 } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -22,7 +21,6 @@ type SelectableCardIconProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   inputId?: string,
   multi?: boolean,
@@ -43,7 +41,6 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     dark = false,
     data = {},
     disabled = false,
-    htmlOptions = {},
     icon,
     inputId,
     multi = true,
@@ -56,7 +53,6 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_selectable_card_icon_kit', {
@@ -72,7 +68,6 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
     >
       <SelectableCard

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -6,7 +6,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps 
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
@@ -18,7 +17,6 @@ type SelectableIconProps = {
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
   data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon: string,
   inputId: string,
   inputs: string,
@@ -35,7 +33,6 @@ const SelectableIcon = ({
   customIcon,
   data = {},
   disabled = false,
-  htmlOptions = {},
   icon,
   inputId,
   inputs = 'enabled',
@@ -47,7 +44,6 @@ const SelectableIcon = ({
 }: SelectableIconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_selectable_icon_kit', {
@@ -66,7 +62,6 @@ const SelectableIcon = ({
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
     >
       {inputs === 'disabled' && (

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import classnames from "classnames";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import Checkbox from "../pb_checkbox/_checkbox";
@@ -15,7 +15,6 @@ export type SelectableListItemProps = {
   className?: string;
   data?: object;
   defaultChecked?: boolean;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   label?: string;
   text?: string;
@@ -32,7 +31,6 @@ const SelectableListItem = ({
   className,
   data = {},
   defaultChecked,
-  htmlOptions = {},
   id,
   label,
   text = "",
@@ -43,8 +41,7 @@ const SelectableListItem = ({
   ...props
 }: SelectableListItemProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const classes = classnames(
     buildCss("pb_selectable_list_item_kit"),
     globalProps(props),
@@ -64,12 +61,7 @@ const SelectableListItem = ({
       {...props}
       className={classnames(checkedState ? "checked_item" : "", className)}
     >
-      <div 
-        {...ariaProps} 
-        {...dataProps}
-        {...htmlProps} 
-        className={classes}
-      >
+      <div {...ariaProps} {...dataProps} className={classes}>
         {variant == "checkbox" && (
           <>
             <Checkbox

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import { SelectableListItemProps } from './_item.js'
 
@@ -13,7 +13,6 @@ type SelectableListProps = {
   children?: React.ReactElement[],
   className?: string,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   variant?: 'checkbox' | 'radio',
 }
@@ -24,14 +23,12 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const isRadio = props.variant === "radio"
   const defaultCheckedRadioValue = children.filter((item: {props:SelectableListItemProps} ) => item.props.defaultChecked)[0]?.props?.value
 
@@ -61,7 +58,6 @@ const SelectableList = (props: SelectableListProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_source/_source.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildDataProps, buildAriaProps, buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildAriaProps } from '../utilities/props'
 import { titleize } from '../utilities/text'
 
 import Avatar, { AvatarProps } from '../pb_avatar/_avatar'
@@ -15,7 +15,6 @@ type SourceProps = {
   className?: string,
   data?: { [key: string]: string },
   hideIcon: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   source?: string,
   type: "events" | "inbound" | "outbound" | "prospecting" | "referral" | "retail" | "user",
@@ -27,14 +26,12 @@ const Source = ({
   className,
   data = {},
   hideIcon = false,
-  htmlOptions = {},
   id,
   source,
   type = 'inbound',
   user = {},
 }: SourceProps) => {
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
 
   const css = classnames([
@@ -74,7 +71,6 @@ const Source = ({
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={css}
       id={id}
     >

data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import classnames from "classnames"
 
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { buildAriaProps, buildDataProps } from "../utilities/props"
 
 import Icon from "../pb_icon/_icon"
 
@@ -11,7 +11,6 @@ type StarRatingProps = {
   data?: object,
   fixedWidth?: boolean,
   hideRating: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   id?: string,
   rating: number,
@@ -21,14 +20,12 @@ const StarRating = ({
   aria = {},
   className,
   data = {},
-  htmlOptions = {},
   hideRating = false,
   id,
   rating = 0,
 }: StarRatingProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames([
     "pb_star_rating_kit", className,
   ])
@@ -45,7 +42,6 @@ const StarRating = ({
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildHtmlProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -22,29 +22,18 @@ type StatChangeProps = {
   change?: 'increase' | 'decrease' | 'neutral',
   className?: string,
   icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const { 
-    change = 'neutral', 
-    className, 
-    htmlOptions = {},
-    icon, 
-    id, 
-    value 
-  } = props
-
+  const { change = 'neutral', className, icon, id, value } = props
   const status = statusMap[change as keyof typeof statusMap]
   let returnedIcon = iconMap[change as keyof typeof iconMap]
   if (icon) {
     returnedIcon = icon
   }
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   return (
     <>
       {value &&
@@ -55,7 +44,6 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
               className
               )}
             id={id}
-            {...htmlProps}
         >
           <Body status={status}>
             {returnedIcon &&

data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx

@@ -2,12 +2,10 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
 import Title from '../pb_title/_title'
 
 type StatValueProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   unit?: string,
   value: string | number,
@@ -16,14 +14,11 @@ type StatValueProps = {
 const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
     className,
-    htmlOptions = {},
     id,
     unit,
     value = 0,
   } = props
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   const displayValue = function(value: string | number) {
     if (value || value === 0) {
       return (
@@ -52,7 +47,6 @@ const StatValue = (props: StatValueProps): React.ReactElement => {
     <div
         className={classnames('pb_stat_value_kit', globalProps(props), className)}
         id={id}
-        {...htmlProps}
     >
       <div className="pb_stat_value_wrapper">
         {displayValue(value)}

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
@@ -14,7 +14,6 @@ type TableProps = {
   data?: { [key: string]: string },
   dataTable: boolean,
   disableHover: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,
@@ -34,7 +33,6 @@ const Table = (props: TableProps) => {
     data = {},
     dataTable = false,
     disableHover = false,
-    htmlOptions = {},
     id,
     responsive = 'collapse',
     singleLine = false,
@@ -45,7 +43,6 @@ const Table = (props: TableProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
   const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
 
@@ -58,7 +55,6 @@ const Table = (props: TableProps) => {
     <table
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classnames(
         'pb_table',
         `table-${size}`,

data/app/pb_kits/playbook/pb_table/_table_row.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type TableRowPropTypes = {
@@ -8,7 +8,6 @@ type TableRowPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   sideHighlightColor: string,
 }
@@ -19,14 +18,12 @@ const TableRow = (props: TableRowPropTypes) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     sideHighlightColor = 'windows',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const sideHighlightClass =
     sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
   const classes = classnames(buildCss('pb_table_row_kit', sideHighlightClass), globalProps(props), className)
@@ -35,7 +32,6 @@ const TableRow = (props: TableRowPropTypes) => {
     <tr
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
 import Card from '../pb_card/_card'
@@ -17,7 +17,6 @@ type TextInputProps = {
   dark?: boolean,
   disabled?: boolean,
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inline?: boolean,
   name: string,
@@ -44,7 +43,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     data = {},
     disabled,
     error,
-    htmlOptions = {},
     id,
     inline = false,
     name,
@@ -59,7 +57,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const { alignment, border, icon } = addOn
   const addOnAlignment = alignment === 'left' ? 'left' : 'right'
@@ -141,7 +138,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={css}
     >
       {label && 

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

@@ -16,10 +16,3 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
-
-  swift:
-    - text_input_default_swift: Default
-    - text_input_error_swift: With Error
-    - text_input_disabled_swift: Disabled
-    - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import PbTextarea from '.'
 import type { InputCallback } from '../types'
 
-import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -22,7 +22,6 @@ type TextareaProps = {
   data?: {[key: string]: string},
   disabled?: boolean,
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inline?: boolean,
   object?: string,
@@ -45,7 +44,6 @@ const Textarea = ({
   children,
   data = {},
   disabled,
-  htmlOptions = {},
   inline = false,
   resize = 'none',
   error,
@@ -73,7 +71,7 @@ const Textarea = ({
   const noCount = typeof characterCount !== 'undefined'
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
@@ -86,7 +84,6 @@ const Textarea = ({
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
     >
       <Caption text={label} />

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

@@ -15,8 +15,3 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
-
-  swift:
-  - textarea_default_swift: Default
-  - textarea_error_swift: Textarea w/ Error
-  - textarea_props_swift: ""

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import { buildCss, buildHtmlProps } from "../utilities/props";
+import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -16,7 +16,6 @@ type TimeProps = {
   date: Date;
   dark?: boolean;
   id?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   showIcon?: boolean;
   size?: "md" | "sm";
   showTimezone?: boolean;
@@ -29,7 +28,6 @@ const Time = (props: TimeProps) => {
     align,
     className,
     date,
-    htmlOptions = {},
     showIcon,
     size,
     timeZone,
@@ -43,13 +41,8 @@ const Time = (props: TimeProps) => {
     className
   );
 
-  const htmlProps = buildHtmlProps(htmlOptions);
-
   return (
-    <div 
-      {...htmlProps}
-      className={classes} 
-    >
+    <div className={classes}>
       {showIcon && (
         unstyled
           ? (

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
@@ -12,7 +12,6 @@ import Icon from '../pb_icon/_icon'
 type TimeRangeInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   data?: { [key: string]: string },
   alignment?: "left" | "center" | "vertical",
@@ -42,7 +41,6 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     className,
     data = {},
     alignment = 'left',
-    htmlOptions = {},
     size = 'sm',
     dark = false,
     icon = false,
@@ -54,7 +52,6 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   const dataProps: { [key: string]: string } = buildDataProps(data)
   const ariaProps: { [key: string]: string } = buildAriaProps(aria)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const separator = (
     <Body color="light">
@@ -90,7 +87,6 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
         id={id}
     >

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -14,7 +14,6 @@ type TimeStackedProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   date?: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   time?: number | Date,
   timeZone?: string,
@@ -29,7 +28,6 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
     dark,
     data = {},
     date,
-    htmlOptions = {},
     time,
     timeZone,
   } = props
@@ -39,14 +37,12 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
     globalProps(props),
     className
   )
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data)
 
   return (
     <div
         className={classes}
         {...dataProps}
-        {...htmlProps}
     >
       <Body
           className={classnames('pb_time_stacked', 'time-spacing')}