playbook_ui 13.14.0 → 13.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d04e6787b7ede763ffa77a10150fd9bf2877d83bc6a8013ceb822c92c578646f
-  data.tar.gz: 2a9848bb892d8a345d1fd7f1795f4e6341f5687a184ea68f4a66a1baa449086b
+  metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
+  data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
 SHA512:
-  metadata.gz: 982294cb2ef561a83e496ab0f7affb04215b5b7a9bfd5450e25b8fec701fc070e5eb5cb075812e724610b2def5cea52b39a6454a0d4e9924c6754afcfe9605ae
-  data.tar.gz: 8c257aef818537b0b140419ea929a17b4509a55fa26e0dd859c8c6d18ebf892b161d0f00658bb376504a23ee06084810b88957234057a4799443c4022905edcb
+  metadata.gz: 3d4bfff63b93a145834de3cfe80f3ecfa04f3d29ef10e7194fe2ad9149111a61efaeb70557b289db0fe499b1297e150ef0008af6f712289f45a84eaa83eab120
+  data.tar.gz: 94718a4b5a91761a32365bcb149b47c4e2aaea0a58fbc9860773117069875627018e92ea69626de9556d064fa50fde854107eee264e86bbede4d5bf0e14054da

data/app/pb_kits/playbook/_playbook.scss

@@ -114,5 +114,6 @@
 @import './utilities/hover';
 @import './utilities/text_align';
 @import './utilities/overflow';
+@import './utilities/truncate';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     className,
     data = {},
     htmlOptions = {},
-    name = null,
+    name = undefined,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     status = null,
     dark = false,
   } = props
-  const dataProps: {[key: string]: any} = buildDataProps(data)
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   )
 
   const initials = name && firstTwoInitials(name)
-  dataProps['data-initials'] = initials
+  dataProps['data-initials'] = (initials as string)
 
   const [error, setError] = useState(false)
   const handleError = () => setError(true)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
   linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
-  data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
 }
 
-const AvatarActionButton = (props: AvatarActionButtonProps) => {
+const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
   const {
     action = 'add',
     aria = {},

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -23,7 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
   return prop?.default || undefined;
 };
 
-const Background = (props: BackgroundProps) => {
+const Background = (props: BackgroundProps): React.ReactElement => {
   const {
     alt = '',
     aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps) => {
   
   return (
     <Tag
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      alt={alt}
-      className={classes}
-      id={id}
-      style={backgroundStyle}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        alt={alt}
+        className={classes}
+        id={id}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -19,7 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
-const Badge = (props: BadgeProps) => {
+const Badge = (props: BadgeProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -19,9 +19,9 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
-  id: any;
-  pointStart: number | any;
+  id: string;
+  pointStart: number;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   subTitle?: string;
   title: string;
   type?: string;

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

@@ -37,15 +37,10 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
-  
-  &[class*=_truncate] {
-    @include body_truncate;
-  }
 
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
-      @include body_truncate;
     }
   }
 

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/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>,