playbook_ui 7.4.1 → 7.6.1.pre.alpha1

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

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+
+const FormGroupButton = (props) => (
+  <div>
+    <div>
+      <FormGroup>
+        <TextInput
+            label="With Label"
+            placeholder="Search"
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup>
+        <TextInput
+            placeholder="Search"
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+
+export default FormGroupButton

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

@@ -0,0 +1,6 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name" }) %>
+    <%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { DatePicker, FormGroup, TextInput } from '../../'
+
+const FormGroupDatePicker = () => (
+  <div>
+    <FormGroup>
+      <TextInput
+          label="Event"
+          placeholder="Event Name"
+      />
+      <DatePicker
+          label="event date"
+          pickerId="date-picker-default"
+      />
+    </FormGroup>
+  </div>
+)
+
+export default FormGroupDatePicker

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

@@ -0,0 +1,7 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FormGroup, TextInput } from '../../'
+
+const FormGroupDefault = () => (
+  <div>
+    <FormGroup>
+      <TextInput
+          label="First Name"
+          placeholder="Enter First Name"
+      />
+      <TextInput
+          label="Middle Intial"
+          placeholder="Enter Middle Initial"
+      />
+      <TextInput
+          label="Last Name"
+          placeholder="Enter Last Name"
+      />
+    </FormGroup>
+  </div>
+)
+
+export default FormGroupDefault

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

@@ -0,0 +1,19 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("select", props: {
+      blank_selection: "Select Genre",
+      options: [
+        { value: "Country" },
+        { value: "Pop" },
+        { value: "Rock" },
+        { value: "Hip-Hop/Rap" },
+        { value: "Classical" },
+        { value: "Gospel" },
+        { value: "Alternative" },
+        { value: "Indie" },
+        { value: "Other" },
+      ]
+    }) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { FormGroup, Select, TextInput } from '../../'
+
+const FormGroupSelect = () => {
+  const options = [
+    { value: 'Country' },
+    { value: 'Pop' },
+    { value: 'Rock' },
+    { value: 'Hip-Hop/Rap' },
+    { value: 'Classical' },
+    { value: 'Gospel' },
+    { value: 'Alternative' },
+    { value: 'Indie' },
+    { value: 'Other' },
+  ]
+
+  return (
+    <div>
+      <FormGroup>
+        <TextInput
+            label="Artist"
+            placeholder="Enter Artist Name"
+        />
+        <Select
+            blankSelection="Select Genre"
+            options={options}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelect

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

@@ -0,0 +1,21 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("selectable_card", props: {
+        input_id: "cat1",
+        name: "animal",
+        value: "cat",
+        multi: false
+      }) do %>
+        Cat
+      <% end %>
+
+    <%= pb_rails("selectable_card", props: {
+      input_id: "dog1",
+      name: "animal",
+      value: "dog",
+      multi: false
+    }) do %>
+      Dog
+    <% end %>
+  <% end %>
+</div>

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,42 @@
-.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";
+@import "../pb_image/image";
+
+$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);
+    }
+  }
 }