RubyGems - playbook_ui - Versions diffs - 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1 - Mend

playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx ADDED Viewed

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  Title,
+  Card,
+  Gauge,
+  Flex,
+  FlexItem,
+  SectionSeparator,
+  Body,
+  Caption,
+} from "../..";
+const data = [{ name: "Name", value: 10 }];
+const GaugeComplex = (props) => (
+  <Flex
+      gap="sm"
+      padding="xl"
+      wrap
+  >
+    <FlexItem
+        flex={1}
+        grow
+    >
+      <Card
+          maxWidth="xs"
+          padding="md"
+      >
+        <Title
+            paddingBottom="sm"
+            size={4}
+            text="Abandoned Calls"
+        />
+        <Flex align="stretch">
+          <Flex
+              marginRight="sm"
+              orientation="column"
+          >
+            <Body
+                color="light"
+                paddingBottom="sm"
+                text="Total Abandoned"
+            />
+            <Flex
+                align="baseline"
+                paddingBottom="xs"
+            >
+              <Title
+                  size={1}
+                  text="39"
+              />
+              <Title
+                  color="light"
+                  size={3}
+                  text="calls"
+              />
+            </Flex>
+            <Caption
+                size="xs"
+                text="of 390"
+            />
+          </Flex>
+          <SectionSeparator
+              alignSelf="stretch"
+              marginRight="sm"
+              orientation="vertical"
+          />
+          <Flex
+              orientation="column"
+              wrap
+          >
+            <Body
+                color="light"
+                text="% Abandoned"
+            />
+            <Flex wrap>
+              <FlexItem
+                  fixedSize="150px"
+                  overflow="hidden"
+                  shrink
+              >
+                <Gauge
+                    chartData={data}
+                    disableAnimation
+                    height="100%"
+                    id="gauge-complex"
+                    suffix="%"
+                    {...props}
+                />
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Card>
+    </FlexItem>
+  </Flex>
+);
+export default GaugeComplex;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ We are able to wrap our Gauge kits within multiple other Flex and Card components.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: {wrap: true}) do %>
+<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
   <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing4",
@@ -20,6 +20,7 @@
   <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing1",
+        height: '100%',
         chart_data: [{ name: "Point 4", value: 25 }],
       }) %>
   <% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx CHANGED Viewed

@@ -4,6 +4,7 @@ import { Flex, FlexItem, Gauge } from '../../'
 const GaugeSizing = (props) => (
   <div>
     <Flex
+        align="center"
         wrap
         {...props}
     >
@@ -51,6 +52,7 @@ const GaugeSizing = (props) => (
       >
         <Gauge
             chartData={[ { name: 'Point 4', value: 25 } ]}
+            height="100%"
             id="gauge-sizing1"
             {...props}
         />

data/app/pb_kits/playbook/pb_gauge/docs/example.yml CHANGED Viewed

@@ -10,6 +10,7 @@ examples:
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_colors: Color Overrides
+  - gauge_complex: Complex
   react:
@@ -23,3 +24,4 @@ examples:
   - gauge_height: Height
   - gauge_live_data: Live Data
   - gauge_colors: Color Overrides
+  - gauge_complex: Complex

data/app/pb_kits/playbook/pb_gauge/docs/index.js CHANGED Viewed

@@ -8,3 +8,4 @@ export { default as GaugeTitle } from './_gauge_title.jsx'
 export { default as GaugeUnits } from './_gauge_units.jsx'
 export { default as GaugeLiveData } from './_gauge_live_data.jsx'
 export { default as GaugeColors } from './_gauge_colors.jsx'
+export { default as GaugeComplex } from './_gauge_complex.jsx'

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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,
 }

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js ADDED Viewed

@@ -0,0 +1,77 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import IconValue from './_icon_value'
+const testId = "iconvalue-kit";
+describe("IconValue Kit", () => {
+    test("renders IconValue classname", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_left")
+    })
+    test("renders icon", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
+        expect(icon).toBeInTheDocument()
+    })
+    test("renders value", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+        const kit = screen.getByTestId(testId)
+        const value = kit.querySelector(".pb_body_kit_light")
+        expect(value.textContent).toEqual("33-123456")
+    })
+    test("aligns content center", () => {
+        render(
+            <IconValue
+                align="center"
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_center")
+    })
+    test("aligns content right", () => {
+        render(
+            <IconValue
+                align="right"
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_right")
+    })
+})