playbook_ui 10.23.0.pre.alpha2 → 10.23.0.pre.cachetest

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44c0fdfec6d5b6f2f0176acd5005095828a69bf385b1788f4257b8ec42ab7b64
-  data.tar.gz: 508b8708768f0463bc00c4ab3d2e14507e05d334b5c1f795190e4b3c8b7c624a
+  metadata.gz: 9d85218c29eb499b6f71d42d3b99307a6f5563671d4af53e4e3ac380779049bd
+  data.tar.gz: a8e220e1252b1b21fa92adbf601532c483164950169f7d6ce79e8d6e1f0e8b1e
 SHA512:
-  metadata.gz: 27c3627ef8cfb27d6bcc8bc95f363d6e1fd843ed09da7aed00a93576f0f8761677220c692b841a77eb07601493416332374756100978f76a5902e8954f489e0a
-  data.tar.gz: 0fad25cd73079f16e89d94f70b80ad52e576871239362ed2e397c3aad0fb65e07864ac8cb1c4253d602a86cf45c5bc2d9b69edddc126048fc61dcc4ecf92374b
+  metadata.gz: 986b7423cafa276bb7931cec9e32fcb57867f7a303b810babcc9524c0591314da7fcdc52f73c89726115c1543e553eec856b3c2ed73b0af9c53b3cc88ffa0c77
+  data.tar.gz: 0f245ee82c1ba4b42c6daa7a9444d7106f022a1510f6f2b7473430a2cddf6c6981d9a48f17bebc902990dca4829e84ebb5c1389d0436229ca1c7332418d1a370

data/app/pb_kits/playbook/_playbook.scss

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

data/app/pb_kits/playbook/index.js

@@ -118,3 +118,6 @@ 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.tsx → _avatar.jsx}

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

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

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

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

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", "size_#{size}")
+        generate_classname("pb_avatar_kit", 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_size_md')
+  expect(kit).toHaveClass('pb_avatar_kit_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'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Avatar from '../pb_avatar/_avatar'
 import Icon from '../pb_icon/_icon'

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

@@ -3,10 +3,9 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 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,
@@ -16,12 +15,10 @@ 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,
@@ -30,24 +27,22 @@ 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,30 +22,14 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
     }
   };
 
-  &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 400ms ease-in;
-    }
-  }
-  
-  &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 400ms ease-in;
-    }
+  .blur_up {
+    -webkit-filter: blur(6px);
+    filter: blur(6px);
+    transition: filter 550ms, -webkit-filter 550ms;
   }
-  
-  &.scale {
-    opacity: 0;
-    transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+
+  .blur_up.lazyloaded {
+    -webkit-filter: blur(0);
+    filter: blur(0);
   }
 }

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, separator: " ")
+        generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end
 
     private
 
       def image_classname
-        image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
+        image_url.present? ? "lazyload blur_up" : ""
+      end
+
+      def background_color_classname
+        !image_url.present? ? "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: { 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("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("flex/flex_item") do %>
       <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
     <% end %>
@@ -11,51 +11,3 @@
     <% 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,79 +1,36 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Background } from '../..'
-import { Card, Flex, FlexItem, Select, Title } from '../..'
+import { Card, Flex, FlexItem, Title } from '../..'
 
-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}
+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"
           {...props}
       >
-        <Flex
-            orientation="column"
-            vertical="center"
+        <Card
+            shadow="deepest"
             {...props}
         >
-          <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>
-    </>
-  )
-}
+          {'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>
+)
 
 export default BackgroundImage

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

@@ -3,12 +3,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
-  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -31,7 +30,6 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
-    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -40,7 +38,6 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
-      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -59,7 +56,6 @@ 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,7 +33,6 @@ 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -15,7 +15,6 @@ type ButtonPropTypes = {
   data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
-  form?: string,
   fullWidth?: boolean,
   icon?: string,
   id?: string,
@@ -23,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size?: 'sm' | 'md' | 'lg',
+  size: 'large' | 'medium' | 'small',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -37,19 +36,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
 }
@@ -70,7 +69,6 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
-    form = null
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -108,7 +106,6 @@ const Button = (props: ButtonPropTypes) => {
           className={css}
           href={link}
           id={id}
-          rel="noreferrer"
           role="link"
           target={newWindow ? '_blank' : null}
       >
@@ -121,7 +118,6 @@ 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,24 +1,7 @@
 @import "./button_mixins";
 
-$pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
-);
-
-[class*=pb_button_kit]{
+[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,10 +18,6 @@ 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
         {
@@ -33,7 +29,6 @@ module Playbook
           role: "button",
           type: type,
           value: value,
-          form: form,
         }.compact
       end
 
@@ -49,13 +44,12 @@ module Playbook
         link ? "a" : "button"
       end
 
+    private
+
       def classname
-        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
-    private
-
       def disabled_class
         disabled ? "disabled" : "enabled"
       end
@@ -67,10 +61,6 @@ 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,16 +89,3 @@ 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" }) %>