playbook_ui 13.34.1 → 14.0.0.pre.alpha.PLAY14733479

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_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughMultiBeacon = (props) => {
   const [stateA, setStateA] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoBeacon = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoOverlay = (props) => {
   const [noOverlay, setNoOverlayState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import { ensureAccessible, render, renderKit, screen } from '../utilities/test-utils'
 import React from 'react'
-import { Walkthrough } from '../'
+import { Walkthrough } from 'playbook-ui'
 
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -8,13 +6,14 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 import DateTime from '../pb_kit/dateTime';
+import { GenericObject } from '../types'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
   aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -39,7 +38,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/tokens/exports/{_colors.scss → _colors.module.scss}

@@ -3,7 +3,7 @@
 :export {
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
-      #{$name}: $color;
+      #{"" + $name}: $color;
     }
   }
   @include export-colors($product_colors);

data/app/pb_kits/playbook/tokens/exports/exports.d.ts

@@ -1 +1,2 @@
+declare module "trix";
 declare module '*.scss';

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -1,12 +1,12 @@
-@import "../tokens/exports/scale";
+@import "../tokens/exports/scale.module";
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background_#{$name}:hover {
+      .hover_background_#{"" + $name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color_#{$name}:hover {
+      .hover_color_#{"" + $name}:hover {
         color: $color !important;
         transition: color $transition-speed ease;
       }
@@ -15,7 +15,7 @@
   
   @mixin hover-shadow-classes($shadows-list) {
     @each $name, $shadow in $shadows-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         box-shadow: $shadow;
         transition: box-shadow $transition-speed ease;
       }
@@ -24,7 +24,7 @@
   
   @mixin hover-scale-classes($scales-list) {
     @each $name, $scale in $scales-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         transform: $scale;
         transition: transform $transition-speed ease;
       }

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/line_height";
+@import "../tokens/exports/line_height.module";
 
 @mixin line-height-classes($line-height-list) {
   @each $name, $line-height in $line-height-list {

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -19,55 +19,66 @@
 }
 
 .z_index_1 {
-  z-index: 100;
+  z-index: $z_1 !important;
 }
 
 .z_index_2 {
-  z-index: 200;
+  z-index: $z_2 !important;
 }
 
 .z_index_3 {
-  z-index: 300;
+  z-index: $z_3 !important;
 }
 
 .z_index_4 {
-  z-index: 400;
+  z-index: $z_4 !important;
 }
 
 .z_index_5 {
-  z-index: 500;
+  z-index: $z_5 !important;
 }
 
 .z_index_6 {
-  z-index: 600;
+  z-index: $z_6 !important;
 }
 
 .z_index_7 {
-  z-index: 700;
+  z-index: $z_7 !important;
 }
 
 .z_index_8 {
-  z-index: 800;
+  z-index: $z_8 !important;
 }
 
 .z_index_9 {
-  z-index: 900;
+  z-index: $z_9 !important;
 }
 
 .z_index_10 {
-  z-index: 1000;
-}
-
-$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+  z-index: $z_10 !important;
+}
+
+$zIndex_values: (
+  1: $z_1,
+  2: $z_2,
+  3: $z_3,
+  4: $z_4,
+  5: $z_5,
+  6: $z_6,
+  7: $z_7,
+  8: $z_8,
+  9: $z_9,
+  10: $z_10
+);
 
 @each $size, $size_value in $breakpoints_grid {
-  @each $zIndex_value in $zIndex_values {
+  @each $zIndex_value, $zIndex_variable in $zIndex_values {
     $min_size: map-get($size_value, "min");
     $max_size: map-get($size_value, "max");
 
     .z_index_#{$size}_#{$zIndex_value} {
       @include break_on($min_size, $max_size) {
-        z-index: #{$zIndex_value * 100} !important;
+        z-index: $zIndex_variable !important;
       }
     }
   }

data/app/pb_kits/playbook/utilities/_shadow.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/shadows";
+@import "../tokens/exports/shadows.module";
 
 @mixin shadow-classes($shadows-list) {
   @each $name, $shadow in $shadows-list {

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -0,0 +1,50 @@
+export default [
+  "left",
+  "bottom",
+  "right",
+  "top",
+  "hover",
+  "zIndex",
+  "verticalAlign",
+  "truncate",
+  "textAlign",
+  "shadow",
+  "position",
+  "paddingRight",
+  "paddingLeft",
+  "paddingTop",
+  "paddingBottom",
+  "paddingX",
+  "paddingY",
+  "padding",
+  "break",
+  "default",
+  "overflowX",
+  "overflowY",
+  "overflow",
+  "order",
+  "numberSpacing",
+  "maxWidth",
+  "marginRight",
+  "marginLeft",
+  "marginTop",
+  "marginBottom",
+  "marginX",
+  "marginY",
+  "margin",
+  "lineHeight",
+  "justifySelf",
+  "justifyContent",
+  "flexWrap",
+  "flexShrink",
+  "flexGrow",
+  "flexDirection",
+  "flex",
+  "display",
+  "dark",
+  "cursor",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "alignContent"
+];

data/app/pb_kits/playbook/utilities/text.ts

@@ -1,4 +1,6 @@
-import { filter, isEmpty } from 'lodash'
+import { filter } from 'lodash'
+
+const isEmpty = (value: string | unknown): boolean => !value || value == ''
 
 const titleizedWord = (word: string): string => (
   word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()