playbook_ui 7.4.0 → 7.6.0

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Image } from '../../'
+
+const RoundedImage = () => {
+  return (
+    <>
+      <Image
+          rounded
+          size="xs"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          rounded
+          size="sm"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          rounded
+          size="md"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          rounded
+          size="lg"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          rounded
+          size="xl"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+    </>
+  )
+}
+
+export default RoundedImage

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

@@ -1,5 +1,7 @@
 examples:
   rails:
   - default_image: Default
+  - rounded_image: Rounded
   react:
   - default_image: Default
+  - rounded_image: Rounded

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

@@ -1 +1,2 @@
 export { default as DefaultImage } from './_default_image.jsx'
+export { default as RoundedImage } from './_rounded_image.jsx'

data/app/pb_kits/playbook/pb_image/image.rb

@@ -8,10 +8,25 @@ module Playbook
       partial "pb_image/image"
 
       prop :alt
+      prop :rounded, type: Playbook::Props::Boolean,
+                     default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl none],
+                  default: "none"
       prop :url
 
       def classname
-        generate_classname("pb_image_kit lazyload blur_up")
+        generate_classname("pb_image_kit lazyload blur_up", size_class) + rounded_class
+      end
+
+    private
+
+      def rounded_class
+        rounded ? " rounded" : ""
+      end
+
+      def size_class
+        size == "none" ? nil : size
       end
     end
   end

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -17,7 +17,9 @@ type ListProps = {
   ordered: boolean,
   role?: string,
   tabIndex?: string,
+  text?: string,
   size?: string,
+  variant?: string,
   xpadding: boolean,
 }
 
@@ -36,6 +38,8 @@ const List = (props: ListProps) => {
     size = '',
     tabIndex,
     xpadding = false,
+    variant,
+    text,
   } = props
 
   const layoutClass = {
@@ -44,6 +48,9 @@ const List = (props: ListProps) => {
     default: '',
   }
 
+  const childrenWithProps = React.Children.map(children, (child) => {
+    return React.cloneElement(child, { text, variant })
+  })
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -70,7 +77,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {children}
+          {childrenWithProps}
         </ol>
         <Else />
         <ul
@@ -81,7 +88,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {children}
+          {childrenWithProps}
         </ul>
       </If>
     </div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selectable-image-default",
+    name: "selectable-image-default",
+    value: "selectable-image-default",
+    checked: true,
+    icon: true
+  }) do %>
+    <%= pb_rails("image", props: { rounded: true, size: "xl",url: "https://unsplash.it/500/400/?image=634" }) %>
+    <%= pb_rails("body", props: { tag: "span"}) do %>
+      Add text here
+    <% end %>
+
+  <% end %>
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selectable-image-xl",
+    name: "selectable-image-xl",
+    value: "selectable-image-xl",
+    checked: false,
+    icon: true
+  }) do %>
+    <%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  Body,
+  Image,
+  SelectableCard,
+} from '../../'
+
+class SelectableCardImage extends React.Component {
+  state = {
+    selectableImage: true,
+    unselectedImage: false,
+  }
+
+  handleSelect = (event) => {
+    this.setState({
+      [event.target.id]: event.target.checked,
+    })
+  }
+
+  render() {
+    return (
+      <div className="pb--doc-demo-row">
+
+        <SelectableCard
+            checked={this.state.selectableImage}
+            icon
+            inputId="selectableImage"
+            name="selectableImage"
+            onChange={this.handleSelect}
+            value="selectableImage"
+        >
+          <Image
+              rounded
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+
+          <Body>{'Add text here'}</Body>
+        </SelectableCard>
+
+        <SelectableCard
+            checked={this.state.unselectedImage}
+            icon
+            inputId="unselectedImage"
+            name="unselectedImage"
+            onChange={this.handleSelect}
+            value="unselectedImage"
+        >
+          <Image
+              rounded
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </SelectableCard>
+
+      </div>
+    )
+  }
+}
+
+export default SelectableCardImage

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md

@@ -0,0 +1 @@
+Selectable Cards can pass images with optional text.

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

@@ -5,9 +5,11 @@ examples:
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
   - selectable_card_options: With Options
+  - selectable_card_image: Image Example
 
 
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
+  - selectable_card_image: Image Example

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

@@ -1,3 +1,4 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'
+export { default as SelectableCardImage } from './_selectable_card_image.jsx'

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -0,0 +1,90 @@
+/* @flow */
+import React, { Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Checkbox, ListItem, Radio } from '..'
+
+type SelectableListItemProps = {
+  aria?: object,
+  children: array<Node> | Node,
+  checked?: boolean,
+  className?: string,
+  data?: object,
+  defaultChecked?: boolean,
+  id?: string,
+  label?: string,
+  text?: string,
+  name?: string,
+  value?: string,
+  variant?: string,
+  onChange: (boolean)=>void,
+}
+
+const SelectableListItem = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  data = {},
+  defaultChecked,
+  id,
+  label,
+  text = '',
+  name = '',
+  value = '',
+  variant = 'checkbox',
+  onChange = () => {},
+  ...props
+}: SelectableListItemProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_selectable_list_item_kit'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <ListItem {...props}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+      >
+        <Choose>
+          <When condition={variant == 'checkbox'}>
+            <Checkbox
+                checked={checked}
+                id={id}
+                name={name}
+                onChange={onChange}
+                // eslint suppressor, text is needed to display on screen
+                text={label || (text && false)}
+                type="checkbox"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <When condition={variant == 'radio'}>
+            <Radio
+                defaultChecked={defaultChecked}
+                id={id}
+                label={label}
+                name={name}
+                onChange={onChange}
+                type="radio"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <Otherwise>{children}</Otherwise>
+        </Choose>
+      </div>
+    </ListItem>
+  )
+}
+
+export default SelectableListItem

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= pb_rails("list") do %>
+        <% object.items.each do |item| %>
+          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+        <% end %>
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -0,0 +1,47 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { List } from  '..'
+import SelectableListItem from './_item.jsx'
+
+type SelectableListProps = {
+  aria?: object,
+  children?: Node,
+  className?: string,
+  data?: object,
+  id?: string,
+  variant?: 'checkbox' | 'radio',
+}
+
+const SelectableList = (props: SelectableListProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
+  const dataProps = buildDataProps(data)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <List {...props}>
+        {children}
+      </List>
+    </div>
+  )
+}
+
+SelectableList.Item = SelectableListItem
+
+export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -0,0 +1,17 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+[class^=pb_selectable_list]{
+  margin-bottom: 0px;
+  [class^=pb_item_kit] {
+    &:hover {
+      background-color: $bg_light;
+    }
+  }
+  [class^=pb_radio_kit] {
+    margin-left: $space_xs;
+  }
+  [class^=pb_checkbox_kit] {
+    margin-left: $space_xs;
+  }
+}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb

@@ -0,0 +1,18 @@
+<%= content_tag(:li,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <% puts object.variant %>
+  <% if object.variant == "radio"%>
+    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "checkbox",
+          items: [
+            { text: "Mild",
+              input_options: {
+                value: "1",
+                name: "checkbox-name-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "checkbox-name-2",
+              }
+            },
+            { text: "Hot",
+              input_options: {
+                value: "3",
+                name: "checkbox-name-3",
+              }
+            }
+          ]
+        }
+    )
+%>