playbook_ui 12.4.0.pre.alpha.map1 → 12.5.0.pre.alpha.datepicker1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfb56ccfe4d074f937f3852aca075561d3c1bfcc5d17dba3387cd7c83d65e2d3
-  data.tar.gz: 782e95a4369e896264d23ed06aa3abd7b51ac4998cf88a0b196964ccdf95c7b5
+  metadata.gz: 327c132ebc8c159f50f33488ecef9d5cdaa9332dedfb1d100557c5c2e1f08aa9
+  data.tar.gz: 40b8ae76091ff0e087d4b3b2560d6aab6db9adde5686c65927cc863af69e78d0
 SHA512:
-  metadata.gz: e568396ef02503818d31e36846f0bb92c69e0857dd7a7c10b4c8d7de0187cf5adf29c87092f4fc29804efaaa5816e0d08198699843bb6755bedcff83220dd205
-  data.tar.gz: 746452d8c6cffee0eec29e9864283b81d6fc63df8218eee2f5ed5c320916026ca63076f7add17ef57b51a1a0e16dbf600d1ae2dfa5e393e2e4c256c675304bc0
+  metadata.gz: 622a1cc9d58859cbc96dbd5682d928f910f1dd372591cbc8b1638edd1abf83b4489d32aa6cefa53766f8607f0048b0c6bf1d9f881f0f50e560c826ba49962acb
+  data.tar.gz: ad04ed9a79aef5146285899b45f4cc6e07b3a760ec52b7e4d31db2f3c3048f55d84e7fff7a2a592a53fc88aec7c81bc111711703871d054acbc8186a98920c81

data/app/pb_kits/playbook/pb_awesome/_awesome.scss

@@ -0,0 +1,3 @@
+.pb_awesome {
+
+}

data/app/pb_kits/playbook/pb_awesome/_awesome.tsx

@@ -0,0 +1,41 @@
+
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type AwesomeProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Awesome = (props: AwesomeProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_awesome'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Awesome

data/app/pb_kits/playbook/pb_awesome/awesome.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <span>AWESOME CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_awesome/awesome.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAwesome
+    class Awesome < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_awesome/awesome.test.jsx

@@ -0,0 +1,17 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import { Awesome } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Awesome , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("awesome") %>

data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Awesome from '../_Awesome'
+
+const AwesomeDefault = (props) => (
+  <div>
+    <Awesome
+      {...props}
+    />
+  </div>
+)
+
+export default AwesomeDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - awesome_default: Default
+  
+  
+  react:
+  - awesome_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as AwesomeDefault } from './_awesome_default.jsx'

data/app/pb_kits/playbook/pb_cool/_cool.scss

@@ -0,0 +1,3 @@
+.pb_cool {
+
+}

data/app/pb_kits/playbook/pb_cool/_cool.tsx

@@ -0,0 +1,41 @@
+
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type CoolProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Cool = (props: CoolProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_cool'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Cool

data/app/pb_kits/playbook/pb_cool/cool.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <span>COOL CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_cool/cool.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCool
+    class Cool < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_cool/cool.test.jsx

@@ -0,0 +1,17 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import { Cool } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Cool , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_cool/docs/_cool_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("cool") %>

data/app/pb_kits/playbook/pb_cool/docs/_cool_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Cool from '../_Cool'
+
+const CoolDefault = (props) => (
+  <div>
+    <Cool
+      {...props}
+    />
+  </div>
+)
+
+export default CoolDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - cool_default: Default
+  
+  
+  react:
+  - cool_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as CoolDefault } from './_cool_default.jsx'

data/app/pb_kits/playbook/pb_coolness/_coolness.scss

@@ -0,0 +1,3 @@
+.pb_coolness {
+
+}

data/app/pb_kits/playbook/pb_coolness/_coolness.tsx

@@ -0,0 +1,41 @@
+
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type CoolnessProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Coolness = (props: CoolnessProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_coolness'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Coolness

data/app/pb_kits/playbook/pb_coolness/coolness.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <span>COOLNESS CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_coolness/coolness.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCoolness
+    class Coolness < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_coolness/coolness.test.jsx

@@ -0,0 +1,17 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import { Coolness } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Coolness , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("coolness") %>

data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Coolness from '../_Coolness'
+
+const CoolnessDefault = (props) => (
+  <div>
+    <Coolness
+      {...props}
+    />
+  </div>
+)
+
+export default CoolnessDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - coolness_default: Default
+  
+  
+  react:
+  - coolness_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as CoolnessDefault } from './_coolness_default.jsx'

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,11 +47,11 @@ type DatePickerProps = {
   yearRange?: number[],
 } & GlobalProps
 
-const DatePicker = (props: DatePickerProps) => {
+const DatePicker = (props: DatePickerProps): React.ReactElement => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
-    allowInput = false,
+    allowInput = true,
     aria = {},
     className,
     dark = false,
@@ -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.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbDatePicker
     class DatePicker < Playbook::KitBase
       prop :allow_input, type: Playbook::Props::Boolean,
-                         default: false
+                         default: true
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,

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(),