RubyGems - playbook_ui - Versions diffs - 11.5.0 → 11.6.0.pre.alpha.fontawesome - Mend

playbook_ui 11.5.0 → 11.6.0.pre.alpha.fontawesome

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 (48) hide show

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")
+    })
+})

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+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?: { [key: string]: string };
+  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}
+      id={id}
+      title={title}
+    >
+      <Caption dark={dark} text={label} />
+      {variant === "details" ? (
+        <Flex inline vertical="center">
+          {icon && (
+            <Body color="light" dark={dark} marginRight="xs">
+              <Icon dark={dark} fixedWidth icon={icon} />
+            </Body>
+          )}
+          {description && (
+            <Body
+              color="light"
+              dark={dark}
+              marginRight="xs"
+              text={description}
+            />
+          )}
+          {active === true ? (
+            <Flex inline vertical="center">
+              {title && (
+                <Title dark={dark} size={4} text={title} variant="link" />
+              )}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                  variant="link"
+                />
+              )}
+            </Flex>
+          ) : (
+            <>
+              {title && <Title dark={dark} size={4} text={title} />}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                />
+              )}
+            </>
+          )}
+        </Flex>
+      ) : (
+        <Body dark={dark} text={value} />
+      )}
+    </div>
+  );
+};
+export default LabelValue;