playbook_ui 11.0.0.pre.alpha.2 → 11.1.0

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillExample = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_hashtag/{_hashtag.jsx → _hashtag.tsx}

@@ -1,16 +1,15 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Badge from '../pb_badge/_badge'
 
 type HashtagProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
   data?: string,
@@ -18,7 +17,7 @@ type HashtagProps = {
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
-}
+} & GlobalProps
 
 const typeMap = {
   home: 'H#',

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class CityEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :territory
+      prop :zip
+      prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+  end
+end

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

@@ -5,8 +5,6 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
 
-
-
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -2,5 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= render file: object.emphasis_partial, locals: { object: object } %>
-<% end %>
+  <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
+<% end %>
+

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

@@ -45,8 +45,29 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def emphasis_partial
-        File.join(File.dirname(self.class.source_location), "_#{emphasis}_emphasis")
+      def city_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state: city_state,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          territory: territory,
+          zip: zip,
+        }
+      end
+
+      def street_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state_zip: city_state_zip,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          territory: territory,
+        }
       end
 
     private

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class StreetEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state_zip
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :territory
+      prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+  end
+end

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -0,0 +1,86 @@
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React, { forwardRef } from 'react'
+import Body from '../pb_body/_body'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type RadioProps = {
+  aria?: {[key: string]: string},
+  alignment?: string,
+  checked?: boolean,
+  children?: Node,
+  className?: string,
+  dark?: boolean,
+  data?: {[key: string]: string},
+  error?: boolean,
+  id?: string,
+  label: string,
+  name: string,
+  value: string,
+  text: string,
+  onChange: (event: React.FormEvent<HTMLInputElement>)=>void,
+} & GlobalProps
+
+const Radio = ({
+  aria = {},
+  alignment,
+  children,
+  className,
+  dark = false,
+  data = {},
+  error = false,
+  id,
+  label,
+  name = 'radio_name',
+  text = 'Radio Text',
+  value = 'radio_text',
+  onChange = () => {},
+  ...props
+}: RadioProps, ref: any) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_radio_kit', alignment ),
+    dark ? 'dark': null, error ? 'error': null,
+    globalProps(props),
+    className)
+
+  const displayRadio = (props: RadioProps) => {
+    if (children)
+      return (children)
+    else 
+    return (
+    <input
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
+
+  return (
+    <label
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        htmlFor={id}
+    >
+    <>{displayRadio(null)}</>
+    <span className="pb_radio_button" />
+    <Body
+          dark={dark}
+          status={error ? 'negative' : null}
+          text={label}
+          variant={null}
+      />
+    </label>
+  )
+}
+
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_select/{_select.jsx → _select.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, domSafeProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
@@ -18,16 +16,14 @@ type SelectOption = {
 }
 
 type SelectProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   blankSelection?: string,
-  children?: React.Node,
-  compact?: boolean,
+  children?: Node,
   className?: string,
-  data?: object,
+  compact?: boolean,
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  onChange: InputCallback<HTMLSelectElement>,
-  options: SelectOption[],
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,9 +32,11 @@ type SelectProps = {
   marginBottom: string,
   multiple?: boolean,
   name?: string,
+  onChange: InputCallback<HTMLSelectElement>,
+  options: SelectOption[],
   required?: boolean,
   value?: string,
-}
+} & GlobalProps
 
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -68,7 +66,7 @@ const Select = ({
   required = false,
   value,
   ...props
-}: SelectProps, ref: React.ElementRef<"select">) => {
+}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
@@ -87,6 +85,25 @@ const Select = ({
   )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectBody =(() =>{
+    if (children) return children
+    return (
+      <select
+          {...domSafeProps(props)}
+          disabled={disabled}
+          id={name}
+          multiple={multiple}
+          name={name}
+          onChange={onChange}
+          ref={ref}
+          required={required}
+          value={value}
+      >
+        {blankSelection && <option value="">{blankSelection}</option>}
+        {optionsList}
+      </select>
+    )
+  })()
 
   return (
     <div
@@ -94,51 +111,30 @@ const Select = ({
         {...dataProps}
         className={classes}
     >
-      <If condition={label}>
+      {label &&
         <label
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption
-              text={label}
-          />
+          <Caption text={label} />
         </label>
-      </If>
+      }
       <label
           className={selectWrapperClass}
           htmlFor={name}
       >
-        <If condition={children}>
-          {children}
-          <Else />
-          <select
-              {...domSafeProps(props)}
-              disabled={disabled}
-              id={name}
-              multiple={multiple}
-              name={name}
-              onChange={onChange}
-              ref={ref}
-              required={required}
-              value={value}
-          >
-            <If condition={blankSelection}>
-              <option value="">{blankSelection}</option>
-            </If>
-            {optionsList}
-          </select>
-        </If>
+        {selectBody}
         <Icon
             className="pb_select_kit_caret"
             fixedWidth
             icon="angle-down"
         />
-        <If condition={error}>
+        {error &&
           <Body
               status="negative"
               text={error}
           />
-        </If>
+        }
       </label>
     </div>
   )

data/app/pb_kits/playbook/pb_text_input/{_text_input.jsx → _text_input.tsx}

@@ -1,8 +1,7 @@
-/* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { globalProps, domSafeProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
@@ -12,9 +11,9 @@ import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 
 type TextInputProps = {
-  aria?: object,
-  className: string,
-  data?: object,
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
   dark?: boolean,
   disabled?: boolean,
   error?: string,
@@ -22,7 +21,7 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
-  onChange: (String) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -33,9 +32,9 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
-}
+} & GlobalProps
 
-const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
+const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
   const {
     addOn = { icon: null, alignment: 'right', border: true },
     aria = {},
@@ -48,7 +47,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     inline = false,
     name,
     label,
-    onChange = () => {},
+    onChange = () => { void 0 },
     placeholder,
     required,
     type = 'text',
@@ -104,34 +103,38 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     <React.Fragment>
       <Flex
           className={`add-on-${addOnAlignment} ${borderCss}`}
-          inline="flex-container"
+          inline
           vertical="center"
       >
-        <If condition={addOnAlignment == 'left'}>
-          <>
-            <Card
-                className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
-                dark={dark}
-            >
-              {addOnIcon}
-            </Card>
-            {textInput}
-          </>
-        <Else />
-          <>
-            {textInput}
-            <Card
-                className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
-                dark={dark}
-            >
-              {addOnIcon}
-            </Card>
-          </>
-        </If>
+        {addOnAlignment == 'left' && <>
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+          {textInput}
+        </> }
+        {addOnAlignment != 'left' && <>
+          {textInput}
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+        </> }
       </Flex>
     </React.Fragment>
   )
 
+  const render = (() => {
+    if(children) return children
+    if (shouldShowAddOn) return addOnInput
+
+    return textInput
+  })()
+
   return (
     <div
         {...ariaProps}
@@ -140,21 +143,17 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     >
       <Caption
           className="pb_text_input_kit_label"
-          dark={dark}
           text={label}
       />
       <div className={`${addOnCss} text_input_wrapper`}>
-        <Choose>
-          <When condition={children}>{children}</When>
-          <When condition={shouldShowAddOn}>{addOnInput}</When>
-          <Otherwise>{textInput}</Otherwise>
-        </Choose>
-        <If condition={error}>
-          <Body
-              status="negative"
-              text={error}
-          />
-        </If>
+        {render}
+
+        {error && <Body
+            status="negative"
+            text={error}
+            variant={null}
+                  />
+        }
       </div>
     </div>
   )

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -153,21 +153,37 @@ $data_colors: (
 
 /* Status colors ----------------------*/
 $success:             $green;
+$success_secondary:   lighten($success, 10%);
 $warning:             $yellow;
+$warning_secondary:   lighten($warning, 10%);
 $error:               $red;
 $error_dark:          $red_dark;
 $error_dark_body:     lighten($error_dark, 2%);
+$error_secondary:     lighten($error, 10%);
 $info:                $teal;
+$info_secondary :     lighten($info, 10%);
 $neutral:             $slate;
+$neutral_secondary:   lighten($neutral, 10%);
+$primary:             $primary;
+$primary_secondary:    lighten($primary, 10%);
+
 $status_colors: (
   success:            $success,
+  success_secondary:    $success_secondary,
   warning:            $warning,
+  warning_secondary:    $warning_secondary,
   error:              $error,
+  error_secondary:      $error_secondary,
   info:               $info,
+  info_secondary:       $info_secondary,
   neutral:            $neutral,
-  primary:            $primary
+  neutral_secondary:    $neutral_secondary,
+  primary:            $primary,
+  primary_secondary:    $primary_secondary
 );
 
+
+
 $status_color_text: (
   success:            $success,
   warning:            darken($warning, 10%),

data/app/pb_kits/playbook/utilities/props.ts

@@ -22,7 +22,7 @@ const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) =>
  *
  * @returns {() => {}} the noop function.
  */
-export const noop = () => {}
+export const noop = (): void => { void 0 }
 
 /**
  * Maps a given aria object into HTML valid aria attribtues and their values.
@@ -47,5 +47,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: (string | { [x: string]: string; })[]): string => classnames(rules).replace(/\s/g, '_')
 

data/lib/playbook/props.rb

@@ -24,7 +24,7 @@ module Playbook
     extend ActiveSupport::Concern
 
     attr_accessor :values
-    private :values, :values=
+    private :values=
 
     def initialize(prop_values = {}, &block)
       self.values = { children: block }.merge(Hash(prop_values))

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.26.0"
-  VERSION = "11.0.0.pre.alpha.2"
+  PREVIOUS_VERSION = "11.0.1"
+  VERSION = "11.1.0"
 end