playbook_ui 13.12.0.pre.alpha.play10281596 → 13.12.0

data/app/pb_kits/playbook/pb_timeline/_item.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 DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -10,7 +10,6 @@ type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
   date?: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
@@ -20,7 +19,6 @@ const TimelineItem = ({
   className,
   children,
   date,
-  htmlOptions = {},
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
@@ -28,13 +26,8 @@ const TimelineItem = ({
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   return (
-    <div 
-      {...htmlProps}
-      className={classnames(timelineItemCss, className)}
-    >
+    <div className={classnames(timelineItemCss, className)}>
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import TimelineItem from './_item'
 
@@ -10,7 +10,6 @@ type TimelineProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   orientation?: string,
   showDate?: boolean,
@@ -21,21 +20,18 @@ const Timeline = ({
   className,
   children,
   data = {},
-  htmlOptions = {},
   id,
   orientation = 'horizontal',
   showDate = false,
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classnames(timelineCss, className)}
       id={id}
     >

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -1,7 +1,7 @@
 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'
 import DateTime from '../pb_kit/dateTime';
 
@@ -16,7 +16,6 @@ type TimestampProps = {
   text: string,
   timestamp: Date | string,
   timezone: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   showDate?: boolean,
   showUser?: boolean,
@@ -33,7 +32,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     text,
     timezone,
     timestamp,
@@ -47,7 +45,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_timestamp_kit', align, {
       dark: dark,
@@ -104,7 +101,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
     >
       <div className="pb_timestamp_kit">

data/app/pb_kits/playbook/pb_title/_title.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 { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
 type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
@@ -13,7 +13,6 @@ type TitleProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
@@ -30,7 +29,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     className,
     color,
     data = {},
-    htmlOptions = {},
     id,
     size = 3,
     bold = true,
@@ -42,7 +40,6 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const getBold = bold ? '' : 'thin'
   const isTruncated = truncate ? `truncate-${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
@@ -71,7 +68,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

@@ -3,7 +3,7 @@
 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'
 
 import Body from '../pb_body/_body'
@@ -16,7 +16,6 @@ type TitleCountProps = {
   count?: number,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   title?: string,
   size?: "lg" | "sm",
@@ -29,14 +28,12 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     count,
     id,
     title,
     size = 'sm' } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const css = classnames(
     buildCss('pb_title_count_kit', align, size),
@@ -50,7 +47,6 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,33 +13,20 @@ type TitleDetailProps = {
   className?: string,
   data?: { [key: string]: string },
   detail: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   title: string,
 } & GlobalProps
 
 const TitleDetail = (props: TitleDetailProps) => {
-  const {
-    align = "left",
-    aria = {},
-    className,
-    data = {},
-    detail,
-    htmlOptions = {},
-    id,
-    title,
-  } = props
-  
+  const { align = 'left', aria = {}, className, data = {}, detail, id, title } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const pbCss = buildCss("pb_title_detail_kit", align)
+  const pbCss = buildCss('pb_title_detail_kit', align)
 
   return (
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classnames(pbCss, globalProps(props), className)}
       id={id}
     >

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -6,7 +6,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps,
 } from '../utilities/props'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -17,7 +16,6 @@ type Props = {
   children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
@@ -32,7 +30,6 @@ const Toggle = ({
   className,
   data = {},
   id,
-  htmlOptions = {},
   name,
   onChange = () => { },
   size = 'sm',
@@ -41,7 +38,6 @@ const Toggle = ({
 }: Props) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_toggle_kit',
       size,
@@ -55,7 +51,6 @@ const Toggle = ({
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classnames(css, globalProps(props), className)}
       id={id}
     >

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

@@ -13,7 +13,3 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
-  swift:
-    - toggle_default_swift: Default State
-    - toggle_name_swift: Name and Value
-    - toggle_props_swift: ""

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -14,7 +14,7 @@ import {
 
 import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
 type TooltipProps = {
@@ -23,7 +23,6 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
@@ -39,7 +38,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
-    htmlOptions = {},
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
@@ -52,7 +50,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-  const htmlProps = buildHtmlProps(htmlOptions)
   
   const css = classnames(
     globalProps({...rest}),
@@ -130,7 +127,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
           style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
       >
         {children}
       </div>

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -25,7 +25,6 @@ type TreemapChartProps = {
   drillable: boolean;
   grouped: boolean;
   height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id: number | string;
   title?: string;
   tooltipHtml: string;
@@ -43,18 +42,14 @@ const TreemapChart = ({
   drillable = false,
   grouped = false,
   height,
-  htmlOptions = {},
   id,
   title = "",
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
 }: TreemapChartProps) => {
-  
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -106,7 +101,6 @@ const TreemapChart = ({
         id: id,
         ...ariaProps,
         ...dataProps,
-        ...htmlProps
       }}
       highcharts={Highcharts}
       options={options}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -16,7 +16,7 @@ import Option from './components/Option'
 import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
-import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { noop, buildDataProps } from '../utilities/props'
 import { Noop } from '../types'
 
 /**
@@ -34,7 +34,6 @@ type TypeaheadProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
@@ -69,7 +68,6 @@ const Typeahead = ({
   data = {},
   getOptionLabel,
   getOptionValue,
-  htmlOptions = {},
   id,
   loadOptions = noop,
   ...props
@@ -127,7 +125,6 @@ const Typeahead = ({
   }
 
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     globalProps(props),
@@ -137,9 +134,7 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div 
-      {...dataProps}
-      {...htmlProps}
+    <div {...dataProps}
       className={classnames(classes, inlineClass)}
     >
       <Tag

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -1,7 +1,7 @@
 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, globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -16,7 +16,6 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   name?: string,
   orientation?: "horizontal" | "vertical",
@@ -35,7 +34,6 @@ const User = (props: UserProps) => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     name,
     orientation = 'horizontal',
@@ -47,7 +45,6 @@ const User = (props: UserProps) => {
 
   const dataProps: {[key: string]: string} = buildDataProps(data)
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
@@ -61,7 +58,6 @@ const User = (props: UserProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_user_badge/_user_badge.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'
 import Veteran from './badges/veteran'
 import MillionDollar from './badges/million-dollar';
@@ -10,7 +10,6 @@ type UserBadgeProps = {
   badge?: "million-dollar" | "veteran",
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "sm" | "md" | "lg",
 }
@@ -21,7 +20,6 @@ const UserBadge = (props: UserBadgeProps) => {
     badge = 'million-dollar',
     className,
     data = {},
-    htmlOptions = {},
     id,
     size = 'md',
   } = props
@@ -29,7 +27,6 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = badge === "million-dollar" ? <MillionDollar /> : <Veteran />
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_user_badge_kit', size),
     globalProps(props),
@@ -40,7 +37,6 @@ const UserBadge = (props: UserBadgeProps) => {
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.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'
 import Joyride, { TooltipRenderProps } from 'react-joyride'
 import Button from '../pb_button/_button'
@@ -14,7 +14,6 @@ type WalkthroughProps = {
   className?: string,
   continuous?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   run?: boolean,
   steps?: [],
@@ -151,7 +150,6 @@ const Walkthrough = (props: WalkthroughProps) => {
     floaterProps = {
       offset: 50,
     },
-    htmlOptions = {},
     id,
     run = false,
     steps,
@@ -165,14 +163,12 @@ const Walkthrough = (props: WalkthroughProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
 
   return (
     <div
       {...ariaProps}
       {...dataProps}
-      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
@@ -16,7 +16,6 @@ type WeekdayStackedProps = {
   dark?: boolean,
   data?: object,
   date: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,
@@ -47,7 +46,6 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
     dark = false,
     data = {},
     date = new Date(),
-    htmlOptions = {},
     id,
     variant = 'month_day',
     compact = false,
@@ -55,7 +53,6 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_weekday_stacked_kit', align),
     globalProps(props),
@@ -66,7 +63,6 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/utilities/props.ts

@@ -49,19 +49,3 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
  */
 export const buildCss = (...rules: (string | { [x: string]: string | boolean; })[]): string => classnames(rules).replace(/\s/g, '_')
 
-/**
- * Maps a given data object into HTML valid attributes and their values.
- * This is a more general version of what buildAriaProps and buildDataProps do.
- * It is used to map any arbitrary prop into a valid HTML attribute.
- *  
- * @returns {Object} an object holding the HTML valid props and their values.
- */
-
-export const buildHtmlProps = (htmlOptions: { [key: string]: string | number | boolean | Function }) => {
-  const htmlProps: { [attr: string]: string | number | boolean | Function } = {}
-  Object.keys(htmlOptions).forEach((key) => {
-    htmlProps[key] = htmlOptions[key]
-  })
-  return htmlProps
-}
-