[PLAY-216] - TS Conversion of Date Stacked kit + Jest Test

playbook/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Caption from "../pb_caption/_caption";
+import Title from "../pb_title/_title";
+
+type DateStackedProps = {
+  align?: "left" | "center" | "right";
+  bold?: boolean;
+  className?: string | string[];
+  dark?: boolean;
+  data?: string;
+  date: string;
+  size?: "sm" | "md";
+  id?: string;
+  reverse?: boolean;
+};
+
+const sizes: {sm: 4, md: 3} = {
+  sm: 4,
+  md: 3,
+};
+
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align = "left",
+    bold = false,
+    reverse = false,
+    className,
+    dark = false,
+    date,
+    data={},
+    size = "sm",
+  } = props;
+  const classes = classnames(
+    buildCss("pb_date_stacked_kit", align, size, {
+      dark: dark,
+      reverse: reverse,
+    }),
+    globalProps(props),
+    className
+  );
+
+  const currentYear = new Date().getFullYear().toString();
+  const dateTimestamp = new DateTime({ value: date });
+  const inputYear = dateTimestamp.toYear().toString();
+  const dataProps = buildDataProps(data)
+
+  return (
+    <>
+      {bold == false ? (
+        <div {...dataProps} className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+              dark={dark}
+              size={sizes[size]}
+              text={dateTimestamp.toDay()}
+            />
+          </div>
+          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+        </div>
+      ) : (
+          <div {...dataProps} className={classes}>
+            <div className="pb_date_stacked_day_month">
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toMonth()} 
+              />
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toDay()} 
+              />
+              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+            </div>
+          </div>
+      )}
+    </>
+  );
+};
+
+export default DateStacked;

playbook/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -0,0 +1,151 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateStacked from './_date_stacked'
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const futureDate = new Date(
+  new Date().getFullYear() - 4,
+  new Date().getMonth(),
+  new Date().getDate(),
+  new Date().getHours(),
+  new Date().getMinutes()
+);
+
+const testId = "datestacked-kit";
+
+describe("DateStacked Kit", () => {
+    test("renders DateStacked className", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm")
+    })
+
+    test("renders top text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("JAN")
+    })
+
+    test("renders bottom text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text.textContent).toEqual("1")
+    })
+
+    test("renders correct size", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_md")
+    })
+
+    test("renders year when non-current year", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_xs")
+        expect(text.textContent).toEqual("2016")
+    })
+
+    test("renders correct className when order reversed", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                reverse
+                size="sm"      
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm_reverse")
+    })
+
+    test("renders bold prop", () => {
+        render(
+            <DateStacked
+                align="left"
+                bold
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders center alignment prop", () => {
+        render(
+            <DateStacked
+                align="center"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_center_md")
+    })
+
+    test("renders right alignment prop", () => {
+        render(
+            <DateStacked
+                align="right"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_right_md")
+    })
+
+
+})

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedAlign = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedBold = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedNotCurrentYear = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedSizes = (props) => {
   return (

playbook/app/pb_kits/playbook/pb_title/_title.tsx

@@ -10,7 +10,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2 | 3 | 4,
+  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",