playbook_ui 14.0.0.pre.alpha.play1447alphatest3462 → 14.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1ba531b9fed7df7837ee3a0a8c184b5ba9285a9f966d556009422113090d984
-  data.tar.gz: 062dd1428f17716a3f25ded63ba0ac36c780a28b04814228e1c4842a440b57db
+  metadata.gz: e0b8c603b0b4f4c71fd994ae5fb34628441b8b6d79e7b0995d52ee6eb2244cd1
+  data.tar.gz: 66abcf68e967f3e108752d9986ecbe171cf2e6519e004da35969c7c063c3a21b
 SHA512:
-  metadata.gz: a0240b5a442344847e1f7148badf1308ab871828886f2168c1915670de9a9f4deb61d3e6a9ad7498d5c262e0f4c73209f2b9b31d3f1cb6b119c4ea5713908cc2
-  data.tar.gz: 2c3bd083bbbb3f386420d82d269c68446c4d6fc5c19bb1f06eb4e83b5d7be52c772a1e88382d25dde75fb317a6b4c73572b1be9434cde4aea3e2de0e51135e96
+  metadata.gz: 8b1946c68440d581a88ab423422ee820721f90654e8102a007b9cf25df953fa7d7128e3a1eb5a6a053d651c568c5e2b341fccf6ef01a600f4c55041ec3fc5ead
+  data.tar.gz: 71c868e78a015e782f2631bf95c87b182a805b659d35e1b6df4a41ce264a9ec58ffbe05393389b421919cd23f5f6f5b34d1a020784c3fcef1845cf8c6b2008c0

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

@@ -21,7 +21,6 @@ type TableHeaderCellProps = {
   handleExpandOrCollapse?: () => void
   header?: Header<GenericObject, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
-  isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -32,11 +31,10 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
-  isPinnedLeft = false,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive } = useContext(AdvancedTableContext)
+  const { sortControl } = useContext(AdvancedTableContext)
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
@@ -51,8 +49,7 @@ export const TableHeaderCell = ({
 
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
-  `${enableSorting ? "table-header-cells-active" : ""}`,
-  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
+  `${enableSorting ? "table-header-cells-active" : ""}`
 )
 
 const cellId = `${loading ? 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -37,22 +37,17 @@ export const TableBody = ({
     columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
-    isPinnedLeft = false,
     inlineRowLoading,
     loading,
-    responsive,
     table,
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
-    { 'pinned-left': responsive === "scroll" && isPinnedLeft },
     globalProps(props),
     className
   )
 
-  const columnPinning = table.getState().columnPinning;
-
   return (
     <>
       <tbody className={classes} 
@@ -78,37 +73,38 @@ export const TableBody = ({
                     table={table}
                 />
               )}
-            <tr
-                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
-                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
-              }`}
-                id={`${row.index}-${row.id}-${row.depth}-row`}
-            >
-              {row.getVisibleCells().map((cell, i) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
 
-                return (
+              <tr
+                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+                  }`}
+                  id={`${row.index}-${row.id}-${row.depth}-row`}
+              >
+                {row.getVisibleCells().map((cell, i) => (
                   <td
                       align="right"
-                      className={classnames(
-                        `${cell.id}-cell position_relative`,
-                        isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left'
-                      )}
+                      className={`${cell.id}-cell position_relative ${
+                      isChrome() ? "chrome-styles" : ""
+                      }`}
                       key={`${cell.id}-data`}
                   >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+                    {collapsibleTrail &&
+                      i === 0 &&
+                      row.depth > 0 &&
+                      renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>
                       {loading ? (
                         <LoadingCell />
                       ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
                       )}
                     </span>
                   </td>
-                )
-              })}
-            </tr>
+                ))}
+              </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
               {isDataLoading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -42,7 +42,6 @@ export const TableHeader = ({
     className
   )
 
-  const columnPinning = table.getState().columnPinning;
 
   return (
     <>
@@ -52,22 +51,18 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    key={`${header.id}-header`}
-                    loading={loading}
-                    sortIcon={sortIcon}
-                />
-              )
-            })}
+            {headerGroup.headers.map(header => (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+              />
+            ))}
           </tr>
         ))}
       </thead>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -5,11 +5,9 @@
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
 @import "./scss_partials/chrome_styles";
-@import "../tokens/screen_sizes";
-@import "../tokens/shadows";
 
 .pb_advanced_table {
-  $border-color: 1px solid $border_light;
+  $border-color: 1px solid $border_light !important;
 
   [id$="-span"] {
     word-wrap: normal;
@@ -110,51 +108,6 @@
     height: auto;
   }
 
-  // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
-      border-radius: 4px;
-      box-shadow: 1px 0 0 0px $border_light,
-                  -1px 0 0 0px $border_light;
-      display: block;
-      overflow-x: auto;
-      width: 100%;
-      [class^=pb_table].table-sm.table-card thead tr th:first-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-        border-left-width: 0px;
-      }
-      [class^=pb_table].table-sm.table-card thead tr th:last-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-        border-right-width: 0px;
-      }
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-          border-radius: 0 0 0 0;
-        }
-      .table-header-cells:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      [class*="pinned-left"] {
-          background-color: $white;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-          left: 0;
-          z-index: 2;
-      }
-      .bg-silver td:first-child {
-        background-color: lighten($silver, $opacity_7);
-      }
-      .bg-white td:first-child {
-          background-color: $white;
-      }
-    }
-  }
-  @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
-      overflow-x: visible;
-    }
-  }
-
   &.dark {
     .bg-white {
       background: $bg_dark_card;
@@ -198,43 +151,5 @@
         ) !important;
       }
     }
-    // Dark Mode Responsive Styles
-    @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
-        border-radius: 4px;
-        box-shadow: 1px 0 0 0px $border_dark,
-                    -1px 0 0 0px $border_dark;
-        display: block;
-        overflow-x: scroll;
-        width: 100%;
-        [class^=pb_table].table-sm.table-card thead tr th:first-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-          border-left-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card thead tr th:last-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-          border-right-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-            border-radius: 0 0 0 0;
-        }
-        .table-header-cells:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        [class*="pinned-left"] {
-          background: $bg_dark_card;
-          border-right: $border_dark;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-        }
-        .bg-silver td:first-child {
-          background-color: $bg_dark;
-        }
-        .bg-white td:first-child {
-          background-color: $bg_dark_card;
-        }
-      }
-    }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -42,7 +42,6 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
-  responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -67,7 +66,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    responsive = "scroll",
     sortControl,
     tableData,
     tableOptions,
@@ -134,7 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+    columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
@@ -211,7 +209,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )
@@ -232,7 +229,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
-            responsive,
             setExpanded,
             sortControl,
             table,

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

@@ -432,34 +432,4 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
-})
-
-test("responsive prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="scroll"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
-})
-
-test("responsive none prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })

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

@@ -14,4 +14,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
-  - advanced_table_responsive: Responsive Tables

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

@@ -7,5 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
-export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -78,6 +78,36 @@ $avatar-sizes: (
           display: block;
         }
       }
+      [class^=pb_online_status] {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: auto;
+        left: auto;
+
+        &.size_xxs {
+          right: -5px;
+        }
+
+        &.size_xs {
+          right: -4px;
+        }
+
+        &.size_md {
+          top: auto;
+          bottom: 6px;
+        }
+
+        &.size_lg {
+          top: auto;
+          bottom: 14px;
+        }
+
+        &.size_xl {
+          top: auto;
+          bottom: 22px;
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -71,22 +71,6 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
-    ['xxs', 'xs'].includes(size) ? 'sm' :
-      ['sm', 'md'].includes(size) ? 'md' :
-        ['lg', 'xl'].includes(size) ? 'lg' :
-          'sm';
-
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
-    {
-      top: { inset: true, value: "0" },
-      right: { inset: false, value: "xxs" }
-    }
-    : {
-      bottom: { inset: true, value: "0" },
-      right: { inset: true, value: size === "xl" ? "sm" : size === "lg" ? "xs" : "xxs" }
-    };
-
   return (
     <div
         {...ariaProps}
@@ -158,11 +142,9 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
           </div>
           {status && (
             <OnlineStatus
+                className={`size_${size}`}
                 dark={dark}
-                position="absolute"
-                size={onlineStatusSize}
                 status={status}
-                {...onlineStatusPositionProps}
             />
           )}
         </>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -4,8 +4,6 @@ module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
       prop :component_overlay
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :image_url, type: Playbook::Props::String
       prop :image_alt, type: Playbook::Props::String,
                        default: ""
@@ -25,22 +23,7 @@ module Playbook
       end
 
       def online_status_props
-        props = {
-          dark: dark,
-          status: status,
-          size: online_status_size,
-          position: "absolute",
-          right: online_status_right_position,
-        }
-
-        case size
-        when "xxs", "xs", "sm"
-          props[:top] = { value: "0", inset: true }
-        else
-          props[:bottom] = { value: "0", inset: true }
-        end
-
-        props
+        { status: status, classname: "size_#{size}" }
       end
 
       def alt_text
@@ -74,32 +57,6 @@ module Playbook
         }
       end
 
-      def online_status_size
-        case size
-        when "xxs", "xs"
-          "sm"
-        when "sm", "md"
-          "md"
-        when "lg", "xl"
-          "lg"
-        else
-          "sm"
-        end
-      end
-
-      def online_status_right_position
-        case size
-        when "xxs", "xs", "sm"
-          "xxs"
-        when "md"
-          { value: "xxs", inset: true }
-        when "lg"
-          { value: "xs", inset: true }
-        when "xl"
-          { value: "sm", inset: true }
-        end
-      end
-
       def placement_styles(offset)
         top_bottom_offset = if offset == "xs"
                               "xs"

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -89,20 +89,3 @@ test('renders with iconCircle overlay', () => {
   expect(iconCircleOverlay).toBeInTheDocument();
   expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
 });
-
-
-test('renders with online status', () => {
-  render(
-    <Avatar
-        data={{ testid: testId }}
-        imageAlt={imageAlt}
-        imageUrl={imageUrl}
-        name={name}
-        status="online"
-    />
-  );
-
-  const onlineStatusAvatar = screen.getByTestId(testId);
-  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
-  expect(onlineStatus).toBeInTheDocument();
-});

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -6,6 +6,4 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
 
 To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
 
-The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
-
-The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -33,7 +33,7 @@ $confirmation_toast_colors: (
 
   &.positioned_toast {
     position: fixed;
-    z-index: $z_10 !important;
+    z-index: $z_9;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -45,7 +45,6 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
-  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -39,7 +39,6 @@ type IconProps = {
   size?: IconSizes,
   fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
   spin?: boolean,
-  tabIndex?: number,
 } & GlobalProps
 
 const flipMap = {
@@ -139,7 +138,6 @@ const Icon = (props: IconProps) => {
     size,
     fontStyle = 'far',
     spin = false,
-    tabIndex,
   } = props
 
   let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
@@ -228,7 +226,6 @@ const Icon = (props: IconProps) => {
               id,
               width: 'auto',
               height: 'auto',
-              ...(props.tabIndex !== undefined && { tabIndex }),
             })
           }
         </>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -37,7 +37,6 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
       prop :color, type: Playbook::Props::String
-      prop :tabindex
 
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
@@ -108,7 +107,6 @@ module Playbook
         svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
-        svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
         raw doc

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -24,8 +24,7 @@ type IconCircleProps = {
     | "red"
     | "yellow"
     | "orange"
-    | "green"
-    | "lighter",
+    | "green",
 }
 
 const IconCircle = (props: IconCircleProps) => {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -10,8 +10,8 @@ module Playbook
                   values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue orange purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue orange purple teal red yellow green orange],
+                     default: "default"
 
       def classname
         generate_classname("pb_icon_circle_kit", "size_#{size}", variant)

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -50,4 +50,15 @@
       margin-right: $space-sm;
     }
   }
+  [class^=pb_title_kit_1] + [class^=pb_body_kit] {
+    font-size: 36px;
+  }
+
+  [class^=pb_title_kit_2] + [class^=pb_body_kit] {
+    font-size: 24px
+  }
+
+  [class^=pb_title_kit_3] + [class^=pb_body_kit] {
+    font-size: 20px;
+  }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -32,8 +32,7 @@ type IconStatValueProps = {
     | "red"
     | "yellow"
     | "orange"
-    | "green"
-    | "lighter",
+    | "green",
 }
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
@@ -50,7 +49,7 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -47,7 +47,6 @@
                                           value: 19.18,
                                           variant:"green"
  }) %>
- <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe",
                                           text: "Uranus",
                                           unit: "AU",