RubyGems - playbook_ui - Versions diffs - 3.1.0 → 3.2.0 - Mend

playbook_ui 3.1.0 → 3.2.0

Files changed (322) hide show

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED Viewed

@@ -1,18 +1,30 @@
-import React from "react"
-import {Body} from "../../"
+import React from 'react'
+import { Body } from '../../'
-function BodyLight() {
+const BodyLight = () => {
   return (
     <div>
       <Body text="I am a body kit (Default)" />
-      <Body color="light" text="I am a body kit (Light)" />
-      <Body color="lighter" text="I am a body kit (Lighter)" />
-      <br/>
-      <br/>
-      <Body status="negative" text="I am a body kit (Status: negative)" />
-      <Body status="positive" text="I am a body kit (Status: positive)" />
+      <Body
+          color="light"
+          text="I am a body kit (Light)"
+      />
+      <Body
+          color="lighter"
+          text="I am a body kit (Lighter)"
+      />
+      <br />
+      <br />
+      <Body
+          status="negative"
+          text="I am a body kit (Status: negative)"
+      />
+      <Body
+          status="positive"
+          text="I am a body kit (Status: positive)"
+      />
     </div>
   )
 }
-export default BodyLight;
+export default BodyLight

data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export {default as BodyDark} from './_body_dark.jsx';
-export {default as BodyLight} from './_body_light.jsx';
-export {default as BodyBlock} from './_body_block.jsx';
+export { default as BodyDark } from './_body_dark.jsx'
+export { default as BodyLight } from './_body_light.jsx'
+export { default as BodyBlock } from './_body_block.jsx'

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

@@ -16,6 +16,7 @@ type ButtonPropTypes = {
   fullWidth?: Boolean,
   icon?: String,
   id?: String,
+  link?: String,
   loading?: Boolean,
   newWindow?: Boolean,
   onClick?: EventHandler,
@@ -57,7 +58,7 @@ const buttonAriaProps = (props: ButtonPropTypes) => {
   if (typeof aria !== 'object') return {}
   const { label } = aria
-  let ariaProps = {}
+  const ariaProps = {}
   if (label !== null) ariaProps['aria-label'] = label
@@ -82,11 +83,11 @@ const Button = (props: ButtonPropTypes) => {
   const buttonAria = buttonAriaProps(props)
   const css = classnames(buttonClassName(props), className)
   const loadingIcon = (
-    <i className='pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon' />
+    <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon" />
   )
   const content = (
-    <span className='pb_button_content'>
+    <span className="pb_button_content">
       <If condition={icon !== null}>
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
       </If>
@@ -97,22 +98,24 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-        {...buttonAria}
-        className={css}
-        href={link}
-        id={id}
-        target={newWindow ? '_blank' : null}>
+          {...buttonAria}
+          className={css}
+          href={link}
+          id={id}
+          target={newWindow ? '_blank' : null}
+      >
         <If condition={loading}>{loadingIcon}</If>
         {content}
       </a>
       <Else />
       <button
-        {...buttonAria}
-        className={css}
-        id={id}
-        onClick={onClick}
-        type={htmlType}
-        value={value}>
+          {...buttonAria}
+          className={css}
+          id={id}
+          onClick={onClick}
+          type={htmlType}
+          value={value}
+      >
         <If condition={loading}>{loadingIcon}</If>
         {content}
       </button>

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

@@ -1,15 +1,15 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 const ButtonAccessibility = () => (
-    <div>
-        <Button
-            aria={{label: "button"}}
-            link="https://google.com"
-            tag="a"
-            text="Button with ARIA"
-        />
-    </div>
+  <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 CHANGED Viewed

@@ -1,14 +1,14 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 const ButtonBlockContent = () => (
-    <div>
-        <Button
-            fixedWidth
-            icon="users"
-            text="Button with Block Content"
-        />
-    </div>
+  <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 CHANGED Viewed

@@ -1,28 +1,28 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 const ButtonDefault = () => (
-    <div>
-        <Button
-                onClick={() => console.log("button clicked!")}
-                text="Button Primary"
-        />
-        <Button
-                onClick={() => console.log("button clicked!")}
-                text="Button Secondary"
-                variant="secondary"
-        />
-        <Button
-                onClick={() => console.log("button clicked!")}
-                text="Button Link"
-                variant="link"
-        />
-        <Button
-                disabled
-                onClick={() => console.log("button clicked!")}
-                text="Button Disabled"
-        />
-    </div>
+  <div>
+    <Button
+        onClick={() => alert('button clicked!')}
+        text="Button Primary"
+    />
+    <Button
+        onClick={() => alert('button clicked!')}
+        text="Button Secondary"
+        variant="secondary"
+    />
+    <Button
+        onClick={() => alert('button clicked!')}
+        text="Button Link"
+        variant="link"
+    />
+    <Button
+        disabled
+        onClick={() => alert('button clicked!')}
+        text="Button Disabled"
+    />
+  </div>
 )
 export default ButtonDefault

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

@@ -1,27 +1,28 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 const ButtonDefaultDark = () => (
-    <div>
-        <Button text="Button Primary"
-                dark
-        />
-        <Button
-                text="Button Secondary"
-                variant="secondary"
-                dark
-        />
-        <Button
-                text="Button Link"
-                variant="link"
-                dark
-        />
-        <Button
-                text="Button Disabled"
-                disabled
-                dark
-        />
-    </div>
+  <div>
+    <Button
+        dark
+        text="Button Primary"
+    />
+    <Button
+        dark
+        text="Button Secondary"
+        variant="secondary"
+    />
+    <Button
+        dark
+        text="Button Link"
+        variant="link"
+    />
+    <Button
+        dark
+        disabled
+        text="Button Disabled"
+    />
+  </div>
 )
-export default ButtonDefaultDark
+export default ButtonDefaultDark

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

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

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

@@ -1,23 +1,23 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 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>
+  <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 CHANGED Viewed

@@ -1,23 +1,23 @@
 import React from 'react'
-import {Button} from '../../'
+import { Button } from '../../'
 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>
+  <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/_button_options.jsx CHANGED Viewed

@@ -2,13 +2,13 @@ import React from 'react'
 import Button from '../_button.jsx'
 const ButtonOptions = () => (
-    <div>
-        <Button
-            htmlType="submit"
-            text="Button with options"
-            value="1234"
-        />
-    </div>
+  <div>
+    <Button
+        htmlType="submit"
+        text="Button with options"
+        value="1234"
+    />
+  </div>
 )
 export default ButtonOptions

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

@@ -1,8 +1,8 @@
-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'
-export {default as ButtonOptions} from './_button_options.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'
+export { default as ButtonOptions } from './_button_options.jsx'

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
 type CaptionProps = {
   className?: String,
@@ -15,23 +16,19 @@ type CaptionProps = {
 const Caption = ({
   className,
   children,
-  dark=false,
-  size='md',
-  tag='div',
+  dark = false,
+  size = 'md',
+  tag = 'div',
   text,
 }: CaptionProps) => {
   const Tag = `${tag}`
-  const css = classnames([
-    `pb_caption_kit` +
-    `_${size}` +
-    (dark === true ? '_dark' : ''),
-    className,
-  ])
+  const css = classnames(className, buildCss('pb_caption_kit', size, {
+    'dark': dark,
+  }))
   return (
-    <Tag className={css} >
+    <Tag className={css}>
       {text || children}
     </Tag>
   )