playbook_ui 10.25.0.pre.alpha3 → 10.26.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f77b529bab08c5e077aa7829bad23c1de7d37fca85d285242bfde38a561aa9d
-  data.tar.gz: 21085e13de08866111e1027e7e7e076d0ff8431ef1f488b403cc16e5280a0e69
+  metadata.gz: 2189d1ada1c39446fecca8e67776e0e5b086e79d842fbfaf5ed800313c81f5df
+  data.tar.gz: 4640c10e464c670714c67a3875412fcda9c79f06edbbea2a50cdd5ab330889ed
 SHA512:
-  metadata.gz: 859a417e402619765fefd8bae70cd9299f3594ab4837c5891bd2ccbc1b08a9555b6c4761a81e3f6bb41768b915aa36e36c423bc0c48721b3578668948740c425
-  data.tar.gz: 34600c5b6ffc0ec0c27378d2572137b96716e6ff1f0df6c0cfd96992807fd4708b125e78acc213da8059dc8ff703258fc44776014e1e1d50baa78c169d4900f2
+  metadata.gz: 6d133f2ab6121d7f7a3895fe907a51f3713c48d1463a80cba165ae6c5fc6e1f64d6bf9ccb2b368f7f17304eee8e8a36a40c02a00b456044f4199e15c698e9d80
+  data.tar.gz: 9515dbe37dab4c9d0a5a6e90c7074a3641ec9e31669b4fdd502e3b12e5ca6bf541ecf36eea0ec711c52710f3bd1cec017b3be76d68cb36b6e15aeb690c7185f9

data/app/pb_kits/playbook/data/menu.yml

@@ -20,6 +20,7 @@ kits:
     - gauge
     - legend
     - line_graph
+    - treemap_chart
   - dialog
   - filter
   - fixed_confirmation_toast

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 Walkthrough } from './pb_walkthrough/_walkthrough'
 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'
@@ -98,9 +97,11 @@ export { default as Title } from './pb_title/_title'
 export { default as TitleCount } from './pb_title_count/_title_count'
 export { default as TitleDetail } from './pb_title_detail/_title_detail'
 export { default as Toggle } from './pb_toggle/_toggle'
+export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

data/app/pb_kits/playbook/pb_body/{_body.jsx → _body.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -9,13 +7,13 @@ import { globalProps } from '../utilities/globalProps'
 import Highlight from '../pb_highlight/_highlight'
 
 type BodyProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  children?: array<React.ReactChild>,
+  children?: React.ReactChild[],
   color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
-  data?: object,
-  highlightedText?: array<string>,
+  data?: {[key: string]: string},
+  highlightedText?: string[],
   highlighting?: boolean,
   id?: string,
   status?: 'negative' | 'neutral' | 'positive',
@@ -24,30 +22,31 @@ type BodyProps = {
   variant: null | 'link',
 }
 
-const Body = (props: BodyProps) => {
+const Body = (props: BodyProps): React.ReactElement => {
   const {
     aria = {},
-    className,
     children,
+    className,
     color = '',
     data = {},
     highlightedText = [],
     highlighting = false,
-    id,
-    status,
+    id = '',
+    status = null,
     tag = 'div',
-    text,
+    text = '',
     variant = null,
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )
-  const Tag = `${tag}`
+  const Tag: React.ReactElement | any = `${tag}`
+
 
   return (
     <Tag
@@ -56,11 +55,17 @@ const Body = (props: BodyProps) => {
         className={classes}
         id={id}
     >
-      <If condition={highlighting}>
-        <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
-        <Else />
-        { text || children }
-      </If>
+      { highlighting && (
+         <Highlight
+             highlightedText={highlightedText}
+             text={text}
+         >
+            {children}
+         </Highlight>
+      ) }
+      { !highlighting && (
+        text || children
+      ) }
     </Tag>
   )
 }

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -2,3 +2,4 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
+

data/app/pb_kits/playbook/pb_caption/{_caption.jsx → _caption.tsx}

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: object,
+  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;
 
-const Caption = (props: CaptionProps) => {
+const Caption = (props: CaptionProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -32,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     text,
     variant = null,
   } = props
+
   const tagOptions = [
     'h1',
     'h2',

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

@@ -3,12 +3,14 @@
 import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { ProductColors, CategoryColors, BackgroundColors } from '../types'
 
 type CardPropTypes = {
   aria?: object,
-  background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation" | "none",
+  background?: BackgroundColors | ProductColors | "none",
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
@@ -24,7 +26,7 @@ type CardPropTypes = {
 }
 
 type CardHeaderProps = {
-  headerColor?: string,
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
   padding?: string,

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

@@ -1,6 +1,5 @@
 @import "card_mixin";
 
-
 [class^=pb_card_kit] {
   @include pb_card;
 
@@ -30,6 +29,9 @@
     @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
+        [class^=pb_body_kit] {
+          color: lightenText($color_value);
+        }
       }
     }
     &[class*=_white] {

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

@@ -9,7 +9,6 @@ $pb_card_border_width: 1px;
 $pb_card_border_radius: $border_rad_heavier;
 $pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
 $pb_card_highlight_size: 4px;
-$pb_card_header_colors: map-merge($category_colors, $product_colors);
 $pb_card_header_border_radius: $border_rad_heavy;
 
 $additional_colors: (
@@ -19,6 +18,7 @@ $additional_colors: (
   "none": none,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
+$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
- 
-<br>  
+
+<br>
 
   <%= pb_rails("card", props: { padding: "none", header: true}) do %>
     <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
@@ -11,7 +11,7 @@
     <% end %>
   <% end %>
 
-<br> 
+<br>
 
   <%= pb_rails("card", props: { padding: "none", header: true}) do %>
     <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
@@ -25,7 +25,7 @@
 
 <br>
 
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %> 
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
 
 <br>
 
@@ -48,3 +48,29 @@
     Body
   <% end %>
 <% end %>
+
+<br>
+
+<%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
+
+<br>
+
+<%= pb_rails("card", props: { padding: "none", header: true}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
+    <%= pb_rails("body", props: { text: "White" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { padding: "none", header: true}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
+    <%= pb_rails("body", props: { text: "Dark" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

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

@@ -111,6 +111,58 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
+      <br />
+
+      <Title
+          {...props}
+          size={4}
+          tag="h4"
+          text="Background Colors"
+      />
+
+      <br />
+
+      <Card
+          {...props}
+          padding="none"
+      >
+        <Card.Header
+            headerColor="white"
+        >
+          <Body
+              {...props}
+              text="White"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body
+              {...props}
+              text="Body"
+          />
+        </Card.Body>
+      </Card>
+
+      <br />
+
+      <Card
+          {...props}
+          padding="none"
+      >
+        <Card.Header
+            headerColor="dark"
+        >
+          <Body
+              {...props}
+              text="Dark"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body
+              {...props}
+              text="Body"
+          />
+        </Card.Body>
+      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers passes category and product colors only. List of all category and product colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

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

@@ -1,8 +1,8 @@
 /* @flow */
 
 import React, { useEffect, useRef } from 'react'
-import Body from '../pb_body/_body.jsx'
-import Icon from '../pb_icon/_icon.jsx'
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -209,6 +209,43 @@ const highchartsDarkTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -209,6 +209,43 @@ const highchartsTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-multi-comp */
+/* @flow */
+
+import React, { useState } from "react";
+import { FileUpload, List, ListItem } from "../..";
+
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+);
+
+const FileUploadCustomDescription = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([]);
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files]);
+  };
+
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
+          acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default FileUploadCustomDescription;

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md

@@ -0,0 +1 @@
+Sometimes you may want to create a custom description that is easier for users to read. In this case, you can use the `acceptedFilesDescription` prop.

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

@@ -5,4 +5,5 @@ examples:
   react:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
+  - file_upload_custom_description: Add your one accepted files description
   

data/app/pb_kits/playbook/pb_file_upload/docs/index.js

@@ -1,2 +1,3 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
+export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_highlight/{_highlight.jsx → _highlight.tsx}

@@ -1,28 +1,30 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type HighlightProps = {
   className?: string,
-  data?: string,
+  data?: {[key: string]: string},
   id?: string,
-  children?: React.Node,
+  children?: React.ReactChild[] | string,
   text?: string,
-  highlightedText?: array<string>,
-}
+  highlightedText?: string[],
+} & GlobalProps
 
-const Highlight = (props: HighlightProps) => {
+const Highlight = (props: HighlightProps): React.ReactElement => {
   const {
-    className = 'pb_highlight_kit',
     children,
-    data,
-    id,
-    text,
+    className = 'pb_highlight_kit',
+    data = {},
     highlightedText = ['highlight'],
+    id = '',
+    text = '',
   } = props
+
+  const highlightContent: any = text || children;
+
   return (
     <Highlighter
         autoEscape
@@ -31,7 +33,7 @@ const Highlight = (props: HighlightProps) => {
         highlightTag="mark"
         id={id}
         searchWords={highlightedText}
-        textToHighlight={text || children}
+        textToHighlight={highlightContent}
     />
   )
 }

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx

@@ -15,11 +15,11 @@ const HighlightDefault = (props) => (
       {' '}
       {'Hello this is a'}
       {' '}
-      <Highlight>{' highlight wrapped'}</Highlight>
+      <Highlight text=" highlight wrapped"/>
     </Body>
     <br />
     <Body
-        highlightedText={['highlighted in the Body Kit ']}
+        highlightedText={['highlighted', 'Body Kit ']}
         highlighting
         text="This is text highlighted in the Body Kit using the text prop."
         {...props}

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -1,9 +1,8 @@
 /* @flow */
 /*eslint-disable flowtype/space-before-type-colon */
 
-import moment from 'moment'
+import moment from 'moment-timezone'
 import 'moment-strftime'
-import 'moment-timezone'
 
 type DateTimeType = {
   value: String | Date,

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -2,7 +2,7 @@
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React, { forwardRef } from 'react'
-import Body from '../pb_body/_body.jsx'
+import Body from '../pb_body/_body'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_title/{_title.jsx → _title.tsx}

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
 type TitleProps = {
-  aria?: object,
-  children?: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children?: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
-}
+} & GlobalProps
 
-const Title = (props: TitleProps) => {
+const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -33,14 +31,14 @@ const Title = (props: TitleProps) => {
     variant = null,
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, variant, color),
+    buildCss('pb_title_kit', `size_${size}`, variant, color),
     globalProps(props),
     className,
   )
-  const Tag = `${tag}`
+  const Tag: React.ReactElement | any = `${tag}`
 
   return (
     <Tag