playbook_ui 12.36.0.pre.alpha.PLAY936momentjs1058 → 12.36.0.pre.alpha.PLAY942collapsiblenav21035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d6ba302e7c1343468a7d972cbe86df211d78a2dab3814ff174596a0bbfbe99fc
-  data.tar.gz: f320274ec35c2c940ed8b193ba07d98a8e88200e85f9470464e14521e08998c1
+  metadata.gz: 6db34cdefea717b8e05435f34ffeca2768916aafc09c5fc75fe585cf29eeed83
+  data.tar.gz: '079ed7c7c64c2c7ee0825b84398cb909e08d08badd9cab8fb16870c4391210f0'
 SHA512:
-  metadata.gz: 9abd50b6c82c1141abc3746c7cc948d54041a2a0f5159b346cd78c8aeaa29155475eb6631dc07c7a6604783d3373db4ceba0ea588ab10ce16063091f54ca04e0
-  data.tar.gz: 17d3c0565e38899df31d90a96b32038556f6f94b7c099167ae7caf02b048a52604c6d16547ee2b16eb70874fe1db0157194b266da8b2b879a50f827425576373
+  metadata.gz: 96a3770480378c8930a578bf3c021aebcce6cf4dd8f45b9c6de753bfa67768334db24beede7c1f24d64b522cb4607c174bd7b120a4c24eada9d71c68427d70d0
+  data.tar.gz: 3708ce113f29d42deeaea57d6e166676fe51d9e9618a1d11383e82a2bf8658497b62dadd111ba2a2332ca5edf69f56cab283639da997399c07b3be04cda70093

data/app/pb_kits/playbook/index.js

@@ -129,4 +129,5 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'

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

@@ -10,10 +10,3 @@ examples:
   - badge_rounded: Rounded
   - badge_colors: Colors
   - badge_notification: Notification
-
-  swift:
-  - badge_default_swift: Rectangle
-  - badge_rounded_swift: Rounded
-  - badge_colors_swift: Colors
-  - badge_notification_swift: Notification
-  - badge_props_swift: ""

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
+import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -16,20 +17,15 @@ type CollapsibleProps = {
   className?: string,
   collapsed?: boolean,
   data?: object,
-  icon?: string | string[]
+  icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
-  iconSize?: IconSizes
+  iconSize?: IconSizes,
+  iconClick?: ()=> void,
+  onClick?: ()=> void,
   id?: string,
 }
 
-const useCollapsible = (initial = false) => {
-  const [collapsed, setCollapsed] = useState(initial)
 
-  return [
-    collapsed,
-    () => setCollapsed((t) => !t),
-  ]
-}
 
 const Collapsible = ({
   aria = {},
@@ -40,10 +36,17 @@ const Collapsible = ({
   icon,
   iconColor = 'default',
   iconSize,
+  iconClick,
+  onClick,
   id,
   ...props
 }: CollapsibleProps) => {
-  const [isCollapsed, collapse] = useCollapsible(collapsed)
+  const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
+
+  useEffect(()=> {
+   setIsCollapsed(collapsed)
+  },[collapsed])
+
   const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
@@ -62,9 +65,8 @@ const Collapsible = ({
     globalProps(props),
     className
   )
-
   return (
-    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse, icon, iconSize, iconColor }}>
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
       <div
           {...ariaProps}
           {...dataProps}

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

@@ -33,7 +33,7 @@ type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   cursor?: string,
-
+  onClick?: ()=> void
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
@@ -42,9 +42,10 @@ type IconProps = {
   icon?: string[] | string
   iconColor?: IconColors
   iconSize?: IconSizes
+  iconClick?: ()=> void
 }
 
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
+const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
   const color = colorMap[iconColor]
 
   const showIcon = (icon: string |string[]) => {
@@ -54,6 +55,13 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
     return icon
   }
 
+  const handleIconClick = (e:any) => {
+    if (iconClick) {
+    e.stopPropagation();
+    iconClick()
+    }
+  }
+
   return (
     <>
       {collapsed ? (
@@ -61,6 +69,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
           className="icon_wrapper"
           key={icon ? showIcon(icon)[0] : "chevron-down"}
           style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
         </div>
@@ -69,6 +78,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor }: IconProps) => {
           className="icon_wrapper"
           key={icon ? showIcon(icon)[1] : "chevron-up"}
           style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
           <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
         </div>
@@ -83,13 +93,18 @@ const CollapsibleMain = ({
   cursor = 'pointer',
   ...props
 }: CollapsibleMainProps): React.ReactElement=> {
-  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
+  const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })
 
+  const handleCollapsibleClick = (e:any) => {
+    toggle();
+    onClick && onClick(e)
+  }
+
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>
-      <div onClick={context.collapse as (() => void)}>
+      <div onClick={(e)=>handleCollapsibleClick(e)}>
         <Flex
             spacing="between"
             vertical="center"
@@ -97,10 +112,11 @@ const CollapsibleMain = ({
           <FlexItem>{children}</FlexItem>
           <FlexItem>
             <ToggleIcon
-                collapsed={context.collapsed as () => void}
-                iconColor={context.iconColor as IconColors}
-                iconSize={context.iconSize as IconSizes}
-                icon={context.icon as string[] | string}
+                collapsed={collapsed as () => void}
+                iconColor={iconColor as IconColors}
+                iconSize={iconSize as IconSizes}
+                icon={icon as string[] | string}
+                iconClick={iconClick}
             />
             </FlexItem>
         </Flex>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -9,7 +9,7 @@
         <%= content.presence %>
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
-        <div style="color: <%= object.icon_color %>">
+        <div style="color: <%= object.icon_color %>" class="icon_wrapper" >
         <% if object.icon.present? %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
           <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,8 +1,17 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible, useCollapsible, Button } from '../..'
 
-const CollapsibleIcons = () => (
-  <Collapsible icon={['plus','minus']}>
+const CollapsibleIcons = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+  <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? "Expand" : "Collapse"}
+  </Button>
+  <Collapsible collapsed={isCollapsed}
+      icon={['plus','minus']}
+  >
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
@@ -14,6 +23,8 @@ const CollapsibleIcons = () => (
       </div>
     </Collapsible.Content>
   </Collapsible>
-)
+  </>
+  )
+}
 
 export default CollapsibleIcons

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

@@ -4,10 +4,10 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  # - collapsible_icons: Custom Icons
+  - collapsible_icons: Custom Icons

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

@@ -0,0 +1,14 @@
+import {useState} from 'react';
+
+const useCollapsible = (initial= true) => {
+    const [collapsed, setCollapsed] = useState(initial)
+
+    const toggle = () => setCollapsed((prev) => !prev)
+      return [
+      collapsed,
+      toggle,
+      setCollapsed as any,
+    ]
+  }
+
+  export default useCollapsible

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
+import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: Date;
+  value: string | Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,11 +37,12 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const weekday = DateTime.toWeekday(value);
-  const month = DateTime.toMonth(value);
-  const day = DateTime.toDay(value);
-  const year = DateTime.toYear(value);
-  const currentYear = new Date().getFullYear();
+  const dateTimestamp = new DateTime({ value: value });
+  const weekday = dateTimestamp.toWeekday();
+  const month = dateTimestamp.toMonth();
+  const day = dateTimestamp.toDay();
+  const year = dateTimestamp.toYear();
+  const currentYear = new Date().getFullYear().toString();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value={new Date('25 Dec 2020')}
+          value="2020-12-25"
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,20 +12,9 @@ const DateDefault = (props) => {
 
       <br />
 
-      <div style={{display: "flex", columnGap: 4}}>
-        <FormattedDate
-            size="sm"
-            value={"2012-08-03"}
-            {...props}
-        />
-        <Caption>{"(Hyphenated Date)"}</Caption>
-      </div>
-
-      <br />
-
       <FormattedDate
           size="sm"
-          value={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -34,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...props}
       />
 
@@ -48,21 +37,8 @@ const DateDefault = (props) => {
 
       <br />
 
-      <div style={{display: "flex", columnGap: 4}}>
-        <FormattedDate
-            value={"2012-08-03"}
-            {...props}
-        />
-        <Title
-            size={4}
-            text={"(Hyphenated Date)"}
-        />
-      </div>
-
-      <br />
-
       <FormattedDate
-          value={new Date('03 Aug 2012')}
+          value="2012-08-03"
           {...props}
       />
 
@@ -70,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('03 Dec 2017')}
+          value="2017-12-03"
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value={new Date('25 Dec 1995')}
+            value="1995-12-25"
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value={new Date('25 Dec 1995')}
+          value="1995-12-25"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from '../pb_kit/dateTime';
+import DateTime from "../pb_kit/dateTime";
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,16 +21,18 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
 
-const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
+const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
+  const date = new DateTime({ value: dateValue });
   if (includeYear) {
-    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
   } else {
-    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
+    return `${date.toMonth()} ${date.toDay()}`;
   }
 };
 
-const dateTimeIso = (dateValue: Date) => {
-  return DateTime.toIso(dateValue);
+const dateTimeIso = (dateValue: Date | string) => {
+  const date = new DateTime({ value: dateValue });
+  return date.toIso();
 };
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -50,17 +52,14 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light"
-                key={Math.random()}
-                tag="span"
-            >
+            <Body color="light" key={Math.random()} tag="span">
               <Icon
-                  className="pb_date_range_inline_icon"
-                  dark={dark}
-                  fixedWidth
-                  icon="calendar-alt"
-                  size={size}
-                  tag="span"
+                className="pb_date_range_inline_icon"
+                dark={dark}
+                fixedWidth
+                icon="calendar-alt"
+                size={size}
+                tag="span"
               />
             </Body>
           </>
@@ -79,7 +78,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date) => {
+  const renderTime = (date: Date | string) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -93,30 +92,24 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   return (
     <div
-        {...dataProps}
-        className={classnames(dateRangeClasses, globalProps(props), className)}
+    {...dataProps}
+      className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               <Icon
-                  className="pb_date_range_inline_arrow"
-                  fixedWidth
-                  icon="long-arrow-right"
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption dark={dark} tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
@@ -125,25 +118,18 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body dark={dark} tag="span">
               {renderTime(startDate)}
             </Body>
-            <Body color="light"
-                dark={dark}
-                tag="span"
-            >
+            <Body color="light" dark={dark} tag="span">
               <Icon
-                  className="pb_date_range_inline_arrow"
-                  dark={dark}
-                  fixedWidth
-                  icon="long-arrow-right"
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body dark={dark} tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: Date,
+  endDate: string,
   id?: string,
-  startDate: Date,
+  startDate: string,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,9 +29,7 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div {...dataProps}
-        className={css}
-    >
+    <div {...dataProps} className={css}>
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked