playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.37.0"
-  VERSION = "12.37.0.pre.alpha.PLAY951collapsiblenav31062"
+  VERSION = "12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.37.0.pre.alpha.PLAY951collapsiblenav31062
+  version: 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-10 00:00:00.000000000 Z
+date: 2023-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -616,8 +616,6 @@ files:
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_collapsible/index.js
@@ -1436,7 +1434,6 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
-- app/pb_kits/playbook/pb_logistic/_logistic.jsx
 - app/pb_kits/playbook/pb_map/_map.scss
 - app/pb_kits/playbook/pb_map/_map.tsx
 - app/pb_kits/playbook/pb_map/_map_controls.tsx
@@ -1540,12 +1537,7 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx
-- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_description.md
@@ -1863,6 +1855,8 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md
 - app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_default.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Collapsible, useCollapsible, Button } from '../..'
-
-const CollapsibleState = (props) => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-
-  return (
-  <>
-    <Button
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        padding="none"
-        variant="link"
-    >
-      {isCollapsed ? "Expand All" : "Collapse All"}
-    </Button>
-
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-      <Collapsible.Main padding="sm" 
-          {...props}
-      >
-          <div>{"Main Section"}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-      </Collapsible.Content>
-    </Collapsible>
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-      <Collapsible.Main padding="sm" 
-          {...props}
-      >
-          <div>{"Main Section"}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-      </Collapsible.Content>
-    </Collapsible>
-    <Collapsible
-        collapsed={isCollapsed}
-        icon={["plus", "minus"]}
-        padding="none"
-    >
-        <Collapsible.Main padding="sm" 
-            {...props}
-        >
-          <div>{"Main Section"}</div>
-        </Collapsible.Main>
-        <Collapsible.Content>
-          <div>
-            {
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
-            }
-          </div>
-        </Collapsible.Content>
-    </Collapsible>
-  </>
-  )
-}
-
-export default CollapsibleState

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md

@@ -1,3 +0,0 @@
-The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
- 
-NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -1,120 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum()
-  const day = value.toDay()
-
-  return ` · ${month}/${day}`
-}
-
-type LogisticProps = {
-  aria?: object,
-  className?: string,
-  dark?: boolean,
-  data?: object,
-  date: string,
-  id?: string,
-  link?: string,
-  projectName?: string,
-  projectNumber?: number,
-}
-
-const Logistic = (props: LogisticProps) => {
-  const { aria = {},
-    className,
-    dark = false,
-    data = {},
-    date,
-    id,
-    link,
-    projectName,
-    projectNumber } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const formattedDate = new DateTime({ value: date })
-  const classes = classnames(
-    buildCss('pb_logistic_kit', { dark }),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Body color="light">
-        <Caption text="Project" />
-        <Icon
-            fixedWidth
-            icon="home"
-        />
-
-        {` ${projectNumber}`}
-
-        <Choose>
-          <When condition={link}>
-            <a
-                className="pb_logistic_kit_links"
-                href={link}
-            >
-              <Choose>
-                <When condition={date}>
-                  <Title
-                      size={4}
-                      tag="span"
-                      text={' ' + projectName + dateString(formattedDate)}
-                  />
-                </When>
-                <Otherwise>
-                  <Title
-                      size={4}
-                      tag="span"
-                      text={' ' + projectName}
-                  />
-                </Otherwise>
-              </Choose>
-            </a>
-          </When>
-          <Otherwise>
-            <Choose>
-              <When condition={date}>
-                <Title
-                    dark={dark}
-                    size={4}
-                    tag="span"
-                    text={' ' + projectName + dateString(formattedDate)}
-                />
-              </When>
-              <Otherwise>
-                <Title
-                    dark={dark}
-                    size={4}
-                    tag="span"
-                    text={' ' + projectName}
-                />
-              </Otherwise>
-            </Choose>
-          </Otherwise>
-        </Choose>
-      </Body>
-    </div>
-  )
-}
-
-export default Logistic

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +0,0 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,57 +0,0 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
-
-const CollapsibleNavCustom = (props) => {
-  const navItems = ["Overview", "Albums", "Similar Artists"]
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const collapsibles = navItems.map(() => useCollapsible(true))
-
-  const handleMainClick = (index) => {
-    collapsibles.forEach(([, , setCollapsed], idx) => {
-      if (idx === index) {
-        setCollapsed(false)
-      } else {
-        setCollapsed(true)
-      }
-    })
-  }
-
-  return (
-    <>
-      <Nav variant='subtle'>
-        {navItems.map((text, index) => {
-          const [collapsed] = collapsibles[index]
-          return (
-            <NavItem
-                collapsed={collapsed}
-                collapsible
-                emphasized
-                iconLeft="chevron-down"
-                id={`collapsible-nav-item-${index + 1}`}
-                key={index}
-                link="#"
-                onClick={() => handleMainClick(index)}
-                text={text}
-                {...props}
-            >
-              <NavItem link="#" 
-                  text="City" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="People" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="Business" 
-                  {...props} 
-              />
-            </NavItem>
-          );
-        })}
-      </Nav>
-    </>
-  )
-}
-
-export default CollapsibleNavCustom

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md

@@ -1 +0,0 @@
-The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("nav", props: { variant: "subtle" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
-            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
-        <% end %>
-    <% end %>
-  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -1 +0,0 @@
-The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.