playbook_ui 10.25.0.pre.treeshaking1 → 10.25.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aefb339d6c0b9b986bb10dd16b045f6012cb6b2819ee1d924a1651aa2d4e13fd
-  data.tar.gz: d658abf6db94843cb077d1a93647c0e0b2b11586eb1a745b922cf1612532e8ab
+  metadata.gz: 5787076b1b4c285e67e4c71a89d98b6c78768fb2ed6fb92500a53a9b336eff2b
+  data.tar.gz: 9f83e659e948d30274f39cb02b6806c620a7cfa44aaab529481e8a1bd29c1f8f
 SHA512:
-  metadata.gz: 0507f95acaa25aeb202b2b801ded2a85f58d88a425b363b9b5906a9497c9ff869cc8b49cd30034d74f455393dca771fe606904b71b5056b89c20b040fd7d39c3
-  data.tar.gz: b19ca53b6d78eeea25a9098f847ac43f8baf617352d5c5dccc037cf2e196e15abbff9e9050738054c9bd856f1e3c925901fb6efcaca3393223559ae56de98272
+  metadata.gz: a8d3751c1bf0bd5fd88870161c5f92ed1437007b3931d422e86206bb46e437aa285d18289817e7304d0ad7cd23b8889c8cbb9b4e51be3e63f316ea817f67bb8e
+  data.tar.gz: d64982803deee6c1a08c949ca493d7fc74b4e8b56047190df2d1fc98c1db9922f8a95066cd63897430150da2784ccdddd597af50662a9e0ab818ac83318dce8a

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_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_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/engine.rb

@@ -2,6 +2,7 @@
 
 require "action_view/railtie"
 require "webpacker/react"
+require "view_component"
 
 module Playbook
   class Engine < ::Rails::Engine

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.24.0"
-  VERSION = "10.25.0.pre.treeshaking1"
+  VERSION = "10.25.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.25.0.pre.treeshaking1
+  version: 10.25.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-04 00:00:00.000000000 Z
+date: 2022-04-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -57,16 +57,16 @@ dependencies:
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '2.6'
+        version: 2.6.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '2.6'
+        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
@@ -99,16 +99,16 @@ dependencies:
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '2.47'
+        version: 2.48.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '2.47'
+        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
@@ -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: