playbook_ui 8.0.1 → 8.2.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25e534d853cf741d99d4409bad4b63fae3c01e5367a94b84ba4a37c598c95417
-  data.tar.gz: 40d42989c78e9926e7e68cbe60212563fd4922ef5308f86def18d03ddff71cdd
+  metadata.gz: c6d260fd8cb3c808cd647ea9150feb6c68ddaefef55e69cdb28986d8689ea7ad
+  data.tar.gz: be549c62b03d8e89c5746a8cfeb4ccceedf4da2dbe7e1ff27dc609c2d574224b
 SHA512:
-  metadata.gz: 9a551ebc7c39683e38b31a74a6452518da6433a548468d4ae83f78bb0642db278d262918f91c07b29a98983f60ba6032ed302993984e5c7deda1b1da68749b8c
-  data.tar.gz: 9a78ee36e72c2469c5c442aefdf04dd907cd708d534fb17267ed035284d9ed79026e113906d5185fe2afdb3e0eee73e20932150c170baf5e234d7d06797cbc25
+  metadata.gz: d3d1a839484d63aafb17d2e2c03daa56781bae403120e652dc5d20af205c857d92c0e2ef2a6b9116dad6f19fb1514f657e949d774ab096ed13d6bcf14566097e
+  data.tar.gz: a57ea0a32d351f774cdf73ef1fe572199b7207be7e1cf863538c09d68617ce9d3b352d34a111695b3a2b91f93c1fbb9c73775a08e6254d5321c878a14323e02b

data/README.md

@@ -42,6 +42,15 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 
 * [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
 
+### Reset.css
+
+Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
+
+1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
+2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
+
+This asset aims to provide a commonly styles base for supported browsers.
+
 ### Building Playbook Kits
 
 * [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)

data/app/pb_kits/playbook/_playbook.scss

@@ -1,11 +1,11 @@
-@import "tokens/fonts";
-@import "pb_background/background";
-@import "pb_body/body";
-@import "pb_button/button";
+@import 'tokens/fonts';
+@import 'pb_background/background';
+@import 'pb_body/body';
+@import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
-@import "pb_caption/caption";
-@import "pb_card/card";
-@import "pb_title/title";
+@import 'pb_caption/caption';
+@import 'pb_card/card';
+@import 'pb_title/title';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_badge/badge';
@@ -13,6 +13,7 @@
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
+@import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

data/app/pb_kits/playbook/data/menu.yml

@@ -8,6 +8,7 @@ kits:
     - circle_icon_button
   - card
   - checkbox
+  - collapsible
   - charts_and_graphs:
     - bar_graph
     - circle_chart

data/app/pb_kits/playbook/index.js

@@ -17,6 +17,7 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
+export Collapsible from './pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
@@ -13,6 +14,7 @@ type ButtonPropTypes = {
   },
   children?: array<React.ReactChild>,
   className?: string | array<string>,
+  data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
   fullWidth?: boolean,
@@ -69,6 +71,7 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
+    data = {},
     disabled,
     icon = null,
     id,
@@ -82,6 +85,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -111,6 +115,7 @@ const Button = (props: ButtonPropTypes) => {
     <If condition={link !== null}>
       <a
           {...buttonAria}
+          {...dataProps}
           className={css}
           href={link}
           id={id}
@@ -122,6 +127,7 @@ const Button = (props: ButtonPropTypes) => {
       <Else />
       <button
           {...buttonAria}
+          {...dataProps}
           className={css}
           disabled={disabled}
           id={id}

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -0,0 +1,91 @@
+
+import React from 'react'
+import { appendAlert, fireEvent, render, screen, waitFor } from '../utilities/test-utils'
+
+import Button from './_button'
+
+// Primary Test Variables
+const htmlType = 'submit',
+  text = 'Button Text',
+  value = '1234'
+
+test('passes type, text, and value props to button', () => {
+  render(
+    <>
+      <Button
+          data={{ testid: 'primary-test' }}
+          htmlType={htmlType}
+          text={text}
+          value={value}
+      />
+    </>
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const content  = screen.getByText(text)
+
+  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
+  expect(kit).toHaveAttribute('type', htmlType)
+  expect(kit).toHaveAttribute('value', value)
+  expect(content).toHaveTextContent(text)
+})
+
+// Link Test Variables
+const link = 'https://www.google.com'
+
+test('adds link to button', () => {
+  render(
+    <Button
+        data={{ testid: 'link-test' }}
+        link={link}
+    />
+  )
+
+  const kit = screen.getByTestId('link-test')
+
+  expect(kit).toHaveAttribute('href', link)
+})
+
+test('button with secondary variant', () => {
+  render(
+    <Button
+        data={{ testid: 'variant-test' }}
+        variant="secondary"
+    />
+  )
+
+  const kit = screen.getByTestId('variant-test')
+
+  expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
+  expect(kit).toHaveAttribute('type', 'button')
+})
+
+test('disable prop', () => {
+  render(
+    <Button
+        data={{ testid: 'disable-test' }}
+        disabled
+    />
+  )
+
+  const kit = screen.getByTestId('disable-test')
+
+  expect(kit).toBeDisabled()
+})
+
+test('click event', async () => {
+  render(
+    <Button
+        data={{ testid: 'click-test' }}
+        onClick={() => appendAlert('clicked button!')}
+    />
+  )
+
+  const kit = screen.getByTestId('click-test')
+
+  fireEvent.click(kit)
+
+  await waitFor(() => screen.getByText('clicked button!'))
+
+  expect(screen.getByText('clicked button!')).toBeInTheDocument()
+})

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

@@ -30,7 +30,6 @@ const ButtonDefault = (props) => (
         {...props}
     />
   </div>
-
 )
 
 export default ButtonDefault

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { Button, ButtonToolbar } from '../'
+
+test('default test', () => {
+  render(
+    <ButtonToolbar
+        data={{ testid: 'default-test' }}
+    >
+      <Button
+          data={{ testid: 'child-button' }}
+          text="Test"
+      />
+    </ButtonToolbar>
+  )
+
+  const kit   = screen.getByTestId('default-test')
+  const child = screen.getByTestId('child-button')
+
+  expect(kit).toHaveClass('pb_button_toolbar_kit_horizontal_primary')
+  expect(kit).toContainElement(child)
+  expect(child).toHaveClass('pb_button_kit_primary_inline_enabled')
+})
+
+test('variant and orientation props', () => {
+  render(
+    <ButtonToolbar
+        data={{ testid: 'second-test' }}
+        orientation="vertical"
+        variant="secondary"
+    >
+      <Button
+          data={{ testid: 'child-button' }}
+          text="Create"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  )
+
+  const kit   = screen.getByTestId('second-test')
+  const child = screen.getByTestId('child-button')
+
+  expect(kit).toHaveClass('pb_button_toolbar_kit_vertical_secondary')
+  expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
+})

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

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Playbook
-    module PbCard
-      class CardHeader < Playbook::KitBase
-        prop :header_color, type: Playbook::Props::String,
-                            default: "category_1"
+  module PbCard
+    class CardHeader < Playbook::KitBase
+      prop :header_color, type: Playbook::Props::String,
+                          default: "category_1"
 
-        def classname
-          generate_classname("pb_card_header_kit", header_color)
-        end
+      def classname
+        generate_classname("pb_card_header_kit", header_color)
       end
     end
   end
+end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import CircleIconButton from './_circle_icon_button'
+
+test('default test', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'default-test' }}
+        icon="plus"
+    />
+  )
+
+  const kit = screen.getByTestId('default-test')
+
+  expect(kit).toHaveClass('pb_circle_icon_button_kit')
+})

data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx

@@ -0,0 +1,84 @@
+/* @flow */
+
+import classnames from 'classnames'
+import React, { useState } from 'react'
+import { globalProps } from '../utilities/globalProps.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import CollapsibleContent from './child_kits/CollapsibleContent'
+import CollapsibleMain from './child_kits/CollapsibleMain'
+
+export const CollapsibleContext = React.createContext({})
+
+type CollapsibleProps = {
+  children: CollapsibleMain | CollapsibleContent | ReactNode,
+  aria?: object,
+  className?: string,
+  collapsed?: boolean,
+  data?: object,
+  id?: string,
+  padding?: string,
+}
+
+const useCollapsible = (initial = false) => {
+  const [collapsed, setCollapsed] = useState(initial)
+
+  return [
+    collapsed,
+    () => setCollapsed((t) => !t),
+  ]
+}
+
+const Collapsible = ({
+  aria = {},
+  className,
+  children = [],
+  collapsed = true,
+  data = {},
+  id,
+  padding = 'md',
+  ...props
+}: CollapsibleProps) => {
+  const [isCollapsed, collapse] = useCollapsible(collapsed)
+  const CollapsibleParent = React.Children.toArray(children)
+
+  if (CollapsibleParent.length !== 2) {
+    throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
+  }
+
+  const Main = CollapsibleParent[0]
+  const Content = CollapsibleParent[1]
+
+  const { children: mainChildren, ...mainProps } = Main.props
+  const { children: contentChildren, ...contentProps } = Content.props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_collapsible'),
+    className,
+    globalProps(props, { padding })
+  )
+
+  return (
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse }}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <CollapsibleMain {...mainProps}>
+          {mainChildren}
+        </CollapsibleMain>
+
+        <CollapsibleContent {...contentProps}>
+          {contentChildren}
+        </CollapsibleContent>
+      </div>
+    </CollapsibleContext.Provider>
+  )
+}
+
+Collapsible.Main = CollapsibleMain
+Collapsible.Content = CollapsibleContent
+
+export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -0,0 +1,15 @@
+[class^=pb_collapsible_kit] {
+  .toggle-content {
+    display: none;
+    height: 0;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+    overflow: hidden;
+    transition: height 300ms, padding 300ms ease-in-out;
+  }
+
+  .toggle-content.is-visible {
+    display: block;
+    height: auto;
+  }
+}

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import classnames from 'classnames'
+import React, { useContext } from 'react'
+import AnimateHeight from 'react-animate-height'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+
+import { CollapsibleContext } from '../_collapsible.jsx'
+
+type CollapsibleContentProps = {
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  padding?: string,
+}
+
+const CollapsibleContent = ({
+  children,
+  className,
+  padding = 'md',
+  ...props
+}: CollapsibleContentProps) => {
+  const context = useContext(CollapsibleContext)
+  const contentCSS = buildCss('pb_collapsible_content_kit')
+  const contentSpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(contentCSS, className, contentSpacing)}>
+      <AnimateHeight
+          duration={300}
+          height={context.collapsed ? 0 : 'auto'}
+          id="bottom-section"
+      >
+        {children}
+      </AnimateHeight>
+    </div>
+  )
+}
+
+export default CollapsibleContent