playbook_ui 10.26.0.pre.alpha.sticky1 → 10.27.0.pre.datepicker1

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx

@@ -35,12 +35,14 @@ const Icon = ({ collapsed }: IconProps) => {
 const CollapsibleMain = ({
   children,
   className,
+  cursor = 'pointer',
   padding = 'md',
+
   ...props
 }: CollapsibleMainProps) => {
   const context = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
-  const mainSpacing = globalProps(props, { padding })
+  const mainSpacing = globalProps(props, { cursor, padding })
 
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>
@@ -50,7 +52,7 @@ const CollapsibleMain = ({
             vertical="center"
         >
           <FlexItem>{children}</FlexItem>
-          <FlexItem><Icon collapsed={context.collapsed} /></FlexItem>
+          <FlexItem><Icon collapsed={context.collapsed}/></FlexItem>
         </Flex>
       </div>
     </div>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
 
-    <%= pb_rails("flex", props: {vertical: "center", spacing: "between"}) do %>
+    <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= content.presence %>
       <% end %>

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -209,6 +209,43 @@ const highchartsDarkTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -209,6 +209,43 @@ const highchartsTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

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

@@ -40,7 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  plugins?: Boolean,
+  plugins?: "ms" | "ws",
   type?: String,
   yearRange?: Array,
 }
@@ -74,7 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
-    plugins = false,
+    plugins = "",
     yearRange = [ 1900, 2100 ],
   } = props
 

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

@@ -5,6 +5,7 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 
+
 [class^=pb_date_picker_kit] {
   .input_wrapper {
     margin-bottom: $space_sm;

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -41,8 +41,9 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
-      prop :plugins, type: Playbook::Props::Boolean,
-                     default: false
+      prop :plugins, type: Playbook::Props::Enum,
+                     values: %w[ws ms],
+                     default: []
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,

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

@@ -1,5 +1,6 @@
 import flatpickr from 'flatpickr'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
+import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 
 const datePickerHelper = (config) => {
   const {
@@ -52,9 +53,15 @@ const datePickerHelper = (config) => {
     }
   }
 
-  const setMonthAndYearPlugin = () => (
-    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
-  )
+  const setPlugin = () => {
+    let p 
+    if (plugins === "ms") {
+     p = [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] 
+    } else if ( plugins === "ws") {
+      p = [ weekSelect({shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' })]
+    } else p = []
+    return p
+  }
 
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
@@ -98,12 +105,12 @@ const datePickerHelper = (config) => {
       window.removeEventListener('resize', calendarResizer)
     }],
     onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates)
+      onChange(dateStr, selectedDates) 
     }],
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setMonthAndYearPlugin(),
+    plugins: setPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -162,8 +169,10 @@ const datePickerHelper = (config) => {
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
-  }
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+  // if (picker.weekElements[0].parentElement){
+  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

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

@@ -1 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", plugins: "ws" }) %>

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

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
   label: "Date Picker",
-  plugins: true,
   picker_id: "disabled_date"
+  plugins: "ms",
 }) %>

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

@@ -8,7 +8,7 @@ const DatePickerMonthAndYear = (props) => {
       <DatePicker
           label="Date Picker"
           pickerId="disabled-date"
-          plugins
+          plugins="ms"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md

@@ -1 +1 @@
-By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.
+By default month&year plugin is disabled. To activate it set `plugins` prop to `ms`.

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

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  plugins: "ws",
+  picker_id: "week-date-picker"
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerWeek = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="week-date-picker"
+          plugins="ws"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerWeek

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md

@@ -0,0 +1 @@
+By default month&year plugin is disabled. To activate it set `plugins` prop to `ws`.

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

@@ -17,6 +17,7 @@ examples:
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
 
 
   react:
@@ -36,3 +37,4 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week

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

@@ -14,3 +14,4 @@ export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
 export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
+export { default as DatePickerWeek } from './_date_picker_week.jsx'

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

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}

data/app/pb_kits/playbook/pb_flex/{_flex.jsx → _flex.tsx}

@@ -1,11 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+
 type FlexProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactChild[] | React.ReactNode,
   className?: string,
   data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
@@ -22,7 +21,7 @@ type FlexProps = {
   columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
-}
+} & GlobalProps
 
 const Flex = (props: FlexProps) => {
   const {
@@ -43,6 +42,7 @@ const Flex = (props: FlexProps) => {
     wrap = false,
     alignSelf = 'none',
   } = props
+  
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -1,8 +1,8 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
-import Icon from '../pb_icon/_icon.jsx'
+import Title from '../pb_title/_title'
+import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_highlight/_highlight.tsx

@@ -8,7 +8,7 @@ type HighlightProps = {
   className?: string,
   data?: {[key: string]: string},
   id?: string,
-  children?: React.ReactChild[] | string,
+  children?: React.ReactChild[] | React.ReactChild | string,
   text?: string,
   highlightedText?: string[],
 } & GlobalProps

data/app/pb_kits/playbook/pb_icon/{_icon.jsx → _icon.tsx}

@@ -1,16 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type IconProps = {
-  aria?: object,
-  border?: boolean,
+  aria?: {[key: string]: string},
+  border?: string,
   className?: string,
-  customIcon?: SVGElement,
-  data?: object,
+  customIcon?: {[key: string] :SVGElement},
+  data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -34,12 +32,13 @@ type IconProps = {
     | "9x"
     | "10x",
   spin?: boolean,
-}
+} & GlobalProps
 
 const flipMap = {
   horizontal: 'fa-flip-horizontal',
   vertical: 'fa-flip-vertical',
   both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
 const Icon = (props: IconProps) => {
@@ -50,7 +49,7 @@ const Icon = (props: IconProps) => {
     customIcon,
     data = {},
     fixedWidth = true,
-    flip = false,
+    flip = "none",
     icon,
     id,
     inverse = false,
@@ -90,31 +89,42 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
 
   // Add a conditional here to show only the SVG if custom
+  const displaySVG = (customIcon: any) => {
+    if (customIcon)
+      return (
+        <>
+          {
+            React.cloneElement(customIcon, {
+              ...dataProps,
+              className: classes,
+              id,
+            })
+          }
+        </>
+      )
+    else
+      return (
+        <>
+          <i
+              {...dataProps}
+              className={classes}
+              id={id}
+          />
+          <span
+              {...ariaProps}
+              hidden
+          />
+        </>
+      )
+  }
+
   return (
     <>
-      <If condition={customIcon}>
-        {
-          React.cloneElement(customIcon, {
-            ...dataProps,
-            className: classes,
-            id,
-          })
-        }
-        <Else />
-        <i
-            {...dataProps}
-            className={classes}
-            id={id}
-        />
-        <span
-            {...ariaProps}
-            hidden
-        />
-      </If>
+      {displaySVG(customIcon)}
     </>
   )
 }

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -16,7 +16,7 @@ type ImageType = {
   url?: string,
 } & GlobalProps
 
-const Image = (props: ImageType) => {
+const Image = (props: ImageType): React.ReactElement => {
   const {
     alt = '',
     aria = {},

data/app/pb_kits/playbook/pb_pill/{_pill.jsx → _pill.tsx}

@@ -1,21 +1,19 @@
-/* @flow */
-
 import React from 'react'
 
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type PillProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
   textTransform?: "none" | "lowercase"
-}
+} & GlobalProps
 
 const Pill = (props: PillProps) => {
   const {
@@ -49,4 +47,4 @@ const Pill = (props: PillProps) => {
   )
 }
 
-export default Pill
+export default Pill

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Pill from '../_pill.jsx'
+import Pill from '../_pill'
 
 const PillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Pill from '../_pill.jsx'
+import Pill from '../_pill'
 
 const PillVariants = (props) => {
   return (