playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ee8e7e286c406057d392df39a78b5386ccab676d22aa828c988d7ee705ef968
-  data.tar.gz: ee9a52e005b2d69eebf688975b86bb2e6690cbc36213745e099c53a9148b71f7
+  metadata.gz: f0bc057462f84066058ae751edb8a5800772fabfae7826217c54ecf10e87e78d
+  data.tar.gz: a82a61433089122a5b9844f07b865f933bd8eda322ccf039edbb7661f319ce54
 SHA512:
-  metadata.gz: d56962a2defca43883e75b975d30829a1222671ebcc55b08258ec18d581937cd73252ee556ca113788388ff6f1dcc3952ca0f446ae1eba5c91acac03d5131e5e
-  data.tar.gz: 2295ee61c45223e3000b277bec93ac715d0f0cd134494b2d746172f93af2d979e9edc9ef76be7bfe67a689dca148063e3bac03f4ae3050e5db05f59ea4907f76
+  metadata.gz: '095fa0bda11e86865f7be0b1f7f24ed36ac48e44b1535bdd3a056afa2189e03dd3d6c02130b615c0475cdcaa1fd58013c6d50dab71a2893b8e16ec6c0e2cdcef'
+  data.tar.gz: d8d7173f5164053988cefc4789d7af043435562c91bab3f6e63d5a3684b9455580af4cb8e05ec124d764a79b31dccd669a491b524b8fd1917a5f366a9b2daca6

data/app/pb_kits/playbook/pb_avatar/_avatar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+export declare type AvatarProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    id?: string;
+    imageAlt?: string;
+    imageUrl?: string;
+    name?: string;
+    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs";
+    status?: "away" | "offline" | "online";
+} & GlobalProps;
+declare const Avatar: (props: AvatarProps) => React.ReactElement;
+export default Avatar;

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type AvatarActionButtonProps = {
+    action?: "add" | "remove";
+    aria?: {
+        [key: string]: string;
+    };
+    linkAriaLabel?: string;
+    className?: string;
+    dark?: boolean;
+    data?: Object;
+    id?: string;
+    imageAlt?: string;
+    imageUrl?: string;
+    linkUrl?: string;
+    name?: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    placement?: string;
+    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs";
+};
+declare const AvatarActionButton: (props: AvatarActionButtonProps) => JSX.Element;
+export default AvatarActionButton;

data/app/pb_kits/playbook/pb_background/_background.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BackgroundProps = {
+    alt?: string;
+    aria?: {
+        [key: string]: string;
+    };
+    backgroundColor?: ResponsiveProp<string> | 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21' | 'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' | 'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' | 'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' | 'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle';
+    backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain';
+    backgroundPosition?: ResponsiveProp<string> | string;
+    backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit';
+    imageUrl?: ResponsiveProp<string> | string;
+    children?: React.ReactChild[] | React.ReactNode;
+    className?: string;
+    customColor?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col';
+    transition?: 'fade' | 'blur' | 'scale';
+} & GlobalProps;
+declare type ResponsiveProp<T> = T | {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    default?: T;
+};
+declare const Background: (props: BackgroundProps) => JSX.Element;
+export default Background;

data/app/pb_kits/playbook/pb_badge/_badge.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BadgeProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    closeProps?: {
+        onClick?: React.MouseEventHandler<HTMLSpanElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>;
+    };
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    removeIcon?: boolean;
+    removeOnClick?: React.MouseEventHandler<HTMLSpanElement>;
+    rounded?: boolean;
+    text?: string;
+    variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning";
+} & GlobalProps;
+declare const Badge: (props: BadgeProps) => JSX.Element;
+export default Badge;

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+declare type BarGraphProps = {
+    align?: "left" | "right" | "center";
+    axisTitle: string;
+    dark?: boolean;
+    xAxisCategories: [];
+    yAxisMin: number;
+    yAxisMax: number;
+    chartData: {
+        name: string;
+        data: number[];
+    }[];
+    className?: string;
+    id: any;
+    pointStart: number | any;
+    subTitle?: string;
+    title: string;
+    type?: string;
+    legend?: boolean;
+    toggleLegendClick?: boolean;
+    height?: string;
+    colors: string[];
+    layout?: "horizontal" | "vertical" | "proximate";
+    verticalAlign?: "top" | "middle" | "bottom";
+    x?: number;
+    y?: number;
+    aria?: {
+        [key: string]: string;
+    };
+    data?: {
+        [key: string]: string;
+    };
+};
+declare const BarGraph: ({ aria, data, align, axisTitle, dark, chartData, className, colors, id, pointStart, subTitle, type, title, xAxisCategories, yAxisMin, yAxisMax, legend, toggleLegendClick, height, layout, verticalAlign, x, y, ...props }: BarGraphProps) => React.ReactElement;
+export default BarGraph;

data/app/pb_kits/playbook/pb_body/_body.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BodyProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    children?: React.ReactChild[] | React.ReactChild;
+    color?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    highlightedText?: string[];
+    highlighting?: boolean;
+    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;
+declare const Body: (props: BodyProps) => React.ReactElement;
+export default Body;

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.d.ts

@@ -0,0 +1,12 @@
+declare type BreadCrumbItemProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: object;
+    id?: string;
+    component?: "a" | "span";
+    [x: string]: any;
+};
+declare const BreadCrumbItem: (props: BreadCrumbItemProps) => JSX.Element;
+export default BreadCrumbItem;

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type BreadCrumbsProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: object;
+    id?: string;
+    text?: string;
+    children?: React.ReactChild[] | React.ReactNode;
+};
+declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element;
+export default BreadCrumbs;

data/app/pb_kits/playbook/pb_button/_button.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type EventHandler = (React.MouseEventHandler<HTMLElement>);
+declare type ButtonPropTypes = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string | string[];
+    count?: number;
+    data?: {
+        [key: string]: string;
+    };
+    disabled?: boolean;
+    fixedWidth?: boolean;
+    form?: string;
+    fullWidth?: boolean;
+    highlight?: boolean;
+    icon?: string;
+    iconRight?: boolean;
+    id?: string;
+    link?: string;
+    loading?: boolean;
+    newWindow?: boolean;
+    onClick?: EventHandler;
+    tabIndex?: number;
+    size?: 'sm' | 'md' | 'lg';
+    target?: string;
+    text?: string;
+    type?: 'inline' | null;
+    htmlType?: 'submit' | 'reset' | 'button' | undefined;
+    value?: string | null;
+    variant?: 'primary' | 'secondary' | 'link' | 'reaction';
+    wrapperClass?: string;
+} & GlobalProps;
+declare const Button: (props: ButtonPropTypes) => JSX.Element;
+export default Button;

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ButtonToolbarProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    connected?: boolean;
+    data?: object;
+    id?: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    orientation?: "horizontal" | "vertical";
+    text?: string;
+    variant?: "primary" | "secondary";
+};
+declare const ButtonToolbar: (props: ButtonToolbarProps) => JSX.Element;
+export default ButtonToolbar;

data/app/pb_kits/playbook/pb_caption/_caption.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type CaptionProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    color?: "default" | "light" | "lighter" | "success" | "error" | "link";
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption";
+    text?: string;
+    variant?: null | "link";
+} & GlobalProps;
+declare const Caption: (props: CaptionProps) => React.ReactElement;
+export default Caption;

data/app/pb_kits/playbook/pb_card/_card.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors';
+declare type CardPropTypes = {
+    aria?: {
+        [key: string]: string;
+    };
+    background?: BackgroundColors | ProductColors | "none";
+    borderNone?: boolean;
+    borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded";
+    children: React.ReactChild[] | React.ReactChild | number;
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    highlight?: {
+        position?: "side" | "top";
+        color?: string;
+    };
+    length?: number;
+    padding?: string;
+    selected?: boolean;
+    tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav";
+} & GlobalProps;
+declare type CardHeaderProps = {
+    headerColor?: BackgroundColors | ProductColors | CategoryColors | "none";
+    headerColorStriped?: boolean;
+    children: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    padding?: string;
+} & GlobalProps;
+declare type CardBodyProps = {
+    children: React.ReactChild[] | React.ReactChild | string;
+    className?: string;
+    padding?: string;
+} & GlobalProps;
+declare const Card: {
+    (props: CardPropTypes): JSX.Element;
+    Header: (props: CardHeaderProps) => JSX.Element;
+    Body: (props: CardBodyProps) => JSX.Element;
+};
+export default Card;

data/app/pb_kits/playbook/pb_checkbox/_checkbox.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type CheckboxProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    checked?: boolean;
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    error?: boolean;
+    id?: string;
+    indeterminate?: boolean;
+    name?: string;
+    onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    text?: string;
+    value?: string;
+} & GlobalProps;
+declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export default Checkbox;

data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.d.ts

@@ -0,0 +1,2 @@
+declare module "*.scss";
+declare module "highcharts-react-official";

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.d.ts

@@ -0,0 +1,35 @@
+declare type CircleChartProps = {
+    align?: "left" | "right" | "center";
+    aria: {
+        [key: string]: string;
+    };
+    chartData?: [];
+    children?: Node;
+    className?: string;
+    colors?: string[];
+    dark?: Boolean;
+    data?: Object;
+    dataLabelHtml?: string;
+    dataLabels?: boolean;
+    height?: string;
+    id?: string;
+    innerSize?: "sm" | "md" | "lg" | "none";
+    legend?: boolean;
+    maxPointSize?: number;
+    minPointSize?: number;
+    rounded?: boolean;
+    startAngle?: number;
+    style?: string;
+    title?: string;
+    tooltipHtml: string;
+    useHtml?: boolean;
+    zMin?: number;
+    layout?: "horizontal" | "vertical" | "proximate";
+    verticalAlign?: "top" | "middle" | "bottom";
+    x?: number;
+    y?: number;
+    borderColor?: string;
+    borderWidth?: number;
+};
+declare const CircleChart: ({ align, aria, rounded, borderColor, borderWidth, chartData, children, className, colors, dark, data, dataLabelHtml, dataLabels, height, id, innerSize, legend, maxPointSize, minPointSize, startAngle, style, title, tooltipHtml, useHtml, zMin, layout, verticalAlign, x, y, ...props }: CircleChartProps) => JSX.Element;
+export default CircleChart;

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type CircleIconButtonProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    disabled?: boolean;
+    icon: string;
+    id?: string;
+    link?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    newWindow?: boolean;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    variant?: 'primary' | 'secondary' | 'link';
+};
+declare const CircleIconButton: (props: CircleIconButtonProps) => React.ReactElement;
+export default CircleIconButton;

data/app/pb_kits/playbook/pb_collapsible/_collapsible.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconSizes } from "../pb_icon/_icon";
+declare type CollapsibleProps = {
+    children?: JSX.Element | [] | any;
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    collapsed?: boolean;
+    data?: object;
+    icon?: string | string[];
+    iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
+    iconSize?: IconSizes;
+    onIconClick?: () => void;
+    onClick?: () => void;
+    id?: string;
+};
+declare const Collapsible: {
+    ({ aria, className, children, collapsed, data, icon, iconColor, iconSize, onIconClick, onClick, id, ...props }: CollapsibleProps): JSX.Element;
+    Main: ({ children, className, cursor, ...props }: {
+        children: React.ReactNode | React.ReactNode[];
+        className?: string;
+        cursor?: string;
+        dark?: boolean;
+        onClick?: () => void;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    Content: ({ children, className, ...props }: import("./child_kits/CollapsibleContent").CollapsibleContentProps) => JSX.Element;
+};
+export default Collapsible;

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

@@ -0,0 +1,2 @@
+export declare const showElement: (elem: any) => void;
+export declare const hideElement: (elem: any) => void;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type CollapsibleContentProps = {
+    children?: React.ReactNode[] | React.ReactNode | string;
+    className?: string;
+};
+declare const CollapsibleContent: ({ children, className, ...props }: CollapsibleContentProps) => JSX.Element;
+export default CollapsibleContent;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type CollapsibleMainProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    cursor?: string;
+    dark?: boolean;
+    onClick?: () => void;
+};
+declare const CollapsibleMain: ({ children, className, cursor, ...props }: CollapsibleMainProps) => React.ReactElement;
+export default CollapsibleMain;

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbCollapsible
     class CollapsibleContent < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
       def data
         Hash(values[:data]).merge(
           collapsible_content: true
@@ -10,7 +12,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_collapsible_content_kit", "toggle-content", padding, separator: " ")
+        generate_classname("pb_collapsible_content_kit", "toggle-content", collapsed ? nil : "is-visible", padding, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_collapsible/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CollapsibleContext: import("react").Context<{}>;
+export default CollapsibleContext;

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb

@@ -0,0 +1,22 @@
+<div onclick="toggleCollapsibleById('collapsed-toggle')">
+    <%= pb_rails("button", props: { text: "Toggle Collapsible", variant:"link"}) %>
+</div>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", collapsed: false, id:"collapsed-toggle" }) do %>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
+      <br><br>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+  <script>
+  const toggleCollapsibleById = (id) => {
+    document.dispatchEvent(new CustomEvent(id));
+  };
+  </script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md

@@ -0,0 +1,3 @@
+The `collapsed` prop (boolean; default = true) handles the collapsed state of a collapsible. Set it to 'false' and the collapsible will render in an expanded state on page load.
+
+You can also control the collapsed state using an external control (like a button). To do this, you must first apply a unique id to the collapsible/collapsible_content child element. You can then attach an eventListner to the external control of your choice, pass it the id as an argument and use `document.dispatchEvent(new CustomEvent(id))` to trigger the action. See the code example below for details.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb

@@ -0,0 +1,40 @@
+<%= pb_rails("button", props: { variant:"link", text: "Toggle All", id: "toggle-button-example"}) %>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-1" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-2" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-2" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-3" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-3" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const collapsibles = document.querySelectorAll('[id^="collapse-toggle"]');
+    const button = document.querySelector("#toggle-button-example");
+    button.addEventListener("click", () => {
+      collapsibles.forEach(collapsible => {
+        document.dispatchEvent(new CustomEvent(collapsible.id));
+      })
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md

@@ -0,0 +1 @@
+The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action.

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

@@ -5,6 +5,8 @@ examples:
   - collapsible_size: Icon Size
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
+  - collapsible_external_controls: Toggle Collapsible With External Controls
+  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
 
   react:
   - collapsible_default: Default

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -15,6 +15,10 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.toggleElement(this.target)
     })
     this.displayDownArrow()
+    // Listen for a custom event to toggle the collapsible
+    document.addEventListener(`${this.target.id}`, () => {
+      this.toggleElement(this.target)
+    })
   }
 
   get target() {

data/app/pb_kits/playbook/pb_collapsible/useCollapsible.d.ts

@@ -0,0 +1,2 @@
+declare const useCollapsible: (initial?: boolean) => any[];
+export default useCollapsible;

data/app/pb_kits/playbook/pb_contact/_contact.d.ts

@@ -0,0 +1,13 @@
+declare type ContactProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    contactDetail?: string;
+    contactType?: string;
+    contactValue: string;
+    data?: object;
+    id?: string;
+};
+declare const Contact: (props: ContactProps) => JSX.Element;
+export default Contact;

data/app/pb_kits/playbook/pb_currency/_currency.d.ts

@@ -0,0 +1,24 @@
+declare type CurrencyProps = {
+    abbreviate?: boolean;
+    align?: 'center' | 'left' | 'right';
+    amount: string;
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    decimals?: 'default' | 'matching';
+    emphasized?: boolean;
+    id?: string;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    symbol?: string;
+    variant?: 'default' | 'light' | 'bold';
+    unit?: string;
+    unstyled?: boolean;
+};
+declare const Currency: (props: CurrencyProps) => JSX.Element;
+export default Currency;

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.d.ts

@@ -0,0 +1,2 @@
+declare const mapColors: (array: string[]) => string[];
+export default mapColors;

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProps } from './themeTypes';
+declare const highchartsDarkTheme: ThemeProps;
+export { highchartsDarkTheme };

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProps } from './themeTypes';
+declare const highchartsTheme: ThemeProps;
+export { highchartsTheme };