playbook_ui 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -15,12 +15,11 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
-  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | 'link',
 } & GlobalProps
 
@@ -39,21 +38,18 @@ const Body = (props: BodyProps): React.ReactElement => {
     status = null,
     tag = 'div',
     text = '',
-    truncate = null,
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
-  const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
-    buildCss('pb_body_kit', color, variant, status, isTruncated),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )
-  const Tag: React.ReactElement | any = `${tag}`
-
+  const Tag: keyof JSX.IntrinsicElements = `${tag}`
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -36,26 +36,6 @@ $pb_body_status: (
   font-family: $font-family-base;
 }
 
-$pb_body_truncate: (
-  truncate_1: 1,
-  truncate_2: 2,
-  truncate_3: 3,
-  truncate_4: 4,
-  truncate_5: 5
-);
-
-@mixin body_truncate {
-  @each $name, $number in $pb_body_truncate {
-    &[class*=_#{$name}] {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: $number;
-      -webkit-box-orient: vertical; 
-    }
-  }
-}
-
-
 // Colors ======================
 @mixin pb_body_light {
   @include pb_body($text_lt_light);

data/app/pb_kits/playbook/pb_body/body.rb

@@ -18,12 +18,9 @@ module Playbook
                           default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
-      prop :truncate, type: Playbook::Props::Enum,
-                      values: [nil, "1", "2", "3", "4", "5"],
-                      default: nil
 
       def classname
-        generate_classname("pb_body_kit", color_class, status_class, is_truncated)
+        generate_classname("pb_body_kit", color_class, status_class)
       end
 
       def content
@@ -31,10 +28,6 @@ module Playbook
         highlighting ? apply_highlight(body_text) : body_text
       end
 
-      def is_truncated
-        truncate ? "truncate_#{truncate}" : nil
-      end
-
     private
 
       def apply_highlight(text)

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -13,15 +13,14 @@ import {
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
 }
 
-
-const BreadCrumbItem = (props: BreadCrumbItemProps) => {
+const BreadCrumbItem = (props: BreadCrumbItemProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -12,13 +12,13 @@ import {
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
-const BreadCrumbs = (props: BreadCrumbsProps) => {
+const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {
   const {
     aria = { label: 'Breadcrumb Navigation' },
     className,

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -21,7 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -66,7 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const Button = (props: ButtonPropTypes) => {
+const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
@@ -150,16 +150,16 @@ const Button = (props: ButtonPropTypes) => {
     if (link) {
       return (
         <a
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          href={link}
-          id={id}
-          rel={target !== "child" ? "noreferrer" : null}
-          role="link"
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            href={link}
+            id={id}
+            rel={target !== "child" ? "noreferrer" : null}
+            role="link"
+            tabIndex={tabIndex}
+            target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
@@ -167,24 +167,27 @@ const Button = (props: ButtonPropTypes) => {
     } else if (variant === "reaction") {
       return (
         <button
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          disabled={disabled}
-          form={form}
-          id={id}
-          onClick={onClick}
-          role="button"
-          tabIndex={tabIndex}
-          type={htmlType}
-          value={value}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            disabled={disabled}
+            form={form}
+            id={id}
+            onClick={onClick}
+            role="button"
+            tabIndex={tabIndex}
+            type={htmlType}
+            value={value}
         >
           {icon && isValidEmoji(icon) && (
             <Flex align='center'>
               <Icon icon={icon} />
               {count && (
-                <Caption paddingLeft="xxs" size="xs">
+                <Caption 
+                    paddingLeft="xxs"
+                    size="xs"
+                >
                   {count}
                 </Caption>
               )}
@@ -203,18 +206,18 @@ const Button = (props: ButtonPropTypes) => {
     } else {
       return (
         <button
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          disabled={disabled}
-          form={form}
-          id={id}
-          onClick={onClick}
-          role="button"
-          tabIndex={tabIndex}
-          type={htmlType}
-          value={value}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            disabled={disabled}
+            form={form}
+            id={id}
+            onClick={onClick}
+            role="button"
+            tabIndex={tabIndex}
+            type={htmlType}
+            value={value}
         >
           {ifLoading()}
         </button>

data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md

@@ -9,3 +9,14 @@
 | **Icon** | `PBIcon` | Adds an icon to the Button | `nil` |  |
 | **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
 | **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` |  |
+
+### Reaction Button Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **count** | `Int` | Tracks number of times a reaction button has been pressed | `0` |  |
+| **isHighlighted** | `Bool` | Boolean for whether or not a reaction button has a highlight | ` false` | `true` `false` |
+| **isHovering** | `Bool` | Boolean for whether or not a mouse is hovering over the reaction button | `false` | `true` `false` |
+| **icon** | `String` | Allows user to use a unicode string for an emoji reaction button |  |  |
+| **pbIcon** | `PBIcon` | A PlayBook Icon option for reaction button | |  |
+| **isInteractive** | `Bool` | Boolean for whether or not a reaction button is interactive | `false` | `true` `false` |
+

data/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md

@@ -0,0 +1,26 @@
+![reaction-button](https://github.com/powerhome/playbook/assets/54749071/10d21ee2-4faf-4c18-ab72-242df8f837c4)
+
+```swift
+@State private var count: Int = 153
+@State private var count1: Int = 5
+
+HStack(alignment: .center, spacing: 12) {
+            PBReactionButton(
+              count: $count,
+              icon: "\u{1F389}",
+              isInteractive: true
+            )
+            PBReactionButton(
+              count: $count1,
+              icon: "1️⃣",
+              isInteractive: false
+            )
+            PBReactionButton(
+              isInteractive: false
+            )
+            PBReactionButton(
+              pbIcon: PBIcon(FontAwesome.user),
+              isInteractive: false
+            )
+}
+```

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

@@ -32,4 +32,5 @@ examples:
   - button_icon_options_swift: Button Icon Options
   - button_circle_swift: Circle Button
   - button_size_swift: Button Size
+  - button_reaction_swift: Button Reaction
   - button_props_swift: ""

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -12,8 +12,8 @@ type ButtonToolbarProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   connected?: boolean,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -21,7 +21,7 @@ type ButtonToolbarProps = {
  variant?: "primary" | "secondary",
 }
 
-const ButtonToolbar  = (props: ButtonToolbarProps) => {
+const ButtonToolbar  = (props: ButtonToolbarProps): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -9,7 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -16,7 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -69,7 +69,7 @@ const Body = (props: CardBodyProps) => {
   )
 }
 
-const Card = (props: CardPropTypes) => {
+const Card = (props: CardPropTypes): React.ReactElement => {
   const {
     aria = {},
     background = 'none',

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -80,7 +80,6 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   width: $width;
   height: $height;
   background: $background;
-  z-index: 10;
 }
 
 @mixin pb_card_header_color($header_color) {

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-        >
+      >
         <Body
             dark
             text="Product 1 Background"
@@ -69,11 +69,12 @@ const CardBackground = (props) => {
       <Card 
           background="product_7_highlight" 
           marginBottom="sm"
-          {...props} >
+          {...props}
+      >
         <Body 
             dark
-            text="Product 7 Highlight"  
-          />
+            text="Product 7 Highlight"
+        />
       </Card>
 
       

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -13,7 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -23,7 +23,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): JSX.Element => {
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
   const {
     aria = {},
     checked = false,
@@ -73,7 +73,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
-      />)
+    />)
   }
 
   return (

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -18,12 +18,12 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
-  dark?: Boolean;
-  data?: Object;
+  dark?: boolean;
+  data?: {[key: string]: string},
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -180,29 +180,29 @@ const CircleChart = ({
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
-            containerProps={{
+              containerProps={{
               className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
               ...htmlProps,
             }}
-            highcharts={Highcharts}
-            options={options}
+              highcharts={Highcharts}
+              options={options}
           />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
         <HighchartsReact
-          containerProps={{
+            containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,
             ...htmlProps,
           }}
-          highcharts={Highcharts}
-          options={options}
+            highcharts={Highcharts}
+            options={options}
         />
       )}
     </>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -13,7 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,

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

@@ -12,22 +12,20 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: JSX.Element | [] | any,
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: object,
+  data?: {[key: string]: string},
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-
-
 const Collapsible = ({
   aria = {},
   className,
@@ -42,14 +40,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps) => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,4 +1,4 @@
-export const showElement = (elem:any) => {
+export const showElement = (elem: HTMLElement) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem:any) => {
   }, 300);
 };
 
-export const hideElement = (elem:any) => {
+export const hideElement = (elem: HTMLElement) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps) => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,9 +33,10 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div ref={contentRef}
-      data-collapsible-content="true" 
-      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
+    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
+        data-collapsible-content="true" 
+        ref={contentRef}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e:any) => {
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,21 +67,25 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[0] : "chevron-down"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
         </div>
       ) : (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[1] : "chevron-up"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
         </div>
       )}
     </>
@@ -118,9 +122,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
+                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
-                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -50,12 +50,12 @@ type ContactProps = {
   contactDetail?: string,
   contactType?: string,
   contactValue: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const Contact = (props: ContactProps) => {
+const Contact = (props: ContactProps): React.ReactElement => {
   const {
     aria = {},
     className,

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` |