playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3601

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -39,15 +39,17 @@
       <% end %>
   
     <% else %>
-      <%= pb_rails("flex", props: { orientation: "column" }) do %>
+      <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
         <% end %>
-        <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
+
+        <%= hidden_input_tag %>
+
         <%= pb_rails("flex", props: { orientation: "row" }) do %>
           <% object.denominator.times do |index| %>
             <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
-              <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path)} ) %>
+              <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path), tabindex: 0 } ) %>
             </div>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -30,6 +30,10 @@ module Playbook
                      default: "display"
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -52,9 +56,9 @@ module Playbook
         when "yellow"
           "yellow_star"
         when "primary"
-          "primary_star"
+          dark ? "primary_star_dark" : "primary_star_light"
         when "subtle"
-          dark ? "suble_star_dark" : "suble_star_light"
+          dark ? "subtle_star_dark" : "subtle_star_light"
         end
       end
 
@@ -106,6 +110,19 @@ module Playbook
       def classname
         generate_classname("pb_star_rating_kit")
       end
+
+      def hidden_input_tag
+        tag(:input, all_input_options)
+      end
+
+      def all_input_options
+        input_options.merge(
+          data: { "pb-star-rating-input": true },
+          name: name,
+          required: required,
+          style: "display: none"
+        )
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx

@@ -53,7 +53,11 @@ const starOutline = (
 )
 
 export const getStarIconObject = (backgroundType: string, color: string, dark: boolean, size: string) => {
-    const colorClassName = color === "subtle" ? (dark ? "suble_star_dark" : "suble_star_light") : `${color}_star`
+    const colorClassName = color === "subtle" 
+        ? (dark ? "suble_star_dark" : "suble_star_light") 
+        : color === "primary"
+        ? (dark ? "primary_star_dark" : "primary_star_light")
+        : `${color}_star`
     const backgroundClassName = backgroundType === "outline" ? (dark ? "outline_empty_star_dark" : "outline_empty_star_light") : (dark ? "empty_star_dark" : "empty_star_light")
 
     return {

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx

@@ -36,7 +36,6 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[colorOption].className}
                         customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
-                        icon=""
                     />
                 </React.Fragment>
             ))}
@@ -45,7 +44,6 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[backgroundType].className}
                         customIcon={starIcon[backgroundType].icon  as unknown as { [key: string]: SVGElement }}
-                        icon=""
                     />
                 </React.Fragment>
             ))}

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx

@@ -23,40 +23,68 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
         size,
     } = props
     const [interactiveStarValue, setInteractiveStarValue] = useState(0)
+    const [hoverStarValue, setHoverStarValue] = useState<number | null>(null)
     const starIcon = getStarIconObject(backgroundType, colorOption, dark, size)
 
     const handleOnClick = (interactiveStarValue: number) => {
         setInteractiveStarValue(interactiveStarValue)
         onClick && onClick(interactiveStarValue)
     }
+    const handleMouseEnter = (value: number) => {
+        setHoverStarValue(value);
+    }
+    const handleMouseLeave = () => {
+        setHoverStarValue(null);
+    }
+    const handleOnKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, starIndex: number) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            handleOnClick(starIndex)
+        }
+    }
 
     return (
         <Flex className="star_flex_area">
-            {[...Array(denominator)].map((_, index) => (
-                <React.Fragment key={index}>
-                    {index + 1 <= interactiveStarValue && (
+            {[...Array(denominator)].map((_, index) => {
+                const starIndex = index + 1
+                const isFilled = starIndex <= interactiveStarValue
+                const isHovered = hoverStarValue !== null && starIndex > interactiveStarValue && starIndex <= hoverStarValue
+
+                const baseClass = dark 
+                    ? starIcon[backgroundType].className.replace("empty_star_light", "empty_star_dark")
+                    : starIcon[backgroundType].className
+                
+                let starClass = baseClass
+                if (isFilled) {
+                    starClass = starClass.replace(/(empty_star_light|empty_star_dark)/, '')
+                    starClass += ` ${starIcon[colorOption].className}`
+                }
+                if (isHovered) {
+                    starClass += " star-hovered"
+                }
+                if (isFilled && starIndex === interactiveStarValue) {
+                    starClass += " star-selected"
+                }
+
+                return (
+                    <div
+                        key={index}
+                        onKeyDown={(event) => handleOnKeyDown(event, starIndex)}
+                    >
                         <Icon
-                            className={starIcon[colorOption].className}
+                            className={starClass.trim()}
                             cursor="pointer"
-                            customIcon={starIcon[colorOption].icon  as unknown as { [key: string]: SVGElement }}
-                            htmlOptions={{ onClick: () => handleOnClick(index + 1) }}
-                            icon=""
+                            customIcon={starIcon[backgroundType].icon as unknown as { [key: string]: SVGElement }}
+                            htmlOptions={{
+                                onClick: () => handleOnClick(starIndex),
+                                onMouseEnter: () => handleMouseEnter(starIndex),
+                                onMouseLeave: () => handleMouseLeave(),
+                            }}
+                            tabIndex={0}
                         />
-                    )}
-
-                    {index + 1 > interactiveStarValue && (
-                        <React.Fragment key={index}>
-                            <Icon
-                                className={starIcon[backgroundType].className}
-                                cursor="pointer"
-                                customIcon={starIcon[backgroundType].icon  as unknown as { [key: string]: SVGElement }}
-                                htmlOptions={{ onClick: () => handleOnClick(index + 1) }}
-                                icon=""
-                            />
-                        </React.Fragment>
-                    )}
-                </React.Fragment>
-            ))}
+                    </div>
+                );
+            })}
         </Flex>
     )
 }

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps) => {
+const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         children,

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

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector() {
+  static get selector(): string {
     return '.table-responsive-collapse'
   }
 
-  connect() {
+  connect(): void {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      let headers: string[] = [];
+      const headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        let colSpan = header.colSpan
+        const colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes) => {
+const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes) => {
+const TableCell = (props: TableCellPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes) => {
+const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes) => {
+const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes) => {
+const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+     />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -52,14 +52,15 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   placeholder,
   required,
   rows = 4,
   value,
   ...props
-}: TextareaProps, ref: any) => {
-  ref = useRef<HTMLTextAreaElement>(null)
+}: TextareaProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -71,58 +72,75 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
   const noCount = typeof characterCount !== 'undefined'
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
-  }
-
   const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <Caption text={label} />
       {children || (
         <textarea
-          className="pb_textarea_kit"
-          disabled={disabled}
-          name={name}
-          onChange={onChange}
-          placeholder={placeholder}
-          ref={ref}
-          required={required}
-          rows={rows}
-          value={value}
-          {...props}
+            className="pb_textarea_kit"
+            disabled={disabled}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            ref={ref}
+            required={required}
+            rows={rows}
+            value={value}
+            {...props}
         />
       )}
 
       {error ? (
         <>
           {characterCount ? (
-            <Flex spacing="between" vertical="center">
+            <Flex 
+                spacing="between" 
+                vertical="center"
+            >
               <FlexItem>
-                <Body margin="none" status="negative" text={error} />
+                <Body 
+                    margin="none"
+                    status="negative"
+                    text={error} 
+                />
               </FlexItem>
               <FlexItem>
-                <Caption margin="none" size="xs" text={characterCounter()} />
+                <Caption 
+                    margin="none"
+                    size="xs"
+                    text={characterCounter()}
+                />
               </FlexItem>
             </Flex>
           ) : (
-            <Body status="negative" text={error} />
+            <Body 
+                status="negative"
+                text={error}
+            />
           )}
         </>
       ) : (
          noCount && (
-          <Caption margin="none" size="xs" text={characterCounter()} />
+          <Caption 
+              margin="none"
+              size="xs"
+              text={characterCounter()}
+          />
         )
       )}
     </div>

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

@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
-  static get selector() {
+  static get selector(): string {
     return '.resize_auto textarea'
   }
 
-  onInput() {
+  onInput(): void {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
 
-  connect() {
+  connect(): void {
     this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
     this.element.addEventListener('input', this.onInput, false)
   }

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
+import { getAllIcons } from "../utilities/icons/allicons"
 import { buildCss, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
@@ -24,7 +25,7 @@ type TimeProps = {
   unstyled?: boolean;
 } & GlobalProps
 
-const Time = (props: TimeProps) => {
+const Time = (props: TimeProps): React.ReactElement => {
   const {
     align,
     className,
@@ -42,21 +43,22 @@ const Time = (props: TimeProps) => {
     globalProps(props),
     className
   );
-
+  const clockIcon = getAllIcons()["clock"]
   const htmlProps = buildHtmlProps(htmlOptions);
 
   return (
     <div 
-      {...htmlProps}
-      className={classes} 
+        {...htmlProps}
+        className={classes} 
     >
       {showIcon && (
         unstyled
           ? (
               <span>
-                <Icon fixedWidth
-                    icon="clock"
-                />
+                    <Icon
+                        className="svg-inline--fa clock"
+                        customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
+                    />
                 {" "}
               </span>
             )
@@ -65,10 +67,12 @@ const Time = (props: TimeProps) => {
               <Body color="light"
                   tag="span"
               >
-                <Icon fixedWidth
-                    icon="clock"
-                    size={size === "md" ? "" : "sm"}
-                />
+              <Icon
+                  className="svg-inline--fa clock"
+                  customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
+                  fixedWidth
+                  size={size === "md" ? "" : "sm"}
+              />
                 {" "}
               </Body>
             </>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -13,7 +13,7 @@
   <% if object.unstyled %>
     <% if object.show_icon %>
       <span>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
       </span>
     <% end %>
 
@@ -27,7 +27,7 @@
   <% elsif size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
       <% end %>
     <% end %>
 
@@ -41,7 +41,7 @@
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_time/time.rb

@@ -38,6 +38,10 @@ module Playbook
       def pb_date_time
         Playbook::PbKit::PbDateTime.new(time, timezone)
       end
+
+      def clock_icon
+        "app/pb_kits/playbook/utilities/icons/clock.svg"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue)
 }
 
-const TimeRangeInline = (props: TimeRangeInlineProps) => {
+const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -26,7 +26,7 @@ const TimelineItem = ({
   iconColor = 'default',
   lineStyle = 'solid',
   ...props
-}: ItemProps) => {
+}: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -27,7 +27,7 @@ const Timeline = ({
   orientation = 'horizontal',
   showDate = false,
   ...props
-}: TimelineProps) => {
+}: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb

@@ -8,7 +8,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
+  timestamp: DateTime.now - 3.months,
   variant: "elapsed",
   show_user: false
 }) %>
@@ -16,7 +16,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
+  timestamp: DateTime.now - 320.days,
   variant: "elapsed",
   show_user: false,
   hide_updated: true

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -27,6 +27,18 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
+      # Variables to use with pb_time_ago method
+      SECS_FORTY_FIVE = 45
+      SECS_PER_MIN  = 60
+      SECS_PER_HOUR = 60 * SECS_PER_MIN # 3,600 seconds
+      SECS_PER_DAY  = 24 * SECS_PER_HOUR # 86,400 seconds
+      SECS_PER_WEEK = 7 * SECS_PER_DAY # 604,800 seconds
+      SECS_PER_26 = 26 * SECS_PER_DAY # 26 days = 2,246,400 seconds
+      SECS_PER_MONTH = 4 * SECS_PER_WEEK # 2,419,200 seconds
+      SECS_PER_YEAR = 12 * SECS_PER_MONTH # 29,030,400 seconds
+      SECS_PER_320 = 320 * SECS_PER_DAY # 320 days = 27,648,000 seconds
+      SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
+
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -73,12 +85,44 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
+        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
         updated_string = hide_updated ? "" : "Last updated"
-
         "#{updated_string}#{user_string}#{datetime_string}"
       end
 
+      def pb_time_ago(value)
+        time_ago = DateTime.now.to_i - value.to_i
+        case time_ago
+        when (0...SECS_FORTY_FIVE)
+          "a few seconds"
+        when (SECS_FORTY_FIVE...SECS_PER_MIN)
+          "a minute"
+        when (SECS_PER_MIN...SECS_PER_HOUR)
+          time = time_ago / SECS_PER_MIN
+          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
+        when (SECS_PER_HOUR...SECS_PER_DAY)
+          time = time_ago / SECS_PER_HOUR
+          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
+        when (SECS_PER_DAY...SECS_PER_WEEK)
+          time = time_ago / SECS_PER_DAY
+          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
+        when (SECS_PER_WEEK...SECS_PER_26)
+          time = time_ago / SECS_PER_WEEK
+          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
+        when (SECS_PER_26...SECS_PER_MONTH)
+          "a month"
+        when (SECS_PER_MONTH...SECS_PER_320)
+          time = time_ago / SECS_PER_MONTH
+          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
+        when (SECS_PER_320...SECS_PER_YEAR)
+          "a year"
+        when (SECS_PER_YEAR...SECS_PER_CENT)
+          time = time_ago / SECS_PER_YEAR
+          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
+        end
+      end
+
       def datetime_or_text
         timestamp ? format_datetime_string : text
       end