playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("card", props: {id: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on ID.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element",
+      position: "auto right",
+      position_element: "#position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: {classname: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on class name.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element2",
+      position: "auto right",
+      position_element: ".position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect, useState } from 'react'
+
+import Card from '../../pb_card/_card'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import DatePicker from '../_date_picker'
+
+const DatePickerPositionsElement = (props) => {
+  const cardRefTop = useRef(null),
+        cardRefBtm = useRef(null)
+
+  const [cardTop, setCardTop] = useState()
+  const [cardBtm, setCardBtm] = useState()
+
+  useEffect(() => {
+    setCardTop(cardRefTop.current)
+    setCardBtm(cardRefBtm.current)
+  }, [cardTop, cardBtm])
+
+  return (
+    <React.Fragment>
+      <div ref={cardRefTop}>
+        <Card
+            marginBottom="md"
+        >
+          {'👋 Datepicker will position from here based on ID.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element"
+              position="auto right"
+              positionElement={cardTop}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+
+      <div ref={cardRefBtm}>
+        <Card
+            marginBottom="md"
+        >
+            {'👋 Datepicker will position from here based on class name.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element2"
+              position="auto right"
+              positionElement={cardBtm}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  )
+}
+
+export default DatePickerPositionsElement

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

@@ -19,6 +19,8 @@ examples:
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
   - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)
 
 
   react:
@@ -40,3 +42,5 @@ examples:
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
   - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)

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

@@ -16,3 +16,5 @@ export { default as DatePickerInline } from './_date_picker_inline.jsx'
 export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
 export { default as DatePickerTime } from './_date_picker_time.jsx'
 export { default as DatePickerWeek } from './_date_picker_week.jsx'
+export { default as DatePickerPositions } from './_date_picker_positions.jsx'
+export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'

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

@@ -659,9 +659,6 @@ 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_date_picker/sass_partials/_overrides.scss

@@ -1,15 +1,15 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    width: 323.88px
+    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: -$space_xs;
-    margin-top: -$space_xs;
-    width: 323.88px;
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
+    // width: 323.88px;
   }
 }
 @media (max-width: 499px) {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+import { buildCss, buildDataProps } from "../utilities/props";
+import DateTime from "../pb_kit/dateTime";
+
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Icon from "../pb_icon/_icon";
+
+type DateRangeInlineProps = {
+  className?: string;
+  id?: string;
+  data?: string;
+  align?: "left" | "center" | "vertical";
+  size?: "sm" | "xs";
+  dark?: boolean;
+  icon?: boolean;
+  startDate?: Date;
+  endDate?: Date;
+};
+
+const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
+  const date = new DateTime({ value: dateValue });
+  if (includeYear) {
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+  } else {
+    return `${date.toMonth()} ${date.toDay()}`;
+  }
+};
+
+const dateTimeIso = (dateValue: Date | string) => {
+  const date = new DateTime({ value: dateValue });
+  return date.toIso();
+};
+
+const DateRangeInline = (props: DateRangeInlineProps) => {
+  const {
+    icon = false,
+    dark = false,
+    size = "sm",
+    align = "left",
+    data = {},
+    startDate,
+    endDate,
+    className,
+  } = props;
+
+  const iconContent = () => {
+    return (
+      <>
+        {icon && (
+          <>
+            <Body color="light" key={Math.random()} tag="span">
+              <Icon
+                className="pb_date_range_inline_icon"
+                dark={dark}
+                fixedWidth
+                icon="calendar-alt"
+                size={size}
+                tag="span"
+              />
+            </Body>
+          </>
+        )}
+      </>
+    );
+  };
+
+  const dateInCurrentYear = () => {
+    const currentDate = new Date();
+    return (
+      startDate.getFullYear() == endDate.getFullYear() &&
+      startDate.getFullYear() == currentDate.getFullYear()
+    );
+  };
+
+  const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
+  const dataProps = buildDataProps(data)
+  const renderTime = (date: Date | string) => {
+    return (
+      <time dateTime={dateTimeIso(date)}>
+        {dateInCurrentYear() ? (
+          <>{` ${dateTimestamp(date, false)} `}</>
+        ) : (
+          <>{` ${dateTimestamp(date, true)} `}</>
+        )}
+      </time>
+    );
+  };
+
+  return (
+    <div
+    {...dataProps}
+      className={classnames(dateRangeClasses, globalProps(props), className)}
+    >
+      <div className="pb_date_range_inline_wrapper">
+        {size == "xs" && (
+          <>
+            {iconContent()}
+            <Caption dark={dark} tag="span">
+              {renderTime(startDate)}
+            </Caption>
+            <Caption dark={dark} tag="span">
+              <Icon
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
+              />
+            </Caption>
+            <Caption dark={dark} tag="span">
+              {renderTime(endDate)}
+            </Caption>
+          </>
+        )}
+
+        {size == "sm" && (
+          <>
+            {iconContent()}
+            <Body dark={dark} tag="span">
+              {renderTime(startDate)}
+            </Body>
+            <Body color="light" dark={dark} tag="span">
+              <Icon
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
+              />
+            </Body>
+            <Body dark={dark} tag="span">
+              {renderTime(endDate)}
+            </Body>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DateRangeInline;

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateRangeInline from './_date_range_inline'
+
+jest.useFakeTimers()
+const testId = "daterangeinline-kit";
+
+describe("DateRangeInline Kit", () => {
+    test("renders DateRangeInline className", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_range_inline_kit_left")
+    })
+
+    test("renders DateRangeInline text left", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(" Jun 18, 2013 ")
+    })
+
+    test("renders DateRangeInline text right", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:last-child')
+        expect(text.textContent).toEqual(" Mar 20, 2015 ")
+    })
+
+    test("renders DateRangeInline arrow icon center", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const arrow = kit.querySelector('.pb_icon_kit.fa-fw.fa-long-arrow-right')
+        expect(arrow).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline className if size sm", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="sm"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const innerKit = kit.querySelector('.pb_body_kit')
+        expect(innerKit).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline calender icon left", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                icon
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const calendar = kit.querySelector('.pb_icon_kit.fa-fw.fa-calendar-alt')
+        expect(calendar).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline without year", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date((`15 Aug ${new Date().getFullYear()}`))}
+                size="xs"
+                startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(" Jan 15 ")
+    })
+    
+
+})

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateRangeInline from '../_date_range_inline.jsx'
+import DateRangeInline from '../_date_range_inline'
 
 const DateRangeInlineDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -12,9 +10,9 @@ import FormattedDate from '../pb_date/_date'
 
 type DateTimeProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
+  aria?: { [key: string]: string; },
   className?: string,
-  data?: object,
+  data?: { [key: string]: string; },
   datetime: string,
   id?: string,
   size?: "sm" | "md",
@@ -59,7 +57,6 @@ const DateTime = (props: DateTimeProps) => {
         <FormattedDate
             showDayOfWeek={showDayOfWeek}
             size={size}
-            timeZone={timeZone}
             value={datetime}
         />
         <Time

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateTime from './_date_time'
+
+const TEST_DATE = '01/01/2020 00:00:000 GMT-0500'
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = 'datetime-kit'
+
+const realDate = Date
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
+})
+
+afterEach(() => {
+  global.Date = realDate;
+})
+
+describe('DateTime Kit', () => {
+  test('renders DatePicker className', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_date_time_md')
+  })
+  test('renders DatePicker text left', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_date_kit_left')
+    expect(text.textContent).toEqual('Wed • Jan 1')
+  })
+  test('renders DatePicker text right', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_time_kit_md.ml_sm')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+
+    expect(clock).toBeInTheDocument()
+    expect(text.textContent).toEqual(' 12:00a EST')
+  })
+  test('renders DatePicker text right no icon', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+
+    expect(clock).toBeNull()
+  })
+  test('renders DatePicker text right timezone', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          timeZone="Asia/Tokyo"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_time_kit_md.ml_sm')
+
+    expect(text.textContent).toEqual('2:00p JST')
+  })
+  test('renders DatePicker size', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          size="sm"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const rightSide = kit.querySelector('.pb_time_kit_sm.ml_sm')
+
+    expect(kit).toHaveClass('pb_date_time_sm')
+    expect(rightSide).toBeInTheDocument()
+  })
+})

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time.jsx'
+import DateTime from '../_date_time'
 
 const DateTimeAlign = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time.jsx'
+import DateTime from '../_date_time'
 
 const DateTimeDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time.jsx'
+import DateTime from '../_date_time'
 
 const DateTimeDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,7 +10,7 @@ import Title from '../pb_title/_title'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   date: string,
@@ -20,16 +18,18 @@ type DateYearStackedProps = {
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
-  const { align = 'left', className, dark = false, date } = props
+  const { align = 'left', className, dark = false, date, data={} } = props
   const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
     className
   )
+  const dataProps = buildDataProps(data)
 
   return (
-    <div className={css}>
+    <div {...dataProps}
+    className={css}>
       <Title
           dark={dark}
           size={4}

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import DateYearStacked from "./_date_year_stacked";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = "dateyearstacked-kit";
+const realDate = Date;
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE));
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("DateYearStacked Kit", () => {
+  test("renders DateYearStacked className", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_date_year_stacked_left");
+  });
+
+  test("renders DateYearStacked text top", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1 JAN");
+  });
+
+  test("renders DateYearStacked text bottom", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_body_kit_light");
+    expect(text.textContent).toEqual("2020");
+  });
+
+  test("renders align prop", () => {
+    render(
+      <DateYearStacked
+          align="center"
+          data={{ testid: testId }}
+          date={new Date(Date.now())}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_date_year_stacked_center");
+  });
+});