playbook_ui 2.9.3 → 2.9.4

data/app/pb_kits/playbook/pb_title/_title.html.erb

@@ -1,4 +1,4 @@
 <%= content_tag(object.tag, object.text,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) %>
+    class: object.classname) %>

data/app/pb_kits/playbook/pb_title/title.rb

@@ -2,77 +2,30 @@
 
 module Playbook
   module PbTitle
-    class Title < Playbook::PbKit::Base
-      PROPS = %i[configured_aria
-                 configured_classname
-                 configured_dark
-                 configured_data
-                 configured_id
-                 configured_size
-                 configured_tag
-                 configured_text].freeze
+    class Title
+      include Playbook::Props
 
-      def initialize(aria: default_configuration,
-                     classname: default_configuration,
-                     dark: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     size: default_configuration,
-                     tag: default_configuration,
-                     text: default_configuration)
-        self.configured_aria = aria
-        self.configured_classname = classname
-        self.configured_dark = dark
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_size = size
-        self.configured_tag = tag
-        self.configured_text = text
-      end
-
-      def tag
-        tag_options = %w[h1 h2 h3 h4 h5 h6 p div span]
-        one_of_value(configured_tag, tag_options, "h3")
-      end
-
-      def text
-        default_value(configured_text, "Title text")
-      end
-
-      def size
-        size_options = [1, 2, 3, 4]
-        one_of_value(configured_size, size_options, 3)
-      end
+      partial "pb_title/title"
 
-      def size_class
-        adjusted_value(size, size, nil)
-      end
-
-      def dark_class
-        true_value(configured_dark, "dark", nil)
-      end
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: [1, 2, 3, 4],
+                  default: 3
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                 default: "h3"
+      prop :text
 
-      def kit_class
-        title_options = [
-          "pb_title_kit",
-          size_class,
-          dark_class,
-        ]
-        title_options.reject(&:nil?).join("_")
-      end
-
-      def to_partial_path
-        "pb_title/title"
+      def classname
+        generate_classname("pb_title_kit", size, dark_class)
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def dark_class
+        dark ? "dark" : nil
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -1,21 +1,68 @@
-import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class Toggle extends React.Component {
-  render() {
-    return (
-      <div className="pb_toggle">
-        <span>TOGGLE CONTENT</span>
-      </div>
-    )
-  }
+// @flow
+
+import React from 'react'
+
+import type {
+  InputCallback
+} from "../types"
+
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildCss,
+  noop,
+} from '../utilities/props'
+
+type Props = {
+  aria: object,
+  checked: boolean,
+  data: object,
+  onChange: InputCallback,
+  onCheck: InputCallback,
+  onUncheck: InputCallback,
+  size: 'sm' | 'md',
 }
 
-Toggle.propTypes = propTypes;
+const Toggle = ({
+  aria = {},
+  checked = false,
+  data = {},
+  onChange = noop,
+  onCheck = noop,
+  onUncheck = noop,
+  size = 'md',
+  ...props,
+}: Props) =>{
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const handleChange = event => {
+    onChange(event)
+    event.target.checked ?
+      onCheck(event) :
+      onUncheck(event)
+  }
+
+  const css = buildCss({
+    'pb_toggle_kit': true,
+    [size]: true,
+    'on': checked,
+    'off': !checked,
+  })
+
+  return (
+    <div {...ariaProps} {...dataProps} className={css}>
+      <label className="pb_toggle_wrapper">
+        <input
+            {...props}
+            type="checkbox"
+            checked={checked}
+            onChange={handleChange}
+        />
+
+        <div className="pb_toggle_control" />
+      </label>
+    </div>
+  )
+}
 
-export default Toggle;
+export default Toggle

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_accessibility.jsx

@@ -0,0 +1,12 @@
+// @flow
+
+import React from "react"
+import { Toggle } from "../.."
+
+const Example = () => {
+  return (
+    <Toggle aria={{ label: "toggle", expanded: false }} />
+  )
+}
+
+export default Example

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_data.jsx

@@ -0,0 +1,15 @@
+// @flow
+
+import React from "react"
+import { Toggle } from "../.."
+
+const Example = () => {
+  return (
+    <Toggle
+        checked
+        data={{ id: "the-toggle", expanded: true }}
+    />
+  )
+}
+
+export default Example

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,10 +1,43 @@
+// @flow
+
 import React from "react"
-import {Toggle} from "../../"
+import { Toggle } from "../../"
+
+class Example extends React.Component {
+  state = {
+    toggle1: false,
+    toggle2: true,
+  }
+
+  handleChange = event => {
+    this.setState({
+      [event.target.name]: event.target.checked
+    })
+  }
+
+  render() {
+    return (
+      <>
+        <Toggle
+            checked={this.state.toggle1}
+            name="toggle1"
+            onChange={this.handleChange}
+            onCheck={event => console.log(`${event.target.name} checked!`)}
+            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
+        />
+
+        <br />
 
-function ToggleDefault() {
-  return (
-    <h1>{`Coming Soon...`}</h1>
-  )
+        <Toggle
+            checked={this.state.toggle2}
+            name="toggle2"
+            onChange={this.handleChange}
+            onCheck={event => console.log(`${event.target.name} checked!`)}
+            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
+        />
+      </>
+    )
+  }
 }
 
-export default ToggleDefault
+export default Example

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

@@ -9,3 +9,5 @@ examples:
 
   react:
   - toggle_default: Default
+  - toggle_accessibility: Toggle Accessibility
+  - toggle_data: Toggle Data Props

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

@@ -1 +1,3 @@
-export {default as ToggleDefault} from './_toggle_default.jsx';
+export { default as ToggleDefault } from './_toggle_default'
+export { default as ToggleAccessibility } from './_toggle_accessibility'
+export { default as ToggleData } from './_toggle_data'

data/app/pb_kits/playbook/props.rb

@@ -1,13 +1,19 @@
 # frozen_string_literal: true
 
 require "active_support/concern"
+
+# Base must be defined first as other prop types inherit from it
 require_relative "./props/base"
+
+require_relative "./props/array"
 require_relative "./props/boolean"
 require_relative "./props/enum"
 require_relative "./props/hash"
+require_relative "./props/hash_array"
 require_relative "./props/number"
 require_relative "./props/number_array"
 require_relative "./props/string"
+require_relative "./props/percentage"
 require_relative "./props/proc"
 
 module Playbook
@@ -25,9 +31,9 @@ module Playbook
       self.class.props[name].value @values[name]
     end
 
-    def generate_classname(*name_parts)
+    def generate_classname(*name_parts, separator: "_")
       [
-        name_parts.compact.join("_"),
+        name_parts.compact.join(separator),
         prop(:classname),
       ].compact.join(" ")
     end

data/app/pb_kits/playbook/props/array.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Props
+    class Array < Playbook::Props::Base
+      def validate(value)
+        value.is_a?(::Array)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/props/hash_array.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Props
+    class HashArray < Playbook::Props::Base
+      def validate(value)
+        return false unless value.is_a?(::Array)
+
+        value.all?(::Hash)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/props/number_array.rb

@@ -4,7 +4,7 @@ module Playbook
   module Props
     class NumberArray < Playbook::Props::Base
       def validate(value)
-        return false unless value.is_a?(Array)
+        return false unless value.is_a?(::Array)
         return false if value.empty?
 
         value.all?(Integer)

data/app/pb_kits/playbook/props/percentage.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Props
+    class Percentage < Playbook::Props::Base
+      def validate(value)
+        value.nil? || numeric_in_range?(value)
+      end
+
+    private
+
+      def numeric_in_range?(value)
+        (value.is_a?(Numeric) &&
+          value <= 100 &&
+          value >= 0)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/types.js

@@ -0,0 +1,4 @@
+// @flow
+
+export type Callback<T, K> = T => K
+export type InputCallback = Callback<SyntheticEvent<>, void>

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

@@ -0,0 +1,48 @@
+/**
+ * Defines a set of helper functions used to construct a component following
+ * Playbook's patterns.
+ */
+import classnames from 'classnames'
+
+/**
+ *
+ * @param {String} prefix the prefix to be used on the dash separated prop (data, aria, etc...)
+ * @param {Object} data the object containing the data to derive the props from.
+ * @returns {Object} an object whose keys have the prefix added to them.
+ */
+const buildPrefixedProps = (prefix, data) => Object.keys(data).reduce((props, key) => {
+  props[`${prefix}-${key}`] = data[key]
+  return props
+}, {})
+
+/**
+ * Represent a "No-Operation" function that can be used as a sensible
+ * default to event handlers in the absence of a value.
+ *
+ * @returns {() => {}} the noop function.
+ */
+export const noop = () => {}
+
+/**
+ * Maps a given aria object into HTML valid aria attribtues and their values.
+ *
+ * @param {Object} aria the object containing the aria prop values.
+ * @returns {Object} an object holding the HTML valid aria props and their values.
+ */
+export const buildAriaProps = aria => buildPrefixedProps("aria", aria)
+
+/**
+ * Maps a given data object into HTML valid data attribtues and their values.
+ *
+ * @param {Object} data the object containing the data prop values.
+ * @returns {Object} an object holding the HTML valid data props and their values.
+ */
+export const buildDataProps = data => buildPrefixedProps("data", data)
+
+/**
+ * Builds a Playbook valid root className off of the incoming css rules.
+ *
+ * @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, delimiter = '_') => classnames(rules).replace(/\s/g, delimiter)

data/app/views/playbook/pages/kit_show.html.slim

@@ -1,5 +1,5 @@
 .pb--kit-show
-  = pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: "1" })
+  = pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 })
 
   .pb--kit-type-nav
     - if has_kit_type?(@kit, "rails")

data/app/views/playbook/pages/kits.html.slim

@@ -1,5 +1,5 @@
 .pb--kits
-  = pb_rails("title", props: { text: "Kits", tag: "h1", size: "1" })
+  = pb_rails("title", props: { text: "Kits", tag: "h1", size: 1 })
 
   .pb--kit-type-nav
     a href="#{kits_path('', type: 'rails')}" class="#{'active' if @type == 'rails'}" Rails