playbook_ui 6.1.0.pre.alpha2 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -7,19 +7,19 @@ import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TextareaProps = {
-  className?: String,
-  children?: Array<React.ReactChild>,
-  data?: String,
-  error?: String,
-  id?: String,
-  object?: String,
-  method?: String,
-  label?: String,
-  placeholder?: String,
-  value?: String,
-  name?: String,
-  rows?: Number,
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  data?: string,
+  error?: string,
+  id?: string,
+  object?: string,
+  method?: string,
+  label?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  rows?: number,
+  dark?: boolean,
   resize: 'none' | 'both' | 'horizontal' | 'vertical',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -11,11 +11,11 @@ import { Body, Icon, Title  } from '../'
 
 type TimeProps = {
   align?: 'left" | "center' | 'right',
-  className?: String | Array<String>,
-  data?: String,
-  date: String,
-  id?: String,
-  showTimezone?: Boolean,
+  className?: string | array<string>,
+  data?: string,
+  date: string,
+  id?: string,
+  showTimezone?: boolean,
   size?: 'lg' | 'sm' | 'xs',
 }
 

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -7,16 +7,16 @@ import DateTime from '../pb_kit/dateTime.js'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimeRangeInlineProps = {
-  className?: String,
-  id?: String,
-  data?: String,
+  className?: string,
+  id?: string,
+  data?: string,
   alignment?: "left" | "center" | "vertical",
   size?: "sm" | "xs",
-  dark?: Boolean,
-  icon?: Boolean,
-  timezone?: Boolean,
-  startTime: String,
-  endTime: String,
+  dark?: boolean,
+  icon?: boolean,
+  timezone?: boolean,
+  startTime: string,
+  endTime: string,
 }
 
 const timezoneString = (dateValue) => {

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -14,11 +14,11 @@ const Components = {
 }
 
 type TimeStackedProps = {
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
   align?: "left" | "center" | "right",
   tag?: "body" | "caption",
 }

data/app/pb_kits/playbook/pb_timeline/_item.jsx

@@ -7,8 +7,8 @@ import { DateStacked, IconCircle } from '..'
 
 type ItemProps = {
   className?: string,
-  children?: Array<React.Node>,
-  date?: Date,
+  children?: array<React.Node>,
+  date?: date,
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx

@@ -7,12 +7,12 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type TimelineProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  data?: String,
-  id?: String,
-  orientation?: String,
-  showDate?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  data?: string,
+  id?: string,
+  orientation?: string,
+  showDate?: boolean,
 }
 
 const Timeline = ({

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -10,10 +10,10 @@ import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
-  id?: String,
+  id?: string,
   data?: object,
-  className?: String,
-  text?: String,
+  className?: string,
+  text?: string,
 }
 
 const Timestamp = (props: TimestampProps) => {

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
-  text?: String,
+  text?: string,
   variant?: null | "primary",
 }
 

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -11,11 +11,11 @@ import { globalProps } from '../utilities/globalProps.js'
 type TitleCountProps = {
   align: "center" | "left" | "right",
   aria?: object,
-  className?: String,
+  className?: string,
   count?: Numeric,
   data?: object,
-  id?: String,
-  title?: String,
+  id?: string,
+  title?: string,
   size?: "lg" | "sm",
 };
 

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: String,
+  className?: string,
   data?: object,
-  detail: String,
-  id?: String,
-  title: String,
+  detail: string,
+  id?: string,
+  title: string,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -14,15 +14,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type Props = {
   aria?: object,
-  checked?: Boolean,
+  checked?: boolean,
   children?: React.Node,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  name?: String,
+  id?: string,
+  name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
-  value?: String,
+  value?: string,
 }
 
 const Toggle = ({

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -6,16 +6,16 @@ import { Avatar, Body, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type UserProps = {
-  className?: String,
-  id?: String,
-  name: String,
-  territory?: String,
-  title?: String,
+  className?: string,
+  id?: string,
+  name: string,
+  territory?: string,
+  title?: string,
   size?: "sm" | "md" | "lg",
   align?: "left" | "center" | "right",
   orientation?: "horiztonal" | "vertical",
-  avatar?: Boolean,
-  avatarUrl?: String,
+  avatar?: boolean,
+  avatarUrl?: string,
 }
 
 const User = (props: UserProps) => {

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -4,8 +4,8 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type UserBadgeProps = {
-  className?: String,
-  id?: String,
+  className?: string,
+  id?: string,
   badge?: "million-dollar" | "veteran",
   size?: "sm" | "md" | "lg",
 }

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -11,12 +11,12 @@ import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String,
-  dark?: Boolean,
-  date: Date,
+  className?: string,
+  dark?: boolean,
+  date: date,
   variant?: "day_only" | "month_day" | "expanded",
-  compact?: Boolean,
-  id?: String,
+  compact?: boolean,
+  id?: string,
 }
 
 const getDayOfWeek = (date, compact) => {

data/app/pb_kits/playbook/react_rails_kits.js

@@ -0,0 +1,5 @@
+// React-Rendered Rails Kit Exports =====
+export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
+export { default as Legend } from './pb_legend/_legend.jsx'
+export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-//=====================================
-// Base colors should not be documented.
-// Only document color use.
+/*=====================================
+Base colors should not be documented.
+Only document color use.
 
-// Colors -----------------------------
+Colors -----------------------------*/
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-// Specialty Gradient -----------------
+/* Specialty Gradient -----------------*/
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-// Interface colors -------------------
+/* Interface colors -------------------*/
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-// Main colors ------------------------
+/* Main colors ------------------------*/
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-//=====================================
+/*=====================================
 
-// Background colors ------------------
+Background colors ------------------*/
 $bg_light:            $silver;
 $bg_dark:             #172257;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-// Card colors ------------------
+/* Card colors ------------------*/
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-// Active colors ----------------------
+/* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff; 
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-// Hover colors -----------------------
+/* Hover colors -----------------------*/
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-// Focus colors -----------------------
+/* Focus colors -----------------------*/
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-// Border colors ----------------------
+/* Border colors ----------------------*/
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-// Shadow colors ----------------------
+/* Shadow colors ----------------------*/
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-// Text colors ------------------------
+/* Text colors ------------------------*/
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-// Data colors ------------------------
+/* Data colors ------------------------*/
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-// Status colors ----------------------
+/* Status colors ----------------------*/
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-// Link colors ------------------------
+/* Link colors ------------------------*/
 $primary_action:      $primary;
 
-// Product colors ---------------------
+/* Product colors ---------------------*/
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-// Category colors ---------------------
+/* Category colors ---------------------*/
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,7 +252,6 @@ $transparent: transparent;
 }
 
 :export {
-
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
-// CLEAN UP AND REMOVE
+/* CLEAN UP AND REMOVE */
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
 
 
-// Headings
+/* Headings */
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -38,7 +38,7 @@ $heading_4: $font_base;
 
 
 
-// Letter Spacing
+/* Letter Spacing */
 $lspace_tightest:         _.1em;
 $lspace_tighter:          _.07em;
 $lspace_tight:            _.03em;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
 
 
 
-// Standard Font Weights
+/* Standard Font Weights */
 $bold:          600;
 $regular:       400;
 
-// Non_Standard Font Weights
+/* Non_Standard Font Weights */
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;