playbook_ui 7.5.1 → 7.6.2.pre.alpha1

data/app/controllers/playbook/application_controller.rb

@@ -8,6 +8,4 @@ module Playbook
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
-
-  
 end

data/app/pb_kits/playbook/_playbook.scss

@@ -29,6 +29,7 @@
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';
+@import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
@@ -64,6 +65,7 @@
 @import 'pb_selectable_card/selectable_card';
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
+@import 'pb_selectable_list/selectable_list';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -85,4 +87,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

data/app/pb_kits/playbook/data/menu.yml

@@ -1,9 +1,3 @@
-samples:
-  - dashboards
-  - registration
-  - filter_table
-  - collection_detail
-
 kits:
   - avatar
   - avatar_action_button
@@ -28,12 +22,14 @@ kits:
     - date_picker
     - file_upload
     - form
+    - form_group
     - form_pill
     - radio
     - select
     - selectable_card
     - selectable_card_icon
     - selectable_icon
+    - selectable_list
     - text_input
     - textarea
     - typeahead

data/app/pb_kits/playbook/index.js

@@ -33,6 +33,7 @@ export Filter from './pb_filter/_filter.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
+export FormGroup from './pb_form_group/_form_group.jsx'
 export FormPill from './pb_form_pill/_form_pill.jsx'
 export Gauge from './pb_gauge/_gauge.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
@@ -70,6 +71,8 @@ export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
 export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
 export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
+export SelectableList from './pb_selectable_list/_selectable_list.jsx'
+export SelectableListItem from './pb_selectable_list/_item.jsx'
 export Source from './pb_source/_source.jsx'
 export StarRating from './pb_star_rating/_star_rating.jsx'
 export StatChange from './pb_stat_change/_stat_change.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -1,8 +1,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
-@import "../pb_online_status/online_status";
-@import "../pb_image/image";
 
 $avatar-sizes: (
   "xs":   28px,

data/app/pb_kits/playbook/pb_background/_background.html.erb

@@ -1,14 +1,20 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    data: object.data,
-    id: object.id) do %>
-    <% if object.image_url.present? %>
-      <div class="<%= object.classname %>" style="background-image: url(<%= object.image_url %>);">
-        <%= capture(&object.children) %>
-      </div>
-    <% else %>
-      <div class="<%= object.classname %>">
-        <%= capture(&object.children) %>
-      </div>
+<% if object.image_url.present? %>
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
+      style: `background-image: url(#{object.image_url});`
+  ) do %>
+    <%= capture(&object.children) %>
+  <% end %>
+<% else %>
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname
+  ) do %>
+    <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -39,24 +39,28 @@ const Background = (props: BackgroundProps) => {
   }
 
   return (
-    <Tag
-        {...ariaProps}
-        {...dataProps}
-        id={id}
-    >
+    <>
       <If condition={imageUrl}>
-        <div
+        <Tag
             className={classes + 'lazyload blur_up'}
             style={backgroundStyle}
+            {...ariaProps}
+            {...dataProps}
+            id={id}
         >
           { children }
-        </div>
+        </Tag>
         <Else />
-        <div className={classes}>
+        <Tag
+            className={classes}
+            {...ariaProps}
+            {...dataProps}
+            id={id}
+        >
           { children }
-        </div>
+        </Tag>
       </If>
-    </Tag>
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx

@@ -2,12 +2,10 @@ import React from 'react'
 import { Background } from '../..'
 
 const BackgroundDark = () => (
-  <div>
-    <Background
-        backgroundColor="dark"
-        padding="xl"
-    />
-  </div>
+  <Background
+      backgroundColor="dark"
+      padding="xl"
+  />
 )
 
 export default BackgroundDark

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -2,12 +2,10 @@ import React from 'react'
 import { Background } from '../..'
 
 const BackgroundGradient = () => (
-  <div>
-    <Background
-        backgroundColor="gradient"
-        padding="xl"
-    />
-  </div>
+  <Background
+      backgroundColor="gradient"
+      padding="xl"
+  />
 )
 
 export default BackgroundGradient

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -3,28 +3,26 @@ import { Background } from '../..'
 import { Card, Flex, FlexItem, Title } from '../..'
 
 const BackgroundImage = () => (
-  <div>
-    <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
-      <Flex
-          orientation="column"
-          vertical="center"
-      >
-        <FlexItem>
-          <Title
-              dark
-              padding="lg"
-              size={1}
-              text="Background Kit Image"
-          />
-        </FlexItem>
-        <FlexItem padding="lg">
-          <Card shadow="deepest">
-            {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
-          </Card>
-        </FlexItem>
-      </Flex>
-    </Background>
-  </div>
+  <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
+    <Flex
+        orientation="column"
+        vertical="center"
+    >
+      <FlexItem>
+        <Title
+            dark
+            padding="lg"
+            size={1}
+            text="Background Kit Image"
+        />
+      </FlexItem>
+      <FlexItem padding="lg">
+        <Card shadow="deepest">
+          {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
+        </Card>
+      </FlexItem>
+    </Flex>
+  </Background>
 )
 
 export default BackgroundImage

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -2,12 +2,10 @@ import React from 'react'
 import { Background } from '../..'
 
 const BackgroundLight = () => (
-  <div>
-    <Background
-        backgroundColor="light"
-        padding="xl"
-    />
-  </div>
+  <Background
+      backgroundColor="light"
+      padding="xl"
+  />
 )
 
 export default BackgroundLight

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -5,7 +5,7 @@ const BackgroundWhite = () => (
   <div>
     <Background
         backgroundColor="white"
-        className="blah"
+        padding="xl"
     />
   </div>
 

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,4 @@
 @import "./button_mixins";
-@import "../pb_icon/icon";
 
 [class^=pb_button_kit]{
   // Variants =================

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -4,7 +4,7 @@
                         class: object.classname) do %>  
   <% if object.children %>
     <%= capture(&object.children) %>
-   <% else %>             
+   <% else %>            
     <%= object.input %>
   <% end %>
     <span class="pb_checkbox_checkmark">

data/app/pb_kits/playbook/pb_form_group/_form_group.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -0,0 +1,41 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type FormGroupProps = {
+  aria?: object,
+  children?: Node,
+  className?: string,
+  data?: object,
+  id?: string
+}
+
+const FormGroup = (props: FormGroupProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    children,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default FormGroup

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -0,0 +1,115 @@
+[class^=pb_form_group_kit] {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+
+  & [class^=pb_text_input_kit] .text_input_wrapper,
+  & [class^=pb_date_picker_kit] .input_wrapper,
+  & [class^=pb_select] {
+    margin-bottom: 0;
+  }
+
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_text_input_kit]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_button_kit]:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    min-height: 45px;
+  }
+
+  & > [class^=pb_button_kit]:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-width: 0;
+    min-height: 45px;
+  }
+
+  & > [class^=pb_date_picker_kit]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_date_picker_kit]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_select]:not(:last-child) {
+    margin-bottom: 0px;
+    .pb_select_kit_wrapper select {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_select]:not(:first-child) {
+    margin-bottom: 0px;
+    .pb_select_kit_wrapper select {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > [class^=pb_selectable_card_kit]:not(:last-child) label {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-width: 0;
+  }
+
+  & > [class^=pb_selectable_card_kit]:not(:first-child) label {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) [class^=pb_selectable_card_kit] label {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:first-child) [class^=pb_selectable_card_kit] label {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
+    [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_typeahead_kit]:not(:last-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+      min-height: 26px;
+    }
+  }
+
+  & > [class^=pb_typeahead_kit]:not(:first-child) {
+    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}

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>