[PLAY-3163] New Kit: Container (#6546)

**What does this PR do?** A clear and concise description with your
runway ticket url.

[Runway
Story](https://runway.powerhrg.com/backlog_items/PLAY-3163?from=active_sprint)

New Container Kit

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
- [ ] **PLAYGROUND** I have added and tested Playground metadata and
overrides for all kits and props updated in my code.
- [ ] **SEMVER** I have added a `minor`, `major`, or `patch` label for
release.
- [ ] **RC** I have added an `inactive RC` label if not an active RC.

---------

Co-authored-by: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>

Author: nidaqg

playbook-website/app/javascript/components/Website/src/pages/KitShow/playgroundEnabledKits.ts

@@ -13,6 +13,7 @@ export const PLAYGROUND_ENABLED_KITS = [
   "circle_icon_button",
   "collapsible",
   "contact",
+  "container",
   "copy_button",
   "currency",
   "dashboard_value",

playbook-website/config/menu.yml

@@ -647,6 +647,13 @@ kits:
 - category: layout_and_structure
   description: Components for structuring and organizing page layouts and content containers.
   components:
+  - name: container
+    platforms: *1
+    description: The Container component is used as a wrapper for the content of a page or to any container.
+    status: stable
+    icons_used: false
+    react_rendered: false
+    enhanced_element_used: false
   - name: flex
     platforms: *1
     description: Flexbox layout helper for responsive rows, columns, spacing, and alignment in UIs.

playbook/app/entrypoints/playbook.scss

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

playbook/app/javascript/kits.js

@@ -16,6 +16,7 @@ export { default as Checkbox } from '../pb_kits/playbook/pb_checkbox/_checkbox'
 export { default as CircleIconButton } from '../pb_kits/playbook/pb_circle_icon_button/_circle_icon_button'
 export { default as Collapsible } from '../pb_kits/playbook/pb_collapsible/_collapsible'
 export { default as Contact } from '../pb_kits/playbook/pb_contact/_contact'
+export { default as Container } from '../pb_kits/playbook/pb_container/_container'
 export { default as CopyButton} from '../pb_kits/playbook/pb_copy_button/_copy_button'
 export { default as Currency } from '../pb_kits/playbook/pb_currency/_currency'
 export { default as DashboardValue } from '../pb_kits/playbook/pb_dashboard_value/_dashboard_value'

playbook/app/javascript/playbook-doc.js

@@ -18,6 +18,7 @@ import * as Checkbox from '../pb_kits/playbook/pb_checkbox/docs'
 import * as CircleIconButton from '../pb_kits/playbook/pb_circle_icon_button/docs'
 import * as Collapsible from '../pb_kits/playbook/pb_collapsible/docs'
 import * as Contact from '../pb_kits/playbook/pb_contact/docs'
+import * as Container from '../pb_kits/playbook/pb_container/docs'
 import * as CopyButton from '../pb_kits/playbook/pb_copy_button/docs'
 import * as Currency from '../pb_kits/playbook/pb_currency/docs'
 import * as DashboardValue from '../pb_kits/playbook/pb_dashboard_value/docs'
@@ -127,6 +128,7 @@ ComponentRegistry.registerComponents({
   ...CircleIconButton,
   ...Collapsible,
   ...Contact,
+  ...Container,
   ...CopyButton,
   ...Currency,
   ...DashboardValue,

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

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

playbook/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

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

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

playbook/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

playbook/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()
+})