playbook_ui 17.0.0 → 17.1.0.pre.alpha.phase118730

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a0a3a991932ffc02ce86b727b56b252fbf4bb0bc93f232fbbad6941c63e56d5
-  data.tar.gz: 342f580343e5a39ef86663eba4d1fb8bce4ddcc699d3d7b52c9a7e1d16404f95
+  metadata.gz: 8e02326bade04d79c6ea03a77d490d7611648882615ae1bc68de3948677cf201
+  data.tar.gz: 076de95937944edfd18a5e69e86da52932a249ba00fa5fdc9dda61871c81ee65
 SHA512:
-  metadata.gz: 878f0f3aa7a1930e43394ae899c2708d9d7d3596f4ebb014c588f1095921c9cb7575f77f33dfb207286bb93c2c3b2185b9b244df1addd71aa6347835c0560560
-  data.tar.gz: 71ddab4024b085f462b341b2daf4158aac4cc81a5289025f5cf1782ba4c72560e2b75d6054a61faae3eb5d3cd1cf46ae24e8d579bcd313fe0578a5ac06692efb
+  metadata.gz: 7f9af4cbba2f83018f31df1f004a6ac8f8e0660263fcd230fe882097801da15cda2a7f5e8827f36830542914b3520e24d66b4be18fce8374bd74360603b46cba
+  data.tar.gz: 707900ab2522bfce052e9da53f0005936724f7a73acd25e70611b3467ec115a9aee17b8383176de48488c6d1518a75bd52cfe10bd3b87ba386977c407f9fb8b3

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_advanced_table/Components/VirtualizedTableView.tsx

@@ -4,6 +4,7 @@ import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
 
 import { GenericObject } from "../../types"
+import { debounce } from "../../utilities/object"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
@@ -77,19 +78,6 @@ export const VirtualizedTableView = ({
     return widths;
   };
 
-  // Debounce function to prevent too many updates during resize
-  const debounce = <T extends (...args: any[]) => any>(func: T, wait: number): ((...args: Parameters<T>) => void) => {
-    let timeout: ReturnType<typeof setTimeout>;
-    return function executedFunction(...args: Parameters<T>) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  };
-
   // Update column widths when component mounts and when sorting changes
   useLayoutEffect(() => {
     // Apply widths after a small delay to ensure header is rendered

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_button/docs/_button_reaction.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 153, highlight: false, icon: "🎉", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
 <%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -11,7 +11,7 @@ return (
     <Button
         count={highlightActive ? (reactionCount + 1) : reactionCount}
         highlight = {highlightActive}
-        icon="&#127881;"
+        icon="🎉"
         onClick={()=> setHighlightActive(!highlightActive)}
         tabIndex={0}
         variant="reaction"

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md

@@ -1,3 +1,3 @@
-The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
+The `reaction` variant accepts any emoji as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
 
 Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight product_12_background product_12_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
       prop :drag_id, type: Playbook::Props::String
       prop :draggable_item, type: Playbook::Props::Boolean,

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

@@ -39,6 +39,8 @@
         "product_10_highlight",
         "product_11_background",
         "product_11_highlight",
+        "product_12_background",
+        "product_12_highlight",
         "windows",
         "siding",
         "doors",

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\" }) %>"
+    }
+  }
+}