playbook_ui 7.15.1 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import RichTextEditor from './_rich_text_editor'
+
+const testId = 'richtext-input1',
+  kitClass = 'pb_rich_text_editor_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <RichTextEditor data={{ testid: testId }} />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns "Simple" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        simple
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} simple`)
+})
+
+test('returns "Focus" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        focus
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} focus-editor-targets`)
+})
+
+test('returns "Sticky" namespaced class name via prop', () => {
+  render(
+    <RichTextEditor
+        data={{ testid: testId }}
+        sticky
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} sticky`)
+})
+
+test('returns "Dark" class name', () => {
+  render(
+    <RichTextEditor
+        dark
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})

data/app/pb_kits/playbook/pb_section_separator/{_section_separator.html.erb → section_separator.html.erb}

@@ -8,6 +8,6 @@
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>
-        <% end %>    
+        <% end %>
     <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSectionSeparator
-    class SectionSeparator
-      include Playbook::Props
-
-      partial "pb_section_separator/section_separator"
-
+    class SectionSeparator < Playbook::KitBase
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -66,6 +66,10 @@
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       text-shadow: 0 0 0 $text_dk_default;
+      padding-right: $space_xl;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);

data/app/pb_kits/playbook/pb_select/{_select.html.erb → select.html.erb}

@@ -8,8 +8,8 @@
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
-    <% if object.children %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(

data/app/pb_kits/playbook/pb_select/select.rb

@@ -4,13 +4,7 @@ require "action_view"
 
 module Playbook
   module PbSelect
-    class Select
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_select/select"
-
+    class Select < Playbook::KitBase
       prop :blank_selection
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -23,6 +23,7 @@ type SelectableCardProps = {
   dark?: boolean,
   data: object,
   disabled?: boolean,
+  error?: boolean,
   icon?: boolean,
   id?: string,
   inputId?: string,
@@ -42,6 +43,7 @@ const SelectableCard = ({
   dark = false,
   data = {},
   disabled = false,
+  error = false,
   icon = false,
   inputId = null,
   multi = true,
@@ -56,9 +58,12 @@ const SelectableCard = ({
   const dataProps = buildDataProps(data)
 
   const classes = classnames(buildCss('pb_selectable_card_kit',
-    { 'checked': checked,
+    {
+      'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled }),
+      'enabled': !disabled,
+    }),
+  { error },
   dark ? 'dark' : '',
   className
   )
@@ -124,6 +129,7 @@ const SelectableCard = ({
                         checked={checked}
                         disabled={disabled}
                         onClick={handleClick}
+                        readOnly
                         type={inputType}
                     />
                   </Input>
@@ -132,6 +138,7 @@ const SelectableCard = ({
                 <Card.Body
                     dark={dark}
                     padding="sm"
+                    status={error ? 'negative' : null}
                 >
                   {text || children}
                 </Card.Body>

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -14,7 +14,6 @@ $pb_selectable_card_border: 2px;
   display: block;
   margin-bottom: 0;
 
-
   > label {
     > .buffer {
       display: inherit;
@@ -114,6 +113,16 @@ $pb_selectable_card_border: 2px;
     .separator {
       background: $bg_dark;
     }
+
+    &.error {
+      > label {
+        border-color: $error_dark;
+      }
+      .separator{
+        background: $error_dark;
+        width: 2px;
+      }
+    }
   }
 
   .separator {
@@ -127,4 +136,14 @@ $pb_selectable_card_border: 2px;
     margin-bottom: -1px;
     background: $border_light;
   }
+
+  &.error {
+    > label {
+      border-color: $error;
+    }
+    .separator {
+      background: $error;
+      width: 2px;
+    }
+  }
 }

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

@@ -0,0 +1,36 @@
+<%= pb_rails("title", props: {
+  size: 3,
+  text: "What sports do you like?"
+}) %>
+
+<br />
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "football",
+  name: "football",
+  value: "football",
+  variant: "display_input"
+}) do %>
+  Football
+<% end %>
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "basketball",
+  name: "basketball",
+  value: "basketball",
+  variant: "display_input"
+}) do %>
+  Basketball
+<% end %>
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "baseball",
+  name: "baseball",
+  value: "baseball",
+  variant: "display_input"
+}) do %>
+  Baseball
+<% end %>

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { Body, SelectableCard, Title } from '../..'
+
+const SelectableCardError = (props) => {
+  const [football, setFootball] = useState(false)
+  const [basketball, setBasketball] = useState(false)
+  const [baseball, setBaseball] = useState(false)
+
+  return (
+    <div>
+      <Title
+          {...props}
+          size={3}
+          text="What sports do you like?"
+      />
+      <br />
+      <SelectableCard
+          {...props}
+          checked={football}
+          error
+          inputId="football"
+          name="football"
+          onChange={() => setFootball(!football)}
+          value="football"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Football'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          {...props}
+          checked={basketball}
+          error
+          inputId="basketball"
+          name="basketball"
+          onChange={() => setBasketball(!basketball)}
+          value="basketball"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Basketball'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          {...props}
+          checked={baseball}
+          error
+          inputId="baseball"
+          name="baseball"
+          onChange={() => setBaseball(!baseball)}
+          value="baseball"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Baseball'}</Body>
+      </SelectableCard>
+    </div>
+  )
+}
+export default SelectableCardError

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

@@ -7,6 +7,7 @@ examples:
   - selectable_card_options: With Options
   - selectable_card_image: Image Example
   - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors
 
 
   react:
@@ -15,3 +16,4 @@ examples:
   - selectable_card_block: Block
   - selectable_card_image: Image Example
   - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors

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

@@ -1,5 +1,6 @@
 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 SelectableCardError } from './_selectable_card_error.jsx'
 export { default as SelectableCardImage } from './_selectable_card_image.jsx'
 export { default as SelectableCardInput } from './_selectable_card_input.jsx'

data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.html.erb → selectable_card.html.erb}

@@ -24,19 +24,19 @@
             <% end %>
           <% end %>
           <div class="separator"></div>
-          <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-            <% if object.children.nil? %>
+          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+            <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>
-              <%= capture(&object.children) %>
+              <%= content %>
             <% end %>
           <% end %>
         <% end %>
       <% else %>
-        <% if object.children.nil? %>
+        <% if content.nil? %>
           <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
-          <%= capture(&object.children) %>
+          <%= content %>
         <% end %>
         <% if object.icon %>
           <div class="pb_selectable_card_circle">

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -2,15 +2,13 @@
 
 module Playbook
   module PbSelectableCard
-    class SelectableCard
-      include Playbook::Props
-
-      partial "pb_selectable_card/selectable_card"
-
+    class SelectableCard < Playbook::KitBase
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :error, type: Playbook::Props::Boolean,
+                   default: false
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :multi, type: Playbook::Props::Boolean,
@@ -28,6 +26,7 @@ module Playbook
       def classname
         [
           generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          error_class,
           dark_props,
         ].compact.join(" ")
       end
@@ -63,6 +62,10 @@ module Playbook
         disabled ? "disabled" : ""
       end
 
+      def status
+        error ? "negative" : nil
+      end
+
     private
 
       def checked_class
@@ -72,6 +75,10 @@ module Playbook
       def enable_disabled_class
         disabled ? "disabled" : "enabled"
       end
+
+      def error_class
+        error ? "error" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableCardIcon
-    class SelectableCardIcon
-      include Playbook::Props
-
-      partial "pb_selectable_card_icon/selectable_card_icon"
-
+    class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableIcon
-    class SelectableIcon
-      include Playbook::Props
-
-      partial "pb_selectable_icon/selectable_icon"
-
+    class SelectableIcon < Playbook::KitBase
       # Icon props
       prop :icon, type: Playbook::Props::String
       # Title text

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 %>