playbook_ui 7.4.0.pre.alpha4 → 7.4.0.pre.alpha5

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -38,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        "#{address.titleize} #{separator} #{house_style}"
+        "#{address&.titleize} #{separator} #{house_style}"
       end
 
       def address_house_style2

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -17,9 +17,7 @@ type ListProps = {
   ordered: boolean,
   role?: string,
   tabIndex?: string,
-  text?: string,
   size?: string,
-  variant?: string,
   xpadding: boolean,
 }
 
@@ -38,8 +36,6 @@ const List = (props: ListProps) => {
     size = '',
     tabIndex,
     xpadding = false,
-    variant,
-    text,
   } = props
 
   const layoutClass = {
@@ -48,9 +44,6 @@ const List = (props: ListProps) => {
     default: '',
   }
 
-  const childrenWithProps = React.Children.map(children, (child) => {
-    return React.cloneElement(child, { text, variant })
-  })
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -77,7 +70,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {childrenWithProps}
+          {children}
         </ol>
         <Else />
         <ul
@@ -88,7 +81,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {childrenWithProps}
+          {children}
         </ul>
       </If>
     </div>

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -12,6 +12,7 @@ type ProgressStepProps = {
   children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
+  showIcon?: boolean,
   variant?: string,
   color?: string,
 }
@@ -23,9 +24,10 @@ const ProgressStep = (props: ProgressStepProps) => {
     color,
     orientation = 'horizontal',
     icon = false,
+    showIcon = false,
     variant,
   } = props
-  const iconStyle = icon === true ? 'icon' : ''
+  const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
     orientation,

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -151,8 +151,11 @@
             .circle{
                 height: 24px;
                 width: 24px;
-                border: $primary solid 6px;
+                border: $primary solid $border_rad_light;
                 background-color: rgba($white, $opacity_8);
+                svg {
+                    color: darken($primary,25%);
+                }
             }
             &::before {
                 background-color: $primary;
@@ -249,10 +252,16 @@
     }
   }
 //End of Vertical
+  &[class*=icon]{
+    [class*=progress_step_item][class*=_complete],
+    [class*=progress_step_item][class*=_active] {
+        [class*=box] .circle svg {
+            opacity: 1;
+            
+        }
+    }
+    }
 
-  &[class*=icon] [class*=_complete] svg{
-    opacity: 1;
-  }
 
   &[class*=dark] {
     [class*=progress_step_item]{

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -4,7 +4,7 @@
   class: object.classname) do %>
     <div class="box">
       <div class="circle">
-        <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
       </div>
       <div class="content">
         <%= capture(&object.children) %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -7,14 +7,16 @@ import { Icon } from '..'
 
 type ProgressStepItemProps = {
   className?: string,
-  status?: 'complete' | 'active' | 'inactive' | 'hidden',
+  status?: "complete" | "active" | "inactive" | "hidden",
   children?: React.Node,
+  icon?: string,
 }
 
 const ProgressStepItem = ({
   className,
   status = 'inactive',
   children,
+  icon = 'check',
 }: ProgressStepItemProps) => {
   const progressStepItem = buildCss('pb_progress_step_item', status)
 
@@ -22,13 +24,9 @@ const ProgressStepItem = ({
     <li className={classnames(progressStepItem, className)}>
       <div className="box">
         <div className="circle">
-          <Icon
-              icon="check"
-          />
-        </div>
-        <div className="content">
-          {children}
+          <Icon icon={icon} />
         </div>
+        <div className="content">{children}</div>
       </div>
     </li>
   )

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb

@@ -0,0 +1,12 @@
+<br><br>
+<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      <%= pb_rails("caption", props:{text: "Ordered"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle"}) do %>
+      <%= pb_rails("caption", props:{text: "Shipped"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      <%= pb_rails("caption", props:{text: "Delivered"})%>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+import { Button, Caption } from '../../'
+const ProgressStepTrackerClickEvents = (props) => {
+  const [warning, setWarning] = useState(false)
+  const showWarning = warning == true
+  const WarningIcon = (
+    <ProgressStepItem
+        icon="exclamation-triangle"
+        key={Math.random()}
+        status="active"
+    >
+      <Caption>{'Shipped'}</Caption>
+    </ProgressStepItem>
+  )
+  const CheckedIcon = (
+    <ProgressStepItem
+        key={Math.random()}
+        status="active"
+    >
+      <Caption>{'Shipped'}</Caption>
+    </ProgressStepItem>
+  )
+  return (
+    <div>
+      <Button onClick={() => setWarning(!warning)}>{'Toggle State'}</Button>
+      <br />
+      <br />
+      <br />
+      <ProgressStep
+          icon
+          variant="tracker"
+          {...props}
+      >
+        <ProgressStepItem status="complete">
+          <Caption>{'Ordered'}</Caption>
+        </ProgressStepItem>
+        {showWarning ? WarningIcon : CheckedIcon}
+        <ProgressStepItem status="inactive">
+          <Caption>{'Delivered'}</Caption>
+        </ProgressStepItem>
+      </ProgressStep>
+    </div>
+  )
+}
+
+export default ProgressStepTrackerClickEvents

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

@@ -3,9 +3,11 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_custom_icon: Custom Icon
   
   
   react:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
+  - progress_step_tracker_click_events: Using State

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

@@ -1,3 +1,4 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
+export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -12,12 +12,14 @@ module Playbook
                          default: "horizontal"
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
+      prop :show_icon, type: Playbook::Props::Boolean,
+                  default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"
       prop :color, type: Playbook::Props::Enum,
-                     values: %w[primary info],
-                     default: "primary"
+                   values: %w[primary info],
+                   default: "primary"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
       end
@@ -25,7 +27,7 @@ module Playbook
     private
 
       def icon_class
-        icon === true ? "icon" : nil
+        icon === true || show_icon === true ? "icon" : nil
       end
 
       def variant_class

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -11,6 +11,12 @@ module Playbook
                     values: %w[complete active inactive hidden],
                     default: "inactive"
 
+      prop :icon, required: false, default: "check"
+
+      def name_icon
+        icon ? icon : "check"
+      end
+
       def classname
         generate_classname("pb_progress_step_item", status)
       end

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -19,6 +19,7 @@ type RadioProps = {
   label: String,
   name: String,
   value: String,
+  text: String,
   onChange: (Boolean)=>void,
 }
 
@@ -32,6 +33,7 @@ const Radio = ({
   id,
   label,
   name = 'radio_name',
+  text = 'Radio Text',
   value = 'radio_text',
   onChange = () => {},
   ...props
@@ -55,6 +57,7 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
+            text={text}
             type="radio"
             value={value}
         />

data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb

@@ -2,5 +2,17 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
+
+    <% case object.variant
+        when "updated" %>
+        <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
+    <% when "elapsed" %>
+      <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
+    <% else %>
+      <% if object.show_date %>
+        <%= pb_rails("caption", props: { text: object.format_datetime_string, size: 'xs', dark: object.dark }) %>
+      <% else %>
+        <%= pb_rails("caption", props: { text: object.format_time_string, size: 'xs', dark: object.dark }) %>
+      <% end %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -2,36 +2,112 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import DateTime from '../pb_kit/dateTime.js'
+import { buildCss } from '../utilities/props'
 import { Caption } from '../'
-
-import { buildCss, buildDataProps } from '../utilities/props'
-
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
+  align?: "left" | "center" | "right",
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  text: string,
+  timestamp: string,
+  timezone: string,
   id?: string,
-  data?: object,
-  className?: string,
-  text?: string,
+  showDate?: boolean,
+  showUser?: boolean,
+  showTimezone?: boolean,
+  variant?: "default" | "elapsed" | "updated"
 }
 
 const Timestamp = (props: TimestampProps) => {
-  const { id, className, data = {}, text } = props
-  const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_timestamp_kit')
+  const {
+    align = 'left',
+    className,
+    dark = false,
+    text,
+    timestamp,
+    timezone,
+    showDate = true,
+    showUser = false,
+    showTimezone = false,
+    variant = 'default',
+  } = props
+  const classes = classnames(
+    buildCss('pb_timestamp_kit', align, {
+      dark: dark,
+      variant: variant,
+    }),
+    globalProps(props),
+    className
+  )
+
+  const currentYear = new Date().getFullYear().toString()
+  const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
+  const dateDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
+  const timeDisplay = dateTimestamp.toHour() + ':' + dateTimestamp.toMinute() + dateTimestamp.toMeridian()
+
+  var fullTimeDisplay = function fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) {
+    if (showTimezone == 'true' && timezone.length > 0) {
+      timeDisplay = timeDisplay + ' ' + dateTimestamp.toTimezone()
+    }
+    return timeDisplay
+  }
+
+  var fullDateDisplay = function fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone) {
+    var fullDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
+    if (dateTimestamp.toYear() > currentYear) {
+      fullDisplay = fullDisplay + ', ' + dateTimestamp.toYear().toString()
+    }
+    return fullDisplay + ' \u00b7 ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
+  }
+
+  var fullElapsedDisplay = function fullElapsedDisplay(showUser, text, dateTimestamp){
+    var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
+    return 'Last updated' + userDisplay + ' ' + dateTimestamp.value.fromNow()
+  }
+
+  var fullUpdatedDisplay = function fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone){
+    var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
+    return 'Last updated' + userDisplay + ' at ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
+  }
 
   return (
-    <div
-        {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
-    >
-      <Caption
-          size="xs"
-          tag="span"
-          text={text}
-      />
+    <div className={classes}>
+      <div className="pb_timestamp_kit">
+        <If condition={variant == 'updated'}>
+          <Caption
+              dark={dark}
+              size="xs"
+              text={fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone)}
+          />
+        </If>
+        <If condition={variant == 'elapsed'}>
+          <Caption
+              dark={dark}
+              size="xs"
+              text={fullElapsedDisplay(showUser, text, dateTimestamp)}
+          />
+        </If>
+        <If condition={variant == 'default'}>
+          <If condition={showDate == 'true'}>
+            <Caption
+                dark={dark}
+                size="xs"
+                text={fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone)}
+            />
+          </If>
+          <If condition={showDate == 'false'}>
+            <Caption
+                dark={dark}
+                size="xs"
+                text={timeDisplay}
+            />
+          </If>
+        </If>
+      </div>
     </div>
   )
 }