playbook_ui 2.8.7 → 2.8.8

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonAccessibility = () => (
+    <div>
+        <Button
+            aria={{label: "button"}}
+            link="https://google.com"
+            tag="a"
+            text="Button with ARIA"
+        />
+    </div>
+)
+
+export default ButtonAccessibility

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonBlockContent = () => (
+    <div>
+        <Button
+            fixedWidth
+            icon="users"
+            text="Button with Block Content"
+        />
+    </div>
+)
+
+export default ButtonBlockContent

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonDefault = () => (
+    <div>
+        <Button text="Button Primary"/>
+        <Button
+                text="Button Secondary"
+                variant="secondary"
+        />
+        <Button
+                text="Button Link"
+                variant="link"
+        />
+        <Button
+                text="Button Disabled"
+                disabled
+        />
+    </div>
+)
+
+export default ButtonDefault

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonDefaultDark = () => (
+    <div>
+        <Button text="Button Primary"/>
+        <Button
+                text="Button Secondary"
+                variant="secondary"
+        />
+        <Button
+                text="Button Link"
+                variant="link"
+        />
+        <Button
+                text="Button Disabled"
+                disabled
+        />
+    </div>
+)
+
+export default ButtonDefaultDark

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonFullWidth = () => (
+    <div>
+        <Button
+                text="Button Full Width"
+                fullWidth
+        />
+    </div>
+)
+
+export default ButtonFullWidth

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonLink = () => (
+    <div>
+        <Button
+            link="https://google.com"
+            text="A Tag Button"
+        />
+        <Button
+            link="https://google.com"
+            newWindow
+            text="Open in New Window"
+        />
+        <Button
+            disabled
+            link="https://google.com"
+            text="A Tag Button Disabled"
+        />
+    </div>
+)
+
+export default ButtonLink

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import Button from '../_button.jsx'
+
+const ButtonLoading = () => (
+    <div>
+        <Button
+            loading
+            text="Button Primary"
+        />
+        <Button
+            loading
+            text="Button Secondary"
+            variant="secondary"
+        />
+        <Button
+            loading
+            text="A Tag Button Disabled"
+            variant="link"
+        />
+    </div>
+)
+
+export default ButtonLoading

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

@@ -1,13 +1,17 @@
 examples:
   rails:
   - button_default: Button Variants
+  - button_default_dark: Button Variants Dark
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
-  - button_default_dark: Button Variants Dark
   react:
-  - button_sizes: Button Sizes
-  - button_light: Buttons Light UI
-  - button_dark: Buttons Dark UI
+  - button_default: Button Variants
+  - button_default_dark: Button Variants Dark
+  - button_full_width: Button Full Width
+  - button_link: Button Links
+  - button_loading: Button Loading
+  - button_block_content: Button Block Content
+  - button_accessibility: Button Accessibility Options

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

@@ -1,3 +1,7 @@
-export {default as ButtonDark} from './_button_dark.jsx';
-export {default as ButtonLight} from './_button_light.jsx';
-export {default as ButtonSizes} from './_button_sizes.jsx';
+export {default as ButtonDefault} from './_button_default.jsx'
+export {default as ButtonFullWidth} from './_button_full_width.jsx'
+export {default as ButtonLink} from './_button_link.jsx'
+export {default as ButtonLoading} from './_button_loading.jsx'
+export {default as ButtonBlockContent} from './_button_block_content.jsx'
+export {default as ButtonAccessibility} from './_button_accessibility.jsx'
+export {default as ButtonDefaultDark} from './_button_default_dark.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -1,39 +1,36 @@
-import React from "react";
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  tag: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  large: PropTypes.bool,
-  dark: PropTypes.bool
-};
+import React from 'react'
 
-const defaultProps = {
-  tag: "div",
-  text: "Hello Cool React Caption",
-  large: false,
-  dark: false
-};
-
-class Caption extends React.Component {
-  render() {
-    const { tag, text, large, dark } = this.props;
-    const Tag = `${tag}`;
-    return (
-      <Tag
-          className={
-          `caption` +
-          (large === true ? "_lg" : "") +
-          (dark === true ? "_dark" : "")
-        }
-      >
-        {text}
-      </Tag>
-    );
-  }
+type CaptionProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  dark?: Boolean,
+  large?: Boolean,
+  tag: String,
+  text: String,
 }
 
-Caption.propTypes = propTypes;
-Caption.defaultProps = defaultProps;
+const Caption = ({
+  children,
+  dark=false,
+  large=false,
+  tag='div',
+  text,
+}: CaptionProps) => {
+
+  const Tag = `${tag}`
+
+  return (
+    <Tag
+        className={
+        `pb_caption_kit` +
+        (large === true ? '_lg' : '') +
+        (dark === true ? '_dark' : '')
+      }
+    >
+      {text || children}
+    </Tag>
+  )
+}
 
-export default Caption;
+export default Caption

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -1,25 +1,40 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+import React from 'react'
 
-class Card extends React.Component {
-  render() {
-    return (
-      <div className="pb_card">
-        <div className="pb_card_body">
-          { this.props.children }
-        </div>
-      </div>
-    )
-  }
+type CardPropTypes = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  selected?: Boolean,
+  shadow?: 'none' | 'shallow' | 'default' | 'deep' | 'deeper' | 'deepest',
+}
+
+const cardCSS = ({
+  selected=false,
+  shadow='none',
+}: CardPropTypes) => {
+  let css = ''
+  css += selected ? '_selected' : '_deselected'
+  css += `_shadow_${shadow}`
+  return css
+}
+
+const bodyCSS = ({padding='md'}: CardPropTypes) => {
+  let css = ''
+  css += `_${padding}`
+  return css
 }
 
-Card.propTypes = propTypes;
+const Card = (props: CardPropTypes) => {
+  const {children} = props
+
+  return (
+    <div className={`pb_card_kit${cardCSS(props)}`}>
+      <div className={`pb_card_body_kit${bodyCSS(props)}`}>
+        { children }
+      </div>
+    </div>
+  )
+}
 
-export default Card;
+export default Card

data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+function CardContent() {
+  return (
+    <div>
+      <Card>{`Card content`}</Card>
+      <br/>
+      <Card>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
+
+Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}</Card>
+      <br/>
+    </div>
+  )
+}
+
+export default CardContent

data/app/pb_kits/playbook/pb_card/docs/_card_padding.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+function CardPadding() {
+  return (
+    <div>
+      <Card padding='none'>{`Card content`}</Card>
+      <br/>
+      <Card padding='xs'>{`Card content`}</Card>
+      <br/>
+      <Card padding='sm'>{`Card content`}</Card>
+      <br/>
+      <Card padding='md'>{`Card content`}</Card>
+      <br/>
+      <Card padding='lg'>{`Card content`}</Card>
+      <br/>
+      <Card padding='xl'>{`Card content`}</Card>
+      <br/>
+    </div>
+  )
+}
+
+export default CardPadding

data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import Card from "../_card.jsx"
+
+function CardSelected() {
+  return (
+    <div>
+      <Card>{`Card content`}</Card>
+      <br/>
+      <Card selected>{`Card content`}</Card>
+    </div>
+  )
+}
+
+export default CardSelected

data/app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+function CardShadow() {
+  return (
+    <div>
+      <Card shadow='none'>{`Card content`}</Card>
+      <br/>
+      <Card shadow='shallow'>{`Card content`}</Card>
+      <br/>
+      <Card shadow='default'>{`Card content`}</Card>
+      <br/>
+      <Card shadow='deep'>{`Card content`}</Card>
+      <br/>
+      <Card shadow='deeper'>{`Card content`}</Card>
+      <br/>
+      <Card shadow='deepest'>{`Card content`}</Card>
+      <br/>
+    </div>
+  )
+}
+
+export default CardShadow

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

@@ -7,3 +7,7 @@ examples:
   - card_content: Content Size
   react:
   - card_light: Default
+  - card_selected: Selected
+  - card_padding: Padding Size
+  - card_shadow: Shadow Size
+  - card_content: Content Size

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

@@ -1 +1,5 @@
 export {default as CardLight} from './_card_light.jsx';
+export {default as CardSelected} from './_card_selected.jsx';
+export {default as CardPadding} from './_card_padding.jsx';
+export {default as CardShadow} from './_card_shadow.jsx';
+export {default as CardContent} from './_card_content.jsx';

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -1,21 +1,70 @@
-import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class Currency extends React.Component {
-  render() {
-    return (
-      <div className="pb_currency">
-        <span>{`CURRENCY CONTENT`}</span>
-      </div>
-    )
-  }
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import Body from '../pb_body/_body.jsx'
+import Caption from '../pb_caption/_caption.jsx'
+import Title from '../pb_title/_title.jsx'
+
+type CurrencyProps = {
+  align?: 'left' | 'center' | 'right',
+  className: String,
+  currencySymbol: '$',
+  label?: String,
+  separator?: '.' | ',',
+  size?: 'sm' | 'lg',
+  value?: String,
+  unit?: '00',
+}
+
+const kitCSS = ({align='left'}: CurrencyProps) => {
+  let css = 'pb_currency_kit'
+  css += `_${align}`
+  return css
+}
+
+const bodyCSS = ({}: CurrencyProps) => {
+  let css = ''
+  return css
 }
 
-Currency.propTypes = propTypes;
+const symbolCSS = (currencySymbol) => {
+  return classnames({
+    dollar_sign: currencySymbol === '$',
+  })
+}
+
+const sizes = {
+  lg: 1,
+  sm: 2,
+}
+
+const Currency = (props: CurrencyProps) => {
+  const {
+    currencySymbol='$',
+    label='',
+    separator='.',
+    size='sm',
+    units='00',
+    value,
+  } = props
+
+  return (
+    <div className={kitCSS(props)}>
+      <Caption>{label}</Caption>
+      <div className='pb_currency_wrapper'>
+        <Body className={symbolCSS(currencySymbol)}>{currencySymbol}</Body>
+        <Title
+            className='pb_currency_value'
+            size={sizes[size]}
+        >
+          {`${value}${separator}`}
+        </Title>
+        <Body className='unit'>{units}</Body>
+      </div>
+    </div>
+  )
+}
 
-export default Currency;
+export default Currency