playbook_ui 13.2.0 → 13.4.0.pre.alpha.PLAY973Hash1181

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c03b530a4b2b16b5dcf7ea348a4aa6a66db48f68359fed8469e47746c6fad2c
-  data.tar.gz: 5695a441ba55870888683da55c49814c94de842a952614d711325bfd1813fe35
+  metadata.gz: 6d6551f1772a9fb33867a19c0226859cf491c986ccb503c2c7601588582d55c3
+  data.tar.gz: 86d1ebafb210c29139963d232e1c52d071ca862cde8aaa283420e756fc39aaab
 SHA512:
-  metadata.gz: cb2dd83ad7e0030f750adb29cab24f33d979922ac9763e35de399c8df427053ae501e0b24a168116c6fccf876885bf7fc9e7e0356b94bae6ef7ccb14cf7bf45c
-  data.tar.gz: 51fa2673e72139fdfce189b16a2364430eb8518fb9480d5b8c203bd66956478654506a20e358fbd6e6de955c97270503ed69f92857fe51789ddc30595daff9b3
+  metadata.gz: 2aabad2326332a49ce487e0ab62d606c76c53bab395b3f04d3aa396342afca0ec57a941fb032da36a6eb13b1a73cff2a0e522256de643fb0bc3ea375f71a4088
+  data.tar.gz: 414ad28883507217cc57ed460ad78c83188d0b94d87a7ce8964409d89554af5260e5053b5ff02fbe71149bf3de1a933deff958d82d77e5192fa4db1e67813d53

data/app/pb_kits/playbook/_playbook.scss

@@ -112,5 +112,6 @@
 @import './utilities/focus';
 @import './utilities/border_radius';
 @import './utilities/hover';
+@import './utilities/text_align';
 
 @import 'pb_multi_level_select/multi_level_select';

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_button/button.html.erb

@@ -18,14 +18,14 @@
     <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -29,6 +29,9 @@ module Playbook
                   values: ["sm", "md", "lg", nil],
                   default: nil
       prop :form, default: nil
+      prop :icon_font_family, type: Playbook::Props::Enum,
+                              values: %w[far fas fab fak],
+                              default: "far"
 
       def options
         {

data/app/pb_kits/playbook/pb_card/card.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :highlight, type: Playbook::Props::Hash,
+      prop :highlight, type: Playbook::Props::HashProp,
                        default: {}
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[div section footer header article aside main nav],

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :value
       prop :name
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -99,8 +99,12 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
+    onClick && onClick();
+    //To disable default toggling behavior return "true" in the onClick()
+    const disableToggle = onClick && onClick();
+    if (disableToggle !== true) {
     toggle();
-    onClick && onClick()
+    }
   }
 
   return (

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -6,10 +6,10 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :stat_change, type: Playbook::Props::Hash,
+      prop :stat_change, type: Playbook::Props::HashProp,
                          default: {}
       prop :stat_label
-      prop :stat_value, type: Playbook::Props::Hash,
+      prop :stat_value, type: Playbook::Props::HashProp,
                         default: {}
 
       def formatted_stat_value

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -34,9 +34,9 @@ module Playbook
                     default: false
       prop :label, type: Playbook::Props::String,
                    default: "Date Picker"
-      prop :input_aria, type: Playbook::Props::Hash,
+      prop :input_aria, type: Playbook::Props::HashProp,
                         default: {}
-      prop :input_data, type: Playbook::Props::Hash,
+      prop :input_data, type: Playbook::Props::HashProp,
                         default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -18,7 +18,7 @@ module Playbook
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

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

@@ -121,30 +121,61 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const startDate = formatDate(newDate).getTime()
-  const endDate = new Date().getTime()
+  const today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.getTime()
   const elapsedTime = endDate - startDate
-  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;
+
+  // 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 FORTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FORTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FORTY_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: FORTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FORTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FORTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FORTY_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: FORTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FORTY_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
     }
   }
 

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbPassphrase
     class Passphrase < Playbook::KitBase
       prop :confirmation, type: Playbook::Props::Boolean, default: false
-      prop :input_props, type: Playbook::Props::Hash, default: {}
+      prop :input_props, type: Playbook::Props::HashProp, default: {}
       prop :label
       prop :show_tips_below, type: Playbook::Props::Enum,
                              values: %w[always xs sm md lg xl],

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,7 +11,7 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,7 +6,7 @@ require "action_view"
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
-      prop :attributes, type: Playbook::Props::Hash,
+      prop :attributes, type: Playbook::Props::HashProp,
                         default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -15,7 +15,7 @@ module Playbook
                    default: true
       prop :input_id, type: Playbook::Props::String
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -23,7 +23,7 @@ module Playbook
                        default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -21,7 +21,7 @@ module Playbook
                       default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       # Conditional rendering for input field

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "radio"
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_source/source.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :type, type: Playbook::Props::Enum,
                   values: %w[user retail inbound outbound prospecting events referral],
                   default: "inbound"
-      prop :user, type: Playbook::Props::Hash, default: {}
+      prop :user, type: Playbook::Props::HashProp, default: {}
 
       def type_text
         if type == "user" || (type == "referral" && user.present?)

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/_table_two_actions.jsx

@@ -28,7 +28,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -49,7 +49,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -70,7 +70,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />

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