playbook_ui 11.6.0 → 11.6.1.pre.alpha.rubocop.pre.performance1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8aef1eda410390ce74bde2dd7060436279bd3b373d825d7ece15d7c8ae9f5c21
-  data.tar.gz: 3b9437069af2f2bd018a6a8787146f519182f77591f6f929eb990181c30e0014
+  metadata.gz: dc9298eefc98f72a96a7a168d2d7019c6ff57c01ca45f5fda0e98ebf7e4f3ed6
+  data.tar.gz: 48a26c0f5191e612e55b74bbf206efa53a454175f2b018273db0c7a83bbd7bdd
 SHA512:
-  metadata.gz: 158c3aae011b0c696d20fe669fb2bcc22e85712e2db09a48dac48a3c8372b0a586423fcfe3172441f550a1d5a511032c2a97363456410625d5b859eb9db379f9
-  data.tar.gz: 84aec8b09e55179e3ab03d30b95820bfc2209118cae8b9f0a465fa26cabaa957aa7177d813d0e46f57cd9aa42de601eb16e14f500983f66fffcea276f639da33
+  metadata.gz: cf1a60bc28926ebf17b04bd3fb3a3080f3d6476baefda231915328a341398e66b8723cc5d6000de1ff1d068a4cfbd7e14fc94812c4deebcf9cc147c7bea018ce
+  data.tar.gz: a4990d58ca5b07fd0bd0c79a61e364e166d4fa81c12497411145a596e996945f204dc08df7d4f67a98c23f14916fb71f2cddab88ecab5a09a104fff037e7bbba

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

@@ -104,3 +104,16 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+visual_guidelines:
+  - colors
+  - max_width
+  - number_spacing
+  - positioning
+  - line_height
+  - spacing
+  - border_radius
+  - typography
+  - shadows
+  - display
+  - cursor
+  - flex_box

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -17,7 +17,6 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   icon?: string,
-  iconRight?: boolean,
   id?: string,
   link?: string,
   loading?: boolean,
@@ -62,7 +61,6 @@ const Button = (props: ButtonPropTypes) => {
     data = {},
     disabled,
     icon = null,
-    iconRight = false,
     id,
     loading = false,
     onClick,
@@ -93,13 +91,10 @@ const Button = (props: ButtonPropTypes) => {
 
   const content = (
     <span className="pb_button_content">
-      {icon && !iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
+      {icon && (
+        <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
       )}
       <span>{text || children}</span>
-      {icon && iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
-      )}
     </span>
   )
 

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -55,13 +55,6 @@ $pb_button_border_width: 0px;
     visibility: visible;
   }
 
-  .button_with_icon {
-    margin-right: $space_xs;
-  }
-  .button_with_icon_right {
-    margin-left: $space_xs;
-  }
-
   &:hover, &:focus {
     outline: none;
     

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,16 +1,5 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
-    <% if object.icon && !object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
-        </span>
-    <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
-    <% if object.icon && object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
-        </span>
-    <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -7,9 +7,6 @@ module Playbook
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
-      prop :icon
-      prop :icon_right, type: Playbook::Props::Boolean,
-                        default: false
       prop :link
       prop :loading, type: Playbook::Props::Boolean,
                      default: false

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("button") do %>
-  <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
+  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
   <span>Button with Block Content</span>
 <% end %>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,18 +1,15 @@
-import React from "react";
-import { Button, Pill } from "../../";
+import React from 'react'
+import { Button } from '../../'
 
 const ButtonBlockContent = (props) => (
   <div>
-    <Button fixedWidth 
+    <Button
+        fixedWidth
+        icon="users"
+        text="Button with Block Content"
         {...props}
-    >
-      <Pill marginRight="xs"
-          text="5"
-          variant="info"
-      />
-      <span>Button with Block Content</span>
-    </Button>
+    />
   </div>
-);
+)
 
-export default ButtonBlockContent;
+export default ButtonBlockContent

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

@@ -5,7 +5,6 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
-  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
@@ -16,7 +15,6 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
-  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size

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

@@ -3,7 +3,6 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
 export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
-export { default as ButtonIconOptions } from './_button_icon_options.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -46,8 +46,7 @@ module Playbook
       prop :plugins, type: Playbook::Props::Boolean,
                      default: false,
                      deprecated: true
-      prop :position, type: Playbook::Props::String,
-                      default: "auto"
+      prop :position, type: Playbook::Props::String
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -659,6 +659,9 @@ span.flatpickr-weekday {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
 }
 .flatpickr-time:after {
   content: "";

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -33,7 +33,6 @@ const FilterDouble = ({
   children,
   dark,
   minWidth,
-  placement,
   ...bgProps
 }: FilterDoubleProps) => (
   <FilterBackground
@@ -47,7 +46,6 @@ const FilterDouble = ({
       <FiltersPopover
           dark={dark}
           minWidth={minWidth}
-          placement={placement}
       >
         {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -33,7 +33,6 @@ const FilterSingle = ({
   children,
   dark,
   minWidth,
-  placement,
   ...bgProps
 }: FilterSingleProps) => {
   return (
@@ -50,7 +49,6 @@ const FilterSingle = ({
           <FiltersPopover
               dark={dark}
               minWidth={minWidth}
-              placement={placement}
           >
             {children}
           </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -6,7 +6,7 @@ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -25,7 +25,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
     <PbReactPopover
         closeOnClick="outside"
         minWidth={minWidth}
-        placement={placement}
+        placement="bottom"
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}

data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb

@@ -2,7 +2,6 @@
   pb_rails("filter", props: {
     min_width: "600px",
     id: "25",
-    position: "top",
     filters: [
       { name: "name", value: "John Wick" },
       { name: "city", value: "San Francisco"}

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

@@ -8,7 +8,6 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
-  - filter_placement: Filter Placement
 
   react:
   - filter_default: Default
@@ -19,4 +18,3 @@ examples:
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
   - filter_close_popover: Close Popover
-  - filter_placement: Filter Placement

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

@@ -6,4 +6,3 @@ export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMinWidth } from './_filter_min_width.jsx'
 export { default as FilterClosePopover } from './_filter_close_popover.jsx'
-export { default as FilterPlacement } from './_filter_placement.jsx'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -69,13 +69,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -11,9 +11,6 @@ module Playbook
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
       prop :min_width, default: "auto"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
-                       default: "bottom-start"
 
       def classname
         generate_classname("pb_filter_kit")

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -0,0 +1,127 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { joinPresent, titleize } from '../utilities/text'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Hashtag from '../pb_hashtag/_hashtag'
+import Title from '../pb_title/_title'
+
+type HomeAddressStreetProps = {
+  address: string,
+  addressCont: string,
+  city: string,
+  className?: string,
+  dark?: boolean,
+  emphasis: "street" | "city",
+  homeId: number,
+  houseStyle: string,
+  homeUrl: string,
+  newWindow: Boolean,
+  state: string,
+  zipcode: string,
+  territory: string,
+}
+
+const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+  const {
+    address,
+    addressCont,
+    city,
+    className,
+    dark = false,
+    emphasis = 'street',
+    homeId,
+    homeUrl,
+    newWindow,
+    houseStyle,
+    state,
+    zipcode,
+    territory,
+  } = props
+
+  const classes = (className, dark) =>
+    classnames(
+      {
+        'pb_home_address_street': !dark,
+        'pb_home_address_street_dark': dark,
+      },
+      globalProps(props),
+      className
+    )
+  return (
+    <div className={classes(className, dark)}>
+      {
+        <Choose>
+          <When condition={emphasis == 'street'}>
+            <div>
+              <Title
+                  className="pb_home_address_street_address"
+                  dark={dark}
+                  size={4}
+              >
+                {joinPresent([titleize(address), houseStyle], ' · ')}
+              </Title>
+              <Title
+                  className="pb_home_address_street_address"
+                  dark={dark}
+                  size={4}
+              >
+                {titleize(addressCont)}
+              </Title>
+              <Body color="light">
+                {`${titleize(city)}, ${state} ${zipcode}`}
+              </Body>
+            </div>
+          </When>
+          <When condition={emphasis == 'city'}>
+            <div>
+              <Body color="light">
+                {joinPresent([titleize(address), houseStyle], ' · ')}
+              </Body>
+              <Body color="light">{titleize(addressCont)}</Body>
+              <div>
+                <Title
+                    className="pb_home_address_street_address"
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                >
+                  {`${titleize(city)}, ${state}`}
+                </Title>
+                <Body
+                    color="light"
+                    tag="span"
+                >
+                  {` ${zipcode}`}
+                </Body>
+              </div>
+            </div>
+          </When>
+        </Choose>
+      }
+
+      <If condition={homeId}>
+        <Hashtag
+            classname="home-hashtag"
+            dark={dark}
+            newWindow={newWindow}
+            text={homeId}
+            type="home"
+            url={homeUrl || '#'}
+        />
+      </If>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <small>{territory}</small>
+      </Body>
+    </div>
+  )
+}
+
+export default HomeAddressStreet

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -8,7 +8,7 @@ const HomeAddressStreetDefault = (props) => {
         address="70 Prospect Ave"
         addressCont="Apt M18"
         city="West Chester"
-        homeId="8250263"
+        homeId={8250263}
         homeUrl="https://powerhrg.com/"
         houseStyle="Colonial"
         state="PA"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -9,7 +9,7 @@ const HomeAddressStreetEmphasis = (props) => {
           address="70 Prospect Ave"
           addressCont="Apt M18"
           city="West Chester"
-          homeId="8250263"
+          homeId={8250263}
           homeUrl="https://powerhrg.com/"
           houseStyle="Colonial"
           state="PA"
@@ -24,7 +24,7 @@ const HomeAddressStreetEmphasis = (props) => {
           addressCont="Apt M18"
           city="West Chester"
           emphasis="city"
-          homeId="8250263"
+          homeId={8250263}
           homeUrl="https://powerhrg.com/"
           houseStyle="Colonial"
           state="PA"

data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.tsx → _icon_stat_value.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 
@@ -11,7 +13,7 @@ import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
 
 type IconStatValueProps = {
-  aria?: { [key: string]: string },
+  aria?: object,
   className?: string,
   data?: object,
   icon: string,
@@ -51,7 +53,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
   )
-  const titleSize = function(size: "sm" | "md" | "lg") {
+  const titleSize = function(size) {
     if (size == 'lg') {
       return (
         <Title

data/app/pb_kits/playbook/pb_icon_value/{_icon_value.tsx → _icon_value.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 
@@ -9,12 +11,12 @@ import Icon from '../pb_icon/_icon'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
-  aria?: { [key: string]: string; },
+  aria?: object,
   className?: string,
   dark?: boolean,
   data?: object,
   icon: string,
-  id?: string,
+  id?: number,
   text: string,
 }
 

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -0,0 +1,155 @@
+/* @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 Flex from '../pb_flex/_flex'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
+
+type LabelValueProps = {
+  active?: boolean,
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  date?: date,
+  id?: string,
+  label: string,
+  value?: string,
+  variant?: "default" | "details",
+  icon?: string,
+  description?: string,
+  title?: string,
+}
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+
+  return ` · ${month}/${day}`
+}
+
+const LabelValue = (props: LabelValueProps) => {
+  const {
+    active = false,
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    description,
+    icon,
+    id,
+    label,
+    title,
+    value,
+    variant = 'default',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
+  const variantClass = variant === 'details' ? 'details' : ''
+  const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        description={description}
+        icon={icon}
+        id={id}
+        title={title}
+    >
+      <Caption
+          dark={dark}
+          text={label}
+      />
+      <If condition={variant === 'details'}>
+        <Flex
+            inline
+            vertical="center"
+        >
+          <If condition={icon}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon
+                  dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
+            </Body>
+          </If>
+          <If condition={description}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
+            />
+          </If>
+          <Choose>
+            <When condition={active === true}>
+              <Flex
+                  inline
+                  vertical="center"
+              >
+                <If condition={title}>
+                  <Title
+                      dark={dark}
+                      size={4}
+                      text={title}
+                      variant="link"
+                  />
+                </If>
+                <If condition={date}>
+                  <Title
+                      dark={dark}
+                      marginLeft="xs"
+                      size={4}
+                      text={' ' + dateString(formattedDate)}
+                      variant="link"
+                  />
+                </If>
+              </Flex>
+            </When>
+            <Otherwise>
+              <If condition={title}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    text={title}
+                />
+              </If>
+              <If condition={date}>
+                <Title
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={' ' + dateString(formattedDate)}
+                />
+              </If>
+            </Otherwise>
+          </Choose>
+        </Flex>
+        <Else />
+        <Body
+            dark={dark}
+            text={value}
+        />
+      </If>
+    </div>
+  )
+}
+
+export default LabelValue

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -82,7 +82,7 @@ test("render all layout variants", () => {
   ]
 
   testValues.forEach(({ layout, expected }) => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <Layout data={{ testid: `test-${layout}` }}
           layout={layout}>
         <Layout.Body>
@@ -90,6 +90,7 @@ test("render all layout variants", () => {
         </Layout.Body>
       </Layout>
     )
+    console.log(container)
 
     expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
     cleanup()