playbook_ui 12.0.0 → 12.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e25065accaa0dd497f68c944bfb31b60695e3a4f2430e1818ec656b672763186
-  data.tar.gz: 8605a87938bde42563130661b9f1213e23958f2ad5e53342c2f162933c101c38
+  metadata.gz: 74b102cf8c343860ef1b90352dabf96dfa1fee84c9e4912a287e6fe6a32dcabe
+  data.tar.gz: d25cb119dd297fe0512df07650aa237cf5be8eb80f2e79d32480da547c599b2c
 SHA512:
-  metadata.gz: 85ba42392ecca25ae72e124adcdca9dce9e2122fa2eb961d7be15450ceb3042f1f41573fa55ad6305375db4749f41263e85b01e82c0dfb8b0d8e77b2ad82b853
-  data.tar.gz: 8bd52867cb7e21d0616d7a8ba8e5a9a1b0dc4170796bf8c547013f74778c348f0248ecbf3a8fecc2fb9d120c02383264a97c934836903079b1e2ce2a2d283c3d
+  metadata.gz: a58a8f1cce99f05841d01f1a3fc64dcfb40121ffea77b1bead4c1cb6b83c2f6edd89a61a62df302452ea0defac80c070484d26fa05024ed36a35139152c56c84
+  data.tar.gz: 17e5d846daf75ea0ba6bb333e2a464910dd18435ed7414c69a60dd07ff9845a9404a1d3b2dd9aa1c46ba49a8d67d9295813272b9b0cb789bbc8cae4cef65c6f1

data/app/pb_kits/playbook/_playbook.scss

@@ -56,6 +56,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

data/app/pb_kits/playbook/data/menu.yml

@@ -60,6 +60,7 @@ kits:
     - badge
     - hashtag
     - pill
+  - pagination
   - popover
   - progress:
     - progress_pills
@@ -103,4 +104,4 @@ kits:
     - title_count
     - title_detail
   - user_badge
-  - walkthrough
+  - walkthrough

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -13,7 +13,7 @@ import classnames from "classnames";
 type BarGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle: string;
-  dark?: Boolean;
+  dark?: boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -62,7 +62,7 @@ const BarGraph = ({
   x = 0,
   y = 0,
   ...props
-}: BarGraphProps) => {
+}: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const setupTheme = () => {
@@ -130,14 +130,14 @@ const BarGraph = ({
 
   return (
     <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
+        containerProps={{
+          className: classnames(globalProps(props), className),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+        }}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -136,6 +136,8 @@ const highchartsDarkTheme: ThemeProps = {
 
   plotOptions: {
     series: {
+      borderColor: colors.bg_dark_card,
+      borderWidth: 2,
       type: 'area',
       nullColor: colors.text_dk_lighter,
       fillColor: {

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -227,6 +227,11 @@
 				height: 100%;
 				max-height: 100%;
 				max-width: none;
+				//this empty div only has height when dialog is full height. 
+				//fix for dialog body content disappearing behind sticky footer
+				.dialog-pseudo-footer {
+					height: $space_xl * 2;
+				}
 				.dialog_footer {
 					position:fixed;
 					bottom: 0;
@@ -287,6 +292,11 @@
 			height: 100% !important;
 			max-height: 100% !important;
 			max-width: 100%;
+			//this empty div only has height when dialog is full height. 
+			//fix for dialog body content disappearing behind sticky footer
+			.dialog-pseudo-footer {
+				height: $space_xl * 2;
+			}
 			.dialog_footer {
 				position:fixed;
 				bottom: 0;
@@ -316,6 +326,7 @@
 	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
 	//conflicts were only apparent in nitro, not in playbook local env
 	.pb_dialog_rails {
+		position: fixed !important;
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -41,6 +41,8 @@ const DialogFooter = (props: DialogFooterProps) => {
       {separator &&
         <SectionSeparator />
       }
+      <div className="dialog-pseudo-footer">
+      </div>
       <Flex
           className={classnames(footerCSS, footerSpacing, className)}
           spacing={spacing}

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -3,6 +3,7 @@
     data: object.data,
     aria: object.aria) do %>
     <% if object.confirm_button && object.cancel_button %>
+        <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
             <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
                 <%= object.confirm_button %>

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

@@ -0,0 +1,69 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+
+$pagination_padding: 7px 13px 6px 13px;
+$top_bottom_radius: 0px;
+
+.pb_pagination {
+  display: inline-block;
+  border-radius: $border_rad_light;
+  border: $border_rad_lightest solid $border_light;
+  background-color: $white;
+  padding: $space_xxs 0px;
+  li {
+    display: inline;
+    > a, li > span {
+    padding: $pagination_padding;
+    text-decoration: none;
+  }}
+  li:first-child > a, li:first-child > span  {
+    padding: $pagination_padding;
+    border-right: $border_rad_lightest solid $border_light;
+    z-index: 2;
+    border-top-right-radius: $top_bottom_radius;
+    border-bottom-right-radius: $top_bottom_radius;
+  }
+  li:last-child > a, li:last-child > span {
+    padding: $pagination_padding;
+    border-left: $border_rad_lightest solid $border_light;
+    z-index: 2;
+    border-top-left-radius: $top_bottom_radius;
+    border-bottom-left-radius: $top_bottom_radius;
+  }
+  a {
+    color: $text_lt_default;
+    font-size: $text_small;
+    font-weight: $regular;
+    border: none;
+    transition: all $transition_default ease-out;
+
+    &:hover {
+      background-color: $active_light;
+      color: $primary;
+      border-radius: $border_rad_light;
+    }
+
+    &:focus-visible {
+      outline: 1px solid $primary;
+      border-color: transparent !important;
+      border-radius: $border_rad_light !important;
+      transition: none;
+    }
+  }
+  .active > span {
+    background-color: $primary;
+    border-radius: $border_rad_light;
+    color: #fff;
+    padding: $pagination_padding;
+    border: 0;
+    text-decoration: none;
+    font-weight: $bold;
+    font-size: $text_small;
+  }
+  .disabled > span {
+    padding: $pagination_padding;
+    font-size: $text_small;
+  }
+}

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

@@ -0,0 +1 @@
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>

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

@@ -0,0 +1,6 @@
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div> 
+Our Pagination kit depends on the <a href="https://github.com/mislav/will_paginate" target="_blank"> will\_paginate library. </a> Please follow the basic will\_paginate setup.
+
+Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
+
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.

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 %>
+     <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
+<% end %>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+      prop :model
+      prop :view
+
+      def classname
+        generate_classname("pb_paginate")
+      end
+
+      def url_for(options = nil)
+        view.url_for(options)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
+}
+
+const iconMap = {
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
+}
+
+type StatChangeProps = {
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  id?: string,
+  value?: string | number,
+}
+
+const StatChange = (props: StatChangeProps): React.ReactElement => {
+  const { change = 'neutral', className, icon, id, value } = props
+  const status = statusMap[change as keyof typeof statusMap]
+  let returnedIcon = iconMap[change as keyof typeof iconMap]
+  if (icon) {
+    returnedIcon = icon
+  }
+
+  return (
+    <>
+      {value &&
+        <div
+            className={classnames(
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
+            id={id}
+        >
+          <Body status={status}>
+            {returnedIcon &&
+              <>
+                <Icon
+                    fixed_width
+                    icon={returnedIcon}
+                />
+                {' '}
+              </>
+            }
+            {`${value}%`}
+          </Body>
+        </div>
+      }
+    </>
+  )
+}
+
+export default StatChange

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import StatChange from './_stat_change'
+
+test('it renders each status', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+
+    const kit = screen.getByText('28.4%')
+    expect(kit).toHaveClass(`pb_body_kit_positive`)
+})
+
+test('it renders preset icon', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
+})
+
+test('it renders custom icon', () => {
+    render(
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+
+    )
+
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
+})

data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,10 +8,10 @@ type StatValueProps = {
   className?: string,
   id?: string,
   unit?: string,
-  value: string | number
+  value: string | number,
 }
 
-const StatValue = (props: StatValueProps) => {
+const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
     className,
     id,
@@ -21,7 +19,7 @@ const StatValue = (props: StatValueProps) => {
     value = 0,
   } = props
 
-  const displayValue = function(value) {
+  const displayValue = function(value: string | number) {
     if (value || value === 0) {
       return (
         <Title
@@ -33,7 +31,7 @@ const StatValue = (props: StatValueProps) => {
     }
   }
 
-  const displayUnit = function(unit) {
+  const displayUnit = function(unit: string) {
     if (unit) {
       return (
         <Title

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatValue from '../_stat_value.jsx'
+import StatValue from '../_stat_value'
 
 const StatValueUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import StatValue from './_stat_value'
+
+test('it renders the component with the value', () => {
+  render(
+    <StatValue
+        value={1048}
+    />
+  )
+
+  const kit = screen.getByText('1048')
+  expect(kit).toBeTruthy()
+})
+
+test('it renders the component with the unit', () => {
+  render(
+    <StatValue
+        unit="appt"
+        value="5,294"
+    />
+  )
+
+  const kit = screen.getByText('appt')
+  expect(kit).toBeTruthy()
+})

data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -12,16 +10,16 @@ import Caption from '../pb_caption/_caption'
 
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   date?: string,
   id?: string,
   time: number | Date,
   timeZone?: string,
 }
 
-const TimeStackedDefault = (props: TimeStackedProps) => {
+const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
 
   const {

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import TimeStacked from '../_time_stacked.jsx'
+import TimeStacked from '../_time_stacked'
 
 const TimeStackedDefault = (props) => {
   return (

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

@@ -1 +1 @@
-export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
+export { default as TimeStackedDefault } from './_time_stacked_default'

data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -11,8 +9,8 @@ import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
-  className?: string | array<string>,
+  aria?: { [key: string]: string },
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   text: string,
@@ -26,7 +24,7 @@ type TimestampProps = {
   variant?: "default" | "elapsed" | "updated"
 }
 
-const Timestamp = (props: TimestampProps) => {
+const Timestamp = (props: TimestampProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -90,9 +88,9 @@ const Timestamp = (props: TimestampProps) => {
   const captionText = () => {
     switch (variant) {
     case 'updated':
-      return formatUpdatedString(userDisplay, dateTimestamp)
+      return formatUpdatedString()
     case 'elapsed':
-      return formatElapsedString(userDisplay, timeDisplay, updatedText)
+      return formatElapsedString()
     default:
       return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const year = new Date().getFullYear()

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -17,6 +17,7 @@ import Flex from "../pb_flex/_flex"
 
 type TooltipProps = {
   aria?: { [key: string]: string },
+  className?: string | string[],
   data?: { [key: string]: string },
   text: string,
   icon?: string,
@@ -26,9 +27,10 @@ type TooltipProps = {
   zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
-const Tooltip = (props: TooltipProps) => {
+const Tooltip = (props: TooltipProps): React.ReactElement => {
   const {
     aria = {},
+    className,
     children,
     data = {},
     icon = null,
@@ -42,7 +44,10 @@ const Tooltip = (props: TooltipProps) => {
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
 
-  const css = classnames(globalProps({...rest}))
+  const css = classnames(
+    globalProps({...rest}),
+    className
+  )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
@@ -92,44 +97,47 @@ const Tooltip = (props: TooltipProps) => {
   return (
     <>
       <div
-        ref={reference}
-        className={`pb_tooltip_kit ${css}`}
-        style={{ display: "inline-flex" }}
-        role="tooltip_trigger"
-        {...ariaProps}
-        {...dataProps}
+          className={`pb_tooltip_kit ${css}`}
+          ref={reference}
+          role="tooltip_trigger"
+          style={{ display: "inline-flex" }}
+          {...ariaProps}
+          {...dataProps}
       >
         {children}
       </div>
       {open && (
         <div
-          {...getFloatingProps({
-            role: "tooltip",
-            ref: floating,
-            className: `tooltip_tooltip ${placement} visible`,
-            style: {
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              zIndex: zIndex ?? 0,
-            },
-          })}
+            {...getFloatingProps({
+              role: "tooltip",
+              ref: floating,
+              className: `tooltip_tooltip ${placement} visible`,
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                zIndex: zIndex ?? 0,
+              },
+            })}
         >
-          <Flex gap="xs" align="center">
+          <Flex 
+              align="center"
+              gap="xs"
+          >
             {icon && (
             <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
             )}
             {text}
           </Flex>
           <div
-            ref={arrowRef}
-            className="arrow_bg"
-            style={{
-              position: strategy,
-              left: arrowX != null ? `${arrowX}px` : "",
-              top: arrowY != null ? `${arrowY}px` : "",
-              [staticSide]: "-5px",
-            }}
+              className="arrow_bg"
+              ref={arrowRef}
+              style={{
+                position: strategy,
+                left: arrowX != null ? `${arrowX}px` : "",
+                top: arrowY != null ? `${arrowY}px` : "",
+                [staticSide]: "-5px",
+              }}
           />
         </div>
       )}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -14,6 +14,7 @@ const TooltipDefaultReact = (props) => {
    >
     <FlexItem>
       <Tooltip 
+          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -51,3 +51,17 @@ test("closes on mouseleave", async () => {
     cleanup();
   })
 });
+
+test("closes on mouseleave", async () => {
+  render(
+    <Tooltip
+        className={"Hello World"}
+        data={{ testid: "className-test" }}
+    />
+  );
+
+  const kit = screen.getByTestId("className-test");
+  expect(kit).toHaveClass("Hello World");
+
+  cleanup();
+});

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

@@ -93,7 +93,7 @@ const Typeahead = ({
   const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
-      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
       document.dispatchEvent(multiValueClearEvent)
     }
     if (action === 'remove-value' || action === 'pop-value') {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -8,7 +8,7 @@
 %>
 
 <%= pb_rails("typeahead", props: {
-    id: "typeahead-pills-example1",
+    id: "typeahead-without-pills-example1",
     placeholder: "All Colors",
     options: options, 
     label: "Colors",
@@ -19,19 +19,12 @@
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
+  document.addEventListener("pb-typeahead-kit-typeahead-without-pills-example1-result-option-select", function(event) {
+    console.log('Single Option selected')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+  document.addEventListener("pb-typeahead-kit-typeahead-without-pills-example1-result-clear", function() {
     console.log('All options cleared')
   })
 
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
 <% end %>

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

@@ -59,9 +59,11 @@ $main_colors: (
 Background colors ------------------*/
 $bg_light:            $silver !default;
 $bg_dark:             #0a0527 !default;
+$bg_dark_card:        #231E3D;
 $background_colors: (
   bg_light:           $bg_light,
-  bg_dark:            $bg_dark
+  bg_dark:            $bg_dark,
+  bg_dark_card:       $bg_dark_card 
 );
 
 /* Card colors ------------------*/

data/lib/playbook/pagination_renderer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "will_paginate/view_helpers/action_view"
+
+module Playbook
+  module Pagination
+    class Rails < WillPaginate::ActionView::LinkRenderer
+      def container_attributes
+        { class: "pb_pagination" }
+      end
+
+      def page_number(page)
+        if page == current_page
+          tag("li", tag("span", page), class: "active")
+        else
+          tag("li", link(page, page, rel: rel_value(page)))
+        end
+      end
+
+      def previous_or_next_page(page, text, classname)
+        if page
+          tag("li", link(text, page), class: classname)
+        else
+          tag("li", tag("span", text), class: "%s disabled")
+        end
+      end
+
+      def gap; end
+
+      def previous_page
+        num = @collection.current_page > 1 && @collection.current_page - 1
+        previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
+      end
+
+      def next_page
+        num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
+        previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
+      end
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.20.0"
-  VERSION = "12.0.0"
+  PREVIOUS_VERSION = "12.1.0"
+  VERSION = "12.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.0.0
+  version: 12.2.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-30 00:00:00.000000000 Z
+date: 2023-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -269,6 +269,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.2018.9
+- !ruby/object:Gem::Dependency
+  name: will_paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.3.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.3.1
 description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
@@ -1467,6 +1481,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
@@ -1792,8 +1812,8 @@ files:
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
 - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
 - app/pb_kits/playbook/pb_star_rating/star_rating.rb
-- app/pb_kits/playbook/pb_stat_change/_stat_change.jsx
 - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
+- app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
 - app/pb_kits/playbook/pb_stat_change/docs/_description.md
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx
@@ -1806,8 +1826,9 @@ files:
 - app/pb_kits/playbook/pb_stat_change/docs/index.js
 - app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
 - app/pb_kits/playbook/pb_stat_change/stat_change.rb
-- app/pb_kits/playbook/pb_stat_value/_stat_value.jsx
+- app/pb_kits/playbook/pb_stat_change/stat_change.test.js
 - app/pb_kits/playbook/pb_stat_value/_stat_value.scss
+- app/pb_kits/playbook/pb_stat_value/_stat_value.tsx
 - app/pb_kits/playbook/pb_stat_value/docs/_description.md
 - app/pb_kits/playbook/pb_stat_value/docs/_footer.md
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
@@ -1821,6 +1842,7 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
 - app/pb_kits/playbook/pb_stat_value/stat_value.rb
+- app/pb_kits/playbook/pb_stat_value/stat_value.test.js
 - app/pb_kits/playbook/pb_table/_table.jsx
 - app/pb_kits/playbook/pb_table/_table.scss
 - app/pb_kits/playbook/pb_table/_table_row.jsx
@@ -1978,8 +2000,8 @@ files:
 - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
-- app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_time_stacked/docs/example.yml
@@ -2005,8 +2027,8 @@ files:
 - app/pb_kits/playbook/pb_timeline/timeline.html.erb
 - app/pb_kits/playbook/pb_timeline/timeline.rb
 - app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
-- app/pb_kits/playbook/pb_timestamp/_timestamp.jsx
 - app/pb_kits/playbook/pb_timestamp/_timestamp.scss
+- app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
@@ -2330,6 +2352,7 @@ files:
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
+- lib/playbook/pagination_renderer.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -1,63 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
-
-const statusMap = {
-  increase: 'positive',
-  decrease: 'negative',
-}
-
-const iconMap = {
-  increase: 'arrow-up',
-  decrease: 'arrow-down',
-}
-
-type StatChangeProps = {
-  change?: "increase" | "decrease" | "neutral",
-  className?: string,
-  icon?: string,
-  id?: string,
-  value?: string | number,
-}
-
-const StatChange = (props: StatChangeProps) => {
-  const { change = 'neutral', className, icon, id, value } = props
-  const status = statusMap[change] || 'neutral'
-  let returnedIcon = iconMap[change]
-  if (icon) {
-    returnedIcon = icon
-  }
-
-  return (
-    <If condition={value}>
-      <div
-          className={classnames(
-          buildCss('pb_stat_change_kit', status),
-          globalProps(props),
-          className
-        )}
-          id={id}
-      >
-        <Body status={status}>
-          <If condition={returnedIcon}>
-            <Icon
-                fixed_width
-                icon={returnedIcon}
-            />
-            {' '}
-          </If>
-          {`${value}%`}
-        </Body>
-      </div>
-    </If>
-  )
-}
-
-export default StatChange