RubyGems - playbook_ui - Versions diffs - 11.19.0 → 11.20.0.pre.alpha.focus1 - Mend

playbook_ui 11.19.0 → 11.20.0.pre.alpha.focus1

Files changed (42) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb389dc6dd09b729a058710f9dbaffccf1c70f4994dabad0e8c877fdfb15160a
-  data.tar.gz: 5f8d2f82abeccdb16d5a8e0896db8c9c701b524f1fdfd86ac0cdb3e296dc5b16
+  metadata.gz: dd5b6e17a1e5ff8a0149e8d809b67ebd4c1bd6ade257db72ed9fe4716c7f0488
+  data.tar.gz: 4f6b2edf940d88f2113516a34e7288c18e68bde88cb367a49e3407c8e5d506a9
 SHA512:
-  metadata.gz: 4ef7df4f5c65d61d144d0b552b11c7205451cb77d50dff97c181af2175de03374ee98d18505c0765b219b217caef55f5714425585a27f7d0d2597efa50a1af21
-  data.tar.gz: '0068b2d612e89e7932399e089b1478faac10bd3a710e29ef4f555b6e57060236ff0a4f346c15ae61bd08e2a925b136174901803b55a066d1c1d6397b1379f1ee'
+  metadata.gz: 7400acc711d9fa10b999850ed8c02282b3e6f9dcee98745dec7df79bdb7e57842d3751cae96b9d248ac08bf807daa035af6b429b3ea93c4d7157f6bf0e156392
+  data.tar.gz: f54bc46b74b4f15ad295303b73413b8f2e7e17adc078420b2b21970f470770ee2dcdc9203d58fec00fb28e826f8e7f0a4065c28f8e798efd60d3d582250e7e7e

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_button/_button.scss CHANGED Viewed

@@ -29,11 +29,6 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
-    @media (hover:hover) {
-      &:hover {
-        color: $text_lt_default;
-      }
-    }
   }
   // Disabled =================

data/app/pb_kits/playbook/pb_button/_button_mixins.scss CHANGED Viewed

@@ -5,6 +5,7 @@
 @import "../tokens/spacing";
 @import "../tokens/transition";
 @import "../tokens/typography";
+@import "../tokens/accessibility";
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
@@ -62,11 +63,12 @@ $pb_button_border_width: 0px;
     margin-left: $space_xs;
   }
-  &:hover, &:focus {
+  &:hover {
     outline: none;
   }
+  @include focus;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
@@ -86,6 +88,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover;
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
@@ -97,6 +103,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_3));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+    }
   }
 }
@@ -107,6 +117,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: $text_lt_default;
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $primary_action);
     }
   }
 }
@@ -116,6 +131,9 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($charcoal, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
+  &:focus {
+    outline: none;
+  }
 }
 // Block =======================
@@ -145,6 +163,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
@@ -156,6 +178,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_2));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($white, 0.2), $white);
+    }
   }
 }
@@ -166,6 +192,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: rgba($white, $opacity_6)
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb CHANGED Viewed

@@ -1,2 +1,2 @@
-<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
-<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonIconOptions = (props) => (
       <Button
           fixedWidth
           icon='plus'
+          marginRight='lg'
           text="Icon on Left"
           {...props}
       />
@@ -14,6 +15,7 @@ const ButtonIconOptions = (props) => (
           fixedWidth
           icon='chevron-right'
           iconRight
+          marginRight='lg'
           text="Icon on Right"
           {...props}
       />

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
+        marginRight='lg'
         text="A Tag Button"
         {...props}
     />
@@ -13,6 +14,7 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
+        marginRight='lg'
         newWindow
         text="Open in New Window"
         {...props}
@@ -22,6 +24,7 @@ const ButtonLink = (props) => (
         aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
+        marginRight='lg'
         text="A Tag Button Disabled"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="Button Primary"
         {...props}
     />
@@ -13,6 +14,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="Button Secondary"
         variant="secondary"
         {...props}
@@ -21,6 +23,7 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
         text="A Tag Button Disabled"
         variant="link"
         {...props}

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx CHANGED Viewed

@@ -4,18 +4,21 @@ import { Button } from '../../'
 const ButtonSize = (props) => (
   <div>
     <Button
+        marginRight='lg'
         size="sm"
         text="Button sm size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="md"
         text="Button md size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="lg"
         text="Button lg size"
         {...props}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_radio/_radio.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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