playbook_ui 16.10.0.pre.rc.2 → 16.10.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c106506aaabdf972085be91718db366bd7fedcd876fbb790451952f6be69f40
-  data.tar.gz: 658df9449e22d82fee8e4faeaa020c81876b6cbb435e399f1deeb3f9ab877426
+  metadata.gz: 8d1bc0ec165e39d2c81fd5f45542521a178ac02b01c3814d73af5a26ba715c61
+  data.tar.gz: e5d599d230b0924967dd5bc31eb78dad5127251b1ee9d529ecbb7df9d0f6be31
 SHA512:
-  metadata.gz: 04f3e7df0c8f462350f090b3da1b59becb573547690516c09e9f7e4836ade7afb78cf8bbf635741fc9d61da70cb63263ce67d6e56e29450575f32c38dcec98fe
-  data.tar.gz: 8598d0d5d9884ae6bf320b3bd6538ef6db48edde4b853d4252aa20e9b6e5f4df5c5eb7e162a7d9ae0e139513ce5152fbcca5a8a0ae4f96cbca5b163a559a3865
+  metadata.gz: 10075c3c837ea6cd669638bd72e0ac1ffd7da0e8b765e89740f14696b9e22336453dde87390b995f987429ec7cfee854ca4129bd17c9bf4eebfb939a053188e7
+  data.tar.gz: be76110b2a91fef82760e0031fc61efd72bca27054293ced304a639db07a7cfe1be3a7a2ae5bf4809525077579f06b1751816195f69ef44d831313287cb6a3d8

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -81,6 +81,7 @@ const TableCellRenderer = ({
         
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
+        const fontWeight = getFontWeight(customRowStyle)
 
         return (
           <td
@@ -103,6 +104,7 @@ const TableCellRenderer = ({
                   : undefined,
                   backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
                   color: cellFontColor || customRowStyle?.fontColor,
+                  fontWeight,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -161,7 +163,7 @@ export const RegularTableView = ({
 
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
-    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+    const customRowStyle = getRowStyle(rowStyling, row);
     return (
       <tr
           className={classnames(
@@ -175,7 +177,8 @@ export const RegularTableView = ({
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
                   : undefined,
-            zIndex: '3'
+            zIndex: '3',
+            fontWeight: getFontWeight(customRowStyle),
           }}
       >
         <TableCellRenderer
@@ -205,7 +208,7 @@ export const RegularTableView = ({
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const numberOfColumns = table.getAllFlatColumns().length;
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+        const customRowStyle = getRowStyle(rowStyling, row);
 
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
@@ -228,7 +231,11 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
-                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
+                style={{
+                  backgroundColor: customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
+                  fontWeight: getFontWeight(customRowStyle),
+                }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -39,7 +39,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject;
+  rowStyling?: GenericObject[];
   inlineRowLoading?: boolean;
   sortParentOnly?: boolean;
 }
@@ -150,7 +150,7 @@ export function useTableState({
 
       return columnStructure;
     }) || [];
-  }, [columnHelper, onRowToggleClick, selectableRows]);
+  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
 
   const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
 

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Row, Getter } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { CustomCell } from "../Components/CustomCell";
+import { getRowStyle } from "./RowUtils";
 
 /**
  * Creates a cell render function for table columns
@@ -18,7 +19,7 @@ export const createCellFunction = (
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
   selectableRows?: boolean,
-  rowStyling?: GenericObject
+  rowStyling?: GenericObject[]
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -29,7 +30,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
-    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
+    const customStyle = getRowStyle(rowStyling, row);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -52,6 +53,7 @@ export const createCellFunction = (
           return accessorValue ? (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
                 selectableRows={selectableRows}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -36,6 +36,23 @@ export const shouldShowLoadingIndicator = (
     (row.depth < cellAccessorsLength);
 }
 
+export const getRowStyle = (
+  rowStyling: GenericObject[] | undefined,
+  row: Row<GenericObject>
+) => {
+  const rowId = row.original?.id ?? row.id
+  if (rowId == null) return
+
+  return rowStyling?.find((style: GenericObject) => (
+    String(style?.rowId) === String(rowId)
+  ))
+}
+
+export const getFontWeight = (rowStyle?: GenericObject) => {
+  if (rowStyle?.fontWeight === "bold") return 700
+  if (rowStyle?.fontWeight === "regular") return 400
+}
+
 /**
  * Creates a virtual item style object for virtualized rows
  */

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1042,7 +1042,12 @@ test("rowStyling prop works as expected", () => {
   {
     rowId: "1",
     backgroundColor: colors.white,
-    fontColor: colors.black
+    fontColor: colors.black,
+    fontWeight: "bold",
+  },
+  {
+    rowId: "2",
+    fontWeight: "regular",
   },
 ];
 
@@ -1059,6 +1064,55 @@ test("rowStyling prop works as expected", () => {
   const tableBody = kit.querySelector('tbody')
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+  expect(row1).toHaveStyle({fontWeight: "700"})
+  const row2 = tableBody.querySelector('tr:nth-child(2)')
+  expect(row2).toHaveStyle({fontWeight: "400"})
+})
+
+test("rowStyling fontWeight applies to expandable rows", () => {
+  const rowStyling = [
+    {
+      rowId: "1",
+      fontWeight: "bold",
+    },
+  ];
+
+  const tableData = [
+    {
+      id: "1",
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      children: [
+        {
+          id: "1-1",
+          year: "2021",
+          quarter: "Q1",
+          month: null,
+          day: null,
+          newEnrollments: "2",
+          scheduledMeetings: "35",
+        },
+      ],
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={tableData}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const expandableRow = tableBody.querySelector('tr:nth-child(1)')
+  expect(expandableRow).toHaveStyle({fontWeight: "700"})
 })
 
 test("rowStyling prop to allow padding control", () => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb

@@ -41,6 +41,10 @@
     font_color: "white",
     expand_button_color: "white",
   },
+  {
+    row_id: "15",
+    font_weight: "bold",
+  },
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -48,6 +48,10 @@ const rowStyling = [
     fontColor: colors.white,
     expandButtonColor: colors.white,
   },
+  {
+    rowId: "15",
+    fontWeight: "bold",
+  },
 ];
 
   return (

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md

@@ -3,5 +3,6 @@ The `row_styling` prop can be used in conjunction with row ids to control certai
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+- `font_weight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md

@@ -3,5 +3,6 @@ The `rowStyling` prop can be used in conjunction with row ids to control certain
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+- `fontWeight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -28,7 +28,8 @@
         "rowId": "1",
         "backgroundColor": "#0056CF",
         "fontColor": "#FFFFFF",
-        "expandButtonColor": "#FFFFFF"
+        "expandButtonColor": "#FFFFFF",
+        "fontWeight": "bold"
       }
     ],
     "expandByDepth": [

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

@@ -104,7 +104,7 @@
     "tableProps": {
       "container": false
     },
-    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF" }],
+    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF", "fontWeight": "bold" }],
     "expandByDepth": [
       {
         "depth": 0,

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -3,6 +3,7 @@
   button_color = row_style&.[](:expand_button_color)
   bg_color = row_style&.[](:background_color)
   font_color = row_style&.[](:font_color)
+  font_weight = row_style&.[](:font_weight)
   tr_options = (object.html_options || {}).stringify_keys
   tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ")
 %>
@@ -14,7 +15,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <% component_info = object.cell_component_info(column, index, bg_color, font_color) %>
+        <% component_info = object.cell_component_info(column, index, bg_color, font_color, font_weight) %>
         <%= pb_rails(component_info[:name], props: component_info[:props]) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -107,9 +107,10 @@ module Playbook
       end
 
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
-      def cell_component_info(column, index, bg_color, font_color)
+      def cell_component_info(column, index, bg_color, font_color, font_weight = nil)
         column_font_color = cell_font_color(column)
         effective_font_color = column_font_color || font_color
+        effective_font_weight = font_weight_value(font_weight)
 
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
@@ -119,11 +120,15 @@ module Playbook
             tag: "td",
             classname: td_classname(column, index),
           }
-          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
+          style_hash = {}
+          style_hash[:color] = effective_font_color if effective_font_color.present?
+          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
+          component_props[:html_options] = { style: style_hash } if style_hash.present?
         else
           component_name = "table/table_cell"
           style_hash = { "background-color": bg_color }
           style_hash[:color] = effective_font_color if effective_font_color.present?
+          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
           component_props = {
             html_options: {
               style: style_hash,
@@ -216,6 +221,15 @@ module Playbook
         end
       end
 
+      def font_weight_value(font_weight)
+        case font_weight.to_s
+        when "bold"
+          "700"
+        when "regular"
+          "400"
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
       prop :drag_id, type: Playbook::Props::String
       prop :draggable_item, type: Playbook::Props::Boolean,

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

@@ -37,6 +37,8 @@
         "product_9_highlight",
         "product_10_background",
         "product_10_highlight",
+        "product_11_background",
+        "product_11_highlight",
         "windows",
         "siding",
         "doors",

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

@@ -305,5 +305,12 @@
   "hiddenProps": [
     "isCollapsed",
     "onCollapse"
+  ],
+  "requiredCodeProps": [
+    "filters",
+    "results",
+    "sortOptions",
+    "sortValue",
+    "onSortChange"
   ]
 }

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_breached" }) %>
 
 <script>
     window.addEventListener("load", () => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -7,7 +7,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_common" }) %>
 
 
 <script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "def_caption" }) %>
 
 <%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
 
@@ -10,25 +10,25 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_5_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_30_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "avg_1_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "strong_4_caption" }) %>
 
 
 

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_change" }) %>
 
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 

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