playbook_ui 10.19.0.pre.popover.alpha1 → 10.21.0.pre.alpha.jg1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
-  data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
+  metadata.gz: 89c2b4d5b904ea641d5c4e5e1a436bdb70f5b8ad5292d6a9491f66dfba2406f2
+  data.tar.gz: 9246be8a7160010539031d1be35b247d9dc90a7f62f5cdfb7257785fdda564c4
 SHA512:
-  metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
-  data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9
+  metadata.gz: 88d2c607e9942698c68473dbf6c3a468a0db61f4bad82c992497df0784d272936bd038ac11914f3ec07e16523872c592212cee958f007856911d4b31fd11523c
+  data.tar.gz: fb7262bf896606e9f7a4e39673962702a1d187cb19557317f9848cc1e8844b9b29c0aed208c4bc8acceaaf81941b23c03f990d5f917b0398f4104311aa68d281

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

@@ -6,6 +6,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 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,
@@ -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_body/_body.jsx

@@ -21,6 +21,7 @@ type BodyProps = {
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  variant: null | 'link',
 }
 
 const Body = (props: BodyProps) => {
@@ -36,12 +37,13 @@ const Body = (props: BodyProps) => {
     status,
     tag = 'div',
     text,
+    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )

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

@@ -22,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',
@@ -36,16 +36,16 @@ 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 += `${size !== null ? `_${size}` : ''}`
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
+  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''

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]{
   @include pb_button;
-  // Size =================
-  @each $name, $size in $pb_button_sizes {
-    &[class*=_#{$name}] {
-      font-size: $size;
-      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
-    }
-  }
-  &[class*=_sm] {
-    min-height: 0;
-  }
-
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

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

@@ -18,9 +18,6 @@ module Playbook
       prop :text
       prop :type
       prop :value
-      prop :size, type: Playbook::Props::Enum,
-                  values: ["sm", "md", "lg", nil],
-                  default: nil
 
       def options
         {
@@ -47,12 +44,12 @@ module Playbook
         link ? "a" : "button"
       end
 
+    private
+
       def classname
-        generate_classname("pb_button_kit", size, variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
-    private
-
       def disabled_class
         disabled ? "disabled" : "enabled"
       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_sm_primary_inline_enabled')
-})

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -7,7 +7,6 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
-  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -16,4 +15,3 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
-  - button_size: Button Size

data/app/pb_kits/playbook/pb_button/docs/index.js

@@ -5,4 +5,3 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
-export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -30,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +49,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, color),
+    buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,6 +3,9 @@
 
 [class^="pb_caption_kit"] {
   @include caption;
+  &[class*="_link"] {
+    color: $primary;
+  }
 
   &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
@@ -11,6 +14,10 @@
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
   }
+  
+  &[class*="link"] {
+    color: $primary;
+  }
 
   @include pb_caption_kit_colors;
 

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -10,14 +10,17 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
-      prop :variant, deprecated: true
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil,
+                     deprecated: true
 
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size, color)
+        generate_classname("pb_caption_kit", size, variant, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -107,7 +107,7 @@ const PbDate = (props: PbDateProps) => {
               <Icon
                   fixedWidth
                   icon="calendar-alt"
-                  size="xs"
+                  size="sm"
               />
             </Caption>
           </If>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -42,7 +42,7 @@
       <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -40,6 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
+  plugins?: Boolean,
   type?: String,
   yearRange?: Array,
 }
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
+    plugins = false,
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -100,6 +102,7 @@ const DatePicker = (props: DatePickerProps) => {
       mode: mode,
       onChange: onChange,
       pickerId: pickerId,
+      plugins: plugins,
       yearRange: yearRange,
     })
   }, [])

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
 @import "./sass_partials/inline_styles";
+@import "./sass_partials/month_and_year_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -41,6 +41,8 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
+      prop :plugins, type: Playbook::Props::Boolean,
+                     default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -64,6 +66,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          plugins: plugins,
           required: required,
           yearRange: year_range,
         }.to_json.html_safe

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 
 const datePickerHelper = (config) => {
   const {
@@ -13,6 +14,7 @@ const datePickerHelper = (config) => {
     mode,
     onChange = () => {},
     pickerId,
+    plugins,
     required,
     yearRange,
   } = config
@@ -50,6 +52,10 @@ const datePickerHelper = (config) => {
     }
   }
 
+  const setMonthAndYearPlugin = () => (
+    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
+  )
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -97,6 +103,7 @@ const datePickerHelper = (config) => {
     onYearChange: [() => {
       yearChangeHook()
     }],
+    plugins: setMonthAndYearPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -153,8 +160,10 @@ const datePickerHelper = (config) => {
   }
 
   // Adding dropdown icons to year and month selects
-  picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  if (picker.monthElements[0].parentElement) {
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  plugins: true,
+  picker_id: "disabled_date"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMonthAndYear = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="disabled-date"
+          plugins
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerMonthAndYear

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md

@@ -0,0 +1 @@
+By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -16,6 +16,7 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
 
 
   react:
@@ -34,3 +35,4 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -13,3 +13,4 @@ export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
+export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'