playbook_ui 11.9.0.pre.alpha.fileupload1 → 11.10.0.pre.alpha.pagination1

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

@@ -1,3 +1,4 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
 export { default as LegendColors } from './_legend_colors'
+export { default as LegendCustomColors} from './_legend_custom_colors'

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -4,7 +4,7 @@
     data: object.data,
     class: object.classname) do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
-    <span class="pb_legend_indicator_circle"></span>
+    <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
     <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
     <%= object.text %>
   <% end %>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -12,8 +12,16 @@ module Playbook
         dark ? "lighter" : "light"
       end
 
+      def custom_color
+        color.start_with?("#") ? "background: #{color}" : ""
+      end
+
+      def custom_color_class
+        color.start_with?("#") ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"
+      end
+
       def classname
-        generate_classname("pb_legend_kit", color)
+        generate_classname("pb_legend_kit", color.start_with?("#") ? nil : color)
       end
     end
   end

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -19,7 +19,7 @@ $selector: ".pb_nav_list";
   }
 
   [class*=pb_nav_list_title] {
-    padding: 0 $space_md $space_sm;
+    padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -0,0 +1,59 @@
+@import "tokens/colors";
+@import "tokens/typography";
+@import "tokens/border_radius";
+@import "tokens/shadows";
+
+.pb_pagination {
+  .pagination > li > a,
+  .pagination > li > span {
+    border: 0 !important;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+  .pagination > li:first-child > a,
+  .pagination > li:first-child > span {
+    border-right: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  .pagination > li:last-child > a,
+  .pagination > li:last-child > span {
+    border-left: 1px solid $border_light !important;
+    z-index: 2;
+  }
+
+  .pagination {
+    border: 1px solid $border_light;
+    background-color: $white;
+
+    a {
+      color: $text_lt_default !important;
+      font-size: $text_small;
+      font-weight: $bold;
+      border: none;
+      margin-left: 1px;
+      margin-right: 1px;
+
+      &:hover {
+        background-color: $active_light;
+        color: $primary !important;
+        border-radius: $border_rad_light;
+      }
+
+      &:focus {
+        outline: 1px solid $primary !important;
+        border-radius: $border_rad_light;
+        outline-offset: -1px;
+      }
+    }
+    .active > span {
+      background-color: $primary;
+      border-radius: $border_rad_light;
+      margin-left: 1px;
+      margin-right: 1px;
+
+      &:hover {
+        box-shadow: $shadow_deeper;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pagination") %>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md

@@ -0,0 +1 @@
+To apply our pagination CSS styles in rails, wrap the `will_paginate` component in our pagination component.

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

@@ -0,0 +1,6 @@
+examples:
+  
+  rails:
+  - pagination_default: Default
+  
+  

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+      def classname
+        generate_classname("pb_pagination")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -31,6 +31,7 @@
 
   input {
     position: relative;
+    width: 0;
     left: $offscreen;
     &:checked, &:focus {
       & ~ .pb_radio_button {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -95,6 +95,12 @@
     a {
       cursor: pointer;
     }
+    ol,
+    ul {
+      li {
+        margin-left: $space_sm;
+      }
+    }
   }
   trix-toolbar {
     .trix-button--icon {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -121,7 +121,6 @@ $pb_selectable_card_border: 2px;
       }
       .separator{
         background: $error_dark;
-        width: 2px;
       }
     }
   }
@@ -144,7 +143,6 @@ $pb_selectable_card_border: 2px;
     }
     .separator {
       background: $error;
-      width: 2px;
     }
   }
 }

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

@@ -17,7 +17,7 @@ module Playbook
                            default: {}
 
       def classname
-        generate_classname("pb_selectable_list_item_kit")
+        generate_classname("pb_item_kit")
       end
     end
   end

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { type Node } from 'react'
+import React, { useEffect, type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -45,8 +45,10 @@ const Table = (props: TableProps) => {
   const dataProps = buildDataProps(data)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
 
-  const instance = new PbTable()
-  instance.connect()
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
 
   return (
     <table

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

@@ -65,12 +65,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const borderCss = `border_${borderToChange}_${borderToggle}`
 
   const shouldShowAddOn = icon !== null
-  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
-  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
   const css = classnames([
     'pb_text_input_kit',
-    inline ? 'inline' : null,
-    error ? 'error' : null,
+    inline ? 'inline' : "",
+    error ? 'error' : "",
     globalProps(props),
     className,
   ])

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -110,9 +110,8 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                 &[class*=_solid] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
-                        @include flex_wrapper(column);
+                        display: flex;
                         height: 55px;
-                        justify-content: flex-end;
                         [class=pb_date_stacked_kit_center_sm] {
                             [class=pb_date_stacked_day_month] {
                                 [class=pb_caption_kit_md] {

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb

@@ -42,3 +42,26 @@
     <% end %>
 <% end %>
 
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.new(2018, 03, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.new(2018, 05, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Society Hill",
+            detail: "72 E St Astoria"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -94,6 +94,53 @@ const TimelineWithDate = (props) => (
         />
       </Timeline.Item>
     </Timeline>
+
+    <br/>
+    <br/>
+    <br/>
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date('20 Mar 2018')}
+          icon="user"
+          iconColor="royal"
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          date={new Date('20 May 2018')}
+          icon="map-marker-alt"
+          iconColor="purple"
+          {...props}
+      >
+        <TitleDetail
+            detail="72 E St Astoria"
+            title="Society Hill"
+            {...props}
+        />
+      </Timeline.Item>
+    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -0,0 +1 @@
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -157,8 +157,42 @@
   .placeholder+.input-wrapper .typeahead-plus-icon {
     display: none;
   }
-  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
-    display: none;
+  .text_input {
+    .typeahead-kit-select {
+      &__single-value{
+        color: $text_lt_default;
+      }
+    }
+    &.typeahead-kit-select {
+      &__single-value{
+        color: $text_lt_default;
+      }
+      &__control {
+        &--is-focused {
+          @include pb_textarea_focus;
+          @include transition_default;
+          border-color: $primary;
+          background-color: rgba($focus_input_light,$opacity_5);
+          box-shadow: none;
+          .typeahead-plus-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  
+ 
+  .typeahead-kit-select__menu {
+    .typeahead-kit-select__option {
+      &.typeahead-kit-select__option--is-focused {
+        background-color: $hover_light;
+      }
+      &.typeahead-kit-select__option--is-selected {
+        background-color: $primary;
+      }
+    }
   }
   .typeahead-plus-icon {
     color: $text_lt_lighter;
@@ -178,3 +212,4 @@
     }
   }
 }
+

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -154,30 +154,40 @@ $data_colors: (
 /* Status colors ----------------------*/
 $success:             $green !default;
 $success_secondary:   lighten($success, 10%);
+$success_subtle:      rgba($success, $opacity_1);
 $warning:             $yellow !default;
 $warning_secondary:   lighten($warning, 10%);
+$warning_subtle:      rgba($warning, $opacity_1);
 $error:               $red !default;
 $error_dark:          $red_dark !default;
 $error_dark_body:     lighten($error_dark, 2%);
 $error_secondary:     lighten($error, 10%);
+$error_subtle:        rgba($error, $opacity_1);
 $info:                $teal !default;
 $info_secondary :     lighten($info, 10%);
+$info_subtle:         rgba($info, $opacity_1);
 $neutral:             $slate !default;
 $neutral_secondary:   lighten($neutral, 10%);
+$neutral_subtle:      rgba($neutral, $opacity_1);
 $primary:             $primary !default;
-$primary_secondary:    lighten($primary, 10%);
+$primary_secondary:   lighten($primary, 10%);
 
 $status_colors: (
   success:            $success,
   success_secondary:    $success_secondary,
+  success_subtle:     $success_subtle,
   warning:            $warning,
   warning_secondary:    $warning_secondary,
+  warning_subtle:     $warning_subtle,
   error:              $error,
   error_secondary:      $error_secondary,
+  error_subtle:       $error_subtle,
   info:               $info,
   info_secondary:       $info_secondary,
+  info_subtle:        $info_subtle,
   neutral:            $neutral,
   neutral_secondary:    $neutral_secondary,
+  neutral_subtle:     $neutral_subtle,
   primary:            $primary,
   primary_secondary:    $primary_secondary
 );

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.8.0"
-  VERSION = "11.9.0.pre.alpha.fileupload1"
+  PREVIOUS_VERSION = "11.9.0"
+  VERSION = "11.10.0.pre.alpha.pagination1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.9.0.pre.alpha.fileupload1
+  version: 11.10.0.pre.alpha.pagination1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-17 00:00:00.000000000 Z
+date: 2022-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -339,6 +339,9 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_status.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_status.md
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md
 - app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_white.jsx
 - app/pb_kits/playbook/pb_background/docs/_description.md
@@ -584,8 +587,14 @@ files:
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
 - app/pb_kits/playbook/pb_collapsible/context.ts
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_collapsible/index.js
@@ -854,7 +863,6 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
-- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
@@ -869,12 +877,11 @@ files:
 - app/pb_kits/playbook/pb_filter/_filter.jsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
 - app/pb_kits/playbook/pb_filter/docs/_description.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
-- app/pb_kits/playbook/pb_filter/docs/_filter_default.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md
@@ -1244,6 +1251,9 @@ files:
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.md
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
 - app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
@@ -1423,6 +1433,12 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
+- app/pb_kits/playbook/pb_pagination/_pagination.scss
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
+- app/pb_kits/playbook/pb_pagination/docs/example.yml
+- app/pb_kits/playbook/pb_pagination/pagination.html.erb
+- app/pb_kits/playbook/pb_pagination/pagination.rb
 - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -1950,6 +1966,7 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
 - app/pb_kits/playbook/pb_timeline/docs/example.yml
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timeline/item.html.erb

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,51 +0,0 @@
-/* @flow */
-/* eslint-disable react/no-multi-comp */
-
-import React, { useState } from 'react'
-import {
-  Body,
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-
-const FileUploadMaxSize = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const [error, setError] = useState()
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
-          maxSize={1000000}
-          onFilesAccepted={handleOnFilesAccepted}
-          onFilesRejected={(errorMessage) => setError(errorMessage)}
-          {...props}
-      />
-      { error && (
-        <Body
-            color="error"
-            marginY="md"
-        >{error}</Body>
-      )}
-    </div>
-  )
-}
-
-export default FileUploadMaxSize

data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterClosePopover = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  return (
-    <Filter
-        {...props}
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        minWidth="375px"
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-    >
-      {({ closePopover }) => (
-        <form>
-          <TextInput
-              label="Full Name"
-              placeholder="Enter name"
-          />
-
-          <Select
-              blankSelection="Select One..."
-              label="Territory"
-              name="location"
-              options={options}
-          />
-          <Flex
-              spacing="between"
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-            />
-          </Flex>
-        </form>
-      )}
-    </Filter>
-  )
-}
-
-export default FilterClosePopover