playbook_ui 11.19.0 → 11.20.0.pre.alpha.passthrough1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb389dc6dd09b729a058710f9dbaffccf1c70f4994dabad0e8c877fdfb15160a
-  data.tar.gz: 5f8d2f82abeccdb16d5a8e0896db8c9c701b524f1fdfd86ac0cdb3e296dc5b16
+  metadata.gz: c0a373f8f9816ad4f827295f7861d7eb09a895860d1f9214e15cce8b250719e4
+  data.tar.gz: 66d3fe725f2b20d4f848707cc08be5e5efb1753efe4ff2f6fe3da5778af6adf3
 SHA512:
-  metadata.gz: 4ef7df4f5c65d61d144d0b552b11c7205451cb77d50dff97c181af2175de03374ee98d18505c0765b219b217caef55f5714425585a27f7d0d2597efa50a1af21
-  data.tar.gz: '0068b2d612e89e7932399e089b1478faac10bd3a710e29ef4f555b6e57060236ff0a4f346c15ae61bd08e2a925b136174901803b55a066d1c1d6397b1379f1ee'
+  metadata.gz: da9d63bdd58257e7ec57560934076227af38918805cf0b81a2faa2084595ba6d55edc4dfc363601fa877bf9d7d28ef0762a6b32b1519bb77def36bdae5044378
+  data.tar.gz: 9a868a827e05f6b702172a1f3c0e7299bbd92da128ef7e122832cace0468f1fd673b81f7fc11f77728c4459f4baef420f078101b749e953a8011c3c10c3e868c

data/app/pb_kits/playbook/_playbook.scss

@@ -56,6 +56,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_paginate/paginate';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

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

@@ -104,3 +104,4 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+  - paginate

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,4 +1,5 @@
 @import "./body_mixins";
+@import "../tokens/titles";
 
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
@@ -12,13 +13,21 @@
       }
     }
   }
-
   @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
     &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
+  b, strong {
+    @include pb_title_4
+  }
 
+  a {
+    color: $primary;
+    &:hover {
+      color: $text_lt_default;
+    }
+  }
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);

data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("body") do %>
+    <b>This text is using the <%="<b>"%> tag</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag</strong>
+    <br />
+    <br />
+    <a href="#">This text is using the <%="<a>"%> tag</a>
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Body } from '../..'
+
+const BodyStyled = (props) => {
+  return (
+    <div>
+      <Body {...props}>
+        <b>{"This text is using the <b> tag"}</b>
+        <br />
+        <br />
+        <strong>{"This text is using the <strong> tag"}</strong>
+        <br />
+        <br />
+        <a href="#">{"This text is using the <a> tag"}</a>
+      </Body>
+    </div>
+  )
+}
+
+export default BodyStyled

data/app/pb_kits/playbook/pb_body/docs/_body_styled.md

@@ -0,0 +1 @@
+Playbook styles the `b`, `strong` and `a` tags within the body kit to match Playbook's design system.

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

@@ -2,6 +2,8 @@ examples:
   rails:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags
   react:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags

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

@@ -1,2 +1,3 @@
 export { default as BodyLight } from './_body_light.jsx'
 export { default as BodyBlock } from './_body_block.jsx'
+export { default as BodyStyled } from './_body_styled.jsx'

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

@@ -8,18 +8,18 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type CheckboxProps = {
   aria?: {[key: string]: string},
   checked?: boolean,
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   indeterminate?: boolean,
-  name: string,
-  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
-  tabIndex: number,
-  text: string,
-  value: string,
+  name?: string,
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  tabIndex?: number,
+  text?: string,
+  value?: string,
 } & GlobalProps
 
 const Checkbox = (props: CheckboxProps): JSX.Element => {
@@ -34,7 +34,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     id,
     indeterminate = false,
     name = '',
-    onChange = () => {},
+    onChange = () => { void 0 },
     tabIndex,
     text = '',
     value = '',

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -9,7 +9,7 @@
 
 
 // Dialog Animations
-
+// Dialog Animations for fading in and out from the center
 @keyframes modalFadeIn {
 	from {
 		transform: translate3d(0, -100%, 0);
@@ -32,6 +32,53 @@
 	}
 }
 
+// Dialog Animations for fading in and out from the left side
+@keyframes modalFadeInLeft {
+	from {
+		transform: translate3d(-100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes modalFadeOutLeft {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(-50%, 0, 0);
+		opacity: 0;
+	}
+}
+
+
+// Dialog Animations for fading in and out from the right side
+@keyframes modalFadeInRight {
+	from {
+		transform: translate3d(100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes modalFadeOutRight {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(50%, 0, 0);
+		opacity: 0;
+	}
+}
+
 @keyframes overlayFade {
 	from {
 		opacity: 0;
@@ -63,7 +110,7 @@
 	$medium: 500px;
 	$large: 800px;
 	$xlarge: 1150px;
-	$animation-duration: 0.2s;
+	$animation-duration: .2s;
 	$z-index: 100;
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
@@ -87,6 +134,24 @@
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
 	
+	&[class*="_left"] {
+		animation-name: modalFadeInLeft;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutLeft;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
+
+	&[class*="_right"] {
+		animation-name: modalFadeInRight;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutRight;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
+	
 	&[class*="_status_size"] {
 		width: $status_size;
 	}
@@ -98,6 +163,7 @@
 	&[class*="_md"] {
 		width: $medium;
 	}
+	
 
 	&[class*="_lg"] {
 		width: $large;
@@ -111,7 +177,7 @@
 		opacity: $opacity_visible;
 	}
 
-	&_before_close {
+	&[class*="_before_close"] {
 		animation-name: modalFadeOut;
 		animation-duration: $animation-duration;
 		opacity: $opacity_hidden;

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -71,7 +71,7 @@ const Dialog = (props: DialogProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size)),
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -20,7 +20,7 @@ module Playbook
                     default: ""
 
       def classname
-        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
       end
 
       def full_height_style

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -25,6 +25,7 @@ function DialogTest({ props }) {
           onClose={close}
           onConfirm={() => setIsLoading(!isLoading)}
           opened={isOpen}
+          placement="right"
           portalClassName="portal"
           size={size}
           text={text}
@@ -98,3 +99,14 @@ test("renders the buttons", async () => {
   cleanup()
 });
 
+test("renders the right placement dialog", async () => {
+
+  const { queryByText } = render(<DialogTest />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
+
+  cleanup()
+});
+

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -12,6 +12,7 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
+  customMessage?: string,
   data?: {[key: string]: string | number},
   acceptedFilesDescription?: string,
   maxSize?: number,
@@ -28,6 +29,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     accept = null,
     acceptedFilesDescription = '',
     className,
+    customMessage,
     data = {},
     maxSize,
     onFilesAccepted = noop,
@@ -77,10 +79,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
 
   const getDescription = () => {
-    let msg = ""
-    accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
-    if (maxSize) msg += ` ${maxFileSizeText}`
-    return msg
+    return customMessage
+      ? customMessage
+      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
 
   return (

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

@@ -1,8 +1,7 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone). 
+This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
 
 ### Props
 
 `accept: [String]` Use this prop to set the list of valid file types
+`customMessage: [String]` Use this prop to set a custom message, replacing the default text
 `onFilesAccepted: Function` The callback function, providing the list of dropped files
-
-

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

@@ -0,0 +1,40 @@
+/* @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 FileUploadCustomMessage = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          customMessage="Playbook is awesome!"
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadCustomMessage

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

@@ -1,10 +1,10 @@
 examples:
 
   rails:
-  
+
   react:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
+  - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  

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

@@ -1,4 +1,5 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
+export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -38,3 +38,15 @@ test('displays max file size text', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
 })
+
+test('displays custom message', () => {
+  render(
+    <FileUpload
+        customMessage={'Hello world!'}
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Hello world!')
+})

data/app/pb_kits/playbook/pb_paginate/_paginate.scss

@@ -0,0 +1,69 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+
+.pb_pagination {
+  display: inline-block;
+  border-radius: $border_rad_light;
+  border: 1px solid $border_light;
+  background-color: $white;
+  padding: 3px 0px 3.6px 0px;
+  margin: 10px 0;
+  li {
+    display: inline;  
+    > a, li > span {
+    padding: 7px 13px;
+    text-decoration: none;
+    margin-left: -1px;
+    border: 0 !important;
+  }}
+  li:first-child > a, li:first-child > span  {
+    padding: 7px 13px;
+    margin-left: .5px;
+    border-right: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  li:last-child > a, li:last-child > span {
+    padding: 7px 13px;
+    margin-right: .5px;
+    border-left: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  a {
+    color: $text_lt_default !important;
+    font-size: $text_small;
+    font-weight: $regular;
+    border: none;
+
+    &:hover {
+      background-color: $active_light;
+      color: $primary !important;
+      border-radius: $border_rad_light;
+    }
+
+    &:focus {
+      outline: 1px solid $primary !important;
+      border-radius: $border_rad_light;
+      outline-offset: -1px;
+    }
+  }
+  .active > span {
+    background-color: $primary !important;
+    border-radius: $border_rad_light;
+    color: #fff;
+    padding: 7px 13px;
+    border: 0 !important;
+    text-decoration: none;
+    font-weight: $bold;
+    font-size: $text_small;
+
+    &:hover {
+      box-shadow: $shadow_deeper;
+    }
+  }
+  .disabled > span {
+    padding: 7px 10px;
+    font-size: $text_small;
+  }
+}

data/app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("title", props: { size: 4, text: "Default will_paginate"}) %>
+<%= will_paginate @users %>
+<%= pb_rails("body") do %>
+  You need to add: <code> require 'will_paginate'</code> in your app to use.
+<% end %>
+<br><br>
+
+<%= pb_rails("title", props: { size: 4, text: "Playbook Renderer"}) %>
+<%= will_paginate @users, renderer: Playbook::Pagination::Rails %>
+<%= pb_rails("body") do %>
+  You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
+<% end %>
+<br><br>
+
+<%= pb_rails("title", props: { size: 4, text: "Playbook Kit (Passthrough)"}) %>
+<%= pb_rails("paginate", props: { strategy: "will_paginate", model: @users, view: self }) %>
+<%= pb_rails("body") do %>
+  Same...You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
+<% end %>

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

@@ -0,0 +1,6 @@
+examples:
+  
+  rails:
+  - paginate_default: Default
+  
+  

data/app/pb_kits/playbook/pb_paginate/paginate.html.erb

@@ -0,0 +1,5 @@
+<%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
+
+<%# Couldn't get this working %>
+<%# Need a Rails Dev to look %>
+<%# <%= eval(object.strategy) object.model, renderer: Playbook::Pagination::Rails %>

data/app/pb_kits/playbook/pb_paginate/paginate.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPaginate
+    class Paginate < ::Playbook::KitBase
+      prop :strategy # Need to add protection
+      prop :model # Need to add protection
+      prop :view # Need to add protection
+
+      def classname
+        generate_classname("pb_paginate")
+      end
+
+      def url_for(options = nil)
+        view.url_for(options)
+      end
+    end
+  end
+end

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

@@ -10,16 +10,16 @@ type RadioProps = {
   aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   label: string,
-  name: string,
-  value: string,
-  text: string,
+  name?: string,
+  value?: string,
+  text?: string,
   onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -50,7 +50,7 @@
         border-color: $error;
       }
       .pb_select_kit_caret {
-        top: 35%;
+        top: 25px;
       }
     }
   }