playbook_ui 10.21.0.pre.alpha.jd1 → 10.21.0.pre.alpha.jg1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c31d281357f8dc7925b97fa9b6afaf1a5b058119086ad716ee72f9d86c7a221
-  data.tar.gz: 154d9accb2a7412eb67a71fc73504da468eb3ca786b8f887667733b9a019e397
+  metadata.gz: 89c2b4d5b904ea641d5c4e5e1a436bdb70f5b8ad5292d6a9491f66dfba2406f2
+  data.tar.gz: 9246be8a7160010539031d1be35b247d9dc90a7f62f5cdfb7257785fdda564c4
 SHA512:
-  metadata.gz: 5c804f0c7103265e31c1aa49d87996cddab6cc611b60c41c5d8c5dd99a4fe784bdb9e16a59720857593bfbd17cd90f7ccc8549aea096803d62eb757488851a28
-  data.tar.gz: 5e8d5c37aa6ae27821507353fb3943339a9b4cf2a04fd683b6ae3d0cece1060949160e2b8adf1e862c28577d83944d4f993fa86536fc4aad79d3b09f1ae78818
+  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_image/_image.jsx

@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size ? `size_${size}` : null),
+    buildCss('pb_image_kit', size),
     'lazyload',
     transition,
     { rounded },

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=size_#{$name}] {
+    &[class*=_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-
+    
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-
+    
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_size_#{size}"
+        size == "none" ? nil : "_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
 })
 
 test('transition = blur', () => {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -129,10 +129,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     trixRef.current.addEventListener('click', handleClick)
   }, [])
 
-  useEffect(() => {
-    trixRef.current.editor.loadHTML(value)
-  }, [value])
-
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
+    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,17 +75,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
-
-test('returns additional class name', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-        label="First Name"
-        marginBottom="lg"
-        placeholder="Enter first name"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} mb_lg`)
-})

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden; }
-
-body {
-  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 16px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px; }
-
-a {
-  text-decoration: none;
-  color: #0056CF; }
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.20.0"
-  VERSION = "10.21.0.pre.alpha.jd1"
+  VERSION = "10.21.0.pre.alpha.jg1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.0.pre.alpha.jd1
+  version: 10.21.0.pre.alpha.jg1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-02 00:00:00.000000000 Z
+date: 2022-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -330,6 +330,7 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_image.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb