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

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

data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
@@ -12,11 +10,11 @@ import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
 type FileUploadProps = {
-  accept?: array<string>,
+  accept?: string[],
   className?: string,
   data?: object,
   acceptedFilesDescription?: string,
-  onFilesAccepted: Callback,
+  onFilesAccepted: Callback<File, File>,
 }
 
 const FileUpload = (props: FileUploadProps) => {
@@ -27,10 +25,8 @@ const FileUpload = (props: FileUploadProps) => {
     data = {},
     onFilesAccepted = noop,
   } = props
-  const onDrop = useCallback((files) => {
-    onFilesAccepted(files)
-  })
 
+  const onDrop = useCallback((files) => onFilesAccepted(files), []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     onDrop,
@@ -57,11 +53,11 @@ const FileUpload = (props: FileUploadProps) => {
       <Card>
         <input {...getInputProps()} />
         <Body color="light">
-          <If condition={isDragActive}>
+          {isDragActive ?
             <p>{'Drop the files here ...'}</p>
-            <Else />
+            :
             <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
-          </If>
+          }
         </Body>
       </Card>
     </div>

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -33,6 +33,7 @@ const FilterDouble = ({
   children,
   dark,
   minWidth,
+  placement,
   ...bgProps
 }: FilterDoubleProps) => (
   <FilterBackground
@@ -46,6 +47,7 @@ const FilterDouble = ({
       <FiltersPopover
           dark={dark}
           minWidth={minWidth}
+          placement={placement}
       >
         {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -33,6 +33,7 @@ const FilterSingle = ({
   children,
   dark,
   minWidth,
+  placement,
   ...bgProps
 }: FilterSingleProps) => {
   return (
@@ -49,6 +50,7 @@ const FilterSingle = ({
           <FiltersPopover
               dark={dark}
               minWidth={minWidth}
+              placement={placement}
           >
             {children}
           </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -6,7 +6,7 @@ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -25,7 +25,7 @@ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
     <PbReactPopover
         closeOnClick="outside"
         minWidth={minWidth}
-        placement="bottom"
+        placement={placement}
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}

data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb

@@ -2,6 +2,7 @@
   pb_rails("filter", props: {
     min_width: "600px",
     id: "25",
+    position: "top",
     filters: [
       { name: "name", value: "John Wick" },
       { name: "city", value: "San Francisco"}

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -0,0 +1,34 @@
+<%=
+  pb_rails("filter", props: {
+    id: "pla",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    placement: "right",
+    template:"filter_only",
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>