playbook_ui 11.10.0 → 11.11.0.pre.alpha.paginate1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0cae07073769e635a2939918a0073c3b64119f9ded3a1390688945395ecbd9df
-  data.tar.gz: 38d8898737006ea27c5bcf4c2b65734dd1df5ef004a351638dc00015ca6bcbaa
+  metadata.gz: c6b41796c2693b117dbbb0b3f6df657d367060abfd50fc55c4db6e3f1ed6c971
+  data.tar.gz: 7215f63899347c3044650422911ee5224b63f3858591dd5a0a17d555085aca3f
 SHA512:
-  metadata.gz: 787832d4132fb8a9373f06a684645f0945998476c5d5b2ab44718b0078eae552995cfe1d550a758a57f79d9a03267ffafee6882a5330fdf016d5c3a16f6a6ae2
-  data.tar.gz: a675526b2eec32a03c1f2409919a30deba79dfcd8bf3c06970c7153d35e4d37db4f665b0d66e05dc117e1937b2cbbb7a68b17b1e67f8555b7926c4c4c7cc7107
+  metadata.gz: 8fb4dd90e9216feb799fdbfd3167d6b5088d7e54843030e916976f512607ecf12f5f09db978ae93b1ebb3d733ffd2e487acbc78996fc4b27d1be710a246ec8e9
+  data.tar.gz: 64fcecd54d4630c3001e5341a0382cb378d0bcad69631c7a5c872513a94592ae1c00d830fe41760fd205ffa6f42e98de9c57e105eccc9ad41ad15cfc1f339e19

data/app/pb_kits/playbook/_playbook.scss

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

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

@@ -104,3 +104,4 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+  - pagination

data/app/pb_kits/playbook/index.js

@@ -52,9 +52,9 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
 export { default as LabelValue } from './pb_label_value/_label_value'
 export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -63,6 +63,7 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
+export { default as Pagination} from './pb_pagination/_pagination'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'

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

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

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

@@ -0,0 +1,41 @@
+
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type PaginationProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Pagination = (props: PaginationProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_pagination'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Pagination

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import Pagination from '../_pagination'
+
+const PaginationDefault = (props) => (
+  <div>
+    <Pagination
+        {...props}
+    />
+  </div>
+)
+
+export default PaginationDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - pagination_default: Default
+  
+  
+  react:
+  - pagination_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as PaginationDefault } from './_pagination_default.jsx'

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 %>
+  <span>PAGINATION CONTENT</span>
+<% end %>

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

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+
+import { Pagination } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Pagination , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -21,6 +20,7 @@ type UserProps = {
   name?: string,
   orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
+  subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
 } & GlobalProps
@@ -38,6 +38,7 @@ const User = (props: UserProps) => {
     name,
     orientation = 'horizontal',
     size = 'sm',
+    subtitle,
     territory = '',
     title = '',
   } = props
@@ -81,6 +82,19 @@ const User = (props: UserProps) => {
         >
           {territory === '' ? title : `${territory} • ${title}`}
         </Body>
+        { typeof(subtitle) === 'string' &&
+          <Body
+              color="light"
+              dark={dark}
+              text={subtitle}
+              variant={null}
+          />
+        }
+        { typeof(subtitle) !== 'string' &&
+          <>
+            {subtitle}
+          </>
+        }
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb

@@ -0,0 +1,36 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) do %>
+    <%= pb_rails("flex", props: { align: "center" }) do %>
+      <%= pb_rails("icon", props: { icon: "users" }) %>
+      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+  }) do %>
+    <%= pb_rails("contact", props: {
+      contact_type: "cell",
+      contact_value: "349-185-9988"
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_value: 5555555555
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md

@@ -0,0 +1 @@
+The kit accepts block content and whatever is passed as block content will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Caption, Contact, Flex, Icon, User } from "../.."
+
+const MentorSubtitle = (
+  <Flex>
+    <Icon icon="users" />
+    <Caption
+        paddingLeft="xs"
+        text="Admin"
+    />
+  </Flex>
+)
+
+const ContactSubtitle = (
+  <>
+    <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+    />
+    <Contact
+        contactValue="5555555555"
+    />
+    <Contact
+        contactType="email"
+        contactValue="email@example.com"
+    />
+  </>
+)
+
+const UserBlockContentSubtitleReact = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={MentorSubtitle}
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={ContactSubtitle}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserBlockContentSubtitleReact

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md

@@ -0,0 +1 @@
+The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "center",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "vertical",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { User } from "../../"
+
+const UserSubtitle = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserSubtitle

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

@@ -6,9 +6,8 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
-
-
-
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_rails: Block Content Subtitle
 
   react:
   - user_default: Default
@@ -16,3 +15,5 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_react: Block Content Subtitle

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

@@ -3,3 +3,5 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
+export { default as UserSubtitle } from './_user_subtitle.jsx'
+export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -10,13 +10,21 @@
       image_url: object.avatar_url
     }) %>
   <% end %>
-  <%= content_tag(:div,
-      class: "content_wrapper") do %>
+  <%= content_tag(:div, class: "content_wrapper") do %>
     <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,
       color: "light"
     }) %>
+    <% if content %>
+      <%= content.presence %>
+    <% else %>
+      <%= pb_rails("body", props: {
+        text: "#{object.subtitle}",
+        dark: object.dark,
+        color: "light"
+      }) %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm],
                   default: "sm"
+      prop :subtitle
       prop :title
       prop :territory
 

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import User from './_user'
+import Caption from "../pb_caption/_caption"
+
+test('subtitle prop adds subtitle text', () => {
+  render(
+    <User
+        data={{ testid: 'test-subtitle' }}
+        subtitle='test subtitle'
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle')).toHaveTextContent('test subtitle')
+})
+
+test('subtitle prop accepts a node', () => {
+  const TestCaption = <Caption text='test caption' />
+
+  render(
+    <User
+        data={{ testid: 'test-subtitle-block' }}
+        subtitle={TestCaption}
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
+})

data/app/pb_kits/playbook/playbook-doc.js

@@ -60,6 +60,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as Pagination from 'pb_pagination/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -157,6 +158,7 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Pagination,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/lib/playbook/pagination/pagination_renderer.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Playbook
+  class LinkRenderer < WillPaginate::ActionView::LinkRenderer
+    def container_attributes
+      { class: "pb_pagination 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
+      tag("li", tag("span", "&hellip;"), class: "disabled")
+    end
+
+    def previous_page
+      num = @collection.current_page > 1 && @collection.current_page - 1
+      previous_or_next_page(num, "<i class='far fa-chevron-left'></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'></i>", "next")
+    end
+  end
+end

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.10.0
+  version: 11.11.0.pre.alpha.paginate1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-25 00:00:00.000000000 Z
+date: 2022-11-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1433,6 +1433,15 @@ 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/_pagination.tsx
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
+- app/pb_kits/playbook/pb_pagination/docs/example.yml
+- app/pb_kits/playbook/pb_pagination/docs/index.js
+- app/pb_kits/playbook/pb_pagination/pagination.html.erb
+- app/pb_kits/playbook/pb_pagination/pagination.rb
+- app/pb_kits/playbook/pb_pagination/pagination.test.jsx
 - 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
@@ -2130,10 +2139,16 @@ files:
 - app/pb_kits/playbook/pb_user/_user.tsx
 - app/pb_kits/playbook/pb_user/docs/_description.md
 - app/pb_kits/playbook/pb_user/docs/_footer.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_size.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
@@ -2144,6 +2159,7 @@ files:
 - app/pb_kits/playbook/pb_user/docs/index.js
 - app/pb_kits/playbook/pb_user/user.html.erb
 - app/pb_kits/playbook/pb_user/user.rb
+- 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.svg
@@ -2283,6 +2299,7 @@ files:
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
+- lib/playbook/pagination/pagination_renderer.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
@@ -2321,9 +2338,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: