playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1097linterenhancedelement1728

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link_swift.md

@@ -0,0 +1,18 @@
+![home-address-street-link](https://github.com/powerhome/playbook/assets/92755007/890a61d9-896b-45a1-aa7c-c78783f3ac54)
+
+```swift
+
+PBHomeAddressStreet(
+  address: "70 Prospect Ave",
+  withBullet: true,
+  houseStyle: "Colonial",
+  addressCont: "Apt M18",
+  city: "West Chester",
+  homeId: "8250263",
+  homeUrl: "https://powerhrg.com/",
+  state: "PA",
+  territory: "PHL",
+  zipcode: "19382"
+)
+
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified_swift.md

@@ -0,0 +1,13 @@
+![home-address-street-modified](https://github.com/powerhome/playbook/assets/92755007/32e16708-896f-41c8-ae06-7bea00225b4f)
+
+```swift
+
+PBHomeAddressStreet(
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  state: "PA",
+  territory: "PHL",
+  zipcode: "19382"
+)
+
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_props_swift.md

@@ -0,0 +1,14 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **address** | `String` | Sets the address |  |  |
+| **withBullet** | `Bool` | Adds a bullet after the address | `false` | `false` `true` |
+| **houseStyle** | `String` | Sets the house style | `nil` |  |
+| **addressCont** | `String` | Sets additional address text | `nil` |  |
+| **city** | `String` | Sets the city |  |  |
+| **homeId** | `String` | Sets the home ID | `nil` |  |
+| **homeUrl** | `String` | Adds a URL to the homeID | `nil` |  |
+| **state** | `String` | Sets the state |  |  |
+| **territory** | `String` | Sets the territory |  |  |
+| **zipcode** |  `String` | Sets the zipcode |  |  |
+| **emphasize** | `Emphasize` | Changes text to bold | `.address` | `.address` `.city`  `.cityWithZipcode` |

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

@@ -12,3 +12,9 @@ examples:
   - home_address_street_modified: Modified
   - home_address_street_link: Link
 
+  swift:
+  - home_address_street_default_swift: Default
+  - home_address_street_emphasis_swift: Emphasis
+  - home_address_street_modified_swift: Modified
+  - home_address_street_link_swift: Link
+  - home_address_street_props_swift: ""

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -28,6 +28,7 @@ type IconProps = {
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inverse?: boolean,
   listItem?: boolean,
@@ -55,6 +56,7 @@ const Icon = (props: IconProps) => {
     data = {},
     fixedWidth = true,
     flip = "none",
+    htmlOptions = {},
     icon,
     id,
     inverse = false,
@@ -104,6 +106,7 @@ const Icon = (props: IconProps) => {
   aria.label ? null : aria.label = `${icon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
@@ -113,6 +116,7 @@ const Icon = (props: IconProps) => {
           {
             React.cloneElement(customIcon, {
               ...dataProps,
+              ...htmlProps,
               className: classes,
               id,
             })
@@ -124,6 +128,7 @@ const Icon = (props: IconProps) => {
         <>
           <span
               {...dataProps}
+              {...htmlProps}
               className={classesEmoji}
               id={id}
           >
@@ -137,6 +142,7 @@ const Icon = (props: IconProps) => {
         <>
           <i
               {...dataProps}
+              {...htmlProps}
               className={classes}
               id={id}
           />

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -2,7 +2,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 Icon from '../pb_icon/_icon'
@@ -13,6 +13,7 @@ type IconCircleProps = {
   dark?: boolean,
   data?: {[key:string]: string},
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
@@ -32,6 +33,7 @@ const IconCircle = (props: IconCircleProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     icon,
     id,
     size = 'md',
@@ -40,6 +42,7 @@ const IconCircle = (props: IconCircleProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
 
 
@@ -47,6 +50,7 @@ const IconCircle = (props: IconCircleProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.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'
@@ -16,6 +16,7 @@ type IconStatValueProps = {
   data?: object,
   dark?: boolean,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   orientation?: "vertical" | "horizontal",
   size?: "sm" | "md" | "lg",
@@ -39,6 +40,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     className,
     data = {},
     dark = false,
+    htmlOptions = {},
     icon,
     id,
     orientation = 'horizontal',
@@ -50,6 +52,7 @@ const IconStatValue = (props: IconStatValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
@@ -89,6 +92,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_icon_value/_icon_value.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'
@@ -14,6 +14,7 @@ type IconValueProps = {
   dark?: boolean,
   data?: object,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text: string,
 }
@@ -25,12 +26,14 @@ const IconValue = (props: IconValueProps) => {
     className,
     dark,
     data = {},
+    htmlOptions = {},
     icon,
     id,
     text,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_icon_value_kit', align),
     globalProps(props),
@@ -41,6 +44,7 @@ const IconValue = (props: IconValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,13 +1,14 @@
 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 ImageType = {
   alt?: string,
   aria?: {[key: string]: string},
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onError?: () => void,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
@@ -22,6 +23,7 @@ const Image = (props: ImageType): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     onError = null,
     rounded = false,
@@ -40,11 +42,14 @@ const Image = (props: ImageType): React.ReactElement => {
     className
   )
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
 
   return (
     <img
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         alt={alt}
         className={classes}
         data-src={url}

data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
 
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Pill from '../pb_pill/_pill'
 import Caption from '../pb_caption/_caption'
@@ -11,6 +11,7 @@ type LabelPillProps = {
   aria?: {[key: string]:string},
   className?: string,
   data?: {[key: string]:string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   pillValue?: string,
@@ -22,6 +23,7 @@ const LabelPill = (props: LabelPillProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     label,
     pillValue,
@@ -29,6 +31,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     'pb_label_pill_kit',
     globalProps(props),
@@ -39,6 +42,7 @@ const LabelPill = (props: LabelPillProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_label_value/_label_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 DateTime from '../pb_kit/dateTime';
 
@@ -17,6 +17,7 @@ type LabelValueProps = {
   dark?: boolean;
   data?: object;
   date?: Date;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   label: string;
   value?: string;
@@ -42,6 +43,7 @@ const LabelValue = (props: LabelValueProps) => {
     data = {},
     date,
     description,
+    htmlOptions = {},
     icon,
     id,
     label,
@@ -51,7 +53,8 @@ const LabelValue = (props: LabelValueProps) => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -63,6 +66,7 @@ const LabelValue = (props: LabelValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
         title={title}

data/app/pb_kits/playbook/pb_layout/_layout.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'
 
@@ -12,6 +12,7 @@ type LayoutPropTypes = {
   dark?: boolean,
   data?: object,
   full?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   position?: "left" | "right",
   responsive?: boolean,
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
@@ -106,6 +107,7 @@ const Layout = (props: LayoutPropTypes) => {
     dark = false,
     data = {},
     full = false,
+    htmlOptions = {},
     position = 'left',
     responsive = false,
     size = 'md',
@@ -116,6 +118,8 @@ const Layout = (props: LayoutPropTypes) => {
   const responsiveClass = responsive ? '_responsive' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const layoutCss =
     layout == 'collection'
       ? `pb_layout_kit_${layout}`
@@ -159,6 +163,7 @@ const Layout = (props: LayoutPropTypes) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(
         layoutCss,
         layoutCollapseCss,

data/app/pb_kits/playbook/pb_legend/_legend.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'
@@ -13,6 +13,7 @@ type LegendProps = {
   color?: string,
   dark?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   prefixText?: string,
   text: string,
@@ -25,6 +26,7 @@ const Legend = (props: LegendProps) => {
     color = 'data_1',
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     prefixText,
     text,
@@ -32,6 +34,7 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const customColor = color.charAt(0) === '#' && color
 
@@ -50,6 +53,7 @@ const Legend = (props: LegendProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={bodyCss}
         id={id}
     >

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
@@ -23,6 +24,7 @@ type LightboxHeaderProps = {
   className?: string;
   closeable?: boolean;
   data?: { [key: string]: string | number };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   icon?: string;
   id?: string;
   onClickRight?: () => void;
@@ -38,6 +40,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     onClickRight,
     spacing = "between",
     text,
@@ -48,7 +51,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const api: any = useContext(LightboxContext);
   const headerCSS = buildCss("lightbox_header");
   const headerSpacing = globalProps(props, { paddingY: "sm" });
@@ -112,6 +116,7 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <Flex
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(headerCSS, headerSpacing, className)}
         spacing={spacing}
       >

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useRef, useState, useEffect } from 'react'
 import { useKbdControls } from './hooks/useKbdControls'
 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 LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
@@ -15,6 +15,7 @@ type LightboxType = {
   currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   photos: [],
   initialPhoto?: number,
@@ -35,6 +36,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     currentPhotoIndex,
     data = {},
     description,
+    htmlOptions = {},
     id = '',
     initialPhoto = 0,
     photos,
@@ -60,6 +62,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_lightbox_kit'),
     globalProps(props),
@@ -96,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
         <div
             {...ariaProps}
             {...dataProps}
+            {...htmlProps}
             className={classes}
             id={id}
             ref={lightboxRef}

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -22,6 +22,7 @@ type LineGraphProps = {
     data: number[];
   }[];
   gradient?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id: string;
   pointStart: number;
   subTitle?: string;
@@ -47,6 +48,7 @@ const LineGraph = ({
   dark = false,
   gradient = false,
   type = "line",
+  htmlOptions = {},
   id,
   legend = false,
   toggleLegendClick = true,
@@ -66,8 +68,11 @@ const LineGraph = ({
   colors = [],
   ...props
 }: LineGraphProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -138,6 +143,7 @@ const LineGraph = ({
         id: id,
         ...ariaProps,
         ...dataProps,
+        ...htmlProps
       }}
       highcharts={Highcharts}
       options={options}

data/app/pb_kits/playbook/pb_list/_list.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 ListProps = {
@@ -10,6 +10,7 @@ type ListProps = {
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
   data?: object;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   layout?: "" | "left" | "right";
   ordered?: boolean;
@@ -29,6 +30,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     layout = "",
     ordered = false,
@@ -53,7 +55,8 @@ const List = (props: ListProps) => {
     }
   );
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_list_kit", layoutClass[layout], size, {
       dark: dark,
@@ -71,6 +74,7 @@ const List = (props: ListProps) => {
         <ol
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}
@@ -82,6 +86,7 @@ const List = (props: ListProps) => {
         <ul
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={className}
           id={id}
           role={role}

data/app/pb_kits/playbook/pb_list/_list_item.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 ListItemProps = {
@@ -8,6 +8,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tabIndex?: number,
 }
@@ -18,12 +19,14 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     tabIndex,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_item_kit'),
     globalProps(props),
@@ -35,6 +38,7 @@ const ListItem = (props: ListItemProps) => {
       <li
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
           tabIndex={tabIndex}