playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.datepicker1

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const FilterPlacement = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+
+    <>
+      <Filter
+          double
+          onSortChange={SortingChangeCallback}
+          placement={"right"}
+          results={1}
+          sortOptions={{
+            popularity: 'Popularity',
+            // eslint-disable-next-line
+            manager_title: 'Manager\'s Title',
+            // eslint-disable-next-line
+            manager_name: 'Manager\'s Name',
+          }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          {...props}
+      >
+        <TextInput
+            label="Example Text Field"
+            placeholder="Enter Text"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Example Collection Select"
+            name="Collection Select"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+    </>
+  )
+}
+
+export default FilterPlacement

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md

@@ -0,0 +1,4 @@
+Click the filter buttom above to toggle the popover.
+
+To change the filter's popover position, use the `placement` prop with one of the positions: 
+`"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`

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

@@ -8,6 +8,7 @@ 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
@@ -18,3 +19,4 @@ 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,3 +6,4 @@ 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: 'bottom'}) 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: object.placement }) 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: 'bottom', 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: object.placement , 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,6 +11,9 @@ 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_filter/filter.test.js

@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+} from "../utilities/test-utils";
+import { Button, Filter, Flex, Select, TextInput } from "..";
+
+function FilterTest(props) {
+  const SortingChangeCallback = (sortOptions) => {
+    alert(JSON.stringify(sortOptions[0]));
+  };
+
+  const options = [
+    { value: "USA" },
+    { value: "Canada" },
+    { value: "Brazil" },
+    { value: "Philippines" },
+    { value: "A Galaxy Far Far Away Like Really Far Away" },
+  ];
+  return (
+    <Filter
+        onSortChange={SortingChangeCallback}
+        results={1}
+        sortOptions={{
+        popularity: "Popularity",
+        // eslint-disable-next-line
+        manager_title: "Manager's Title",
+        // eslint-disable-next-line
+        manager_name: "Manager's Name",
+      }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+        {...props}
+    >
+      <TextInput
+          label="Example Text Field"
+          placeholder="Enter Text"
+          {...props}
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Example Collection Select"
+          name="Collection Select"
+          options={options}
+          {...props}
+      />
+      <Flex spacing="between"
+          {...props}>
+        <Button text="Apply"
+            {...props} />
+        <Button text="Clear"
+            variant="secondary"
+            {...props} />
+      </Flex>
+    </Filter>
+  );
+}
+
+test("triggers popover on filter button click", () => {
+  render(<FilterTest data={{ testid: "render-test" }}/>);
+
+  const btn = screen.getAllByRole("button")[0];
+
+  // checks if the sort menu rendered
+  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
+  expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
+
+  // hits the filter button and triggers popover
+  fireEvent.click(btn);
+
+  // check if popover displays correctly by checking its tet
+  expect(screen.getByText("Example Text Field")).toBeInTheDocument() 
+
+
+});

data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type FormGroupProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   children?: Node,
   className?: string,
   data?: object,
@@ -27,7 +25,6 @@ const FormGroup = (props: FormGroupProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
-
   return (
     <div
         {...ariaProps}

data/app/pb_kits/playbook/pb_form_group/form_group.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from "../utilities/test-utils";
+
+import { Button, FormGroup } from "..";
+
+test("should render a div with a button child", () => {
+  const testId = "primary-test"
+  const { queryByTestId } = render(
+    <FormGroup>
+      <Button 
+          data={{ testid: testId }} 
+          text={"some text"} />
+    </FormGroup>
+  )
+
+  expect(queryByTestId("primary-test")).not.toBeNull;
+})

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

@@ -0,0 +1,129 @@
+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'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+
+type HomeAddressStreetProps = {
+  aria?: { [key: string]: string },
+  address: string,
+  addressCont: string,
+  city: string,
+  className?: string,
+  data?: { [key: string]: string },
+  dark?: boolean,
+  emphasis: "street" | "city",
+  homeId: string,
+  houseStyle: string,
+  homeUrl: string,
+  newWindow: boolean,
+  state: string,
+  zipcode: string,
+  territory: string,
+}
+
+const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+  const {
+    address,
+    addressCont,
+    aria = {},
+    city,
+    className,
+    data = {},
+    dark = false,
+    emphasis = 'street',
+    homeId,
+    homeUrl,
+    newWindow,
+    houseStyle,
+    state,
+    zipcode,
+    territory,
+  } = props
+
+  const classes = (className: string, dark: boolean) =>
+    classnames(
+      {
+        'pb_home_address_street': !dark,
+        'pb_home_address_street_dark': dark,
+      },
+      globalProps(props),
+      className
+    )
+
+  const dataProps: { [key: string]: any } = buildDataProps(data)
+  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  
+  return (
+    <div className={classes(className, dark)} {...ariaProps} {...dataProps}>
+      {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>
+      }
+      {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>
+      }
+      {homeId &&
+        <Hashtag
+            classname="home-hashtag"
+            dark={dark}
+            newWindow={newWindow}
+            text={homeId}
+            type="home"
+            url={homeUrl || '#'}
+        />
+      }
+      <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_home_address_street/home_adress_street.test.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { render, screen, cleanup } from "../utilities/test-utils";
+
+import { HomeAddressStreet } from "..";
+
+
+const testId = "primary-test"
+const address = "70 Prospect Ave"
+const city = "West Chester"
+const homeId = "8250263"
+
+function HomeAdressStreetTest(props) {
+    return (
+        <HomeAddressStreet
+            address={address}
+            addressCont="Apt M18"
+            city={city}
+            data={{ testid: testId }}
+            homeId={homeId}
+            homeUrl="https://powerhrg.com/"
+            houseStyle="Colonial"
+            state="PA"
+            territory="PHL"
+            zipcode="19382"
+            {...props}
+    />
+    );
+  }
+  
+  test("renders the component", () => {
+    render(<HomeAdressStreetTest />);
+    const kit = screen.getByTestId("primary-test");
+    expect(kit).toBeInTheDocument();
+    expect(kit).toHaveClass("pb_home_address_street");
+
+    cleanup()
+  });
+
+  test("emphasize street by not setting a prop", () => {
+    const { container } = render(<HomeAdressStreetTest />);
+    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
+
+    cleanup()
+  });
+
+  test("emphasize city", () => {
+    const { container } = render(<HomeAdressStreetTest emphasis="city" />);
+    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
+
+    cleanup()
+  });
+
+  test("renders the hashtag kit", () => {
+    const { container } = render(<HomeAdressStreetTest />);
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0]).toBeInTheDocument;
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href");
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveTextContent(homeId);
+
+    cleanup()
+  });

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

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

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -0,0 +1,154 @@
+import React from 'react'
+import { cleanup, render, screen } from '../utilities/test-utils'
+
+import IconStatValue from './_icon_stat_value'
+
+const testId = "iconstatvalue-kit"
+
+describe("IconStatValue Kit", () => {
+    test("renders IconStatValue classname", () => {
+        render(
+            <IconStatValue
+                data={{ testid: testId }}
+                icon="lightbulb-on"
+                text="Electric"
+                unit="kw"
+                value={64.18}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_default")
+    })
+
+    test("renders icon", () => {
+        render(
+            <IconStatValue
+                data={{ testid: testId }}
+                icon="lightbulb-on"
+                text="Electric"
+                unit="kw"
+                value={64.18}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
+        expect(icon).toBeInTheDocument()
+    })
+
+    test("renders text", () => {
+        render(
+            <IconStatValue
+                data={{ testid: testId }}
+                icon="lightbulb-on"
+                text="Electric"
+                unit="kw"
+                value={64.18}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("Electric")
+    })
+
+    test("renders unit", () => {
+        render(
+            <IconStatValue
+                data={{ testid: testId }}
+                icon="lightbulb-on"
+                text="Electric"
+                unit="kw"
+                value={64.18}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const unit = kit.querySelector(".pb_body_kit")
+        expect(unit.textContent).toEqual("kw")
+    })
+
+    test("renders value", () => {
+        render(
+            <IconStatValue
+                data={{ testid: testId }}
+                icon="lightbulb-on"
+                text="Electric"
+                unit="kw"
+                value={64.18}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const value = kit.querySelector(".pb_title_kit_size_3")
+        expect(value.textContent).toEqual("64.18")
+    })
+
+    test("renders size prop", () => {
+        ["sm", 
+        "md", 
+        "lg"].forEach((sizeProp) => {
+            render(
+                <IconStatValue
+                    data={{ testid: testId }}
+                    icon="lightbulb-on"
+                    size={sizeProp}
+                    text="Electric"
+                    unit="kw"
+                    value={64.18}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_default`)
+
+            cleanup()
+        })
+    })
+
+    test("renders color prop", () => {
+        ["default",
+        "royal",
+        "blue",
+        "purple",
+        "teal",
+        "red",
+        "yellow",
+        "green"].forEach(
+            (colorProp) => {
+            render(
+                <IconStatValue
+                    data={{ testid: testId }}
+                    icon="lightbulb-on"
+                    text="Electric"
+                    unit="kw"
+                    value={64.18}
+                    variant={colorProp}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
+
+            cleanup()
+        }) 
+    })
+
+    test("renders vertical prop", () => {
+            render(
+                <IconStatValue
+                    data={{ testid: testId }}
+                    icon="lightbulb-on"
+                    orientation="vertical"
+                    text="Electric"
+                    unit="kw"
+                    value={64.18}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_default")
+    })
+
+})

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

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