playbook_ui 10.25.0.pre.alpha3 → 10.25.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f77b529bab08c5e077aa7829bad23c1de7d37fca85d285242bfde38a561aa9d
-  data.tar.gz: 21085e13de08866111e1027e7e7e076d0ff8431ef1f488b403cc16e5280a0e69
+  metadata.gz: 8be95036b076c3fbe7bdf059733bbcd3fe287731d38c671214167c465094b5f5
+  data.tar.gz: 38dd59dbdaddae412dc128c5aa33b149ef671365c3e4a4e836a9c6bbc2e5d5a6
 SHA512:
-  metadata.gz: 859a417e402619765fefd8bae70cd9299f3594ab4837c5891bd2ccbc1b08a9555b6c4761a81e3f6bb41768b915aa36e36c423bc0c48721b3578668948740c425
-  data.tar.gz: 34600c5b6ffc0ec0c27378d2572137b96716e6ff1f0df6c0cfd96992807fd4708b125e78acc213da8059dc8ff703258fc44776014e1e1d50baa78c169d4900f2
+  metadata.gz: a4b2119448938ad199474fdbfabe230b62a759b5c36b51e732aa21ed2468996aee3d99e7898c7087a1998ef2a93bd0d7df9c5c2758048107b547d379c1efae9e
+  data.tar.gz: 4263f916d2e535d823ff3fe1421ec2e0a43a201d56f0520057d77b2efa93fd029332d42deafaf3a460ca2dab4fe6eddfaae6108e66390c46cbd0deeb3265dae2

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_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_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_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_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/utilities/_background_colors.scss

@@ -1,5 +1,5 @@
 //=====================================
-// DEPRECIATED COLOR CLASS
+// DEPRICATED COLOR CLASS
 //
 // Updated color override classes are generated at:
 // app/pb_kits/playbook/utilities/_colors.scss

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -6,6 +6,14 @@
   @return mix($bg_dark, $color, $percentage);
 }
 
+@function lightenText($color, $threshold: 47) {
+  $text_color: $text_lt_default;
+  @if ((type-of($color) == color) and (lightness($color) < $threshold)) {
+    $text_color: $text_dk_default;
+  }
+  @return $text_color;
+}
+
 @mixin background-color($colors-list) {
   @each $name, $color in $colors-list {
     .#{$name} {

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.24.0"
-  VERSION = "10.25.0.pre.alpha3"
+  PREVIOUS_VERSION = "10.25.0"
+  VERSION = "10.25.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.25.0.pre.alpha3
+  version: 10.25.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-11 00:00:00.000000000 Z
+date: 2022-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -101,14 +101,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.50.0
+        version: 2.48.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.50.0
+        version: 2.48.0
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -379,8 +379,8 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_description.md
 - app/pb_kits/playbook/pb_bar_graph/docs/example.yml
 - app/pb_kits/playbook/pb_bar_graph/docs/index.js
-- app/pb_kits/playbook/pb_body/_body.jsx
 - app/pb_kits/playbook/pb_body/_body.scss
+- app/pb_kits/playbook/pb_body/_body.tsx
 - app/pb_kits/playbook/pb_body/_body_mixins.scss
 - app/pb_kits/playbook/pb_body/body.html.erb
 - app/pb_kits/playbook/pb_body/body.rb
@@ -814,6 +814,8 @@ files:
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
@@ -995,8 +997,8 @@ files:
 - app/pb_kits/playbook/pb_hashtag/docs/index.js
 - app/pb_kits/playbook/pb_hashtag/hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/hashtag.rb
-- app/pb_kits/playbook/pb_highlight/_highlight.jsx
 - app/pb_kits/playbook/pb_highlight/_highlight.scss
+- app/pb_kits/playbook/pb_highlight/_highlight.tsx
 - app/pb_kits/playbook/pb_highlight/docs/_description.md
 - app/pb_kits/playbook/pb_highlight/docs/_footer.md
 - app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb
@@ -2153,7 +2155,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- MIT
+- ISC
 metadata: {}
 post_install_message:
 rdoc_options: []
@@ -2166,9 +2168,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.6
 signing_key: