playbook_ui 7.14.0.pre.alpha1 → 7.14.0

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

@@ -5,6 +5,11 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark
 
   react:
     - popover_default: Default
@@ -12,4 +17,12 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark
+  
+
+
     

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

@@ -3,3 +3,8 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
+export { default as PopoverDark } from './_popover_dark.jsx'
+export { default as PopoverListDark } from './_popover_list_dark.jsx'
+export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
+export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
+export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -12,11 +12,6 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_xl;
-    color: transparent !important;
-    text-shadow: 0 0 0 $text_lt_default;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;
@@ -25,6 +20,8 @@
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default;
   }
   option {
     color: $text_lt_default;
@@ -65,12 +62,12 @@
       @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      text-shadow: 0 0 0 $text_dk_default;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);
         }
       }
+      text-shadow: 0 0 0 $text_dk_default;
     }
     .pb_select_kit_caret {
       color: $white;
@@ -85,4 +82,5 @@
       }
     }
   }
+
 }

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -4,13 +4,11 @@ import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-import PbTable from './'
 
 type TableProps = {
   aria?: object,
   children: array<Node> | Node,
   className: string,
-  collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
   data?: object,
@@ -27,7 +25,6 @@ const Table = (props: TableProps) => {
     aria = {},
     children,
     className,
-    collapse = 'sm',
     container = true,
     dark,
     data = {},
@@ -41,10 +38,6 @@ const Table = (props: TableProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-
-  const instance = new PbTable()
-  instance.connect()
 
   return (
     <table
@@ -62,7 +55,6 @@ const Table = (props: TableProps) => {
           'no-hover': disableHover,
         },
         globalProps(props),
-        tableCollapseCss,
         className
       )}
         id={id}

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

@@ -1,56 +1,6 @@
-<%= pb_rails("title", props: { size: 4, text: "Not Responsive" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
 
-<%= pb_rails("table", props: { responsive: "none" }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>
-
-<br>
-
-<%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %>
-
-<%= pb_rails("table", props: { collapse: "sm" }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>
-
-<br>
-
-<%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %>
-
-<%= pb_rails("table", props: { collapse: "md" }) do %>
+<%= pb_rails("table", props: { responsive: "collapse" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -73,9 +23,9 @@
 
 <br>
 
-<%= pb_rails("title", props: { size: 4, text: "Collapse Desktop" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
 
-<%= pb_rails("table", props: { collapse: "lg" }) do %>
+<%= pb_rails("table", props: { responsive: "none" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -95,5 +45,3 @@
     </tr>
   </tbody>
 <% end %>
-
-

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx

@@ -6,41 +6,10 @@ const TableResponsiveTable = (props) => {
     <div>
       <Title
           size={4}
-          text="Not Responsive"
+          text="Default"
           {...props}
       />
       <Table
-          responsive="none"
-          {...props}
-      >
-        <thead>
-          <tr>
-            <th>{'Column 1'}</th>
-            <th>{'Column 2'}</th>
-            <th>{'Column 3'}</th>
-            <th>{'Column 4'}</th>
-            <th>{'Column 5'}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-            <td>{'Value 4'}</td>
-            <td>{'Value 5'}</td>
-          </tr>
-        </tbody>
-      </Table>
-      <br />
-      <br />
-      <Title
-          size={4}
-          text="Collapse Mobile"
-          {...props}
-      />
-      <Table
-          collapse="sm"
           {...props}
       >
         <thead>
@@ -66,41 +35,11 @@ const TableResponsiveTable = (props) => {
       <br />
       <Title
           size={4}
-          text="Collapse Tablet"
+          text="Default"
           {...props}
       />
       <Table
-          collapse="md"
-          {...props}
-      >
-        <thead>
-          <tr>
-            <th>{'Column 1'}</th>
-            <th>{'Column 2'}</th>
-            <th>{'Column 3'}</th>
-            <th>{'Column 4'}</th>
-            <th>{'Column 5'}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{'Value 1'}</td>
-            <td>{'Value 2'}</td>
-            <td>{'Value 3'}</td>
-            <td>{'Value 4'}</td>
-            <td>{'Value 5'}</td>
-          </tr>
-        </tbody>
-      </Table>
-      <br />
-      <br />
-      <Title
-          size={4}
-          text="Collapse Desktop"
-          {...props}
-      />
-      <Table
-          collapse="lg"
+          responsive="none"
           {...props}
       >
         <thead>

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

@@ -13,6 +13,3 @@
 @import "single-line";
 @import "table-dark";
 @import "mobile";
-@import "mobile_collapse";
-@import "tablet_collapse";
-@import "desktop_collapse";

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

@@ -21,15 +21,12 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[collapse scroll none],
                         default: "collapse"
-      prop :collapse, type: Playbook::Props::Enum,
-                      values: %w[sm md lg],
-                      default: "sm"
       prop :text
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, collapse_class,
+          disable_hover_class, container_class, data_table_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -55,10 +52,6 @@ module Playbook
       def container_class
         container ? "table-card" : nil
       end
-
-      def collapse_class
-        responsive != "none" ? "table-collapse-#{collapse}" : ""
-      end
     end
   end
 end

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

@@ -1,8 +1,6 @@
 <%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname) do %>
-
-  <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= 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 { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
 import { Caption } from '../'
+
+import { buildCss, buildDataProps } from '../utilities/props'
+
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
-  align?: "left" | "center" | "right",
-  aria?: object,
-  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',
-    aria = {},
-    className,
-    dark = false,
-    data = {},
-    text,
-    timestamp,
-    timezone,
-    showDate = true,
-    showUser = false,
-    showTimezone = false,
-    variant = 'default',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
+  const { id, className, data = {}, text } = props
   const dataProps = buildDataProps(data)
-  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 shouldShowUser = showUser == true && text.length > 0
-  const shouldShowTimezone = showTimezone == true && timezone.length > 0
-  const userDisplay = shouldShowUser ? ` by ${text}` : ''
-
-  let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
-
-  const fullTimeDisplay = () => {
-    if (shouldShowTimezone) {
-      timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
-    }
-    return timeDisplay
-  }
-
-  const fullDateDisplay = () => {
-    let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
-    if (dateTimestamp.toYear() > currentYear) {
-      fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
-    }
-    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
-  }
-
-  const formatUpdatedString = () => {
-    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
-  }
-
-  const formatElapsedString = () => {
-    return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
-  }
-
-  const datetimeOrText = timestamp ? fullDateDisplay() : text
-
-  const captionText = () => {
-    switch (variant) {
-    case 'updated':
-      return formatUpdatedString(userDisplay, dateTimestamp)
-    case 'elapsed':
-      return formatElapsedString(userDisplay, timeDisplay)
-    default:
-      return showDate ? datetimeOrText : fullTimeDisplay()
-    }
-  }
+  const pbCss = buildCss('pb_timestamp_kit')
 
   return (
     <div
-        {...ariaProps}
         {...dataProps}
-        className={classes}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
     >
-      <div className="pb_timestamp_kit">
-        <Caption
-            dark={dark}
-            size="xs"
-            text={captionText()}
-        />
-      </div>
+      <Caption
+          size="xs"
+          tag="span"
+          text={text}
+      />
     </div>
   )
 }