playbook_ui 12.4.0 → 12.5.0.pre.alpha.datepickerinput1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c9cb603d0564380dc76fd27efdc587607430f9e349d5288672a6f44ae9cdd7e
-  data.tar.gz: b677f2dfb9bfe0bfc848018c3a84be1f94af01e87372ff4ba0dbf78a50c0857c
+  metadata.gz: 5d384648066bfca20bd817be4065e8d4710f06672a2a335e451a7748b60c2a74
+  data.tar.gz: 5b95638a4466aedc9ad816b84b22fda494c6c3556ad78bcb9b8053a3a18766fd
 SHA512:
-  metadata.gz: 5671ee0b58e71684f090dcac6d15c2297d19c071b7f58082badd065319fdf91e27a3884779a8e3c021101515a40c7a9b2c0c07c880b632894faafb23a16322ac
-  data.tar.gz: ea93cf50049661329f814c893e245ceff4d3be4c4bd5ce9264624eafea84d0a82a833d50cebb6e233d90e5e124c60372d68f5516c4ba4269992325b4178e5b86
+  metadata.gz: cfb26ce98684faae10c092af1ae16e9f8b3b5641343a5c60164eb489290c1e328e355c3c400822adc0366965ba9d00d4600073b3791b5ef754a6150baa00445e
+  data.tar.gz: c09f2ff8f7b8b8e3f803021421783fc98d931d838e0485c4b0345ac3d654999a08fa07e038e3be68ff2947aba85c4e070e4e80327c8a14fc60dc9e6a26270851

data/app/pb_kits/playbook/index.js

@@ -123,4 +123,7 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
-export { default as dialogHelper } from './pb_dialog/dialogHelper'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'
+
+//Theming
+export {default as mapTheme} from './pb_map/pbMapTheme'

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -27,9 +27,9 @@ type ButtonPropTypes = {
   size?: 'sm' | 'md' | 'lg',
   text?: string,
   type?: 'inline' | null,
-  htmlType: 'submit' | 'reset' | 'button' | undefined,
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant: 'primary' | 'secondary' | 'link',
+  variant?: 'primary' | 'secondary' | 'link',
   wrapperClass?: string,
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -5,8 +5,7 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
-
-
+@import "./sass_partials/input_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -20,8 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus, :focus-within {
-    div.cal_icon_wrapper, input.text_input{
+  &:focus,
+  :focus-within {
+    div.cal_icon_wrapper,
+    input.date_picker_input {
       @include transition_default;
       border-color: $primary;
     }
@@ -33,18 +34,20 @@
   @import "./sass_partials/header_styles";
   @import "./sass_partials/overrides";
 
-  .text_input.flatpickr-input {
+  .date_picker_input.flatpickr-input {
     text-overflow: ellipsis;
     padding-right: $space_xl + 10 !important;
   }
+
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
     border: 1px solid $border_light;
   }
+
   // Hide Caret
   &:before,
   &:after {
     content: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -5,16 +5,16 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
-
 import Icon from '../pb_icon/_icon'
-import TextInput from '../pb_text_input/_text_input'
+import Caption from '../pb_caption/_caption'
+import Body from '../pb_body/_body'
 
 type DatePickerProps = {
   allowInput?: boolean,
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   defaultDate?: string,
   disableDate?: number[],
   disableInput?: boolean,
@@ -27,15 +27,15 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: object,
-  inputData?: object,
-  inputOnChange?: (arg: string) => void,
+  inputAria?: { [key: string]: string },
+  inputData?: { [key: string]: string },
+  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: ArrayLike<Node> | Node | string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -47,7 +47,7 @@ type DatePickerProps = {
   yearRange?: number[],
 } & GlobalProps
 
-const DatePicker = (props: DatePickerProps) => {
+const DatePicker = (props: DatePickerProps): React.ReactElement => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
@@ -67,9 +67,9 @@ const DatePicker = (props: DatePickerProps) => {
     hideIcon = false,
     hideLabel = false,
     id,
-    inLine = true,
-    inputAria,
-    inputData,
+    inLine = false,
+    inputAria = {},
+    inputData = {},
     inputOnChange,
     inputValue,
     label = 'Date Picker',
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
-    onChange = () => {},
+    onChange = () => { void 0 },
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -87,11 +87,14 @@ const DatePicker = (props: DatePickerProps) => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    yearRange = [ 1900, 2100 ],
+    yearRange = [1900, 2100],
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const inputAriaProps = buildAriaProps(inputAria)
+  const inputDataProps = buildDataProps(inputData)
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
     globalProps(props),
@@ -128,13 +131,13 @@ const DatePicker = (props: DatePickerProps) => {
 
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
-    if (dark){
+    if (dark) {
       base += ' dark'
     }
-    if (hideLabel){
+    if (hideLabel) {
       base += ' no_label_shift'
     }
-    if (error){
+    if (error) {
       base += ' error'
     }
     return base
@@ -142,57 +145,75 @@ const DatePicker = (props: DatePickerProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-      <div className="input_wrapper">
-        <TextInput
-            aria={inputAria}
+      <div
+        {...inputAriaProps}
+        {...inputDataProps}
+        className="input_wrapper">
+
+        <Caption
+          className="pb_date_picker_kit_label"
+          text={hideLabel ? null : label}
+        />
+
+        <div className="date_picker_input_wrapper">
+          <input
             autoComplete="off"
-            dark={dark}
-            data={inputData}
+            className="date_picker_input"
             disabled={disableInput}
-            error={error}
             id={pickerId}
-            label={hideLabel ? null : label}
             name={name}
             onChange={inputOnChange}
             placeholder={placeholder}
             value={inputValue}
-        />
+          />
+
+          {error && <Body
+            status="negative"
+            text={error}
+            variant={null}
+          />
+          }
+        </div>
 
         {!hideIcon &&
           <div
-          className={iconWrapperClass()}
-          id={`cal-icon-${pickerId}`}
-      >
-        <Icon
-            className="cal_icon"
-            icon="calendar-alt"
-        />
-      </div>
-        }
-          
-
-        { hideIcon && inLine ? <><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-icon-plus`}
-        >
-          <Icon
-            className="date-picker-plus-icon"
-            icon="plus" />
-        </div><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-angle-down`}
-        >
+            className={iconWrapperClass()}
+            id={`cal-icon-${pickerId}`}
+          >
             <Icon
-              className="angle_down_icon"
-              icon="angle-down" />
-          </div></> : null}
-          
+              className="cal_icon"
+              icon="calendar-alt"
+            />
+          </div>
+        }
 
+        {hideIcon && inLine ?
+          <div>
+            <div
+              className={iconWrapperClass()}
+              id={`${pickerId}-icon-plus`}
+            >
+              <Icon
+                className="date-picker-plus-icon"
+                icon="plus"
+              />
+            </div>
+            <div
+              className={iconWrapperClass()}
+              id={`${pickerId}-angle-down`}
+            >
+              <Icon
+                className="angle_down_icon"
+                icon="angle-down"
+              />
+            </div>
+          </div>
+          : null}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -112,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
+    allowInput,
     closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),

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

@@ -0,0 +1,68 @@
+@import "../../pb_textarea/textarea_mixin";
+
+[class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
+
+  .pb_date_picker_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+
+  .date_picker_input_wrapper {
+    display: block;
+
+    input::placeholder,
+    .date_picker_input .placeholder {
+      @include pb_body_light;
+    }
+
+    input,
+    .date_picker_input {
+      max-height: 45px;
+      @include pb_textarea_light;
+      overflow: hidden;
+    }
+
+    input:hover,
+    .date_picker_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:focus,
+    .date_picker_input:focus,
+    input:-webkit-autofill:focus,
+    .date_picker_input:-webkit-autofill:focus {
+      @include pb_textarea_focus;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+  }
+
+  &.error {
+    .date_picker_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      input,
+      .date_picker_input {
+        border-color: $error;
+      }
+    }
+  }
+
+  &.inline {
+    .date_picker_input_wrapper input::placeholder,
+    .date_picker_input_wrapper .date_picker_input .placeholder {
+      opacity: 1;
+    }
+
+    &:not(:hover) {
+      .date_picker_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+
+type LoadingInlineProps = {
+  align?: "left" | "center" | "right",
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const LoadingInline = (props: LoadingInlineProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss(`pb_loading_inline_kit_${align}`),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      <Body color="light">
+        <Icon
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
+
+export default LoadingInline

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import LoadingInline from './_loading_inline'
+
+const testId = "loadingInline"
+
+test('should render custom class and data', () => {
+    render(
+        <LoadingInline
+            className='custom-class'
+            data={{ testid: testId }}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render id', () => {
+    render(
+        <LoadingInline
+            data={{ testid: testId }}
+            id={testId}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should render aria-label', () => {
+    render(
+        <LoadingInline
+            aria={{ label: testId }}
+            data={{ testid: testId }}
+        />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -1,8 +1,120 @@
 @import "../tokens/typography";
-@import "../tokens/colors"; 
+@import "../tokens/colors";
 @import "../tokens/shadows";
+@import "../tokens/border_radius";
 
-.pb_map {
+[class*="pb_map"] {
   font-family: $font_family_base !important;
 
+  .maplibregl-ctrl-attrib-button {
+    &:focus {
+      box-shadow: unset;
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 1px $primary_action;
+    }
+    &:hover {
+      box-shadow: $shadow_deep;
+    }
+  }
+  .custom-nav-control {
+    position: absolute;
+    right: $space_xs + 2;
+    top: $space_xs + 2;
+    z-index: 2;
+
+    .custom-nav-control-zoom {
+      border-radius: $border_radius_md;
+      box-shadow: $shadow_deep;
+      background: $card_light;
+      .map-zoom-in-button {
+        border-bottom-left-radius: unset;
+        border-bottom-right-radius: unset;
+        border-bottom: transparent;
+      }
+      .map-zoom-out-button {
+        border-top-left-radius: unset;
+        border-top-right-radius: unset;
+      }
+    }
+
+    .map-zoom-in-button,
+    .map-zoom-out-button,
+    .map-flyto-button {
+      border: solid 1px $border_light;
+      cursor: pointer;
+      padding: $space_xs + 2;
+      text-align: center;
+      color: $text_lt_light;
+      background-color: $card_light;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        width: $space_xs + 4;
+        height: $space_sm;
+        display: flex;
+      }
+
+      &:hover {
+        background-color: darken($bg_light, 2%);
+      }
+
+      &:focus-visible {
+        border: solid 1px $primary_action;
+        box-shadow: unset;
+      }
+    }
+
+    .map-flyto-button {
+      border-radius: $border_radius_md;
+      margin-top: $space_xs;
+      box-shadow: $shadow_deep;
+      background-color: $card_light;
+    }
+  }
+
+  .maplibregl-popup-content {
+    padding: $space_sm;
+    background-color: $card_light;
+    box-shadow: $shadow_deeper;
+  }
+
+  &.dark {
+    .maplibregl-canvas {
+      filter: invert(100%) brightness(175%) contrast(80%) sepia(50%) saturate(2)
+        hue-rotate(185deg);
+    }
+
+    .pb_section_separator_kit_card_horizontal::after {
+      background: $border_dark;
+    }
+    .custom-nav-control-zoom {
+      border: solid 1px #0a0527;
+      background: $bg_dark;
+    }
+
+    .maplibregl-popup-content {
+      background-color: $bg_dark;
+      color: $text_dk_default;
+    }
+
+    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
+    .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+      border-top-color: $bg_dark;
+    }
+    .map-zoom-in-button,
+    .map-zoom-out-button,
+    .map-flyto-button {
+      color: $text_dk_default;
+      background-color: $bg_dark;
+      border-color: $border_dark;
+
+      &:hover {
+        background-color: #221e3d;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
+import Flex  from "../pb_flex/_flex"
+import Icon from '../pb_icon/_icon'
+import Button from '../pb_button/_button'
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -10,7 +13,12 @@ type MapProps = {
   className?: string,
   data?: { [key: string]: string },
   id?: string,
-}
+  zoomBtns?: boolean,
+  flyTo?: boolean, 
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
+} & GlobalProps
 
 const Map = (props: MapProps) => {
   const {
@@ -19,6 +27,11 @@ const Map = (props: MapProps) => {
   className,
   data = {},
   id,
+  zoomBtns = false,
+  flyTo = false,
+  zoomInClick,
+  zoomOutClick,
+  flyToClick
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -32,6 +45,33 @@ const Map = (props: MapProps) => {
         className={classes}
         id={id}
     >
+      {
+        zoomBtns ? (
+          <Flex className="custom-nav-control" orientation='column'>
+            <div className="custom-nav-control-zoom">
+              <Button className='map-zoom-in-button'
+                  onClick={zoomInClick}
+              >
+                    <Icon icon="plus"/>
+              </Button>
+              <Button className='map-zoom-out-button'
+                 onClick={zoomOutClick}
+              >
+                    <Icon icon="minus"/>
+              </Button>
+            </div>
+            {
+              flyTo ? (
+                <Button className='map-flyto-button'
+                  onClick={flyToClick}
+                >
+                      <Icon icon="eye"/>
+                </Button>
+              ) : null
+            }
+         </Flex>
+         ) : null
+      }
       {children}
     </div>
   )