RubyGems - playbook_ui - Versions diffs - 13.34.0 → 13.34.1.pre.alpha.PLAY14633399 - Mend

playbook_ui 13.34.0 → 13.34.1.pre.alpha.PLAY14633399

Files changed (409) hide show

data/app/pb_kits/playbook/pb_textarea/_textarea.scss CHANGED Viewed

@@ -60,7 +60,7 @@
   &.error {
     [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+      margin-top: calc($space_xs / 2);
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx CHANGED Viewed

@@ -52,14 +52,15 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   placeholder,
   required,
   rows = 4,
   value,
   ...props
-}: TextareaProps, ref: any) => {
-  ref = useRef<HTMLTextAreaElement>(null)
+}: TextareaProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -71,58 +72,75 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
   const noCount = typeof characterCount !== 'undefined'
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
-  }
   const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <Caption text={label} />
       {children || (
         <textarea
-          className="pb_textarea_kit"
-          disabled={disabled}
-          name={name}
-          onChange={onChange}
-          placeholder={placeholder}
-          ref={ref}
-          required={required}
-          rows={rows}
-          value={value}
-          {...props}
+            className="pb_textarea_kit"
+            disabled={disabled}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            ref={ref}
+            required={required}
+            rows={rows}
+            value={value}
+            {...props}
         />
       )}
       {error ? (
         <>
           {characterCount ? (
-            <Flex spacing="between" vertical="center">
+            <Flex
+                spacing="between"
+                vertical="center"
+            >
               <FlexItem>
-                <Body margin="none" status="negative" text={error} />
+                <Body
+                    margin="none"
+                    status="negative"
+                    text={error}
+                />
               </FlexItem>
               <FlexItem>
-                <Caption margin="none" size="xs" text={characterCounter()} />
+                <Caption
+                    margin="none"
+                    size="xs"
+                    text={characterCounter()}
+                />
               </FlexItem>
             </Flex>
           ) : (
-            <Body status="negative" text={error} />
+            <Body
+                status="negative"
+                text={error}
+            />
           )}
         </>
       ) : (
          noCount && (
-          <Caption margin="none" size="xs" text={characterCounter()} />
+          <Caption
+              margin="none"
+              size="xs"
+              text={characterCounter()}
+          />
         )
       )}
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from '../..'
+import { Textarea } from 'playbook-ui'
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_textarea/{index.tsx → index.ts} RENAMED Viewed

@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
-  static get selector() {
+  static get selector(): string {
     return '.resize_auto textarea'
   }
-  onInput() {
+  onInput(): void {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
-  connect() {
+  connect(): void {
     this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
     this.element.addEventListener('input', this.onInput, false)
   }

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ type TimeProps = {
   unstyled?: boolean;
 } & GlobalProps
-const Time = (props: TimeProps) => {
+const Time = (props: TimeProps): React.ReactElement => {
   const {
     align,
     className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps) => {
   return (
     <div
-      {...htmlProps}
-      className={classes}
+        {...htmlProps}
+        className={classes}
     >
       {showIcon && (
         unstyled

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss CHANGED Viewed

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue)
 }
-const TimeRangeInline = (props: TimeRangeInlineProps) => {
+const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TimeRangeInline } from '../../'
+import { TimeRangeInline } from 'playbook-ui'
 const TimeRangeInlineDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timeline/_item.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ const TimelineItem = ({
   iconColor = 'default',
   lineStyle = 'solid',
   ...props
-}: ItemProps) => {
+}: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timeline/_timeline.scss CHANGED Viewed

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 $connector_width: 2px;
-$icon_margin: $space_xs/2;
+$icon_margin: calc($space_xs/2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: calc($icon_height/2) - calc($connector_width/2);
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ const Timeline = ({
   orientation = 'horizontal',
   showDate = false,
   ...props
-}: TimelineProps) => {
+}: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Timestamp, Title } from '../../'
+import { Caption, Timestamp, Title } from 'playbook-ui'
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ type TitleDetailProps = {
   title: string,
 } & GlobalProps
-const TitleDetail = (props: TitleDetailProps) => {
+const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
     align = "left",
     aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(pbCss, globalProps(props), className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
     >
       <Title
-        size={4}
-        text={title}
+          size={4}
+          text={title}
       />
       <Body
-        color="light"
-        text={detail}
+          color="light"
+          text={detail}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_toggle/_toggle.scss CHANGED Viewed

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width / 2;
+  $height: calc($width / 2);
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: $width / 2 - 4px;
+        width: calc($width / 2) - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -50,7 +50,7 @@ $transition: .2s ease-in-out;
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: 0.5;
         border: 3px solid $border_light;
         background-color: $border_light;
@@ -68,14 +68,14 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
         &:after {
-          left: $width / 2 + 2px;
+          left: calc($width / 2) + 2px;
           background-color: $white;
         }
       }
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: 0.5;
         border: 3px solid $text_lt_light;
         background-color: $text_lt_light;

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx CHANGED Viewed

@@ -42,7 +42,7 @@ const Toggle = ({
   size = 'sm',
   value,
   ...props
-}: Props) => {
+}: Props): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React, { useState } from 'react'
-import { Toggle } from '../..'
+import { Toggle } from 'playbook-ui'
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from '../..'
+import { Caption, Title, Toggle } from 'playbook-ui'
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Toggle } from '../..'
+import { Toggle } from 'playbook-ui'
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Toggle } from '../..'
+import { Toggle } from 'playbook-ui'
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from '../..'
+import { Caption, Title, Toggle } from 'playbook-ui'
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED Viewed

@@ -50,8 +50,8 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     ...rest
   } = props
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: { [key: string]: string } = buildDataProps(data)
+  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from '../..';
+import { Tooltip, Flex, FlexItem } from 'playbook-ui';
 const TooltipDefaultReact = (props) => {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from '../..';
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 const TooltipDelay = (props) => {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Tooltip, Button, Flex } from '../..'
+import { Tooltip, Button, Flex } from 'playbook-ui'
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from '../..';
+import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 const TooltipInteraction = (props) => {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from '../..'
+import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
 import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
-import { Button, Tooltip } from "..";
+import { Button, Tooltip } from "playbook-ui";
 function TooltipTest() {
   const text = "this is a text",

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx CHANGED Viewed

@@ -52,7 +52,7 @@ const TreemapChart = ({
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
-}: TreemapChartProps) => {
+}: TreemapChartProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -98,7 +98,6 @@ const TreemapChart = ({
   const [options, setOptions] = useState({});
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js CHANGED Viewed

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { render, screen } from '../utilities/test-utils';
 import TreemapChart from './_treemap_chart';

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-// @flow
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import {
   Button,
-} from '../..'
+} from 'playbook-ui'
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-// @flow
 import React from 'react'
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-// @flow
 import React, { useState, useEffect } from 'react'
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-// @flow
 import React from 'react'
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-// @flow
 import React from 'react'
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED Viewed

@@ -1,9 +1,8 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useState } from 'react'
-import { components, OptionProps } from 'react-select'
+import { components } from 'react-select'
 import {
   Avatar,
@@ -12,7 +11,7 @@ import {
   FlexItem,
   Title,
   Typeahead,
-} from '../..'
+} from 'playbook-ui'
 const USERS = [
   {
@@ -42,7 +41,7 @@ const TypeaheadWithHighlight = (props) => {
   const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
-    const highlighted = (text: string) => {
+    const highlighted = (text) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
@@ -70,7 +69,7 @@ const TypeaheadWithHighlight = (props) => {
   }
   const customComponents = {
-    Option: (highlightProps: OptionProps) => (
+    Option: (highlightProps) => (
       <components.Option {...highlightProps}/>
     ),
     SingleValue: ({ ...props }) => (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-/* @flow */
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 const options = [
   { label: 'Windows', value: '#FFA500' },