playbook_ui 13.2.0.pre.alpha.PLAY986dateTimeRounding1150 → 13.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29507bd994a736c71238be60bea9b2b269b5f1a40ebabac51280e93f20d493b2
-  data.tar.gz: fb81b0db3f2615422f9d827859951373dd50d34b5a94aa06f9bc42324d7942a5
+  metadata.gz: 9f58a60dbe08112a0b7b1cea36c7838386d7b7577809d4030a9b139b179df83d
+  data.tar.gz: 4bfb13a37f222531335ffa4b950026c1f0c7daeb2b33aecf3cf06fd02fa3684a
 SHA512:
-  metadata.gz: ed2c60ef1307bb8c3ba61cb9d8983a219c6e82568e86ec9e8608ae7efe057094f6307da32f77c4ad5a08d11f9fd5ee5f2b568c1502d3426d2a82416795c846ff
-  data.tar.gz: e96648e381e82365ec5b439cdc3166f08c6c33e7cfc71d42a79415f46a5e3c1f696ccda273952633e858c7802a6746ff45a009ac164e5211ab8af18f7646805d
+  metadata.gz: 8554a0a8db1af2d8ca5e08f92f03354c68df334eeea9c8d33f103e825295fabc25e28c8a2466dadb381e4a11810d0059771ddeff2dd60505ba3f181f1af5e211
+  data.tar.gz: 06dd58fecce7e733a01e77d54cdad22b051f7ec5036e881726ecc283407d28451c98fce6b05b4649fa13bd7868d601d9d1767dc0cb52393f55352314177b7210

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -37,10 +37,15 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
+  
+  &[class*=_truncate] {
+    @include body_truncate;
+  }
 
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
+      @include body_truncate;
     }
   }
 

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -19,6 +19,7 @@ type BodyProps = {
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | 'link',
 } & GlobalProps
 
@@ -36,13 +37,15 @@ const Body = (props: BodyProps): React.ReactElement => {
     status = null,
     tag = 'div',
     text = '',
+    truncate = null,
     variant = null,
   } = props
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
-    buildCss('pb_body_kit', color, variant, status),
+    buildCss('pb_body_kit', color, variant, status, isTruncated),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -36,6 +36,25 @@ $pb_body_status: (
   font-family: $font-family-base;
 }
 
+$pb_body_truncate: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin body_truncate {
+  @each $name, $number in $pb_body_truncate {
+    &[class*=_#{$name}] {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: $number;
+      -webkit-box-orient: vertical; 
+    }
+  }
+}
+
 
 // Colors ======================
 @mixin pb_body_light {

data/app/pb_kits/playbook/pb_body/body.rb

@@ -18,9 +18,12 @@ module Playbook
                           default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
+      prop :truncate, type: Playbook::Props::Enum,
+                      values: [nil, "1", "2", "3", "4", "5"],
+                      default: nil
 
       def classname
-        generate_classname("pb_body_kit", color_class, status_class)
+        generate_classname("pb_body_kit", color_class, status_class, is_truncated)
       end
 
       def content
@@ -28,6 +31,10 @@ module Playbook
         highlighting ? apply_highlight(body_text) : body_text
       end
 
+      def is_truncated
+        truncate ? "truncate_#{truncate}" : nil
+      end
+
     private
 
       def apply_highlight(text)

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -121,61 +121,30 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const today = new Date()
-  const formattedDate = formatDate(newDate)
-
-  const startDate = formattedDate.getTime()
-  const endDate = today.getTime()
+  const startDate = formatDate(newDate).getTime()
+  const endDate = new Date().getTime()
   const elapsedTime = endDate - startDate
-
-  // For years/months, don't use elapsedTime due to rounding
-  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
-  const differenceInMonths = () => {
-    let months = differenceInYears * 12
-    months -= formattedDate.getMonth()
-    months += today.getMonth()
-    return months
-  }
-
-  const FOURTY_FIVE_SECONDS = 45000
-  const NINETY_SECONDS = 90000
-
-  const FOURTY_FIVE_MINUTES = 2670000
-  const NINETY_MINUTES = 5400000
-
-  const TWENTY_TWO_HOURS = 77400000
-  const THIRTY_SIX_HOURS = 129600000
-
-  const TWENTY_SIX_DAYS = 2203200000
-  const FOURTY_FIVE_DAYS = 3888000000
-
-  const TEN_AND_A_HALF_MONTHS = 27560000000
-
-  const MILLISECONDS_IN_A_MINUTE = 60000
-  const MILLISECONDS_IN_A_HOUR = 3600000
-  const MILLISECONDS_IN_A_DAY = 86400000
-
-  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
-
-  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
-  const intervals = [
-    { min: 0, max: FOURTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
-    { min: FOURTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
-    { min: NINETY_SECONDS, max: FOURTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
-    { min: FOURTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
-    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
-    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
-    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
-    { min: TWENTY_SIX_DAYS, max: FOURTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
-    { min: FOURTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
-  ]
-
-  for (const interval of intervals) {
-    const { min, max, value } = interval
-
-    if (elapsedTime >= min && elapsedTime < max) {
-      elapsedTimeString = value
-      break
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
+
+  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
+
+  const elapsedTimeData = [
+    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
+    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
+    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
+    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
+    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
+    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
+    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
+    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
+    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
+  ];
+
+  for (const timeDate of elapsedTimeData) {
+    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
+      elapsedTimeString = timeDate.value;
+      break;
     }
   }
 

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("table", props: { size: "lg"} ) do %>
+  <thead>
+    <tr>
+      <%= pb_rails("table/table_header", props: {
+        id: "name",
+        colspan: 2,
+        sort_menu: [
+          { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
+          { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: {
+        text: "Age",
+        id: "age",
+        sort_menu: [
+          { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
+          { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: {
+        text: "Territory",
+        id: "territory",
+        sort_menu: [
+          { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
+          { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -0,0 +1 @@
+A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>

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

@@ -4,6 +4,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_header: Table Header
     - table_alignment_row: Row Alignment
     - table_alignment_column: Column Alignment
     - table_alignment_shift_row: Shift Row

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -17,3 +17,4 @@
 @import "desktop_collapse";
 @import "sticky_header";
 @import "vertical_border";
+@import "table_header";

data/app/pb_kits/playbook/pb_table/styles/_table_header.scss

@@ -0,0 +1,31 @@
+
+$text_align_values: (
+  start: start,
+  end: end,
+  left: left,
+  right: right,
+  center: center,
+  justify: justify,
+  justify-all: justify-all,
+  match-parent: match-parent,
+);
+
+[class^=pb_table] {
+  thead {
+    [class^=pb_table_header_kit] {
+      @each $align_name, $align_value in $text_align_values {
+        &[class*=_align_#{$align_name}] {
+          text-align: $align_value;
+        }
+      }
+    }
+  }
+}
+
+[class^=pb_table] {
+  thead {
+    [class^=pb_th_active] {
+      color: $primary !important;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -0,0 +1,64 @@
+<%= content_tag(:th,
+    colspan: object.colspan,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: "pb-th#{object.id}") do %>
+  <% object.sort_menu.each do |item| %>
+    <% if item[:active] == true %>
+      <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+        <%= content.presence || content_tag(:span, item[:item], class: "pb_th_active") %>
+        <span class="pb_th_active">
+          <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]),
+                                        fixed_width: true,
+                                        classname: "pb_th_active",
+                                        padding_left: "xs" }) %>
+        </span>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if object.sort_menu.all? { |item| item[:active] == false } %>
+    <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+      <%= content.presence || object.text %>
+      <%= pb_rails("icon", props: { icon: "arrow-up-arrow-down",
+                                    fixed_width: true,
+                                    padding_left: "xs" }) %>
+    <% end %>
+  <% else %>
+    <%= content.presence || object.text %>
+  <% end %>
+  <% if object.sort_menu != [{}] && object.colspan > 1 %>
+    <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                    close_on_click: "outside",
+                                    trigger_element_id: "pb-th#{object.id}",
+                                    tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                    position: object.placement ,
+                                    padding: 'none'}) do %>
+      <%= pb_rails("list") do %>
+        <% object.sort_menu.each do |item| %>
+          <%= pb_rails("list/item") do %>
+            <%= pb_rails("button", props: { variant: "link" ,
+                                            classname: "p-0",
+                                            text: item[:item],
+                                            link: item[:link],
+                                            icon: sort_icon(item[:direction]),
+                                            icon_right: true }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<% if object.sort_menu != [{}] && object.colspan == 1 %>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var thId = `<%= "#pb-th#{object.id}" %>`
+      var firstLink = `<%= next_link %>`
+      var thElement = document.querySelector(thId);
+
+      thElement.addEventListener("click", function() {
+        window.location.href = firstLink;
+      });
+    });
+  </script>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableHeader < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[start center end stretch baseline none],
+                   default: "start"
+      prop :align_content, type: Playbook::Props::Enum,
+                           values: %w[start center end stretch baseline none],
+                           default: "center"
+      prop :colspan, type: Playbook::Props::Number,
+                     default: 1
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
+                       default: "bottom-start"
+      prop :sort_menu, type: Playbook::Props::HashArray,
+                       default: [{}]
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+
+      def classname
+        generate_classname("pb_table_header_kit", align_class)
+      end
+
+      def align_class
+        align.present? ? "align_#{align}" : nil
+      end
+
+      def next_link
+        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+
+        sort_menu.each_with_index do |item, index|
+          if item[:active] == true
+            next_index = (index + 1) % sort_menu.length
+            sort_menu[next_index][:link]
+          end
+        end
+      end
+
+      def sort_icon(direction)
+        case direction
+        when "asc"
+          "sort-amount-up"
+        when "desc"
+          "sort-amount-down"
+        else
+          ""
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -35,6 +35,10 @@
     @include pb_title_thin;
   }
 
+  &[class*=_truncate] {
+    @include title_truncate;
+  }
+
   @each $size, $size_value in $breakpoints_grid {
     @each $title_size_value in [1, 2, 3, 4] {
         $min_size: map-get($size_value, "min");
@@ -46,6 +50,7 @@
             @else if $title_size_value == 3 { @include pb_title_3; }
             @else if $title_size_value == 4 { @include pb_title_4; }
             @include title_colors;
+            @include title_truncate;
             @if $title_size_value != 4 { @include pb_title_bold; }
           }
         }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -17,6 +17,7 @@ type TitleProps = {
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
+  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | "link",
 } & GlobalProps
 
@@ -33,12 +34,14 @@ const Title = (props: TitleProps): React.ReactElement => {
     bold = true,
     tag = 'h3',
     text,
+    truncate = null,
     variant = null,
   } = props
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
+  const isTruncated = truncate ? `truncate_${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
@@ -54,7 +57,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   }
 
   const classes = classnames(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold, isTruncated),
     globalProps(props),
     buildResponsiveSizeCss(),
     className

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -15,4 +15,23 @@ $pb_title_colors: (
       color: $color
     }
   }
+}
+
+$pb_title_truncate: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin title_truncate {
+  @each $name, $number in $pb_title_truncate {
+    &[class*=_#{$name}] {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: $number;
+      -webkit-box-orient: vertical; 
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :truncate, type: Playbook::Props::Enum,
+                      values: [nil, "1", "2", "3", "4", "5"],
+                      default: nil
 
       def classname
         if is_size_responsive
-          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+          generate_classname("pb_title_kit", variant, color, is_bold, is_truncated) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
+          generate_classname("pb_title_kit", size, variant, color, is_bold, is_truncated)
         end
       end
 
@@ -29,6 +32,10 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def is_truncated
+        truncate ? "truncate_#{truncate}" : nil
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end