playbook_ui 6.5.0 → 6.7.0

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

@@ -1,5 +1,2 @@
 export { default as RadioDefault } from './_radio_default.jsx'
-export { default as RadioDark } from './_radio_dark.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
-export { default as RadioError } from './_radio_error.jsx'
-export { default as RadioDarkError } from './_radio_dark_error.jsx'

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

@@ -5,11 +5,10 @@ examples:
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark
+
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark

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

@@ -2,4 +2,3 @@ export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
-export { default as SectionSeparatorDark } from './_section_separator_dark.jsx'

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

@@ -8,9 +8,8 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error
+
 
 
   react:
@@ -21,6 +20,4 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error

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

@@ -1,5 +1,4 @@
 export { default as SelectDefault } from './_select_default.jsx'
-export { default as SelectDark } from './_select_dark.jsx'
 export { default as SelectBlank } from './_select_blank.jsx'
 export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
 export { default as SelectDisabled } from './_select_disabled.jsx'
@@ -7,4 +6,3 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
-export { default as SelectDarkError } from './_select_dark_error.jsx'

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

@@ -4,10 +4,9 @@ examples:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark
+
   
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
-export { default as SelectableCardDark } from './_selectable_card_dark.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'

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

@@ -4,13 +4,10 @@ examples:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
+
   
   
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
-
-  

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

@@ -1,4 +1,3 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
-export { default as SelectableCardIconDark } from './_selectable_card_icon_dark.jsx'

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

@@ -3,10 +3,8 @@ examples:
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
+
   
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
-  

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

@@ -1,3 +1,2 @@
 export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
 export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'
-export { default as SelectableIconDark } from './_selectable_icon_dark.jsx'

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

@@ -10,8 +10,7 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark
+ 
   react:
     - table_sm: Small
     - table_md: Medium
@@ -23,5 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark

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

@@ -5,8 +5,6 @@ export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
 export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
-export { default as TableDark } from './_table_dark.jsx'
-export { default as TableContainerDark } from './_table_container_dark.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -13,17 +13,22 @@
     margin-bottom: $space_sm;
     display: block;
 
-    input::placeholder {
+    input::placeholder,
+    .text_input .placeholder {
       @include pb_body_light;
     }
 
-    input {
+    input,
+    .text_input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
     }
 
-    input:focus, input:-webkit-autofill:focus {
+    input:focus,
+    .text_input:focus,
+    input:-webkit-autofill:focus,
+    .text_input:-webkit-autofill:focus {
       @include pb_textarea_focus;
       -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
       transition: background-color 5000s ease-in-out 0s;
@@ -34,18 +39,22 @@
     .text_input_wrapper {
       margin-bottom: 1rem;
 
-      input::placeholder {
+      input::placeholder,
+      .text_input .placeholder {
         @include pb_body_light_dark;
       }
 
-      input {
+      input, .text_input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
         overflow: hidden;
       }
 
-      input:focus, input:-webkit-autofill:focus {
+      input:focus,
+      .text_input:focus,
+      input:-webkit-autofill:focus,
+      .text_input:-webkit-autofill:focus {
         @include pb_textarea_focus_dark;
         -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
         transition: background-color 5000s ease-in-out 0s;
@@ -54,7 +63,7 @@
 
     &.error {
       .text_input_wrapper {
-        input {
+        input, .text_input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +75,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input {
+      input, .text_input {
         border-color: $error;
       }
     }

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

@@ -1,16 +1,11 @@
 examples:
   rails:
   - text_input_default: Default
-  - text_input_dark: Dark
   - text_input_error: With Error
-  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
   react:
   - text_input_default: Default
-  - text_input_dark: Dark
   - text_input_error: With Error
-  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
-

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

@@ -1,6 +1,4 @@
 export { default as TextInputDefault } from './_text_input_default.jsx'
-export { default as TextInputDark } from './_text_input_dark.jsx'
-export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'

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

@@ -3,17 +3,14 @@ examples:
   rails:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error
+
 
 
 
   react:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error

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

@@ -1,6 +1,4 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
-export { default as TextareaDark } from './_textarea_dark.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
-export { default as TextareaDarkError } from './_textarea_dark_error.jsx'

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,32 +2,38 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <% if object.size == "lg" %>
-    <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
-    <%= content_tag(:span) do %>
+    <%
+      # convert deprecated prop values
+      size = object.size
+      size = "sm" if object.size == "xs"
+      size = "md" if object.size == "lg"
+    %>
+  <% if size == "md" %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <% if object.show_timezone %>
       <%= content_tag(:span, class: "pb_time_timezone") do %>
         <%= object.pb_date_time.to_timezone.upcase %>
       <% end %>
     <% end %>
-  <% elsif object.size == "sm" %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
-      <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
-      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
-          <% end %>
-        <% end %>
+  <% else %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-  <% else %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
         <%= content_tag(:span) do %>
           <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
+          <% if object.show_timezone %>
+            <%= content_tag(:span, class: "pb_time_timezone") do %>
+              <%= object.pb_date_time.to_timezone.upcase %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -7,20 +7,22 @@ import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Body, Icon, Title  } from '../'
+import { Body, Caption, Icon } from '../'
 
 type TimeProps = {
   align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   data?: string,
   date: string,
+  dark?: boolean,
   id?: string,
-  size?: 'lg' | 'sm' | 'xs',
+  showIcon?: boolean,
+  size?: 'md' | 'sm',
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, size, timeZone } = props
+  const { align, className, date, showIcon, size, timeZone } = props
   const classes = classnames(
     className,
     buildCss('pb_time_kit', align, size),
@@ -32,23 +34,30 @@ const Time = (props: TimeProps) => {
   return (
     <div className={classes}>
       <span className="pb_body_kit">
-        <If condition={size === 'sm'}>
-          <Icon
-              fixedWidth
-              icon="clock"
-          />
+        <If condition={showIcon}>
+          <Body
+              color="light"
+              tag="span"
+          >
+            <Icon
+                fixedWidth
+                icon="clock"
+                size={size === 'md' ? 'lg' : 'sm'}
+            />
+          </Body>
           {' '}
         </If>
         <time dateTime={date}>
           <span>
-            <If condition={size !== 'lg'}>
+            <If condition={size !== 'md'}>
               <Body
+                  color="light"
                   tag="span"
                   text={dateTimestamp.toTimeWithMeridian()}
               />
               <Else />
-              <Title
-                  size={3}
+              <Caption
+                  size="lg"
                   tag="span"
                   text={dateTimestamp.toTimeWithMeridian()}
               />

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -2,9 +2,11 @@
 @import "../tokens/typography";
 @import "../pb_icon/icon";
 @import "../pb_body/body";
-@import "../pb_title/title";
+@import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
+  letter-spacing: $lspace_looser;
+  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -18,27 +20,33 @@
   }
 
   [class^=pb_time_timezone] {
-    font-size: $font-small;
-    font-weight: $regular;
-    color: $text-lt-light;
+    color: $text_lt_light;
+    font-weight: $bold;
 
     &::before {
       content: " ";
     }
   }
 
-  &[class*=_lg] {
+  &[class*=_md] {
+    [class^=pb_caption_kit] {
+      color: $text_lt_default;
+      letter-spacing: $lspace_tight;
+      text-transform: capitalize;
+    }
     [class^=pb_time_timezone] {
+      color: $text_lt_light;
       font-size: $font-large !important;
-      color: $text-lt-light;
+      font-weight: $regular;
+      letter-spacing: $lspace_tight;
     }
   }
 
   &.dark {
-    & > * [class^=pb_title_kit] {
+    [class^=pb_caption_kit] {
       color: $text_dk_default;
     }
-    & > * [class^=pb_body_kit] {
+    [class^=pb_body_kit] {
       color: $text_dk_light;
     }
   }

data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "right"
+}) %>