playbook_ui 17.1.0.pre.rc.4 → 17.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2e1ded496c095c99e8ee8e474bb7609582dc8953949549e7e3fe5ef93e4de2b
-  data.tar.gz: df2ce1c6ae5c85a67a961aebe95b1981f836ad605fa6886411d8043d8f64fdcf
+  metadata.gz: b282160685aeb7935309b54bddb2856ff20b4957a8ca3455a268ab52693bb8e7
+  data.tar.gz: 31b055f1c7c84e23d99b25cb980a5ad370f53088e265308ccd4e72a0b74500ba
 SHA512:
-  metadata.gz: 4b367423e0711ecbca373b4d3e195ba2f36997bfb3fc00f3c7477eceb2fa0a4bb76ecbb6a169f09d3fe865a343f1eaedef1547f1a12539670d05c0474d531a99
-  data.tar.gz: 547658843ad64464e8a86c74447bf63b4746181c668042e6ad8027b57eb9b184a392bc954184d29449ce2e21c137db066f88f2f6a46f2b0c41a616fcab744a56
+  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_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'