RubyGems - playbook_ui - Versions diffs - 6.6.1 → 6.8.2.pre.alpha1 - Mend

playbook_ui 6.6.1 → 6.8.2.pre.alpha1

Files changed (368) hide show

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx CHANGED

@@ -1,10 +1,11 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
-const BadgeRounded = () => {
+const BadgeRounded = (props) => {
   return (
     <div>
       <Badge
+          {...props}
           rounded
           text="+1"
           variant="primary"
@@ -13,6 +14,7 @@ const BadgeRounded = () => {
       &nbsp;
       <Badge
+          {...props}
           rounded
           text="+4"
           variant="primary"
@@ -21,6 +23,7 @@ const BadgeRounded = () => {
       &nbsp;
       <Badge
+          {...props}
           rounded
           text="+1000"
           variant="primary"

data/app/pb_kits/playbook/pb_badge/docs/example.yml CHANGED

@@ -3,10 +3,9 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark

data/app/pb_kits/playbook/pb_badge/docs/index.js CHANGED

@@ -1,4 +1,3 @@
 export { default as BadgeDefault } from './_badge_default.jsx'
 export { default as BadgeRounded } from './_badge_rounded.jsx'
 export { default as BadgeColors } from './_badge_colors.jsx'
-export { default as BadgeDark } from './_badge_dark.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx CHANGED

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_body/body.rb CHANGED

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
       partial "pb_body/body"
       prop :color, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx CHANGED

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Body } from '../../'
-const BodyBlock = () => {
+const BodyBlock = (props) => {
   return (
     <div>
-      <Body>
+      <Body {...props}>
         {'I am a body kit'}
       </Body>
     </div>

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

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

data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED

@@ -1,9 +1,7 @@
 examples:
   rails:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block
   react:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block

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

@@ -1,3 +1,2 @@
-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

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

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

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonAccessibility = () => (
+const ButtonAccessibility = (props) => (
   <div>
     <Button
+        {...props}
         aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"

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

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonBlockContent = () => (
+const ButtonBlockContent = (props) => (
   <div>
     <Button
+        {...props}
         fixedWidth
         icon="users"
         text="Button with Block Content"

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

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonDefault = () => (
+const ButtonDefault = (props) => (
   <div>
     <Button
+        {...props}
+        marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
@@ -12,18 +14,20 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
+        {...props}
     />
     {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"
         variant="link"
+        {...props}
     />
-    {' '}
     <Button
         disabled
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
+        {...props}
     />
   </div>

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

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

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

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

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

@@ -1,20 +1,23 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonLoading = () => (
+const ButtonLoading = (props) => (
   <div>
     <Button
+        {...props}
         loading
         text="Button Primary"
     />
     {' '}
     <Button
+        {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
     {' '}
     <Button
+        {...props}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx CHANGED

@@ -1,9 +1,10 @@
 import React from 'react'
 import Button from '../_button.jsx'
-const ButtonOptions = () => (
+const ButtonOptions = (props) => (
   <div>
     <Button
+        {...props}
         htmlType="submit"
         onClick={() => alert('Click!')}
         text="Button with options"

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

@@ -1,7 +1,6 @@
 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
@@ -10,7 +9,6 @@ examples:
   - button_options: Button Additional Options
   react:
   - button_default: Button Variants
-  - button_default_dark: Button Variants Dark
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

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

@@ -4,5 +4,4 @@ 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_button_toolbar/_button_toolbar.jsx CHANGED

@@ -35,7 +35,11 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_button_toolbar_kit', orientation, { connected }),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_caption/_caption.html.erb CHANGED

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

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

@@ -35,8 +35,8 @@ const Caption = (props: CaptionProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, variant),
-    className,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb ADDED

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx ADDED

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+export default CaptionBlock

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx CHANGED

@@ -1,15 +1,20 @@
 import React from 'react'
 import { Caption } from '../../'
-const CaptionLight = () => {
+const CaptionLight = (props) => {
   return (
     <div>
-      <Caption text="Caption" />
       <Caption
+          {...props}
+          text="Caption"
+      />
+      <Caption
+          {...props}
           size="lg"
           text="Caption Large"
       />
       <Caption
+          {...props}
           size="xs"
           text="Subcaption"
       />

data/app/pb_kits/playbook/pb_caption/docs/example.yml CHANGED

@@ -1,9 +1,7 @@
 examples:
   rails:
-  - caption_light: Light UI
-  - caption_variants: Variants
-  - caption_dark: Dark UI
+  - caption_light: Default
+  - caption_block: Block
   react:
-  - caption_light: Light UI
-  - caption_variants: Variants
-  - caption_dark: Dark UI
+  - caption_light: Default
+  - caption_block: Block

data/app/pb_kits/playbook/pb_caption/docs/index.js CHANGED

@@ -1,3 +1,3 @@
-export { default as CaptionDark } from './_caption_dark.jsx'
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_card/_card.scss CHANGED

@@ -40,9 +40,6 @@
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    &.dark {
-      @include pb_card_dark;
-    }
   }
   @each $name, $shadow in $box_shadows {

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx CHANGED

@@ -1,13 +1,16 @@
 import React from 'react'
 import Card from '../_card.jsx'
-const CardBorderNone = () => {
+const CardBorderNone = (props) => {
   return (
-    <div className="bg-light-doc-example">
-      <Card borderNone>{'Card content'}</Card>
+    <Card
+        {...props}
+        borderNone
+    >
+      {'Card content'}
+    </Card>
-    </div>
   )
 }