RubyGems - playbook_ui - Versions diffs - 3.4.0 → 3.5.0 - Mend

playbook_ui 3.4.0 → 3.5.0

Files changed (80) hide show

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx CHANGED Viewed

@@ -9,6 +9,7 @@ const HomeAddressStreetDark = () => {
         city="West Chester"
         dark
         homeId={8250263}
+        homeUrl="https://powerhrg.com/"
         state="PA"
         territory="PHL"
         zipcode="19382"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb CHANGED Viewed

@@ -3,6 +3,7 @@
   address_cont: "Apt M18",
   city: "West Chester",
   home_id: 8250263,
+  home_url: "https://powerhrg.com/",
   house_style: "Colonial",
   state: "PA",
   zipcode: "19382",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx CHANGED Viewed

@@ -8,6 +8,7 @@ const HomeAddressStreetDefault = () => {
         addressCont="Apt M18"
         city="West Chester"
         homeId={8250263}
+        homeUrl="https://powerhrg.com/"
         houseStyle="Colonial"
         state="PA"
         territory="PHL"

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb CHANGED Viewed

@@ -11,6 +11,7 @@ module Playbook
       prop :address_cont
       prop :city
       prop :home_id, type: Playbook::Props::Number
+      prop :home_url
       prop :house_style
       prop :state
       prop :zipcode

data/app/pb_kits/playbook/pb_list/_item.html.erb CHANGED Viewed

@@ -1,6 +1,8 @@
 <%= content_tag(:li,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
+                id: object.id,
+                data: object.data,
+                class: object.classname,
+                tabindex: object.tabindex
+  ) do %>
     <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_list/_list.html.erb CHANGED Viewed

@@ -1,8 +1,12 @@
 <%= content_tag(:div, class: object.list_classname) do %>
   <%= content_tag(:"#{object.ordered_class}",
-      id: object.id,
-      data: object.data,
-      class: object.classname) do %>
+                  id: object.id,
+                  data: object.data,
+                  class: object.classname,
+                  role: object.role,
+                  aria: object.aria,
+                  tabindex: object.tabindex
+    ) do %>
       <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb CHANGED Viewed

@@ -5,6 +5,8 @@ module Playbook
     class Item
       include Playbook::Props
+      prop :tabindex
       partial "pb_list/item"
       def classname

data/app/pb_kits/playbook/pb_list/list.rb CHANGED Viewed

@@ -19,6 +19,8 @@ module Playbook
                      default: false
       prop :xpadding, type: Playbook::Props::Boolean,
                       default: false
+      prop :role
+      prop :tabindex
       def list_classname
         [

data/app/pb_kits/playbook/pb_radio/_radio.html.erb CHANGED Viewed

@@ -12,5 +12,5 @@
     <% end %>
     <span class="pb_radio_button"></span>
-    <%= pb_rails("body", props: { text: object.text, dark: object.dark}) %>
+    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark}) %>
 <% end %>

data/app/pb_kits/playbook/pb_radio/_radio.jsx CHANGED Viewed

@@ -7,6 +7,7 @@ import Body from '../pb_body/_body.jsx'
 type RadioProps = {
   className?: String,
   data?: String,
+  error?: Boolean,
   id?: String,
   label: String,
   name: String,
@@ -22,9 +23,10 @@ const Radio = (props: RadioProps) => {
   const {
     checked = false,
     children,
-    className,
+    className = '',
     dark = false,
     data,
+    error = false,
     id,
     label,
     name,
@@ -33,9 +35,11 @@ const Radio = (props: RadioProps) => {
     onChange = () => {},
   } = props
+  const errorClass = error ? 'error' : ''
   return (
     <label
-        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + className}
+        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className}
         htmlFor={id}
     >
       <If condition={children}>
@@ -54,6 +58,7 @@ const Radio = (props: RadioProps) => {
       <span className="pb_radio_button" />
       <Body
           dark={dark}
+          status={error ? 'negative' : null}
           text={label}
       />
     </label>

data/app/pb_kits/playbook/pb_radio/_radio.scss CHANGED Viewed

@@ -29,12 +29,22 @@
     }
   }
   &[class*=_dark] {
-      input:checked ~ .pb_radio_button {
-        border: 6px solid $primary;
-      }
+    input:checked ~ .pb_radio_button {
+      border: 6px solid $primary;
+    }
-      &:hover .pb_radio_button {
-        border-color: $primary_action;
+    &:hover .pb_radio_button {
+      border-color: $primary_action;
+    }
+    &.error {
+      > .pb_radio_button {
+        border-color: $error_dark;
       }
     }
+  }
+  &.error {
+    > .pb_radio_button {
+      border-color: $error;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.html.erb ADDED Viewed

@@ -0,0 +1,7 @@
+<%= pb_rails("radio", props: {
+  dark: true,
+  error: true,
+  text: "Power",
+  name: "group 1",
+  value: "Power"
+}) %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Radio } from '../..'
+const RadioDarkError = () => {
+  return (
+    <div>
+      <Radio
+          dark
+          error
+          label="Power"
+          name="Group2"
+          value="Power"
+      />
+    </div>
+  )
+}
+export default RadioDarkError

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("radio", props: {
+  error: true,
+  text: "Power",
+  name: "group 1",
+  value: "Power"
+}) %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Radio } from '../..'
+const RadioError = () => {
+  return (
+    <div>
+      <Radio
+          error
+          label="Power"
+          name="Group2"
+          value="Power"
+      />
+    </div>
+  )
+}
+export default RadioError

data/app/pb_kits/playbook/pb_radio/docs/example.yml CHANGED Viewed

@@ -4,11 +4,12 @@ examples:
   - radio_default: Default
   - radio_dark: Dark
   - radio_custom: Custom
+  - radio_error: With Error
+  - radio_dark_error: With Error
   react:
   - radio_default: Default
   - radio_dark: Dark
   - radio_custom: Custom
+  - radio_error: With Error
+  - radio_dark_error: Dark With Error

data/app/pb_kits/playbook/pb_radio/docs/index.js CHANGED Viewed

@@ -1,3 +1,5 @@
 export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioDark } from './_radio_dark.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
+export { default as RadioError } from './_radio_error.jsx'
+export { default as RadioDarkError } from './_radio_dark_error.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb CHANGED Viewed

@@ -14,16 +14,18 @@ module Playbook
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :dark, type: Playbook::Props::Boolean,
-                      default: false
+                  default: false
+      prop :error, type: Playbook::Props::Boolean,
+                   default: false
       prop :name, type: Playbook::Props::String,
-                      default: "radio_name"
+                  default: "radio_name"
       prop :text, type: Playbook::Props::String,
-                      default: "Radio Text"
+                  default: "Radio Text"
       prop :value, type: Playbook::Props::String,
-                      default: "radio_text"
+                   default: "radio_text"
       prop :object
       def classname
-        generate_classname("pb_radio_kit", dark_class)
+        generate_classname("pb_radio_kit", dark_class) + error_class
       end
       def input
@@ -31,13 +33,19 @@ module Playbook
       end
       def selected
-        if checked == true
-          "checked"
-        end
+        "checked" if checked == true
+      end
+      def body_status
+        error ? "negative" : nil
       end
     private
+      def error_class
+        error ? " error" : ""
+      end
       def dark_class
         dark ? "dark" : nil
       end

data/app/pb_kits/playbook/pb_select/_select.html.erb CHANGED Viewed

@@ -11,6 +11,7 @@
   <label class="pb_select_kit_wrapper" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(
         object.name,
@@ -27,6 +28,7 @@
         include_blank: object.include_blank,
       )
       %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
     <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
   </label>

data/app/pb_kits/playbook/pb_select/_select.jsx CHANGED Viewed

@@ -3,6 +3,7 @@
 import React from 'react'
 import {
+  Body,
   Caption,
   Icon,
 } from '../'
@@ -14,22 +15,23 @@ import {
 } from '../utilities/props'
 type SelectProps = {
-  className?: String,
   aria?: object,
+  blankSelection?: String,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  dark?: Boolean,
   data?: object,
+  disabled?: Boolean,
+  error?: String,
   onChange: PropTypes.func,
-  children?: Array<React.ReactChild>,
   options: Array<Object>,
   id?: String,
+  includeBlank?: String,
   label?: String,
-  value?: String,
+  multiple?: Boolean,
   name?: String,
-  dark?: Boolean,
-  includeBlank?: String,
-  blankSelection?: String,
   required?: Boolean,
-  disabled?: Boolean,
-  multiple?: Boolean,
+  value?: String,
 }
 const optionsArray = ({ options = [] }: SelectProps) => {
@@ -49,24 +51,26 @@ const optionsArray = ({ options = [] }: SelectProps) => {
 const Select = (props: SelectProps) => {
   const {
+    aria = {},
+    blankSelection,
     children,
-    label,
     dark = false,
-    name,
-    options,
-    blankSelection,
-    required = false,
+    data = {},
     disabled = false,
+    error,
+    label,
     multiple = false,
+    name,
     onChange = () => {},
-    aria = {},
-    data = {},
+    options,
+    required = false,
   } = props
+  const errorClass = error ? ' error' : ''
   const css = buildCss({
     'pb_select': true,
     'dark': dark === true,
-  })
+  }) + errorClass
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = optionsArray({ options })
@@ -109,6 +113,13 @@ const Select = (props: SelectProps) => {
             {optionsList}
           </select>
         </If>
+        <If condition={error}>
+          <Body
+              dark={dark}
+              status="negative"
+              text={error}
+          />
+        </If>
         <Icon
             className="pb_select_kit_caret"
             fixedWidth

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

@@ -17,7 +17,7 @@
       opacity: 0.5;
     }
     color: transparent !important;
-    text-shadow: 0 0 0 $text_lt_default !important;
+    text-shadow: 0 0 0 $text_lt_default;
   }
   option {
     color: $text_lt_default;
@@ -48,9 +48,30 @@
       &:hover, &:active, &:focus {
         background-color: tint($focus_input_dark, 5%);
       }
+      text-shadow: 0 0 0 $text_dk_default;
     }
     .pb_select_kit_caret {
       color: $white;
     }
+    &.error {
+      .pb_select_kit_wrapper {
+        > select:first-child {
+          border-color: $error_dark;
+        }
+      }
+    }
+  }
+  &.error {
+    .pb_select_kit_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+      > select:first-child {
+        border-color: $error;
+      }
+      .pb_select_kit_caret {
+        top: 35%;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.html.erb ADDED Viewed

@@ -0,0 +1,25 @@
+<%= pb_rails("select", props: {
+  dark: true,
+  error: "Please make a valid selection",
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>