RubyGems - playbook_ui - Versions diffs - 13.34.1 → 14.0.0.pre.alpha.PLAY14113475 - Mend

playbook_ui 13.34.1 → 14.0.0.pre.alpha.PLAY14113475

Files changed (466) hide show

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/_typeahead.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 import {
@@ -45,7 +45,7 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
-}
+} & GlobalProps
 export type SelectValueType = {
   label: string,

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.html.erb CHANGED Viewed

@@ -31,5 +31,5 @@
   options: expressionists,
   label: "Small Pills",
   multi_kit: "smallPill",
-  pills: true,
+  pills: true
 }) %>

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' },

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

@@ -1,12 +1,10 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 /**
  *
@@ -62,26 +60,25 @@ const TypeaheadWithPillsAsync = (props) => {
   return (
     <>
-      <If condition={users && users.length > 0}>
-        <Caption
-            marginBottom="xs"
-            text="State (Users)"
-            {...props}
-        />
-        <For
-            each="user"
-            of={users}
-        >
-          <User
-              align="left"
-              key={user.value}
-              marginBottom="md"
-              name={user.label}
-              orientation="horizontal"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          {users.map((user) => (
+            <User
+                align="left"
+                key={user.value}
+                marginBottom="md"
+                name={user.label}
+                orientation="horizontal"
+                {...props}
+            />
+          ))}
+        </React.Fragment>
+      )}
       <Typeahead
           async
           getOptionLabel={(option) => option.name}

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

@@ -1,12 +1,10 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 /**
  *
@@ -17,13 +15,6 @@ import {
  * @summary - for doc example purposes only
  */
-type UserProps = {
-  imageUrl?: String,
-  label?: String,
-  territory?: String,
-  type?: String,
-}
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
@@ -63,28 +54,27 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
   return (
     <>
-      <If condition={users && users.length > 0}>
-        <Caption
-            marginBottom="xs"
-            text="State (Users)"
-            {...props}
-        />
-        <For
-            each="user"
-            of={users}
-        >
-          <User
-              align="left"
-              avatar
-              avatarUrl={user.imageUrl}
-              key={user.value}
-              marginBottom="md"
-              name={user.label}
-              orientation="horizontal"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          {users.map((user) => (
+            <User
+                align="left"
+                avatar
+                avatarUrl={user.imageUrl}
+                key={user.value}
+                marginBottom="md"
+                name={user.label}
+                orientation="horizontal"
+                {...props}
+            />
+          ))}
+        </React.Fragment>
+      )}
       <Typeahead
           async
           isMulti
@@ -93,7 +83,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props: UserProps) => (
+          valueComponent={(props) => (
             <User
                 avatar
                 avatarUrl={props.imageUrl}

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

@@ -1,12 +1,10 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 /**
  *
@@ -63,28 +61,27 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
   return (
     <>
-      <If condition={users && users.length > 0}>
-        <Caption
-            marginBottom="xs"
-            text="State (Users)"
-            {...props}
-        />
-        <For
-            each="user"
-            of={users}
-        >
-          <User
-              align="left"
-              avatar
-              avatarUrl={user.imageUrl}
-              key={user.value}
-              marginBottom="md"
-              name={user.label}
-              orientation="horizontal"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          {users.map((user) => (
+            <User
+                align="left"
+                avatar
+                avatarUrl={user.imageUrl}
+                key={user.value}
+                marginBottom="md"
+                name={user.label}
+                orientation="horizontal"
+                {...props}
+            />
+          ))}
+        </React.Fragment>
+      )}
       <Typeahead
           async
           isMulti

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED Viewed

@@ -57,6 +57,7 @@ module Playbook
       def typeahead_react_options
         base_options = {
+          className: classname,
           dark: dark,
           defaultValue: default_options,
           error: error,

data/app/pb_kits/playbook/pb_user/_user.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ type UserProps = {
   title?: string,
 } & GlobalProps
-const User = (props: UserProps) => {
+const User = (props: UserProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "../.."
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { User } from "../../"
+import { User } from "playbook-ui"
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx CHANGED Viewed

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