playbook_ui 10.23.0.pre.cachetest → 10.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d85218c29eb499b6f71d42d3b99307a6f5563671d4af53e4e3ac380779049bd
-  data.tar.gz: a8e220e1252b1b21fa92adbf601532c483164950169f7d6ce79e8d6e1f0e8b1e
+  metadata.gz: 6798a70ed76fb5f5a6e1b65a7906c237fed66449377b09cdd42ed93133fd9148
+  data.tar.gz: 4cff4b45c818dc8844e10a4ffa3a2708a4041d1277af4a2adb473138661a95c1
 SHA512:
-  metadata.gz: 986b7423cafa276bb7931cec9e32fcb57867f7a303b810babcc9524c0591314da7fcdc52f73c89726115c1543e553eec856b3c2ed73b0af9c53b3cc88ffa0c77
-  data.tar.gz: 0f245ee82c1ba4b42c6daa7a9444d7106f022a1510f6f2b7473430a2cddf6c6981d9a48f17bebc902990dca4829e84ebb5c1389d0436229ca1c7332418d1a370
+  metadata.gz: b4b508b9345c83fd51fb058bd42de424ffbe05df3ec05ca043e1803a434b1955648b3591e83b9a5894065e5138f4ac4d136d23471f3f26794a2625f80533df26
+  data.tar.gz: 0a3f4fa1c1fa89edbd972f83ef5c3379212dd17fb4dc4233af400068724b9a6c0cb3b27100818989b48cc70fab6b9a6e556f3694087b75be9b037e498e7a6e22

data/app/pb_kits/playbook/_playbook.scss

@@ -100,3 +100,4 @@
 @import './utilities/shadow';
 @import './utilities/line_height';
 @import './utilities/display';
+@import './utilities/flexbox';

data/app/pb_kits/playbook/index.js

@@ -118,6 +118,3 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
-
-// eslint-disable-next-line no-console
-console.log('CACHE BUSTED')

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/{_avatar.jsx → _avatar.tsx}

@@ -1,8 +1,5 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { map } from 'lodash'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -11,9 +8,9 @@ import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
 
 type AvatarProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   dark?: boolean,
   id?: string,
   imageAlt?: string,
@@ -23,8 +20,8 @@ type AvatarProps = {
   status: "away" | "offline" | "online",
 }
 
-const firstTwoInitials = (name) =>
-  map(name.split(/\s/), (name) => name[0])
+const firstTwoInitials = (name: string) =>
+  name.split(/\s/).map((name) => name[0])
     .join('')
     .substring(0, 2)
 
@@ -41,10 +38,10 @@ const Avatar = (props: AvatarProps) => {
     status = null,
     dark = false,
   } = props
-  const dataProps = buildDataProps(data)
-  const ariaProps = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )
@@ -55,6 +52,8 @@ const Avatar = (props: AvatarProps) => {
   const [error, setError] = useState(false)
   const handleError = () => setError(true)
 
+  const canShowImage = imageUrl && !error
+
   return (
     <div
         {...ariaProps}
@@ -66,21 +65,21 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl && !error}>
+        { canShowImage && (
           <Image
               alt={imageAlt}
               onError={handleError}
               url={imageUrl}
           />
-        </If>
+        )}
       </div>
-      <If condition={status}>
+      {status && (
         <OnlineStatus
             className={`size_${size}`}
             dark={dark}
             status={status}
         />
-      </If>
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -8,7 +8,7 @@ import {
   buildCss,
   buildDataProps,
 } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Icon from '../pb_icon/_icon'

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -3,9 +3,10 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type BackgroundProps = {
+  alt?: string,
   aria?: object,
   backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
   children?: array<React.ReactNode> | React.ReactNode,
@@ -15,10 +16,12 @@ type BackgroundProps = {
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  transition?: 'fade' | 'blur' | 'scale',
 }
 
 const Background = (props: BackgroundProps) => {
   const {
+    alt = '',
     aria = {},
     backgroundColor = 'light',
     children,
@@ -27,22 +30,24 @@ const Background = (props: BackgroundProps) => {
     id,
     imageUrl = '',
     tag = 'div',
+    transition = '',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
-  const Tag = `${tag}`
   const backgroundStyle = {
     backgroundImage: `url(${imageUrl})`,
     backgroundSize: 'cover',
   }
+  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), `pb_background_color_${backgroundColor}`, className)
+  const Tag = `${tag}`
 
   return (
     <>
       <If condition={imageUrl}>
         <Tag
+            alt={alt}
             style={backgroundStyle}
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -22,14 +22,30 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
     }
   };
 
-  .blur_up {
-    -webkit-filter: blur(6px);
-    filter: blur(6px);
-    transition: filter 550ms, -webkit-filter 550ms;
+  &.fade {
+    opacity: 0;
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 400ms ease-in;
+    }
   }
-
-  .blur_up.lazyloaded {
-    -webkit-filter: blur(0);
-    filter: blur(0);
+  
+  &.blur {
+    filter: blur(5px);
+    &.lazyloaded {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+      transition: filter 400ms ease-in;
+    }
+  }
+  
+  &.scale {
+    opacity: 0;
+    transform: scale(0.9);
+    &.lazyloaded {
+      opacity: 1;
+      transform: scale(1);
+      transition: 700ms ease-in;
+    }
   }
 }

data/app/pb_kits/playbook/pb_background/background.rb

@@ -12,18 +12,18 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
+      prop :transition, type: Playbook::Props::Enum,
+                        values: ["blur", "fade", "scale", nil],
+                        default: nil
+
       def classname
-        generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
+        generate_classname("pb_background_kit", image_classname, separator: " ")
       end
 
     private
 
       def image_classname
-        image_url.present? ? "lazyload blur_up" : ""
-      end
-
-      def background_color_classname
-        !image_url.present? ? "pb_background_color_#{background_color}" : ""
+        image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
       end
     end
   end

data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb

@@ -1,5 +1,5 @@
-<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
-  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column", margin_bottom: "xl" }) do %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
     <% end %>
@@ -11,3 +11,51 @@
     <% end %>
   <% end %>
 <% end %>
+
+
+<%= pb_rails("flex", props: { margin_top: "lg" }) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
+    <%= pb_rails("select", props: {
+    id: "transition-dropdown",
+    label: "",
+    blank_selection: "Select a Transition...",
+    options: [
+        {
+          value: 'fade',
+        },
+        {
+          value: 'blur',
+        },
+        {
+          value: 'scale',
+        },
+    ]
+    }) %>
+  <% end %>
+<% end %> 
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            (transitionDropdown).className = (transitionDropdown).className + ' _disabled'
+          } else {
+            (transitionDropdown).removeAttribute("disabled");
+            (transitionDropdown).className = (transitionDropdown)
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.background-image')
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")   
+        } 
+        (transitionDropdown).addEventListener('change', function() {
+          updateTransition(option)
+        })
+    });
+</script>

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -1,36 +1,79 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Background } from '../..'
-import { Card, Flex, FlexItem, Title } from '../..'
+import { Card, Flex, FlexItem, Select, Title } from '../..'
 
-const BackgroundImage = (props) => (
-  <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
-    <Flex
-        orientation="column"
-        vertical="center"
-        {...props}
-    >
-      <FlexItem>
-        <Title
-            dark
-            padding="lg"
-            size={1}
-            text="Background Kit Image"
-            {...props}
-        />
-      </FlexItem>
-      <FlexItem
-          padding="lg"
+const BackgroundImage = (props) => {
+  const [transition, setTransition] = useState('')
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Background
+          alt="colorful background"
+          className="background lazyload"
+          imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+          transition={transition}
           {...props}
       >
-        <Card
-            shadow="deepest"
+        <Flex
+            orientation="column"
+            vertical="center"
             {...props}
         >
-          {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
-        </Card>
-      </FlexItem>
-    </Flex>
-  </Background>
-)
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+                {...props}
+            />
+          </FlexItem>
+          <FlexItem
+              padding="lg"
+              {...props}
+          >
+            <Card
+                shadow="deepest"
+                {...props}
+            >
+              {
+                'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'
+              }
+            </Card>
+          </FlexItem>
+        </Flex>
+      </Background>
+      <Flex marginTop="xl">
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              name="dropdown"
+              onChange={handleTransition}
+              options={options}
+              transition={transition}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
 
 export default BackgroundImage

data/app/pb_kits/playbook/pb_background/docs/_background_image.md

@@ -0,0 +1 @@
+To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -3,11 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -30,6 +31,7 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -38,6 +40,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -56,6 +59,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
+      dark,
       chartData: chartData,
       colors: colors,
       id: id,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -33,6 +33,7 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
+          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import {
   buildAriaProps,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import {
   buildAriaProps,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -15,6 +15,7 @@ type ButtonPropTypes = {
   data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
+  form?: string,
   fullWidth?: boolean,
   icon?: string,
   id?: string,
@@ -22,7 +23,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size: 'large' | 'medium' | 'small',
+  size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,19 +37,19 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
-    size = null,
     type = 'inline',
     variant = 'primary',
+    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
+  className += `${size !== null ? ` size_${size}` : ''}`
 
   return className
 }
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    form = null
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -106,6 +108,7 @@ const Button = (props: ButtonPropTypes) => {
           className={css}
           href={link}
           id={id}
+          rel="noreferrer"
           role="link"
           target={newWindow ? '_blank' : null}
       >
@@ -118,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
           {...dataProps}
           className={css}
           disabled={disabled}
+          form={form}
           id={id}
           onClick={onClick}
           role="button"

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,24 @@
 @import "./button_mixins";
 
-[class^=pb_button_kit]{
+$pb_button_sizes: (
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
+);
+
+[class*=pb_button_kit]{
   @include pb_button;
+  // Size =================
+  @each $name, $size in $pb_button_sizes {
+    &[class*=size_#{$name}] {
+      font-size: $size;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+      @if $name == "sm" {
+        min-height: 0;
+      }
+    }
+  }
+
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,10 @@ module Playbook
       prop :text
       prop :type
       prop :value
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["sm", "md", "lg", nil],
+                  default: nil
+      prop :form, default: nil
 
       def options
         {
@@ -29,6 +33,7 @@ module Playbook
           role: "button",
           type: type,
           value: value,
+          form: form,
         }.compact
       end
 
@@ -44,12 +49,13 @@ module Playbook
         link ? "a" : "button"
       end
 
-    private
-
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class + size_class
       end
 
+    private
+
       def disabled_class
         disabled ? "disabled" : "enabled"
       end
@@ -61,6 +67,10 @@ module Playbook
       def loading_class
         loading ? "loading" : nil
       end
+
+      def size_class
+        size ? " size_#{size}" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,3 +89,16 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
+
+test('size prop', () => {
+  render(
+    <Button
+        data={{ testid: 'size-test' }}
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('size-test')
+
+  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+})

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>