playbook_ui 17.1.0.pre.rc.3 → 17.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02b1ea72561f3498a21c3cf0595c72212fd2e04ba63539688d7239ba7261d6f9
-  data.tar.gz: 412dec4b2daa3b7371785dd21701dec9872a188e36418ac13c969025f7c49812
+  metadata.gz: b282160685aeb7935309b54bddb2856ff20b4957a8ca3455a268ab52693bb8e7
+  data.tar.gz: 31b055f1c7c84e23d99b25cb980a5ad370f53088e265308ccd4e72a0b74500ba
 SHA512:
-  metadata.gz: b4ba91e8ba28694803157c76d2cf93d1e204de9bebe3cd02c470889a38e6e38f78f57f8d0f9019c1e864f4d20fefd0873a051b7e6e90bf0124e1a93125b98d24
-  data.tar.gz: d1a34a60dbb2f1b2ce9125e08773d9176d23a4208d57dfbd0a35a1983df2920702fe17343cfed9510b82d1e7ceaf2d2207b91c9d6cb4a10945c364e7578405d4
+  metadata.gz: ce34582a3e72b462fa81e781a464f4f1352aaad7a37ffbace981816b5ec899397a6c29d8aa487af44d0fe20bda2f2d8280574bbf5a0a31548eed4c8e576976d8
+  data.tar.gz: 41690ad445b535cab92bb9a8c7a1e3c23e382b2e3661def036d7b85b16b7d2f6ec5c4419b22cdabdfc96f289231be50a4241d583e716a038a19efd82dfd63b3d

data/app/pb_kits/playbook/_playbook.scss

@@ -12,6 +12,7 @@
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
+@import 'pb_container/container';
 @import 'pb_copy_button/copy_button';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

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

@@ -24,7 +24,6 @@ test('loads the given image url and name', () => {
 
   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)
   expect(image).toHaveAttribute('alt', imageAlt)
 })

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

@@ -30,30 +30,15 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
   }
 
   &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 400ms ease-in;
-    }
+    animation: pb_background_fade 400ms ease-in forwards;
   }
 
   &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 400ms ease-in;
-    }
+    animation: pb_background_blur 400ms ease-in forwards;
   }
 
   &.scale {
-    opacity: 0;
-    transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+    animation: pb_background_scale 700ms ease-in forwards;
   }
 
   &.imageoverlay {
@@ -82,3 +67,24 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     }
   }
 }
+
+@keyframes pb_background_fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pb_background_blur {
+  from { filter: blur(5px); }
+  to { filter: blur(0); }
+}
+
+@keyframes pb_background_scale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

@@ -127,7 +127,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   // Build CSS classes and styles using responsive values.
   const classes = classnames(
     buildCss('pb_background_kit'),
-    'lazyload',
     globalProps(props),
     transition,
     {

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

@@ -115,7 +115,7 @@ module Playbook
 
       def image_classname
         background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}"
-        background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
+        background_class_lazy = image_url.present? && transition.present? ? " #{transition}" : ""
         "#{background_class}#{background_class_lazy}"
       end
     end

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

@@ -51,8 +51,9 @@
 
         const updateTransition = (transition) => {
           const imageTransition = document.querySelector('.background-image')
-            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
-            imageTransition.classList.add(transition, "lazyload")   
+            imageTransition.classList.remove("fade", "blur", "scale")
+            void imageTransition.offsetWidth
+            imageTransition.classList.add(transition)
         } 
         (transitionDropdown).addEventListener('change', function() {
           updateTransition(option)

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

@@ -29,7 +29,7 @@ const BackgroundImage = (props) => {
     <>
       <Background
           alt="colorful background"
-          className="background lazyload"
+          className="background"
           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}

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

@@ -1 +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"`.
+To add a transition on the background image, use the `transition` prop with `"fade"`, `"blur"`, or `"scale"`.

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

@@ -9,7 +9,7 @@ const BackgroundOverlay = (props) => {
     <Background
         alt="colorful background"
         backgroundColor="category_21"
-        className="background lazyload"
+        className="background"
         imageOverlay="opacity_2"
         imageUrl="https://unsplash.it/500/400/?image=633"
         {...props}

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

@@ -6,14 +6,14 @@ const BackgroundResponsive = (props) => (
     <Background
         alt="colorful background"
         backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
-        className="background lazyload"
+        className="background"
         padding="xl"
         {...props}
     />
     <br/>
     <Background
         alt="colorful background"
-        className="background lazyload"
+        className="background"
         imageUrl={{
           xs: "https://unsplash.it/500/400/?image=633",
           sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",

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

@@ -6,7 +6,7 @@ const BackgroundSize = (props) => (
     <Background
         alt="colorful background"
         backgroundSize="auto"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}
@@ -15,7 +15,7 @@ const BackgroundSize = (props) => (
     <Background
         alt="colorful background"
         backgroundSize="cover"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}
@@ -25,7 +25,7 @@ const BackgroundSize = (props) => (
         alt="colorful background"
         backgroundRepeat="no-repeat"
         backgroundSize="contain"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}

data/app/pb_kits/playbook/pb_container/_container.scss

@@ -0,0 +1,3 @@
+.pb_container_kit {
+
+}

data/app/pb_kits/playbook/pb_container/_container.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type ContainerProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactNode,
+  className?: string,
+  data?: { [key: string]: string },
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any },
+  tag?: "div" | "span" | "a" | "button" | "option" | "table" | "tbody" | "thead" | "tfoot" | "tr" | "td" | "th" | "img" | "section" | "article" | "main" | "header" | "footer" | "nav" | "aside"
+  id?: string,
+} & GlobalProps
+
+const Container = (props: ContainerProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    tag = 'div',
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_container_kit'), globalProps(props), className)
+
+  const Tag = tag
+
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+export default Container

data/app/pb_kits/playbook/pb_container/container.html.erb

@@ -0,0 +1,3 @@
+<%= pb_content_tag(object.tag) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_container/container.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbContainer
+    class Container < ::Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[div span a button option table tbody thead tfoot tr td th img section article main header footer nav aside],
+                 default: "div"
+
+      def classname
+        generate_classname("pb_container_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_container/container.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { Container } from 'playbook-ui'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('Container renders with default props', () => {
+  const props = {
+    children: 'Container Content'
+  }
+
+  render(<Container {...props}>{props.children}</Container>)
+  expect(screen.getByText(props.children)).toBeInTheDocument()
+})
+
+test('Container renders with custom tag', () => {
+  const props = {
+    tag: 'span',
+    children: 'Container Content'
+  }
+
+  render(<Container {...props}>{props.children}</Container>)
+  expect(screen.getByText(props.children)).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_container/docs/_container_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("container") do %>
+  Hello, I am a div container
+<% end %>

data/app/pb_kits/playbook/pb_container/docs/_container_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Container from '../../pb_container/_container'
+
+const ContainerDefault = (props) => (
+  <Container
+      {...props}
+  >
+    Hello, I am a div container
+  </Container>
+)
+
+export default ContainerDefault

data/app/pb_kits/playbook/pb_container/docs/_container_global_props.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("container", props: {
+  border: "default",
+  border_radius: "lg",
+  hover: { shadow: "deepest" },
+  max_width: "sm",
+  padding: "md",
+  shadow: "deep"
+}) do %>
+  Hello, I am a styled container
+<% end %>

data/app/pb_kits/playbook/pb_container/docs/_container_global_props.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Container from '../../pb_container/_container'
+
+const ContainerGlobalProps = (props) => (
+  <Container
+      border="default"
+      borderRadius="lg"
+      hover={{ shadow: "deepest" }}
+      maxWidth="sm"
+      padding="md"
+      shadow="deep"
+      {...props}
+  >
+    Hello, I am a styled container
+  </Container>
+)
+
+export default ContainerGlobalProps

data/app/pb_kits/playbook/pb_container/docs/_container_global_props.md

@@ -0,0 +1 @@
+Use Container with global props instead of using a `div` and and having to write a SCSS file. This example shows usage of padding, border, borderRadius, hover, shadow, and maxWidth as props. See our [global props page](https://playbook.powerapp.cloud/global_props) for the full list of available options. 

data/app/pb_kits/playbook/pb_container/docs/_container_tag.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("container", props: { tag: "span" }) do %>
+  Hello, I am a span container
+<% end %>
+<br />
+<%= pb_rails("container", props: { html_options: { href: "https://playbook.powerapp.cloud/", target: "_blank" }, tag: "a" }) do %>
+  Hello, I am an a container
+<% end %>

data/app/pb_kits/playbook/pb_container/docs/_container_tag.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Container from '../../pb_container/_container'
+
+const ContainerTag = (props) => {
+  return (
+    <>
+  <Container
+      tag="span"
+      {...props}
+  >
+    Hello, I am a span container
+  </Container>
+  <br />
+  <Container
+      htmlOptions={{ href: "https://playbook.powerapp.cloud/", target: "_blank" }}
+      tag="a"
+      {...props}
+  >
+    Hello, I am an a container
+  </Container>
+  </>
+  )
+}
+
+export default ContainerTag

data/app/pb_kits/playbook/pb_container/docs/_container_tag.md

@@ -0,0 +1,5 @@
+Use the `tag` prop to change the HTML element rendered. Container uses `div` by default. Available tags are:
+
+`div` `span` `a` `button` `option` `table` `tbody` `thead` `tfoot` `tr` `td` `th` `img` `section` `article` `main` `header` `footer` `nav` `aside`
+
+Use `htmlOptions`/`html_options` to add any HTML attributes to the kit. For example, we add `href` here so the `a` tag is a working link.

data/app/pb_kits/playbook/pb_container/docs/_description.md

@@ -0,0 +1 @@
+Use Container in place of a custom `div` and SCSS file. Apply global props for spacing, border, radius, shadow, and more.

data/app/pb_kits/playbook/pb_container/docs/_playground.json

@@ -0,0 +1,57 @@
+{
+  "template": "<Container{{props}}>\n  {{children}}\n</Container>",
+  "propTargets": {},
+  "defaults": {
+    "tag": "div"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "tag"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Hello, I am a div container"
+    },
+    {
+      "name": "Span",
+      "props": {
+        "tag": "span"
+      },
+      "children": "Hello, I am a span container"
+    },
+    {
+      "name": "Global Props",
+      "props": {
+        "border": "default",
+        "borderRadius": "lg",
+        "hover": {
+          "shadow": "deepest"
+        },
+        "maxWidth": "sm",
+        "padding": "md",
+        "shadow": "deep"
+      },
+      "children": "Hello, I am a styled container"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "link_tag": {
+      "when": {
+        "tag": "a"
+      },
+      "message": "Use htmlOptions to add href and other HTML attributes when tag is a.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "Hello, I am a div container"
+  }
+}

data/app/pb_kits/playbook/pb_container/docs/_playground.overrides.json

@@ -0,0 +1,54 @@
+{
+  "template": "<Container{{props}}>\n  {{children}}\n</Container>",
+  "children": {
+    "editable": true,
+    "default": "Hello, I am a div container"
+  },
+  "defaults": {
+    "tag": "div"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["tag"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Hello, I am a div container"
+    },
+    {
+      "name": "Span",
+      "props": {
+        "tag": "span"
+      },
+      "children": "Hello, I am a span container"
+    },
+    {
+      "name": "Global Props",
+      "props": {
+        "border": "default",
+        "borderRadius": "lg",
+        "hover": {
+          "shadow": "deepest"
+        },
+        "maxWidth": "sm",
+        "padding": "md",
+        "shadow": "deep"
+      },
+      "children": "Hello, I am a styled container"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "link_tag": {
+      "when": {
+        "tag": "a"
+      },
+      "message": "Use htmlOptions to add href and other HTML attributes when tag is a.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - container_default: Default
+  - container_tag: Tag
+  - container_global_props: Global Props
+  
+  
+  react:
+  - container_default: Default
+  - container_tag: Tag
+  - container_global_props: Global Props

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

@@ -0,0 +1,3 @@
+export { default as ContainerDefault } from './_container_default.jsx'
+export { default as ContainerTag } from './_container_tag.jsx'
+export { default as ContainerGlobalProps } from './_container_global_props.jsx'

data/app/pb_kits/playbook/pb_container/kit.schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "Container",
+  "description": "Container component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "tag": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "div",
+        "span",
+        "a",
+        "button",
+        "option",
+        "table",
+        "tbody",
+        "thead",
+        "tfoot",
+        "tr",
+        "td",
+        "th",
+        "img",
+        "section",
+        "article",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside"
+      ],
+      "default": "div"
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { Container } from 'playbook-ui'",
+      "example": "<Container tag=\"div\"></Container>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"container\", props: { tag: \"div\" }) %>"
+    }
+  }
+}

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

@@ -12,7 +12,6 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
-  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
 
@@ -27,7 +26,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
   swift:

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

@@ -9,5 +9,4 @@ export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
 export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
 export { default as DialogCloseable } from './_dialog_closeable.jsx'

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

@@ -23,30 +23,36 @@ $image-sizes: (
   }
 
   &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 300ms ease-in;
-    }
+    animation: pb_image_fade 300ms ease-in forwards;
   }
 
   &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 300ms ease-in;
-    }
+    animation: pb_image_blur 300ms ease-in forwards;
   }
 
   &.scale {
+    animation: pb_image_scale 700ms ease-in forwards;
+  }
+}
+
+@keyframes pb_image_fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pb_image_blur {
+  from { filter: blur(5px); }
+  to { filter: blur(0); }
+}
+
+@keyframes pb_image_scale {
+  from {
     opacity: 0;
     transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 }