RubyGems - playbook_ui - Versions diffs - 13.32.0 → 13.33.0.pre.alpha.PLAY14143305 - Mend

playbook_ui 13.32.0 → 13.33.0.pre.alpha.PLAY14143305

Files changed (480) hide show

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx CHANGED Viewed

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "../..";
+import { FileUpload, List, ListItem } from "playbook-ui";
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
@@ -7,16 +6,16 @@ import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>
     ))}
   </List>
 )
-const RejectedFilesList = ({ files }: FileList) => (
+const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx CHANGED Viewed

@@ -1,9 +1,7 @@
 import React from 'react'
 import { isEmpty, map, omitBy } from 'lodash'
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
+import { Body, Caption, Title } from 'playbook-ui'
 export type FilterDescription = {
   [key: string]: string | null | boolean,

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx CHANGED Viewed

@@ -1,10 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
+import { Card } from 'playbook-ui'
 import { GlobalProps, globalProps } from '../../utilities/globalProps'
-import Card from '../../pb_card/_card'
 export type FilterBackgroundProps = {
   background: boolean,
   className: string,

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx CHANGED Viewed

@@ -10,9 +10,7 @@ import SortMenu, {
   SortValue,
 } from './SortMenu'
-import Caption from '../../pb_caption/_caption'
-import Flex from '../../pb_flex/_flex'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
+import { Caption, Flex, SectionSeparator } from 'playbook-ui'
 export type FilterDoubleProps = {
   children?: React.ReactChild[] | React.ReactChild,

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { isEmpty } from 'lodash'
-import Flex from '../../pb_flex/_flex'
+import { Flex } from 'playbook-ui'
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { ReactNode, useState } from 'react'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import PbReactPopover from '../../pb_popover/_popover'
+import { CircleIconButton, PbReactPopover } from 'playbook-ui'
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode),

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import TitleCount from '../../pb_title_count/_title_count'
+import { Caption, TitleCount } from 'playbook-ui'
 const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx CHANGED Viewed

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
-import Button from '../../pb_button/_button'
-import Icon from '../../pb_icon/_icon'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
-import PbReactPopover from '../../pb_popover/_popover'
+import { Button, Icon, List, ListItem, PbReactPopover } from 'playbook-ui'
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterMaxHeight = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select } from '../../'
+import { Button, Filter, Flex, Select } from 'playbook-ui'
 const FilterMaxWidth = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterNoBackground = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterNoSort = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterOnly = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/filter.test.js CHANGED Viewed

@@ -4,7 +4,7 @@ import {
   screen,
   fireEvent,
 } from "../utilities/test-utils";
-import { Button, Filter, Flex, Select, TextInput } from "..";
+import { Button, Filter, Flex, Select, TextInput } from "playbook-ui";
 function FilterTest(props) {
   const SortingChangeCallback = (sortOptions) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, waitFor } from '../utilities/test-utils'
-import { FixedConfirmationToast } from '../'
+import { FixedConfirmationToast } from 'playbook-ui'
 beforeEach(() => {
     // Silences error logs within the test suite.

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem } from  '../../'
+import { Flex, FlexItem } from 'playbook-ui'
 const FlexGap = (props) => {
   const count = () => {

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Flex, FlexItem, Title } from  '../..'
+import { Body, Flex, FlexItem, Title } from 'playbook-ui'
 const FlexWrap = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_group/form_group.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from "../utilities/test-utils";
-import { Button, FormGroup } from "..";
+import { Button, FormGroup } from "playbook-ui";
 test("should render a div with a button child", () => {
   const testId = "primary-test"

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED Viewed

@@ -8,6 +8,7 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
 );
@@ -15,42 +16,79 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/3;
+  padding: 0 calc($space-sm/3);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: rgba($color_value, $opacity-1);
+      background-color: mix($color_value, $card_light, 10%);
+      @if ($color_name == "neutral") {
+        background-color: $white;
+        border: 1px solid $border_light;
+      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: rgba($color_value, $opacity-2);
+          background-color: mix($color_value, $card_light, 20%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 20%);
+            border: 1px solid $border_light;
+          }
+        }
+        &:active {
+          background-color: mix($color_value, $card_light, 30%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 30%);
+          }
         }
       }
       #{$selector}_text {
         color: $color_value;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         padding-left: $space-sm;
-        padding-right: $space-sm/4;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/2;
-        padding-right: $space-sm/4;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        height: 100%;
+        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
+        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
+        height: 27px;
+        border-radius: 70px;
         cursor: pointer;
+        &:hover {
+          background-color: mix($color_value, $card_light, 40%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 60%);
+          }
+        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
       }
     }
   }
+  &:focus {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
+  &:focus-visible {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -70,6 +108,71 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &.dark {
+    @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info.
+      // Primary and Neutral are exceptions to the general rule in the handoff
+      &[class*=_#{$color_name}]  {
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_tag {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
+        @if ($color_name == "neutral") {
+          background-color: transparent;
+          border: 1px solid $border_dark;
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $text_dk_default;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_default;
+            &:hover {
+              background-color: mix($neutral, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($white, $card_dark, 10%);
+          }
+          &:active {
+            background-color: mix($white, $card_dark, 20%);
+          }
+          &:focus {
+            border: 1px solid $primary;
+          }
+        }
+        @if ($color_name == "primary") {
+          background-color: mix($active_dark, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $active_dark;
+          }
+          .pb_form_pill_close {
+            color: $active_dark;
+            &:hover {
+              background-color: mix($active_dark, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($active_dark, $card_dark, 20px);
+          }
+          &:active {
+            background-color: mix($active_dark, $card_dark, 30%);
+          }
+        }
+      }
+    }
+  }
   &[class*=lowercase] {
     text-transform: lowercase;
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx ADDED Viewed

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import FormPill from './_form_pill';
+const testId = 'formpill';
+test('should render classname', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+});
+test('displays text content', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        />
+    )
+    const text = screen.getByText("test")
+    expect(text).toBeInTheDocument()
+});
+test('displays color variant', () => {
+    render(
+        <FormPill
+            color={"neutral"}
+            data={{ testid: testId }}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+});
+test('displays size variant', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            size={"small"}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx CHANGED Viewed

@@ -1,11 +1,10 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
 type FormPillProps = {
   className?: string,
@@ -18,6 +17,9 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
+  color?: "primary" | "neutral",
+  data?: {[key: string]: string},
+  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -36,20 +38,26 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
+    color = "primary",
+    data = {},
+    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
+    `pb_form_pill_kit_${color}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   return (
     <div className={css}
         id={id}
+        tabIndex={tabIndex}
+        {...dataProps}
         {...htmlProps}
     >
         {name &&

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb CHANGED Viewed

@@ -1 +1,5 @@
-<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
+<%= pb_rails("form_pill", props: {
+    text_transform: "lowercase" ,
+    text: "THIS IS A TAG",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
+          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb CHANGED Viewed

@@ -2,6 +2,7 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
+   tabindex: 0,
 }) %>
 <br />
@@ -10,4 +11,5 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx CHANGED Viewed

@@ -9,6 +9,7 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb CHANGED Viewed

@@ -1 +1,4 @@
-<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>
+<%= pb_rails("form_pill", props: {
+    text: "this is a tag",
+    tabindex: 0,
+}) %>