RubyGems - playbook_ui - Versions diffs - 11.19.0.pre.typeahead1 → 11.20.0 - Mend

playbook_ui 11.19.0.pre.typeahead1 → 11.20.0

Files changed (38) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1239957037bcd6ef4b8211bd071fce1cc7b57bb2751f00fcbbe305665f024b24
-  data.tar.gz: 6b6a529a7c84b1dbfd2911947ff891abe8eb04935cccd2623265dfa0da73cae4
+  metadata.gz: 44219343f1cdaffaa416fa4dd981884638d123658f40c607e52c920714e5a798
+  data.tar.gz: 899dd9d3fa76fd138d2657cf64ce6470c681ede3c0bb34b37481a9a6dac17b2c
 SHA512:
-  metadata.gz: 747395a9c410e99207bdbb7d0bede2028503ec675e8754bcff0e1cf92579d3fd7e66134ad5c99417c751451968ab4f1ab9093b2036bf40985480b7a8707dfc51
-  data.tar.gz: ae572fac37a574c478dea054368416465644b6163a3593068f7559bf3f35516c9851e3db67f84d43cd2f8d69d330bf38dd8231f15381e6199c01df198ea9b5de
+  metadata.gz: 16c710bf1423492bbadabea26f9ef6819622547cbbbba4ffb9add95404e270eff04639b9575b73e6a19001a94dbafa535a84aeb11e49548067626afc7b6e1bd3
+  data.tar.gz: a707281c6a517f9bd0df3e50aac97b5d83b6f92a12858a85b090c647543b1c11ac9f0675d2de44a3e6652314a39e6bd16d5a96907f758741df112c54bdb55fcf

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_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_collapsible/child_kits/CollapsibleContent.tsx CHANGED Viewed

@@ -23,15 +23,15 @@ const CollapsibleContent = ({
   const contentSpacing = globalProps(props, { padding })
   return (
-    <div className={classnames(contentCSS, className, contentSpacing)}>
-      <AnimateHeight
-          duration={300}
-          height={context.collapsed ? 0 : 'auto'}
-          id="bottom-section"
-      >
+    <AnimateHeight
+        duration={400}
+        height={context.collapsed ? 0 : 'auto'}
+        id="bottom-section"
+    >
+      <div className={classnames(contentCSS, className, contentSpacing)}>
         {children}
-      </AnimateHeight>
-    </div>
+      </div>
+    </AnimateHeight>
   )
 }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, noop } from '../utilities/props'
@@ -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,
@@ -38,13 +40,20 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     onFilesAccepted(files)
   }, [onFilesAccepted])
-  const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
+  type DropZoneProps = {
+    getRootProps: () => DropzoneRootProps & any;
+    getInputProps: () => DropzoneInputProps & any;
+    isDragActive: boolean;
+    rejectedFiles: File[];
+  }
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
-  const prevRejected: any = useRef();
+  const prevRejected = useRef<File[] | null>(null);
   const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
@@ -70,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_list/_list.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+import React from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+type ListProps = {
+  aria?: { [key: string]: string };
+  borderless?: boolean;
+  className?: string;
+  children: React.ReactNode[] | React.ReactNode;
+  dark?: boolean;
+  data?: object;
+  id?: string;
+  layout: "" | "left" | "right";
+  ordered?: boolean;
+  role?: string;
+  tabIndex?: number;
+  text?: string;
+  size?: string;
+  variant?: string;
+  xpadding: boolean;
+};
+const List = (props: ListProps) => {
+  const {
+    aria = {},
+    borderless = false,
+    children,
+    className,
+    dark = false,
+    data = {},
+    id,
+    layout = "",
+    ordered = false,
+    role,
+    size = "",
+    tabIndex,
+    xpadding = false,
+    variant,
+    text,
+  } = props;
+  const layoutClass: { [key: string]: string } = {
+    left: "layout_left",
+    right: "layout_right",
+    default: "",
+  };
+  const childrenWithProps = React.Children.map(
+    children,
+    (child: React.ReactElement) => {
+      return React.cloneElement(child, { text, variant });
+    }
+  );
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_list_kit", layoutClass[layout], size, {
+      dark: dark,
+      borderless: borderless,
+      ordered: ordered,
+      xpadding: xpadding,
+    }),
+    globalProps(props),
+    className
+  );
+  return (
+    <div className={classes}>
+      {ordered ? (
+        <ol
+          {...ariaProps}
+          {...dataProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ol>
+      ) : (
+        <ul
+          {...ariaProps}
+          {...dataProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ul>
+      )}
+    </div>
+  );
+};
+export default List;

data/app/pb_kits/playbook/pb_list/{_list_item.jsx → _list_item.tsx} RENAMED Viewed

@@ -1,17 +1,15 @@
-/* @flow */
-import React, { type Node } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 type ListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
   id?: string,
-  tabIndex?: string,
+  tabIndex?: number,
 }
 const ListItem = (props: ListItemProps) => {