playbook_ui 7.4.0 → 7.6.0

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="checkbox">
+        <SelectableList.Item
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+        <SelectableList.Item
+            label="Hot"
+            name="checkbox-name-3"
+            value="3"
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "radio",
+          items: [
+            { text: "Small",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { text: "Large",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="radio">
+        <SelectableList.Item
+            label="Small"
+            name="radio"
+            value="1"
+        />
+        <SelectableList.Item
+            defaultChecked
+            label="Medium"
+            name="radio"
+            value="2"
+        />
+        <SelectableList.Item
+            label="Large"
+            name="radio"
+            value="3"
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+
+  react:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+

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

@@ -0,0 +1,2 @@
+export { default as SelectableListCheckbox } from './_selectable_list_checkbox.jsx'
+export { default as SelectableListRadio } from './_selectable_list_radio.jsx'

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableList
+    class SelectableList
+      include Playbook::Props
+
+      partial "pb_selectable_list/selectable_list"
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[radio checkbox],
+                     default: "checkbox"
+
+      prop :text, type: Playbook::Props::String
+
+      prop :items, type: Playbook::Props::Array,
+                   default: []
+
+      def classname
+        generate_classname("pb_selectable_list_kit")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableList
+    class SelectableListItem
+      include Playbook::Props
+
+      prop :tabindex
+
+      prop :checked, type: Playbook::Props::Boolean,
+                     default: false
+      prop :name, type: Playbook::Props::String
+      prop :text, type: Playbook::Props::String
+      prop :value, type: Playbook::Props::String
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[radio checkbox],
+                     default: "radio"
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
+      partial "pb_selectable_list/selectable_list_item"
+
+      def classname
+        generate_classname("pb_selectable_list_item_kit")
+      end
+    end
+  end
+end

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

@@ -2,17 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
-    <% 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 %>
+  <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
 <% end %>

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

@@ -2,112 +2,36 @@
 
 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,
-  showDate?: boolean,
-  showUser?: boolean,
-  showTimezone?: boolean,
-  variant?: "default" | "elapsed" | "updated"
+  data?: object,
+  className?: string,
+  text?: string,
 }
 
 const Timestamp = (props: TimestampProps) => {
-  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)
-  }
+  const { id, className, data = {}, text } = props
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_timestamp_kit')
 
   return (
-    <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
+        {...dataProps}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
+    >
+      <Caption
+          size="xs"
+          tag="span"
+          text={text}
+      />
     </div>
   )
 }

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

@@ -1,16 +1,5 @@
 @import "timestamp-mixins";
-@import "../tokens/colors";
 
-[class^=pb_timestamp_kit]{
+[class^=pb_timestamp_kit] {
   @include pb_timestamp;
-
-  &[class*=_center]  {
-    text-align: center;
-  }
-  &[class*=_right]  {
-    text-align: right;
-  }
-  &[class*=_dark] {
-    color: $text_dk_default;
-  }
 }

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

@@ -1,21 +1 @@
-<%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
-  show_date: false,
-  align: "left"
-}) %>
-
-<br>
-
-<%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
-  show_date: true,
-  align: "left"
-}) %>
-
-<br>
-
-<%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now + 4.years,
-  show_date: true,
-  align: "left"
-}) %>
+<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,35 +1,8 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import { Timestamp } from '../../'
 
-const TimestampDefault = (props) => {
-  return (
-    <div>
-      <Timestamp
-          align="left"
-          showDate="false"
-          timestamp={new Date().getTime()}
-          {...props}
-      />
-
-      <br />
-
-      <Timestamp
-          align="left"
-          showDate="true"
-          timestamp={new Date().getTime()}
-          {...props}
-      />
-
-      <br />
-
-      <Timestamp
-          align="left"
-          showDate="true"
-          timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
-          {...props}
-      />
-    </div>
-  )
-}
+const TimestampDefault = () => (
+  <Timestamp text="20 seconds ago" />
+)
 
 export default TimestampDefault

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

@@ -2,20 +2,6 @@ examples:
 
   rails:
   - timestamp_default: Default
-  - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_timezones_align: Timezones - Alignments
-  - timestamp_updated: Last Updated by
-  - timestamp_updated_align: Last Updated by - Alignments
-  - timestamp_elapsed: Time Ago
-  - timestamp_elapsed_align: Time Ago - Alignments
 
   react:
   - timestamp_default: Default
-  - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_timezones_align: Timezones - Alignments
-  - timestamp_updated: Last Updated by
-  - timestamp_updated_align: Last Updated by - Alignments
-  - timestamp_elapsed: Time Ago
-  - timestamp_elapsed_align: Time Ago - Alignments

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

@@ -1,8 +1 @@
 export { default as TimestampDefault } from './_timestamp_default.jsx'
-export { default as TimestampAlign } from './_timestamp_align.jsx'
-export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
-export { default as TimestampTimezonesAlign } from './_timestamp_timezones_align.jsx'
-export { default as TimestampUpdated } from './_timestamp_updated.jsx'
-export { default as TimestampUpdatedAlign } from './_timestamp_updated_align.jsx'
-export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
-export { default as TimestampElapsedAlign } from './_timestamp_elapsed_align.jsx'

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

@@ -3,80 +3,14 @@
 module Playbook
   module PbTimestamp
     class Timestamp
-      include ActionView::Helpers::DateHelper
       include Playbook::Props
 
       partial "pb_timestamp/timestamp"
 
       prop :text
-      prop :timestamp, required: true
-
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :align,  type: Playbook::Props::Enum,
-                    values: %w[left center right],
-                    default: "left"
-      prop :show_date, type: Playbook::Props::Boolean,
-                       default: true
-      prop :show_timezone, type: Playbook::Props::Boolean,
-                           default: false
-      prop :show_user, type: Playbook::Props::Boolean,
-                       default: false
-      prop :timezone, default: "America/New_York"
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default elapsed updated],
-                     default: "default"
 
       def classname
-        generate_classname("pb_timestamp_kit", variant_class, align)
-      end
-
-      def format_year_string
-        pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
-      end
-
-      def format_time_string
-        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip
-      end
-
-      def format_timezone_string
-        timezone && show_timezone ? pb_date_time.to_timezone.to_s : ""
-      end
-
-      def format_date_string
-        "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}"
-      end
-
-      def format_datetime_string
-        "#{format_date_string} · #{format_time_string}".html_safe
-      end
-
-      def format_updated_string
-        user_string = show_user ? " by #{text}" : ""
-
-        case variant
-        when "updated"
-          datetime_string = " on #{format_date_string} at #{format_time_string}"
-        when "elapsed"
-          datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
-        end
-
-        "Last updated#{user_string}#{datetime_string}"
-      end
-
-    private
-
-      def pb_date_time
-        Playbook::PbKit::PbDateTime.new(timestamp, timezone)
-      end
-
-      def variant_class
-        case variant
-        when "updated"
-          "updated"
-        when "elapsed"
-          "elapsed"
-        end
+        generate_classname("pb_timestamp_kit")
       end
     end
   end