playbook_ui 13.31.0 → 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +26,7 @@ type WalkthroughProps = {
   disableOverlay?: boolean,
   disableOverlayClose?: boolean,
   disableScrolling?: boolean,
-  floaterProps?: object,
+  floaterProps?: Record<string, unknown>,
   hideBackButton?: boolean,
   hideCloseButton?: boolean,
   showProgress?: boolean,
@@ -58,89 +60,92 @@ type TooltipProps = {
     disableBeacon?: boolean,
   },
   skip?: boolean,
-  backProps?: object,
-  closeProps?: object,
-  primaryProps?: object,
-  skipProps?: object,
-  tooltipProps?: object,
+  backProps?: Record<string, unknown>,
+  closeProps?: Record<string, unknown>,
+  primaryProps?: Record<string, unknown>,
+  skipProps?: Record<string, unknown>,
+  tooltipProps?: Record<string, unknown>,
 }
 
+// eslint-disable-next-line react/display-name
 const Tooltip = React.forwardRef((props: TooltipProps) => (
-  <div
+<div
     className="pb_card_kit_border_none p_none"
     {...props.tooltipProps}
+>
+  {props.step.title && <div>
+  <Flex
+      align="center"
+      justify="between"
+      padding="xs"
   >
-    {props.step.title && <div>
-      <Flex
-        align="center"
-        justify="between"
-        padding="xs"
-      >
-        <Title
+      <Title
           paddingLeft="xs"
           size={4}
-        >
-          {props.step.title}
-        </Title>
-        {props.skip && (<Button
+      >
+      {props.step.title}
+      </Title>
+      {props.skip && (
+      <Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-        />)}
-        <Button
+      />
+      )}
+      <Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-        />
-      </Flex>
-      <SectionSeparator />
-    </div>}
+      />
+  </Flex>
+  <SectionSeparator />
+  </div>}
 
-    <Flex padding="sm">{props.step.content}</Flex>
-    <SectionSeparator />
-    <Flex
+  <Flex padding="sm">{props.step.content}</Flex>
+  <SectionSeparator />
+  <Flex
       justify={props.index == 0 ? 'end' : 'between'}
       padding="xs"
-    >
+  >
 
-      {props.index > 0 && (
-        <Button
+  {props.index > 0 && (
+      <Button
           {...props.backProps}
           id="back"
           text="Back"
-        />
-      )}
+      />
+  )}
 
-      {props.continuous && !props.isLastStep &&
-        <Button
+  {props.continuous && !props.isLastStep &&
+      <Button
           {...props.primaryProps}
           id="next"
           text="Next"
-        />
-      }
+      />
+  }
 
-      {!props.continuous &&
-        <Button
+  {!props.continuous &&
+      <Button
           {...props.closeProps}
           id="close"
           text="Close"
-        />
-      }
+      />
+  }
 
-      {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
-        <Button
+  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+      <Button
           {...props.closeProps}
           id="close"
           text="Close"
-        />
-      }
-    </Flex>
-  </div>
+      />
+  }
+  </Flex>
+</div>
 )) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
 
-const Walkthrough = (props: WalkthroughProps) => {
+const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
   const {
     aria = {},
     callback,
@@ -170,24 +175,24 @@ const Walkthrough = (props: WalkthroughProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       <Joyride
-        callback={callback}
-        continuous={continuous}
-        disableOverlay={disableOverlay}
-        disableScrolling
-        floaterProps={floaterProps}
-        run={run}
-        showSkipButton={showSkipButton}
-        steps={steps}
-        styles={styles}
-        tooltipComponent={Tooltip}
-        {...props}
+          callback={callback}
+          continuous={continuous}
+          disableOverlay={disableOverlay}
+          disableScrolling
+          floaterProps={floaterProps}
+          run={run}
+          showSkipButton={showSkipButton}
+          steps={steps}
+          styles={styles}
+          tooltipComponent={Tooltip}
+          {...props}
       />
     </div>
 

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

@@ -14,7 +14,7 @@ type WeekdayStackedProps = {
   aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: Record<string, unknown>,
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -39,7 +39,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
   }
 }
 
-const WeekdayStacked = (props: WeekdayStackedProps) => {
+const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/playbook-rails.js

@@ -39,6 +39,12 @@ PbDropdown.start()
 import PbAdvancedTable from './pb_advanced_table'
 PbAdvancedTable.start()
 
+import PbNav from './pb_nav'
+PbNav.start()
+
+import PbStarRating from './pb_star_rating'
+PbStarRating.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

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

@@ -5,10 +5,11 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
+    $lineHeight: $lh_tighter,
+    $letterSpacing: $lspace_tight
 ){
   font-size: $fontSize;
-  letter-spacing: $lspace_tight;
+  letter-spacing: $letterSpacing;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -29,8 +30,7 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em;
+  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
 @mixin pb_title_dark {

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

@@ -1,11 +1,11 @@
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       28px !default;
+$font_larger:       27px !default;
 $font_large:        20px !default;
-$font_base:         16px !default;
+$font_base:         15.5px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px !default;
-$heading_2: 34px !default;
+$heading_1: 44px !default;
+$heading_2: 32px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           0 !default;
+$lspace_normal:           .003em !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          600 !default;
+$bold:          700 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
+$extrabold:     700 !default;
+$boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       100 !default;
+$lighter:       300 !default;