playbook_ui 11.16.0 → 11.18.0.pre.alpha.pagutility1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed9c5868b671e135987a4e3c391d8cdfa925217d8134552596aab8beb6dde627
-  data.tar.gz: ffb9b388c45c05caf25b28c88f665525c24ceca2e7f52adf71bb5b70104dba73
+  metadata.gz: fb0f4b600e88ebbcdc4d4c155a7d8cb7faa46eca1d832fc80e9e5759221076d2
+  data.tar.gz: 7fdd9a62804fcac63d2694b3fc8838c23391c3e29dfaae9bd631fef8b3888afe
 SHA512:
-  metadata.gz: aa935a21ba75a2fbaba40c7dd0c77554d12a5af159e0624ce965f7e81b8edca76922925b011cc3b1960db3fd6414de61f17c4b35f862105c55e0f48423e28d93
-  data.tar.gz: 6b72e6f7857aecfd8030f75ac6e07de05c2f30ab38ab84274762e34e06bb81441c4520ad2fb4c82c37fcde314827bf5b149b9a6c79fb799381c7cf2481758b4a
+  metadata.gz: 59d538351cbd81240e48d527f5a3f3b860960c30c87d2f772036098abadd587a98e0f05b716687e337de6351663e77216670258bcfaad4936b1e521144a386a1
+  data.tar.gz: 2e6b4a3a58c2d79b2b03973feac6c509a49fcdca4a9fb46ccd5fb0c7e19b350dadbb6dcb80a8735d6d35d65f481b49399b1f2239520c5f0287fe5c58171204e4

data/app/pb_kits/playbook/_playbook.scss

@@ -103,3 +103,4 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
+@import './utilities/pagination';

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -1,19 +1,25 @@
+/* eslint-disable react/no-multi-comp */
 // @flow
 
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, {useEffect} from "react";
+import ReactDOM from "react-dom";
 
 import {
   Popper,
   Manager as PopperManager,
   PopperProps,
   Reference as PopperReference,
-} from 'react-popper'
+} from "react-popper";
 
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  noop,
+} from "../utilities/props";
 
-import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import classnames from "classnames";
+import { globalProps } from "../utilities/globalProps";
 
 type PbPopoverProps = {
   aria?: object,
@@ -25,7 +31,7 @@ type PbPopoverProps = {
   reference: PopperReference,
   show?: boolean,
   shouldClosePopover?: () => boolean,
-} & PopperProps
+} & PopperProps;
 
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers
@@ -34,17 +40,17 @@ const POPOVER_MODIFIERS = {
   offset: {
     //https://popper.js.org/docs/v2/modifiers/offset/
     enabled: true,
-    name: 'offset',
+    name: "offset",
     options: {
       offset: [0, 20],
     },
-    phase: 'main',
+    phase: "main",
   },
-}
+};
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
-}
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
+};
 
 const Popover = (props: PbPopoverProps) => {
   const {
@@ -62,11 +68,14 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-  } = props
-
-  const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
-  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
-  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
+  } = props;
+
+  const popoverSpacing =
+    globalProps(props).includes("dark") || !globalProps(props)
+      ? "p_sm"
+      : globalProps(props);
+  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
     return Object.assign(
       {},
@@ -74,15 +83,15 @@ const Popover = (props: PbPopoverProps) => {
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
       minWidth ? { minWidth: minWidth } : {}
-    )
-  }
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+    );
+  };
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   const classes = classnames(
-    buildCss('pb_popover_kit'),
+    buildCss("pb_popover_kit"),
     globalProps(props),
     className
-  )
+  );
 
   return (
     <Popper
@@ -99,20 +108,14 @@ const Popover = (props: PbPopoverProps) => {
               data-placement={placement}
               id={id}
               ref={ref}
-              style={Object.assign(
-                {},
-                style,
-                zIndexStyle
-              )}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-                className={classnames(
-                `${buildCss('pb_popover_tooltip')} show`
-              )}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
                   className={classnames(
-                  'pb_popover_body',
+                  "pb_popover_body",
                   popoverSpacing,
                   overflowHandling
                 )}
@@ -122,25 +125,33 @@ const Popover = (props: PbPopoverProps) => {
               </div>
             </div>
           </div>
-        )
+        );
       }}
     </Popper>
-  )
-}
-
-export default class PbReactPopover extends React.Component<PbPopoverProps> {
-  static defaultProps = {
-    modifiers: [],
-    offset: false,
-    placement: 'left',
-    portal: 'body',
-    show: false,
-    shouldClosePopover: noop,
-    usePortal: true,
-  }
-
-  componentDidMount() {
-    const { closeOnClick, shouldClosePopover } = this.props
+  );
+};
+
+const PbReactPopover = (props: PbPopoverProps) => {
+  const {
+    className,
+    children,
+    modifiers = [],
+    offset = false,
+    placement = "left",
+    portal = "body",
+    reference,
+    referenceElement,
+    show = false,
+    usePortal = true,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+
+  useEffect(() => {
+    const { closeOnClick, shouldClosePopover = noop } = props
 
     if (!closeOnClick) return
 
@@ -151,87 +162,66 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
         target.closest('.pb_popover_reference_wrapper') !== null
 
       switch (closeOnClick) {
-      case 'outside':
-        if (!targetIsPopover || targetIsReference) {
-          shouldClosePopover(true)
-        }
-        break
-      case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        case 'outside':
+          if (!targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'inside':
+          if (targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'any':
           shouldClosePopover(true)
-        }
-        break
-      case 'any':
-        shouldClosePopover(true)
-        break
+          break
       }
-    })
-  }
-
-  props: PbPopoverProps
-
-  render() {
-    const {
-      className,
-      children,
-      modifiers,
-      offset,
-      placement,
-      portal,
-      reference,
-      referenceElement,
-      show,
-      usePortal,
-      zIndex,
-      maxHeight,
-      maxWidth,
-      minHeight,
-      minWidth,
-    } = this.props
-
-    const popoverComponent = (
-      <Popover
-          {...this.props}
-          className={className}
-          maxHeight={maxHeight}
-          maxWidth={maxWidth}
-          minHeight={minHeight}
-          minWidth={minWidth}
-          modifiers={modifiers}
-          offset={offset}
-          placement={placement}
-          referenceElement={referenceElement}
-          zIndex={zIndex}
-      >
-        {children}
-      </Popover>
-    )
-
-    return (
-      <PopperManager>
-        <If condition={reference && !referenceElement}>
-          <PopperReference>
-            {({ ref }) => (
-              <span
-                  className="pb_popover_reference_wrapper"
-                  ref={ref}
-              >
-                <reference.type {...reference.props} />
-              </span>
-            )}
-          </PopperReference>
-        </If>
-        <If condition={show}>
-          <If condition={usePortal}>
-            {ReactDOM.createPortal(
-              popoverComponent,
-              document.querySelector(portal)
-            )}
-            <Else />
-            {popoverComponent}
-          </If>
+    }, { capture: true })
+  }, [])
+
+  const popoverComponent = (
+    <Popover
+        className={className}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        minWidth={minWidth}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        zIndex={zIndex}
+        {...props}
+    >
+      {children}
+    </Popover>
+  );
+
+  return (
+    <PopperManager>
+      <If condition={reference && !referenceElement}>
+        <PopperReference>
+          {({ ref }) => (
+            <span className="pb_popover_reference_wrapper"
+                ref={ref}
+            >
+              <reference.type {...reference.props} />
+            </span>
+          )}
+        </PopperReference>
+      </If>
+      <If condition={show}>
+        <If condition={usePortal}>
+          {ReactDOM.createPortal(
+            popoverComponent,
+            document.querySelector(portal)
+          )}
+          <Else />
+          {popoverComponent}
         </If>
-      </PopperManager>
-    )
-  }
-}
+      </If>
+    </PopperManager>
+  );
+};
+
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -31,7 +31,7 @@ const PopoverClose = (props) => {
   }
 
   const handleAnyTogglePopover = () => {
-    setAnyShowPopover(!showOutsidePopover)
+    setAnyShowPopover(!showAnyPopover)
   }
 
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -1,6 +1,10 @@
 <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
-    Filter By
-    <%= pb_rails("icon", props: { icon: "angle-down"}) %>
+    <%= pb_rails("flex", props: {align: "center"}) do %>
+        Filter By 
+        <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
+        <div id="arrow-icon" style="display: flex"></div>
+        <% end %>
+    <% end %>
 <% end %>
 <%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
     <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
@@ -11,3 +15,21 @@
         <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
     <% end %>
 <% end %>
+
+
+<script type="text/javascript">
+const button = document.querySelector("#list")
+let buttonClicked = false
+
+const arrowDiv = document.querySelector("#arrow-icon")
+arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+
+button.onclick = () => {
+    buttonClicked = !buttonClicked    
+    if (buttonClicked) {
+        arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
+    } else {
+        arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+    }
+}
+</script>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -5,6 +5,7 @@ import {
   List,
   ListItem,
   PbReactPopover,
+  Flex,
 } from '../..'
 
 const PopoverWithButton = (props) => {
@@ -19,11 +20,19 @@ const PopoverWithButton = (props) => {
         onClick={handleTogglePopover}
         variant="secondary"
     >
-      {'Filter By'}
-      <Icon
-          fixedWidth
-          icon="angle-down"
-      />
+      <Flex align="center">
+        {"Filter By"}
+        <Flex
+            className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon 
+              fixedWidth 
+              icon="angle-down" 
+              margin-left="xxs" 
+          />
+        </Flex>
+      </Flex>
     </Button>
   )
 

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

@@ -9,7 +9,6 @@
 @import "side_highlight";
 @import "alignment";
 @import "hover";
-@import "as-cards";
 @import "single-line";
 @import "table-dark";
 @import "mobile";

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

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

@@ -12,39 +12,42 @@ $transition-speed: 0.2s;
         tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-
           td {
             border-top-color: transparent;
-            border-top-width: 1px !important;
-            transition: all $transition-speed ease;
+            border-top-width: 0;
+            transition: all $transition-speed ease; 
           }
-
-          @media (hover:hover) {
+          @media (hover:hover) { 
+            td {
+              position: relative;
+              &:after {
+                transition: background-color $transition-speed ease, height $transition-speed ease;
+                content: "";
+                position: absolute;
+                display: block;
+                top: -1px;
+                left: 0;
+                right: 0;
+                height: 0;
+                background-color: transparent;
+              }
+              &:first-child:after {
+                left: -1px;
+              }
+              &:last-child:after {
+                right: -1px;
+              }
+            }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-
               td {
-                background: $white;
                 border-color: darken($border_light, 10%);
-                border-top-width: 1px;
+                border-top-width: 0;
                 border-top-color: transparent;
-              }
-            }
-          }
-        }
-      }
-      &.as-cards {
-        tbody {
-          tr {
-            td {
-              border-top-color: $border_light;
-              border-top-width: 1px;
-            }
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-top-width: 1px;
-                  border-top-color: $border_light;
+                &:after {
+                  transition: background-color $transition-speed ease, height $transition-speed ease;
+                  background-color: darken($border_light, 10%);
+                  height: 1px;
                 }
               }
             }

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -9,7 +9,6 @@
         td {
           white-space: nowrap;
           text-overflow: ellipsis;
-          overflow: hidden;
 
           & > * {
             &:not(.btn, br) {

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -57,33 +57,6 @@
           }
         }
       }
-
-      &.as-cards {
-        border: 1px solid $border_light;
-        border-radius: 4px;
-
-        thead {
-          tr {
-            margin: $space-xs 0 0;
-            padding: 0 $space-xs;
-            border-bottom: 1px solid $border_light;
-
-            th {
-              border-width: 0;
-            }
-          }
-        }
-        tbody {
-          tr {
-            margin: $space-xs;
-            width: calc(100% - #{$space-xs}*2);
-
-            td {
-              border-top-width: 1px;
-            }
-          }
-        }
-      }
     }
   }
 }

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

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -3,6 +3,9 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import Veteran from './badges/veteran.jsx';
+import MillionDollar from './badges/million-dollar.jsx';
+
 
 type UserBadgeProps = {
   aria?: object,
@@ -23,7 +26,7 @@ const UserBadge = (props: UserBadgeProps) => {
     size = 'md',
   } = props
 
-  const image = require(`./badges/${badge}.svg`)
+  const image = badge === "million-dollar" ? <MillionDollar /> : <Veteran />
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -40,7 +43,7 @@ const UserBadge = (props: UserBadgeProps) => {
         id={id}
     >
       <div className="pb_user_badge_wrapper">
-        <img src={image} />
+        {image}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx

@@ -0,0 +1,363 @@
+import * as React from "react"
+
+const MillionDollar = (props) => (
+  <svg
+      style={{
+      enableBackground: "new 0 0 242.9 242.9",
+    }}
+      viewBox="0 0 242.9 242.9"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+  >
+    <circle cx={121.5}
+        cy={121.5}
+        r={121.5}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="a"
+        x1={42.483}
+        x2={200.309}
+        y1={35.645}
+        y2={35.645}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
+        style={{
+        fill: "url(#a)",
+      }}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="b"
+        x1={17.407}
+        x2={44.897}
+        y1={132.179}
+        y2={132.179}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
+        style={{
+        fill: "url(#b)",
+      }}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="c"
+        x1={52.914}
+        x2={189.715}
+        y1={212.573}
+        y2={212.573}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
+        style={{
+        fill: "url(#c)",
+      }}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="d"
+        x1={31.123}
+        x2={207.766}
+        y1={136.159}
+        y2={136.159}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
+        style={{
+        fill: "url(#d)",
+      }}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="e"
+        x1={30.453}
+        x2={213.794}
+        y1={63.629}
+        y2={63.629}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M30.5 60.6h183.3v6.1H30.5z"
+        style={{
+        fill: "url(#e)",
+      }}
+    />
+    <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="f"
+        x1={196.676}
+        x2={225.538}
+        y1={132.923}
+        y2={132.923}
+    >
+      <stop
+          offset={0}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+          offset={0.128}
+          style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+          offset={0.278}
+          style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+          offset={0.413}
+          style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+          offset={0.527}
+          style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+          offset={0.607}
+          style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+          offset={1}
+          style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+        d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
+        style={{
+        fill: "url(#f)",
+      }}
+    />
+  </svg>
+)
+
+export default MillionDollar
+

data/app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+const Veteran = (props) => (
+  <svg
+      viewBox="0 0 200 250"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+  >
+    <path
+        d="M198.4 71.5V71c-.2-1.2-1.4-2.1-1.4-2.1L103.2 2.7c-.7-.4-1-.6-1.6-.6-1.3 0-2.3 1-2.3 2.3v67.1h-.6v29.6h99.8l-.1-29.6z"
+        fill="#004876"
+    />
+    <path
+        d="M172.9 159.2c-31.4 23-33.2 24.3-33.2 24.3l-40.5 3.2v-29.4l73.7 1.9z"
+        fill="#FFF"
+    />
+    <path
+        d="M99.3 125.4V33.5L1.6 102.7l-.1.1c-1 .7-1.5 1.8-1.5 3v67.4c0 1.2.6 2.3 1.5 3l.1.1 93.5 66.3c1.7 1.2 4.1 0 4.1-2.1v-28.9l40.5-28-40.5.7v-25h73.7l25.4-16.9.2-16.8H99.3z"
+        fill="#BB2432"
+    />
+    <path d="M99.3 101.1h99.3v24.3H99.3z"
+        fill="#FFF"
+    />
+  </svg>
+)
+
+export default Veteran

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

@@ -8,7 +8,7 @@ Colors -----------------------------*/
 $royal:               #0056CF !default;
 $purple:              #9E64E9 !default;
 $teal:                #00C4D7 !default;
-$red:                 #FF2229 !default;
+$red:                 #DA0014 !default;
 $red_dark:            #ff4a50 !default;
 $yellow:              #F9BB00 !default;
 $green:               #00CA74 !default;
@@ -160,7 +160,7 @@ $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_dark_body:     $error_dark;
 $error_secondary:     lighten($error, 10%);
 $error_subtle:        rgba($error, $opacity_1);
 $info:                $teal !default;

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

@@ -0,0 +1,68 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+
+.pb_pagination {
+  display: inline-block;
+  border-radius: $border_rad_light;
+  border: 1px solid $border_light;
+  background-color: $white;
+  padding: 3px 0px 3.6px 0px;
+  li {
+    display: inline;  
+    > a, li > span {
+    padding: 7px 13px;
+    text-decoration: none;
+    margin-left: -1px;
+    border: 0 !important;
+  }}
+  li:first-child > a, li:first-child > span  {
+    padding: 7px 13px;
+    margin-left: .5px;
+    border-right: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  li:last-child > a, li:last-child > span {
+    padding: 7px 13px;
+    margin-right: .5px;
+    border-left: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  a {
+    color: $text_lt_default !important;
+    font-size: $text_small;
+    font-weight: $regular;
+    border: none;
+
+    &: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 !important;
+    border-radius: $border_rad_light;
+    color: #fff;
+    padding: 7px 10px;
+    border: 0 !important;
+    text-decoration: none;
+    font-weight: $bold;
+    font-size: $text_small;
+
+    &:hover {
+      box-shadow: $shadow_deeper;
+    }
+  }
+  .disabled > span {
+    padding: 7px 10px;
+    font-size: $text_small;
+  }
+}

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.15.0"
-  VERSION = "11.16.0"
+  PREVIOUS_VERSION = "11.18.0"
+  VERSION = "11.18.0.pre.alpha.pagutility1"
 end

data/lib/playbook.rb

@@ -12,6 +12,7 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
+require "playbook/pagination_renderer"
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.16.0
+  version: 11.18.0.pre.alpha.pagutility1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-03 00:00:00.000000000 Z
+date: 2023-01-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -123,6 +123,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.3.2
+- !ruby/object:Gem::Dependency
+  name: will_paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
 - !ruby/object:Gem::Dependency
   name: byebug
   requirement: !ruby/object:Gem::Requirement
@@ -1876,7 +1890,6 @@ files:
 - app/pb_kits/playbook/pb_table/index.js
 - app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
-- app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
 - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2187,7 +2200,9 @@ files:
 - app/pb_kits/playbook/pb_user/user.test.js
 - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
 - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
+- app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx
 - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
+- app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx
 - app/pb_kits/playbook/pb_user_badge/badges/veteran.svg
 - app/pb_kits/playbook/pb_user_badge/docs/_description.md
 - app/pb_kits/playbook/pb_user_badge/docs/_footer.md
@@ -2258,6 +2273,7 @@ files:
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_mixins.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
+- app/pb_kits/playbook/utilities/_pagination.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
@@ -2323,6 +2339,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
@@ -2361,9 +2378,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss

@@ -1,49 +0,0 @@
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.as-cards {
-      thead {
-        tr {
-          display: flex;
-          width: 100%;
-
-          th {
-            flex-grow: 1;
-          }
-        }
-      }
-      tbody {
-        tr {
-          display: flex;
-          align-items: stretch;
-          flex-direction: row;
-          justify-content: flex-start;
-          width: 100%;
-          margin: $space-xs 0;
-
-          td {
-            background: $white;
-            flex-grow: 1;
-            border-width: 1px 0;
-
-            &:first-child {
-              border-left-width: 1px;
-              border-radius: 4px 0 0 4px;
-            }
-            &:last-child {
-              border-right-width: 1px;
-              border-radius: 0 4px 4px 0;
-            }
-          }
-
-          &:last-child {
-            td {
-              border-top-width: 1px !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}