playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_passphrase/docs/_playground.json

@@ -1,34 +1,149 @@
 {
-  "template": "<Passphrase{{props}} />",
+  "template": "<Passphrase\n  onChange={(event) => setInput(event.target.value)}\n  value={input}{{props}}\n/>",
   "propTargets": {},
   "defaults": {
     "confirmation": false,
     "requiredIndicator": false,
-    "showTipsBelow": "always"
+    "showTipsBelow": "always",
+    "inputProps": {
+      "name": "passphrase"
+    },
+    "label": "Passphrase",
+    "tips": [
+      "Use a longer phrase.",
+      "Avoid common words.",
+      "Mix in punctuation or numbers."
+    ],
+    "uncontrolled": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "confirmation",
-        "dark",
-        "inputProps",
         "label",
-        "onChange",
-        "requiredIndicator",
-        "showTipsBelow",
         "tips",
-        "uncontrolled",
-        "value"
+        "showTipsBelow"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "confirmation",
+        "requiredIndicator",
+        "uncontrolled"
+      ]
+    },
+    {
+      "name": "Input",
+      "props": [
+        "inputProps"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "label": "Passphrase"
+      }
+    },
+    {
+      "name": "Confirmation",
+      "props": {
+        "confirmation": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "New passphrase",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "With Tips",
+      "props": {
+        "label": "Passphrase with tips",
+        "tips": [
+          "Use a longer phrase.",
+          "Avoid common words.",
+          "Mix in punctuation or numbers."
+        ]
+      }
+    },
+    {
+      "name": "Responsive Tips",
+      "props": {
+        "label": "Responsive tips",
+        "showTipsBelow": "md",
+        "tips": [
+          "Shown below at medium widths.",
+          "Shown in a popover above that breakpoint."
+        ]
+      }
+    },
+    {
+      "name": "Input Props",
+      "props": {
+        "inputProps": {
+          "id": "passphrase-input",
+          "name": "passphrase",
+          "placeholder": "Type a secure passphrase..."
+        },
+        "label": "Custom input props"
+      }
+    },
+    {
+      "name": "Uncontrolled",
+      "props": {
+        "label": "Uncontrolled passphrase",
+        "uncontrolled": true
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {
+    "controlled": {
+      "when": {},
+      "message": "The playground wraps Passphrase with local state so typing updates value through an inline onChange handler.",
+      "type": "info"
+    },
+    "confirmation": {
+      "presetName": "Confirmation",
+      "message": "confirmation changes the default label to Confirm Passphrase and marks this field as the confirmation input.",
+      "type": "info"
+    },
+    "tips": {
+      "presetName": "With Tips",
+      "message": "tips renders the info icon and displays each string as guidance for the passphrase.",
+      "type": "info"
+    },
+    "responsive_tips": {
+      "presetName": "Responsive Tips",
+      "message": "showTipsBelow controls when tips move below the input instead of appearing in the popover.",
+      "type": "info"
+    },
+    "input_props": {
+      "presetName": "Input Props",
+      "message": "inputProps are passed through to the inner TextInput for id, name, placeholder, disabled, and similar input-level options.",
+      "type": "info"
+    },
+    "uncontrolled": {
+      "presetName": "Uncontrolled",
+      "message": "uncontrolled lets Passphrase manage the typed value internally instead of relying on the value prop.",
+      "type": "info"
+    }
+  },
+  "wrapper": "const PassphrasePlayground = () => {\n  const [input, setInput] = useState('')\n\n  return {{component}}\n}\n\n<PassphrasePlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "hiddenProps": [
+    "onChange",
+    "value"
+  ]
 }

data/app/pb_kits/playbook/pb_passphrase/docs/_playground.overrides.json

@@ -0,0 +1,148 @@
+{
+  "template": "<Passphrase\n  onChange={(event) => setInput(event.target.value)}\n  value={input}{{props}}\n/>",
+  "wrapper": "const PassphrasePlayground = () => {\n  const [input, setInput] = useState('')\n\n  return {{component}}\n}\n\n<PassphrasePlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "hiddenProps": [
+    "onChange",
+    "value"
+  ],
+  "defaults": {
+    "confirmation": false,
+    "inputProps": {
+      "name": "passphrase"
+    },
+    "label": "Passphrase",
+    "requiredIndicator": false,
+    "showTipsBelow": "always",
+    "tips": [
+      "Use a longer phrase.",
+      "Avoid common words.",
+      "Mix in punctuation or numbers."
+    ],
+    "uncontrolled": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "tips",
+        "showTipsBelow"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "confirmation",
+        "requiredIndicator",
+        "uncontrolled"
+      ]
+    },
+    {
+      "name": "Input",
+      "props": [
+        "inputProps"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Passphrase"
+      }
+    },
+    {
+      "name": "Confirmation",
+      "props": {
+        "confirmation": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "New passphrase",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "With Tips",
+      "props": {
+        "label": "Passphrase with tips",
+        "tips": [
+          "Use a longer phrase.",
+          "Avoid common words.",
+          "Mix in punctuation or numbers."
+        ]
+      }
+    },
+    {
+      "name": "Responsive Tips",
+      "props": {
+        "label": "Responsive tips",
+        "showTipsBelow": "md",
+        "tips": [
+          "Shown below at medium widths.",
+          "Shown in a popover above that breakpoint."
+        ]
+      }
+    },
+    {
+      "name": "Input Props",
+      "props": {
+        "inputProps": {
+          "id": "passphrase-input",
+          "name": "passphrase",
+          "placeholder": "Type a secure passphrase..."
+        },
+        "label": "Custom input props"
+      }
+    },
+    {
+      "name": "Uncontrolled",
+      "props": {
+        "label": "Uncontrolled passphrase",
+        "uncontrolled": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {
+    "controlled": {
+      "when": {},
+      "message": "The playground wraps Passphrase with local state so typing updates value through an inline onChange handler.",
+      "type": "info"
+    },
+    "confirmation": {
+      "presetName": "Confirmation",
+      "message": "confirmation changes the default label to Confirm Passphrase and marks this field as the confirmation input.",
+      "type": "info"
+    },
+    "tips": {
+      "presetName": "With Tips",
+      "message": "tips renders the info icon and displays each string as guidance for the passphrase.",
+      "type": "info"
+    },
+    "responsive_tips": {
+      "presetName": "Responsive Tips",
+      "message": "showTipsBelow controls when tips move below the input instead of appearing in the popover.",
+      "type": "info"
+    },
+    "input_props": {
+      "presetName": "Input Props",
+      "message": "inputProps are passed through to the inner TextInput for id, name, placeholder, disabled, and similar input-level options.",
+      "type": "info"
+    },
+    "uncontrolled": {
+      "presetName": "Uncontrolled",
+      "message": "uncontrolled lets Passphrase manage the typed value internally instead of relying on the value prop.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_passphrase/index.ts

@@ -0,0 +1,58 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbPassphrase extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-passphrase]'
+  }
+
+  toggle: HTMLElement | null
+  input: HTMLInputElement | null
+  visible: boolean
+
+  connect() {
+    this.toggle = this.element.querySelector('.show-passphrase-icon')
+    this.input = this.element.querySelector('.passphrase-text-input input')
+    this.visible = false
+
+    if (!this.toggle || !this.input) return
+
+    this.toggle.addEventListener('click', this.handleToggle)
+    this.toggle.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnect() {
+    if (!this.toggle) return
+
+    this.toggle.removeEventListener('click', this.handleToggle)
+    this.toggle.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  handleToggle = (event: Event) => {
+    event.preventDefault()
+    this.setVisible(!this.visible)
+  }
+
+  handleKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+
+    event.preventDefault()
+    this.setVisible(!this.visible)
+  }
+
+  setVisible(visible: boolean) {
+    this.visible = visible
+    this.input.type = visible ? 'text' : 'password'
+    this.toggle.setAttribute('aria-pressed', String(visible))
+    this.toggle.setAttribute(
+      'aria-label',
+      visible
+        ? 'Passphrase currently visible. Click icon to hide password'
+        : 'Passphrase currently hidden. Click icon to reveal password'
+    )
+
+    const icons = this.toggle.querySelectorAll('.passphrase-toggle-icon')
+    icons.forEach((iconWrapper, index) => {
+      iconWrapper.classList.toggle('hide-icon', visible ? index === 0 : index === 1)
+    })
+  }
+}

data/app/pb_kits/playbook/pb_passphrase/kit.schema.json

@@ -84,6 +84,19 @@
         "react",
         "rails"
       ]
+    },
+    "required": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "boolean",
+      "default": false
+    },
+    "minLength": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "number"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1,70 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>
+<%= pb_content_tag(:div) do %>
+  <label>
+    <%= pb_rails("flex", props: { align: "baseline", margin_bottom: show_label? ? "xs" : nil }.compact) do %>
+      <% if show_label? %>
+        <% if show_required_indicator? %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "passphrase-label", color: "lighter" }) do %>
+            <%= object.display_label %> <span class="required_indicator">*</span>
+          <% end %>
+        <% else %>
+          <%= pb_rails("caption", props: {
+            dark: object.dark,
+            classname: "passphrase-label",
+            color: "lighter",
+            text: object.display_label,
+          }) %>
+        <% end %>
+      <% end %>
+
+      <% if object.show_tips? %>
+        <%= pb_rails("circle_icon_button", props: {
+          classname: object.tips_button_class,
+          dark: object.dark,
+          icon: "info-circle",
+          id: object.tips_trigger_id,
+          variant: "link",
+        }) %>
+        <%= pb_rails("popover", props: {
+          close_on_click: "outside",
+          position: "right",
+          trigger_element_id: object.tips_trigger_id,
+          tooltip_id: object.tips_tooltip_id,
+        }) do %>
+          <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
+            <%= pb_rails("caption", props: {
+              color: "lighter",
+              margin_bottom: "xs",
+              text: "Tips for a good passphrase",
+            }) %>
+            <div>
+              <% object.tips.each do |tip| %>
+                <%= pb_rails("flex", props: { align: "center", margin_bottom: "xs" }) do %>
+                  <%= pb_rails("icon", props: { icon: "shield-check", margin_right: "xs" }) %>
+                  <%= pb_rails("caption", props: { color: "lighter", size: "xs", text: tip }) %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <div class="passphrase-text-input-wrapper">
+      <%= pb_rails("text_input", props: object.text_input_props) %>
+      <span
+        aria-label="Passphrase currently hidden. Click icon to reveal password"
+        aria-pressed="false"
+        class="show-passphrase-icon"
+        role="button"
+        tabindex="0"
+      >
+        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon", color: "light", dark: object.dark }) do %>
+          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye-slash" }) %>
+        <% end %>
+        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon hide-icon", color: "light", dark: object.dark }) do %>
+          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye" }) %>
+        <% end %>
+      </span>
+    </div>
+  </label>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -11,12 +11,69 @@ module Playbook
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
+      prop :required, type: Playbook::Props::Boolean, default: false
+      prop :min_length, type: Playbook::Props::Number
       prop :value, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_passphrase")
       end
 
+      def data
+        Hash(values[:data]).merge(pb_passphrase: true)
+      end
+
+      def display_label
+        return label if label.present?
+        return "Confirm Passphrase" if confirmation
+
+        "Passphrase"
+      end
+
+      def show_label?
+        display_label.present?
+      end
+
+      def show_required_indicator?
+        required_indicator || required
+      end
+
+      def show_tips?
+        tips.present? && !confirmation
+      end
+
+      def tips_trigger_id
+        @tips_trigger_id ||= "passphrase-tips-trigger-#{dom_id_suffix}"
+      end
+
+      def tips_tooltip_id
+        @tips_tooltip_id ||= "passphrase-tips-tooltip-#{dom_id_suffix}"
+      end
+
+      def tips_button_class
+        classes = %w[passphrase-popover passphrase-tips]
+        classes << "show-below-#{show_tips_below}" unless show_tips_below == "always"
+        classes.join(" ")
+      end
+
+      def text_input_props
+        {
+          dark: dark,
+          data: text_input_data,
+          margin_bottom: "none",
+          classname: "passphrase-text-input",
+          placeholder: "Enter a passphrase...",
+          required: required,
+          type: "password",
+          value: value,
+          input_options: merged_input_options,
+        }.compact
+      end
+
+      def text_input_data
+        input_props.with_indifferent_access.fetch(:data, {}).to_h
+      end
+
       def passphrase_options
         {
           dark: dark,
@@ -31,6 +88,19 @@ module Playbook
           value: value,
         }.compact
       end
+
+    private
+
+      def dom_id_suffix
+        id.presence || object_id
+      end
+
+      def merged_input_options
+        options = input_props.deep_dup.with_indifferent_access.except(:data)
+        options[:class] = [options[:class], options.delete(:classname)].compact.join(" ").strip.presence
+        options[:minlength] = min_length if min_length.present?
+        options
+      end
     end
   end
 end