playbook_ui 11.18.0 → 11.19.0.pre.alpha.pagpassthrough1

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -0,0 +1,222 @@
+import React from "react";
+import { render, screen, fireEvent } from "../utilities/test-utils";
+import { Button, PbReactPopover } from "..";
+
+const testId = "popover-kit";
+
+//Test default popover
+const PopoverTest = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+//Test popover with z-index
+const PopoverTestZIndex = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          offset
+          reference={popoverReference}
+          show={mockState}
+          zIndex={3}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test popover with max-height and max-width
+const PopoverTestHeight = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          maxHeight="150px"
+          maxWidth="240px"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'anywhere' 
+const PopoverTestClicktoClose = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="any"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'inside' 
+const PopoverTestClicktoClose2 = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Inside"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'outside' 
+const PopoverTestClicktoClose3 = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Outside"}
+      </PbReactPopover>
+  )
+};
+
+
+  test("renders Popover", () => {
+    render(<PopoverTest data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toBeInTheDocument(); 
+  });
+
+  test("renders Popover with z index", () => {
+    render(<PopoverTestZIndex data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toHaveClass("pb_popover_body z_index_3"); 
+  });
+
+  test("renders Popover with max height and max width", () => {
+    render(<PopoverTestHeight data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling"); 
+  });
+
+  test("closes Popover on click anywhere", () => {
+    render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+   
+    expect(kit).not.toBeInTheDocument();
+
+  });
+
+  test("closes Popover on click inside", () => {
+    render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Inside");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+   
+    expect(kit).not.toBeInTheDocument();
+
+  });
+
+  test("closes Popover on click outside", () => {
+    render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Outside");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(btn);
+    expect(kit).not.toBeInTheDocument();
+
+  });

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

@@ -28,10 +28,11 @@ import { noop } from '../utilities/props'
  */
 
 type TypeaheadProps = {
-  id?: string,
   async?: boolean,
+  components?: object,
   createable?: boolean,
   dark?: boolean,
+  id?: string,
   label?: string,
   loadOptions?: string,
   getOptionLabel?: string | (() => any),
@@ -44,7 +45,16 @@ type TypeaheadProps = {
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
+const Typeahead = ({
+  async,
+  components = {},
+  createable,
+  getOptionLabel,
+  getOptionValue,
+  id,
+  loadOptions = noop,
+  ...props
+}: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -57,6 +67,7 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
       Option,
       Placeholder,
       ValueContainer,
+      ...components
     },
     loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
     getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -0,0 +1,98 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable react/no-multi-comp */
+/* @flow */
+
+import React, { useState } from 'react'
+import { components, OptionProps } from 'react-select'
+
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from '../..'
+
+const USERS = [
+  {
+    name: "Wade Winningham",
+    title: "Nitro Principal Developer",
+    territory: "PHL",
+  },
+  {
+    name: "Jason Cypret",
+    title: "Vice President of User Experience",
+    territory: "PHL",
+  },
+  {
+    name: "Stephen Marshall",
+    title: "Senior User Experience Engineer",
+    territory: "PHL",
+  },
+  {
+    name: "Jasper Furniss",
+    title: "Senior User Experience Engineer",
+    territory: "PHL",
+  },
+];
+
+const TypeaheadWithHighlight = (props) => {
+  const [selectedUser, setSelectedUser] = useState()
+
+  const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
+
+    const highlighted = (text: string) => {
+      if (!inputValue.length) return text
+      return text.replace(
+        new RegExp(inputValue, 'gi'),
+        highlighted => `<mark>${highlighted}</mark>`
+      )
+    }
+    return (
+      <Flex>
+        <FlexItem>
+          <Avatar
+              marginRight="sm"
+              name={name}
+              size="sm"
+          />
+        </FlexItem>
+        <FlexItem>
+          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light">
+            <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
+            {territory}
+          </Body>
+        </FlexItem>
+      </Flex>
+    )
+  }
+
+  const customComponents = {
+    Option: (props: OptionProps) => (
+      <components.Option {...props}/>
+    ),
+    SingleValue: ({ data }: any) => (
+      <span>{data.name}</span>
+    )
+  }
+
+  return (
+    <React.Fragment>
+      <Typeahead
+          components={customComponents}
+          formatOptionLabel={formatOptionLabel}
+          getOptionLabel={(option) => option.name}
+          getOptionValue={({name, title}) => `${name} ${title}`}
+          label="Users"
+          onChange={(user) => setSelectedUser(user)}
+          options={USERS.filter((option) => option.name != selectedUser?.name)}
+          placeholder="type the name of a user"
+          {...props}
+      />
+    </React.Fragment>
+  )
+}
+
+export default TypeaheadWithHighlight

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

@@ -11,6 +11,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)

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

@@ -1,4 +1,5 @@
 export { default as TypeaheadDefault } from './_typeahead_default.jsx'
+export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
 export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
 export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
 export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'

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

@@ -0,0 +1,69 @@
+@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;
+  margin: 10px 0;
+  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 13px;
+    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.17.0"
-  VERSION = "11.18.0"
+  PREVIOUS_VERSION = "11.19.0"
+  VERSION = "11.19.0.pre.alpha.pagpassthrough1"
 end

data/lib/playbook.rb

@@ -12,6 +12,8 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
+# require "playbook/pagination_renderer"
+# REMOVED TO MAKE THIS AN OPTIONAL INCLUDE FOR CLIENTS
 
 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.18.0
+  version: 11.19.0.pre.alpha.pagpassthrough1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-10 00:00:00.000000000 Z
+date: 2023-01-16 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
@@ -1336,9 +1350,9 @@ files:
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
-- app/pb_kits/playbook/pb_list/_list.jsx
 - app/pb_kits/playbook/pb_list/_list.scss
-- app/pb_kits/playbook/pb_list/_list_item.jsx
+- app/pb_kits/playbook/pb_list/_list.tsx
+- app/pb_kits/playbook/pb_list/_list_item.tsx
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
@@ -1463,6 +1477,11 @@ 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_paginate/_paginate.scss
+- app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb
+- app/pb_kits/playbook/pb_paginate/docs/example.yml
+- app/pb_kits/playbook/pb_paginate/paginate.html.erb
+- app/pb_kits/playbook/pb_paginate/paginate.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
@@ -1533,8 +1552,8 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.html.erb
 - app/pb_kits/playbook/pb_pill/pill.rb
-- app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
+- app/pb_kits/playbook/pb_popover/_popover.tsx
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
@@ -1549,9 +1568,10 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
-- app/pb_kits/playbook/pb_popover/index.js
+- app/pb_kits/playbook/pb_popover/index.ts
 - app/pb_kits/playbook/pb_popover/popover.html.erb
 - app/pb_kits/playbook/pb_popover/popover.rb
+- app/pb_kits/playbook/pb_popover/popover.test.js
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
@@ -2141,6 +2161,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
@@ -2259,6 +2280,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
@@ -2324,6 +2346,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
@@ -2362,9 +2385,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: