playbook_ui 13.16.0.pre.alpha.PLAY12002127 → 13.16.0.pre.alpha.fonttest1972

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10f6ad667414f5191e6eaabc5603c5d5087c13c16ec0a91da03ee49c5ebebe1d
-  data.tar.gz: b1a702d5294e18fa20c424c7aa4490c8d022e39c1f8ec70e7d91ce9b38887a96
+  metadata.gz: 7782df73f96c18ed21e4df25313508803ef68fd2619d0a2fc6c847a2fdc49da4
+  data.tar.gz: e5896ac58aefa1134be3591d23e988be1fc2d5e9deb7ecf1c7fcbb09f19fea32
 SHA512:
-  metadata.gz: 9deeaea331197080119774f32c135bdd8513ffac1cfd8f92606f515ebc9bfbf69c766a2883f5e9a3cb152df1c973029b7c56ba3c7fa43ebcc4ddd815dca550a3
-  data.tar.gz: b4cd197eb4b86f1b0a60e07f702e4761c08caf130b7112531944875e40d5c7166b09bba63ef43bbf53e1445c308fd5717953abf270f2b1bac88f3ebe5fc2e766
+  metadata.gz: ecc2162d89045d78b3ffbd89bc0f246b27da1d09aa5da04541d59638dc0869fd1dc8100bad2d3100fad4177b85602eee8cb750d4f4d1de8859c74613abac0ee8
+  data.tar.gz: eda05eb35ed90b8bb3edd30d5141e9200e4621dcbd5a79a8d6102023d3597f68ffebb84d172475860a1027b0b6c7dfafa0a83ef8fa86b4e4e1ce7ef4d43c6918

data/app/pb_kits/playbook/_playbook.scss

@@ -1,17 +1,16 @@
-
-
-@import 'pb_advanced_table/advanced_table';
-@import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
+@import 'pb_detail/detail';
+@import 'pb_title/title';
+@import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
@@ -21,22 +20,21 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
+@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
-@import 'pb_date_time/date_time';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
-@import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
-@import 'pb_flex/flex';
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -57,7 +55,6 @@
 @import 'pb_map/map';
 @import 'pb_map/pb_map_button_mixin';
 @import 'pb_message/message';
-@import 'pb_multi_level_select/multi_level_select';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
@@ -88,11 +85,9 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_time_range_inline/time_range_inline';
-@import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';
+@import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
-@import 'pb_title/title';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
@@ -101,6 +96,7 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/mixins';
@@ -119,3 +115,5 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
+
+@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -60,8 +59,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
-export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Map} from './pb_map/_map'
+export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -10,7 +10,7 @@ type FlexProps = {
   data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -15,7 +15,7 @@ type LabelValueProps = {
   aria?: { [key: string]: string };
   className?: string;
   dark?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   date?: Date;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -10,7 +10,7 @@ type LayoutPropTypes = {
   className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: boolean,
-  data?: Record<string, unknown>,
+  data?: object,
   full?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   position?: "left" | "right",
@@ -168,7 +168,6 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
       )}

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -16,8 +16,7 @@ test("render all color variants", () => {
   testValues.forEach((variant) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${variant}` }}
-          variant={variant}
-      />
+          variant={variant} />
     )
     expect(getByTestId(`test-${variant}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_md_left_${
@@ -34,8 +33,7 @@ test("render transparent class", () => {
 
   const { getByTestId } = render(
     <LayoutTest data={{ testid: `test-${id}` }}
-        variant={id}
-    />
+        variant={id} />
   )
   expect(getByTestId(`test-${id}`)).toHaveClass(
     `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -49,8 +47,7 @@ test("render all sizes variants", () => {
   testValues.forEach((size) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${size}` }}
-          size={size}
-      />
+          size={size} />
     )
     expect(getByTestId(`test-${size}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -87,8 +84,7 @@ test("render all layout variants", () => {
   testValues.forEach(({ layout, expected }) => {
     const { getByTestId } = render(
       <Layout data={{ testid: `test-${layout}` }}
-          layout={layout}
-      >
+          layout={layout}>
         <Layout.Body>
           <Card>{"Card content"}</Card>
         </Layout.Body>

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -12,7 +12,7 @@ type LegendProps = {
   className?: string,
   color?: string,
   dark?: boolean,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
         {
           prefixText && (
             <Title
-                dark={dark}
-                size={4}
-                tag="span"
-                text={` ${prefixText} `}
-            />
+              dark={dark}
+              size={4}
+              tag="span"
+              text={` ${prefixText} `}
+          />
           )
         }
         {` ${text} `}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
   return (
     <div
         className="Slides"
-        onTouchEnd={onTouchEnd} 
+        onTouchStart={onTouchStart} 
         onTouchMove={onTouchMove} 
-        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
     >
       {
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-left'
-            dark
+            dark={true}
             icon="chevron-left"
             onClick={arrowLeft}
             variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-right'
-            dark
+            dark={true}
             icon="chevron-right"
             onClick={arrowRight}
             variant="link"

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -16,7 +16,7 @@ export default function Thumbnail({
   alt,
   width,
   url,
-  onClick,
+  onClick = ()=>{},
   buttonRef,
 }: ThumbnailType): React.ReactElement {
   const activeClasses = classnames('Thumbnail', { active })

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -20,8 +20,8 @@ type CarouselType = {
 export default function Carousel({
   currentIndex,
   photos,
-  onClick,
-  onChange = () => undefined,
+  onClick = ()=>{},
+  onChange = ()=>{},
   setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
+          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}
-          setIndex={setIndex}
           urls={photos.map((photo) => photo.url)}
       />
       {photos.length > 1 ? (

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

@@ -61,31 +61,23 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
 
   const HeaderBody = () => (
     <React.Fragment>
-      <FlexItem flex="1"
-          marginLeft="sm"
-      >
+      <FlexItem flex="1" marginLeft="sm">
         <CircleIconButton
-            dark
-            icon={icon}
-            onClick={handleOnLightboxClose}
-            variant="link"
+          onClick={handleOnLightboxClose}
+          dark={true}
+          variant="link"
+          icon={icon}
         />
       </FlexItem>
       {title && text && (
         <FlexItem flex="5">
           <Flex justify="center">
-            <Flex align="center"
-                orientation="column"
-            >
+            <Flex align="center" orientation="column">
               {typeof title === "string" ? (
-                <Title dark
-                    paddingBottom="xxs"
-                    size={4}
-                    text={title}
-                />
+                <Title dark paddingBottom="xxs" size={4} text={title} />
               ) : (
-                <Flex className="custom-header"
-                    justify="center"
+                <Flex justify="center"
+                   className="custom-header"
                 >
                   {title}
                   </Flex>
@@ -94,8 +86,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
               {typeof text === "string" ? (
                 <Caption dark>{text}</Caption>
               ) : (
-                <Flex className="custom-header"
-                    justify="center"
+                <Flex justify="center"
+                className="custom-header"
                 >
                   {text}
                 </Flex>
@@ -107,12 +99,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <FlexItem flex="1">
         <Flex justify="end">
           <Button
-              className="nav-right-btn"
-              dark
-              htmlType="button"
-              onClick={onClickRight}
-              text={navRight}
-              variant="link"
+            className="nav-right-btn"
+            htmlType="button"
+            onClick={onClickRight}
+            dark
+            variant="link"
+            text={navRight}
           />
         </Flex>
       </FlexItem>
@@ -122,11 +114,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   return (
     <div className="carousel-header">
       <Flex
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classnames(headerCSS, headerSpacing, className)}
-          spacing={spacing}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(headerCSS, headerSpacing, className)}
+        spacing={spacing}
       >
         {closeable && <HeaderBody />}
         {children}

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

@@ -19,7 +19,7 @@ type LightboxType = {
   id?: string,
   photos: [],
   initialPhoto?: number,
-  onChange?: (index: number)=> void,
+  onChange?: (index: number)=> {},
   onClickRight?: () => void,
   onClose?: () => void,
   icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     id = '',
     initialPhoto = 0,
     photos,
-    onChange = () => undefined,
+    onChange = ()=>{},
     onClose,
     onClickRight,
     icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           <div className="carousel">
           <Lightbox.Header
               icon={icon}
-              navRight={navRight}
-              onClickRight={onClickRight}
               onClose={onClose}
+              onClickRight={onClickRight}
               text={description}
+              navRight={navRight}
               title={title}
           />
             {children}
             <Carousel
+                setIndex={setActivePhoto}
                 currentIndex={activePhoto}
                 onChange={handleOnSlide}
                 photos={photosMap}
-                setIndex={setActivePhoto}
             />
           </div>
         </div>

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

@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 type LineGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle?: string;
-  dark?: boolean;
+  dark?: Boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
 
   return (
     <HighchartsReact
-        containerProps={{
+      containerProps={{
         className: classnames(globalProps(props), className),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps
       }}
-        highcharts={Highcharts}
-        options={options}
+      highcharts={Highcharts}
+      options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -9,7 +9,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
     <div className={classes}>
       {ordered ? (
         <ol
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ol>
       ) : (
         <ul
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ul>

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -7,7 +7,7 @@ type ListItemProps = {
   aria?: { [key: string]: string },
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <Body color="light">
         <Icon
-            aria={{ label: 'loading icon' }}
-            fixedWidth
-            icon="spinner"
-            pulse
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
         />
         {' Loading'}
       </Body>

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -14,9 +14,9 @@ type MapProps = {
   id?: string,
   zoomBtns?: boolean,
   flyTo?: boolean, 
-  zoomInClick?: () => void,
-  zoomOutClick?: () => void,
-  flyToClick?: () => void,
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
 } & GlobalProps
 
 const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
       {
         zoomBtns ? (
           <Map.Controls
-              flyTo={flyTo}
-              flyToClick={flyToClick}
-              zoomBtns={zoomBtns}
-              zoomInClick={zoomInClick}
-              zoomOutClick={zoomOutClick}
+          flyTo={flyTo}
+          flyToClick={flyToClick}
+          zoomBtns={zoomBtns}
+          zoomInClick={zoomInClick}
+          zoomOutClick={zoomOutClick}
           />
          ) : null
       }

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
 type MapControlTypes = {
   zoomBtns?: boolean, 
   flyTo?: boolean, 
-  zoomInClick?: () => void,
-  zoomOutClick?: () => void,
-  flyToClick?: () => void,
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
   children?: React.ReactNode | React.ReactNode[]
 }
 
@@ -21,27 +21,19 @@ const MapControls = ({
   children,
 }: MapControlTypes) => {
   return (
-    <Flex className="custom-nav-control"
-        orientation="column"
-    >
+    <Flex className="custom-nav-control" orientation="column">
       {zoomBtns ? (
         <>
           <div className="custom-nav-control-zoom">
-            <Button className="map-zoom-in-button"
-                onClick={zoomInClick}
-            >
+            <Button className="map-zoom-in-button" onClick={zoomInClick}>
               <Icon icon="plus" />
             </Button>
-            <Button className="map-zoom-out-button"
-                onClick={zoomOutClick}
-            >
+            <Button className="map-zoom-out-button" onClick={zoomOutClick}>
               <Icon icon="minus" />
             </Button>
           </div>
           {flyTo ? (
-            <Button className="map-flyto-button"
-                onClick={flyToClick}
-            >
+            <Button className="map-flyto-button" onClick={flyToClick}>
               <Icon icon="eye" />
             </Button>
           ) : null}

data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx

@@ -3,15 +3,13 @@ import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 
 type MapCustomButtonTypes = {
-  onClick?: () => void;
+  onClick?: () => {};
   icon?: string;
 };
 
 const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
   return (
-    <Button className="pb_map-custom-button"
-        onClick={onClick}
-    >
+    <Button className="pb_map-custom-button" onClick={onClick}>
       <Icon icon={icon} />
     </Button>
   );

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -20,7 +20,7 @@ type MessageProps = {
   avatarUrl?: string,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,

data/app/pb_kits/playbook/pb_message/_message_mention.tsx

@@ -7,7 +7,7 @@ type MessageMentionProps = {
   aria: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {children}
     </div>