playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3601 → 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -0,0 +1,227 @@
+import React from 'react'
+import { FormPill, Title } from 'playbook-ui'
+
+const FormPillColors = (props) => {
+  return (
+    <div>
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Status Colors"
+          {...props}
+      />
+      <FormPill
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Neutral"
+          {...props}
+      />
+      <FormPill
+          color="primary"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Primary"
+          {...props}
+      />
+      <FormPill
+          color="success"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Success"
+          {...props}
+      />
+      <FormPill
+          color="warning"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Warning"
+          {...props}
+      />
+      <FormPill
+          color="error"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Error"
+          {...props}
+      />
+      <FormPill
+          color="info"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Info"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Data Colors"
+          {...props}
+      />
+      <FormPill
+          color="data_1"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 1"
+          {...props}
+      />
+      <FormPill
+          color="data_2"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 2"
+          {...props}
+      />
+      <FormPill
+          color="data_3"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 3"
+          {...props}
+      />
+      <FormPill
+          color="data_4"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 4"
+          {...props}
+      />
+      <FormPill
+          color="data_5"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 5"
+          {...props}
+      />
+      <FormPill
+          color="data_6"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 6"
+          {...props}
+      />
+      <FormPill
+          color="data_7"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 7"
+          {...props}
+      />
+      <FormPill
+          color="data_8"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 8"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Product Colors"
+          {...props}
+      />
+      <FormPill
+          color="windows"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Windows"
+          {...props}
+      />
+      <FormPill
+          color="siding"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Siding"
+          {...props}
+      />
+      <FormPill
+          color="roofing"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Roofing"
+          {...props}
+      />
+      <FormPill
+          color="doors"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Doors"
+          {...props}
+      />
+      <FormPill
+          color="gutters"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Gutters"
+          {...props}
+      />
+      <FormPill
+          color="solar"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Solar"
+          {...props}
+      />
+      <FormPill
+          color="insulation"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Insulation"
+          {...props}
+      />
+      <FormPill
+          color="accessories"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Accessories"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillColors

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md

@@ -0,0 +1 @@
+The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Neutral is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop. 

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

@@ -6,6 +6,7 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -13,3 +14,4 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors

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

@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
+export { default as FormPillColors } from './_form_pill_colors.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -12,8 +12,8 @@ module Playbook
                             values: %w[none lowercase],
                             default: "none"
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral],
-                   default: "primary"
+                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
+                   default: "neutral"
       prop :tabindex
       prop :icon
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -34,6 +34,7 @@ type MultiLevelSelectProps = {
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
   variant?: "multi" | "single"
+  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -50,7 +51,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    variant = "multi"
+    variant = "multi",
+    color = "neutral"
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -467,6 +469,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? returnedArray.map((item, index) => (
                       <FormPill
+                          color={color}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -479,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? defaultReturn.map((item, index) => (
                       <FormPill
+                          color={color}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData,
+    color: "primary"
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectColor = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          color="primary"
+          id='multiselect-color'
+          onSelect={(selectedNodes) =>
+            console.log(
+              "Selected Items",
+              selectedNodes
+            )
+          }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectColor;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -6,6 +6,7 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
+  - multi_level_select_color: Color
 
   react:
   - multi_level_select_default: Default
@@ -13,3 +14,4 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
+  - multi_level_select_color: Color

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

@@ -3,3 +3,4 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
+export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -19,6 +19,9 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
+                   default: "neutral"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -34,6 +37,7 @@ module Playbook
           selectedIds: selected_ids,
           input_name: input_name,
           variant: variant,
+          color: color,
         }
       end
     end

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

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

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

@@ -27,18 +27,6 @@ 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
@@ -85,42 +73,10 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
-        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         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
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -63,7 +63,7 @@ test('typeahead with pills', () => {
   )
 
   const kit = screen.getByTestId('pills-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_primary")
+  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
   expect(pill).toBeInTheDocument()
 })
 
@@ -89,7 +89,7 @@ test('typeahead multi select with badges and small pills', () => {
   )
 
   const kit = screen.getByTestId('small-pill-test')
-  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
+  const badge = kit.querySelector(".pb_form_pill_kit_neutral.mr_xs.small")
   expect(badge).toBeInTheDocument()
 })
 
@@ -107,4 +107,20 @@ test('should pass className prop', () => {
 
   const kit = screen.getByTestId('typeahead-test')
   expect(kit).toHaveClass(className)
+})
+
+test('typeahead with colored pills', () => {
+  render(
+    <Typeahead
+        color="primary"
+        data={{ testid: 'pills-color-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('pills-color-test')
+  const pill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(pill).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,12 +45,14 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
+  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 export type SelectValueType = {
   label: string,
   value: string,
   imageUrl?: string,
+  pillColor?: string,
 }
 
 type TagOnChangeValues = {
@@ -76,6 +78,7 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  color,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -105,6 +108,7 @@ const Typeahead = ({
     onCreateOption: null as null,
     plusIcon: false,
     onMultiValueClick: (_option: SelectValueType): any => undefined,
+    pillColor: color,
     ...props,
   }