playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596

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 } from '../utilities/props'
+import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { Noop } from '../types'
 
 /**
@@ -34,6 +34,7 @@ type TypeaheadProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   error?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
@@ -68,6 +69,7 @@ const Typeahead = ({
   data = {},
   getOptionLabel,
   getOptionValue,
+  htmlOptions = {},
   id,
   loadOptions = noop,
   ...props
@@ -125,6 +127,7 @@ const Typeahead = ({
   }
 
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     globalProps(props),
@@ -134,7 +137,9 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div {...dataProps}
+    <div 
+      {...dataProps}
+      {...htmlProps}
       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 } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -16,6 +16,7 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   name?: string,
   orientation?: "horizontal" | "vertical",
@@ -34,6 +35,7 @@ const User = (props: UserProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     name,
     orientation = 'horizontal',
@@ -45,6 +47,7 @@ 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),
@@ -58,6 +61,7 @@ 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 } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import Veteran from './badges/veteran'
 import MillionDollar from './badges/million-dollar';
@@ -10,6 +10,7 @@ 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",
 }
@@ -20,6 +21,7 @@ const UserBadge = (props: UserBadgeProps) => {
     badge = 'million-dollar',
     className,
     data = {},
+    htmlOptions = {},
     id,
     size = 'md',
   } = props
@@ -27,6 +29,7 @@ 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),
@@ -37,6 +40,7 @@ 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 } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import Joyride, { TooltipRenderProps } from 'react-joyride'
 import Button from '../pb_button/_button'
@@ -14,6 +14,7 @@ type WalkthroughProps = {
   className?: string,
   continuous?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   run?: boolean,
   steps?: [],
@@ -150,6 +151,7 @@ const Walkthrough = (props: WalkthroughProps) => {
     floaterProps = {
       offset: 50,
     },
+    htmlOptions = {},
     id,
     run = false,
     steps,
@@ -163,12 +165,14 @@ 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 } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
@@ -16,6 +16,7 @@ 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,
@@ -46,6 +47,7 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
     dark = false,
     data = {},
     date = new Date(),
+    htmlOptions = {},
     id,
     variant = 'month_day',
     compact = false,
@@ -53,6 +55,7 @@ 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),
@@ -63,6 +66,7 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -49,3 +49,19 @@ 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
+}
+