playbook_ui 8.1.0.pre.alpha1 → 8.1.0

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -1,17 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import CircleIconButton from './_circle_icon_button'
-
-test('default test', () => {
-  render(
-    <CircleIconButton
-        data={{ testid: 'default-test' }}
-        icon="plus"
-    />
-  )
-
-  const kit = screen.getByTestId('default-test')
-
-  expect(kit).toHaveClass('pb_circle_icon_button_kit')
-})

data/app/pb_kits/playbook/pb_dialog/_close_icon.jsx

@@ -1,23 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { Icon } from '../'
-
-type CloseIconProps = {
-  onClose: () => mixed,
-}
-
-export const CloseIcon = (props: CloseIconProps) => {
-  const { onClose } = props
-  return (
-    <div
-        className="pb_dialog_close_icon"
-        onClick={onClose}
-    >
-      <Icon
-          fixedWidth
-          icon="times"
-      />
-    </div>
-  )
-}

data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
-  <% end %>
-<% end %>

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

@@ -1,142 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import Modal from 'react-modal'
-import { Button } from '../'
-import DialogHeader  from './child_kits/_dialog_header'
-import DialogFooter from './child_kits/_dialog_footer'
-import DialogBody from './child_kits/_dialog_body'
-import { DialogContext } from './_dialog_context'
-
-type DialogProps = {
-  aria?: object,
-  cancelButton?: string,
-  children: array<React.ReactNode> | React.ReactNode | string,
-  className?: string,
-  closeable: boolean,
-  confirmButton?: string,
-  data?: object,
-  id?: string,
-  onCancel?: () => void,
-  onChange?: () => void,
-  onClose?: () => void,
-  onConfirm?: () => void,
-  opened: boolean,
-  shouldCloseOnOverlayClick: boolean,
-  size?: "sm" | "md" | "lg" | "content",
-  text?: string,
-  title?: string,
-  trigger?: string
-}
-
-const Dialog = (props: DialogProps) => {
-  const {
-    aria = {},
-    cancelButton,
-    confirmButton,
-    className,
-    data = {},
-    id,
-    size = 'md',
-    children,
-    opened,
-    onCancel = () => {},
-    onConfirm = () => {},
-    onClose = () => {},
-    shouldCloseOnOverlayClick = true,
-    text,
-    title,
-    trigger,
-  } = props
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
-  const dialogClassNames = {
-    base: classnames('pb_dialog', buildCss('pb_dialog', size)),
-    afterOpen: 'pb_dialog_after_open',
-    beforeClose: 'pb_dialog_before_close',
-  }
-
-  const overlayClassNames = {
-    base: 'pb_dialog_overlay',
-    afterOpen: 'pb_dialog_overlay_after_open',
-    beforeClose: 'pb_dialog_overlay_before_close',
-  }
-
-  const classes = classnames(
-    buildCss('pb_dialog_wrapper'),
-    globalProps(props),
-    className
-  )
-
-  const api = {
-    onClose: trigger ? function(){
-      setTriggerOpened(false)
-    } : onClose,
-  }
-
-  const [triggerOpened, setTriggerOpened] = useState(false),
-    modalIsOpened = trigger ? triggerOpened : opened
-
-  if (trigger) {
-    const modalTrigger = document.querySelector(trigger)
-    modalTrigger.addEventListener('click', () => {
-      setTriggerOpened(true)
-      document.querySelector('#cancel-button').addEventListener('click', () => {
-        setTriggerOpened(false)
-      })
-    }, { once: true })
-  }
-
-  return (
-    <DialogContext.Provider value={api}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-          id={id}
-      >
-        <Modal
-            ariaHideApp={false}
-            className={dialogClassNames}
-            closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
-            isOpen={modalIsOpened}
-            onRequestClose={onClose}
-            overlayClassName={overlayClassNames}
-            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-        >
-          <If condition={title}>
-            <Dialog.Header>{title}</Dialog.Header>
-          </If>
-          <If condition={text}>
-            <Dialog.Body>{text}</Dialog.Body>
-          </If>
-
-          <If condition={cancelButton && confirmButton}>
-            <Dialog.Footer>
-              <Button onClick={onConfirm}>{confirmButton}</Button>
-              <Button
-                  id="cancel-button"
-                  onClick={onCancel}
-                  variant="link"
-              >
-                {cancelButton}
-              </Button>
-            </Dialog.Footer>
-          </If>
-
-          {children}
-        </Modal>
-      </div>
-    </DialogContext.Provider>
-  )
-}
-Dialog.Header = DialogHeader
-Dialog.Body = DialogBody
-Dialog.Footer = DialogFooter
-
-export default Dialog

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

@@ -1,133 +0,0 @@
-@import "../tokens/positioning";
-@import "../tokens/colors";
-@import "../pb_card/card_mixin";
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/animation-curves";
-
-
-
-// Dialog Animations 
-
-@keyframes modalFadeIn {
-	from {
-		transform: translate3d(0, -100%, 0);
-		opacity: 0;
-	}
-	to {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-}
-
-@keyframes modalFadeOut {
-	from {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	to {
-		transform: translate3d(0, -50%, 0);
-		opacity: 0;
-	}
-}
-
-@keyframes overlayFade {
-	from {
-		opacity: 0;
-		transform: translateY(0);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@keyframes overlayFadeOut {
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
-}
-
-// Dialog Styles
-
-.pb_dialog {
-
-	// Local Variables
-	$gutter: $space_lg;
-	$small: 300px;
-	$medium: 500px;
-	$large: 800px;
-	$animation-duration: 0.2s;
-	$z-index: 100;
-	$opacity_visible: 1;
-	$opacity_hidden: 0;
-
-	@include pb_card;
-	box-shadow: $shadow_deepest;
-	border: 0;
-	max-height: calc(100vh - #{$gutter * 2});
-	max-width: calc(100vw - #{$gutter * 2});
-	overflow: scroll;
-	animation-name: modalFadeIn;
-	animation-duration: $animation-duration;
-	outline: none;
-	animation-timing-function: $easeInOutQuint;
-
-	&[class*="_sm"] {
-		width: $small;
-	}
-
-	&[class*="_md"] {
-		width: $medium;
-	}
-
-	&[class*="_lg"] {
-		width: $large;
-	}
-
-	&_body_open {
-		overflow: hidden;
-	}
-
-	&_after_open {
-		opacity: $opacity_visible;
-	}
-
-	&_before_close {
-		animation-name: modalFadeOut;
-		animation-duration: $animation-duration;
-		opacity: $opacity_hidden;
-	}
-
-	&_close_icon {
-		cursor: pointer;
-	}
-
-	&_overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba($bg_dark, $opacity_4);
-		z-index: $z-index;
-		animation-name: overlayFade;
-		animation-duration: $animation-duration;
-
-		&_after_open {
-			opacity: $opacity_visible;
-		}
-		&_before_close {
-			animation-name: overlayFadeOut;
-			animation-duration: $animation-duration;
-			opacity: $opacity_hidden;
-		}
-	}
-}

data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx

@@ -1,3 +0,0 @@
-import React from 'react'
-
-export const DialogContext = React.createContext()

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx

@@ -1,21 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
-
-// Body component
-const DialogBody = (props: DialogBodyProps) => {
-  const { children, padding = 'sm', className } = props
-  const bodyCSS = buildCss('dialog_body')
-  const bodySpacing = globalProps(props, { padding })
-
-  return (
-    <div className={classnames(bodyCSS, bodySpacing, className)}>
-      {children}
-    </div>
-  )
-}
-
-export default DialogBody

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx

@@ -1,36 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
-import { Flex, SectionSeparator } from '../../'
-
-// Footer component
-const DialogFooter = (props: DialogFooterProps) => {
-  const {
-    children,
-    padding = 'sm',
-    className,
-    spacing = 'between',
-    separator = false,
-  } = props
-  const footerCSS = buildCss('dialog_footer')
-  const footerSpacing = globalProps(props, { padding })
-
-  return (
-    <>
-      <If condition={separator}>
-        <SectionSeparator />
-      </If>
-      <Flex
-          className={classnames(footerCSS, footerSpacing, className)}
-          spacing={spacing}
-      >
-        {children}
-      </Flex>
-    </>
-  )
-}
-
-export default DialogFooter

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx

@@ -1,68 +0,0 @@
-/* @flow */
-
-import React, { useContext } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
-import { Flex, SectionSeparator } from '../../'
-import { CloseIcon } from '../_close_icon'
-import { DialogContext } from '../_dialog_context'
-
-type DialogHeaderProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode | string,
-  className?: string,
-  closeable: boolean,
-  data?: object,
-  id?: string,
-  padding?: string,
-  separator: boolean,
-  spacing?: string,
-  text?: string,
-  title?: string,
-}
-
-const DialogHeader = (props: DialogHeaderProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    padding = 'sm',
-    spacing = 'between',
-    closeable = true,
-    separator = true,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const api = useContext(DialogContext)
-  const headerCSS = buildCss('dialog_header')
-  const headerSpacing = globalProps(props, { padding })
-
-  /* eslint-disable react/jsx-handler-names */
-
-  return (
-    <>
-      <Flex
-          {...ariaProps}
-          {...dataProps}
-          className={classnames(headerCSS, headerSpacing, className)}
-          spacing={spacing}
-      >
-        {children}
-        <If condition={closeable}>
-          <CloseIcon
-              className="close-icon"
-              onClose={api.onClose}
-          />
-        </If>
-      </Flex>
-      <If condition={separator}>
-        <SectionSeparator />
-      </If>
-    </>
-  )
-}
-
-export default DialogHeader