playbook_ui 11.18.0.pre.alpha.pagutility1 → 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

@@ -9,6 +9,7 @@
   border: 1px solid $border_light;
   background-color: $white;
   padding: 3px 0px 3.6px 0px;
+  margin: 10px 0;
   li {
     display: inline;  
     > a, li > span {
@@ -51,7 +52,7 @@
     background-color: $primary !important;
     border-radius: $border_rad_light;
     color: #fff;
-    padding: 7px 10px;
+    padding: 7px 13px;
     border: 0 !important;
     text-decoration: none;
     font-weight: $bold;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.18.0"
-  VERSION = "11.18.0.pre.alpha.pagutility1"
+  PREVIOUS_VERSION = "11.19.0"
+  VERSION = "11.19.0.pre.alpha.pagpassthrough1"
 end

data/lib/playbook.rb

@@ -12,7 +12,8 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
-require "playbook/pagination_renderer"
+# 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.pre.alpha.pagutility1
+  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-13 00:00:00.000000000 Z
+date: 2023-01-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -123,20 +123,6 @@ 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
@@ -283,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
@@ -1350,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
@@ -1477,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
@@ -1547,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
@@ -1563,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
@@ -2155,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

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -1,98 +0,0 @@
-/* @flow */
-
-import React, { type Node } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type ListProps = {
-  aria?: object,
-  borderless: boolean,
-  className?: string,
-  children: array<Node> | Node,
-  dark: boolean,
-  data?: object,
-  id?: string,
-  layout: "" | "left" | "right",
-  ordered: boolean,
-  role?: string,
-  tabIndex?: string,
-  text?: string,
-  size?: string,
-  variant?: string,
-  xpadding: boolean,
-}
-
-const List = (props: ListProps) => {
-  const {
-    aria = {},
-    borderless = false,
-    children,
-    className,
-    dark = false,
-    data = {},
-    id,
-    layout = '',
-    ordered = false,
-    role,
-    size = '',
-    tabIndex,
-    xpadding = false,
-    variant,
-    text,
-  } = props
-
-  const layoutClass = {
-    left: 'layout_left',
-    right: 'layout_right',
-    default: '',
-  }
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    return React.cloneElement(child, { text, variant })
-  })
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_list_kit', layoutClass[layout], size, {
-      dark: dark,
-      borderless: borderless,
-      ordered: ordered,
-      xpadding: xpadding,
-    }),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        className={classes}
-    >
-      <If condition={ordered}>
-        <ol
-            {...ariaProps}
-            {...dataProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
-        >
-          {childrenWithProps}
-        </ol>
-        <Else />
-        <ul
-            {...ariaProps}
-            {...dataProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
-        >
-          {childrenWithProps}
-        </ul>
-      </If>
-    </div>
-  )
-}
-
-export default List