playbook_ui 7.5.1 → 7.6.2.pre.alpha1

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { FormGroup, SelectableCard } from '../../'
+
+const FormGroupSelectableCard = () => {
+  const [value, setValue] = useState('')
+
+  const handleSelect = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormGroup>
+        <SelectableCard
+            checked={value === 'cat'}
+            inputId="cat1"
+            multi={false}
+            name="animal"
+            onChange={handleSelect}
+            value="cat"
+        >
+          {'Cat'}
+        </SelectableCard>
+
+        <SelectableCard
+            checked={value === 'dog'}
+            inputId="dog1"
+            multi={false}
+            name="animal"
+            onChange={handleSelect}
+            value="dog"
+        >
+          {'Dog'}
+        </SelectableCard>
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelectableCard

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.html.erb

@@ -0,0 +1,19 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("selectable_card_icon", props: {
+      icon: "basketball-ball",
+      title_text: "Basketball",
+      input_id: 7,
+      multi: false,
+      name: "select",
+    }) %>
+
+    <%= pb_rails("selectable_card_icon", props: {
+      icon: "football-ball",
+      title_text: "Football",
+      input_id: 8,
+      multi: false,
+      name: "select",
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { FormGroup, SelectableCardIcon } from '../../'
+
+const FormGroupSelectableCardIcon = () => {
+  const [selectedFormat, toggleFormat] = useState(null)
+
+  return (
+    <div>
+      <FormGroup>
+        <SelectableCardIcon
+            checked={selectedFormat === 'basketball'}
+            icon="basketball-ball"
+            inputId={7}
+            name="select"
+            onChange={() => toggleFormat('basketball')}
+            titleText="Basketball"
+            value="basketball"
+        />
+        <SelectableCardIcon
+            checked={selectedFormat === 'football'}
+            icon="football-ball"
+            inputId={8}
+            name="select"
+            onChange={() => toggleFormat('football')}
+            titleText="Football"
+            value="football"
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelectableCardIcon

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb

@@ -0,0 +1,14 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("typeahead", props: {
+      label: "Products",
+      options: [
+        { label: 'Windows', value: 'windows' },
+        { label: 'Roof', value: 'roof' },
+        { label: 'Siding', value: 'siding' },
+        { label: 'Doors', value: 'doors' },
+      ]
+    }) %>
+    <%= pb_rails("button", props: { text: "Add", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Button, FormGroup, Typeahead } from '../../'
+
+const FormGroupTypeahead = (props) => {
+  const options = [
+    { label: 'Windows', value: 'windows' },
+    { label: 'Roof', value: 'roof' },
+    { label: 'Siding', value: 'siding' },
+    { label: 'Doors', value: 'doors' },
+  ]
+
+  return (
+    <div>
+      <FormGroup>
+        <Typeahead
+            label="Products"
+            options={options}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Add"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupTypeahead

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

@@ -0,0 +1,20 @@
+examples:
+
+  rails:
+  - form_group_default: Default
+  - form_group_button: Button
+  - form_group_date_picker: Date Picker
+  - form_group_typeahead: Typeahead
+  - form_group_select: Select
+  - form_group_selectable_card: Selectable Card
+  - form_group_selectable_card_icon: Selectable Card Icon
+
+
+  react:
+  - form_group_default: Default
+  - form_group_button: Button
+  - form_group_date_picker: Date Picker
+  - form_group_typeahead: Typeahead
+  - form_group_select: Select
+  - form_group_selectable_card: Selectable Card
+  - form_group_selectable_card_icon: Selectable Card Icon

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

@@ -0,0 +1,7 @@
+export { default as FormGroupDefault } from './_form_group_default.jsx'
+export { default as FormGroupButton } from './_form_group_button.jsx'
+export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
+export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
+export { default as FormGroupSelect } from './_form_group_select.jsx'
+export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
+export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFormGroup
+    class FormGroup
+      include Playbook::Props
+
+      partial "pb_form_group/form_group"
+
+      def classname
+        generate_classname("pb_form_group_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_image/_image.html.erb

@@ -4,4 +4,5 @@
     class: object.classname,
     aria: object.aria,
     src: object.url,
-    alt: object.alt) %>
+    alt: object.alt)
+%>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -11,6 +11,8 @@ type ImageProps = {
   className?: string,
   data?: object,
   id?: string,
+  size: "xs" | "sm" | "md" | "lg" | "xl",
+  rounded?: boolean,
   url: string,
 }
 
@@ -21,12 +23,15 @@ const Image = (props: ImageProps) => {
     className,
     data = {},
     id,
+    rounded = false,
+    size = '',
     url = '',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image lazyload blur_up'),
+    buildCss('pb_image_kit lazyload blur_up', size),
+    { rounded },
     globalProps(props),
     className
   )
@@ -41,6 +46,7 @@ const Image = (props: ImageProps) => {
           className={classes}
           data-src={url}
           id={id}
+          rounded={rounded}
           src={url}
       />
     </div>

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -1,15 +1,41 @@
-.pb_image_kit {
-	max-width: 100%;
-	max-height: 100%;
-
-	.blur_up {
-		-webkit-filter: blur(6px);
-		filter: blur(6px);
-		transition: filter 550ms, -webkit-filter 550ms;
-	}
-
-	.blur_up.lazyloaded {
-		-webkit-filter: blur(0);
-		filter: blur(0);
-	}
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+
+$image-sizes: (
+  "xs": 60px,
+  "sm": 80px,
+  "md": 100px,
+  "lg": 120px,
+  "xl": 140px,
+);
+
+[class^=pb_image_kit] {
+  position: relative;
+
+  @each $name, $size in $image-sizes {
+    &[class*=_#{$name}] {
+      width: $size;
+      height: $size;
+      object-fit: cover;
+      position: relative;
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: $size;
+    }
+
+    &[class*= rounded] {
+      border-radius: $border-rad-heaviest;
+    }
+
+    .blur_up {
+      -webkit-filter: blur(6px);
+      filter: blur(6px);
+      transition: filter 550ms, -webkit-filter 550ms;
+    }
+
+    .blur_up.lazyloaded {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_image/docs/_default_image.html.erb

@@ -1 +1,13 @@
+
+<br/>
+<%= pb_rails("image", props: { size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+<br/>
+<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+<br/>
+<%= pb_rails("image", props: { size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
+<br/>
+<%= pb_rails("image", props: { size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
+<br/>
+<%= pb_rails("image", props: { size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<br/>
 <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>

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

@@ -3,9 +3,31 @@ import { Image } from '../../'
 
 const DefaultImage = () => {
   return (
-    <Image
-        url="https://unsplash.it/500/400/?image=634"
-    />
+    <>
+      <Image
+          size="xs"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          size="sm"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          size="md"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          size="lg"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          size="xl"
+          url="https://unsplash.it/500/400/?image=634"
+      />
+      <Image
+          url="https://unsplash.it/500/400/?image=634"
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("image", props: { rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+
+<br>
+
+<%= pb_rails("image", props: { rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+
+<br>
+
+<%= pb_rails("image", props: { rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
+
+<br>
+
+<%= pb_rails("image", props: { rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
+
+<br>
+
+<%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>

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