RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130 - Mend

playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx ADDED Viewed

@@ -0,0 +1,190 @@
+import React from 'react'
+import Layout from '../../pb_layout/_layout'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+const LayoutBracket = () => {
+  return (
+    <div>
+      <Layout
+          layout="bracket"
+      >
+        <Layout.RoundLabel>
+          <Caption>Wild Card</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Packers</Body>
+              <Body>10</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>22</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Vikings</Body>
+              <Body>9</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Rams</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Lions</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Buccaneers</Body>
+              <Body>20</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chargers</Body>
+              <Body>12</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Texans</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Broncos</Body>
+              <Body>7</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Steelers</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Ravens</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Divisional</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Rams</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>45</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Lions</Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Texans</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>23</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Ravens</Body>
+              <Body>25</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Conference</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Commanders</Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>55</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Bills</Body>
+              <Body>29</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Super Bowl</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chiefs</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>40</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+      </Layout>
+    </div>
+  )
+}
+export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md ADDED Viewed

@@ -0,0 +1,5 @@
+Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
+On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
+Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

data/app/pb_kits/playbook/pb_layout/docs/example.yml CHANGED Viewed

@@ -18,4 +18,5 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
+  - layout_bracket: Bracket Layout

data/app/pb_kits/playbook/pb_layout/docs/index.js CHANGED Viewed

@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
+export { default as LayoutBracket } from './_layout_bracket.jsx'

data/app/pb_kits/playbook/pb_layout/layout.test.js CHANGED Viewed

@@ -82,6 +82,10 @@ test("render all layout variants", () => {
       layout: "masonry",
       expected: "pb_layout_kit_masonry_size_md_left_light",
     },
+    {
+      layout: "bracket",
+      expected: "pb_layout_kit_bracket",
+    },
   ]
   testValues.forEach(({ layout, expected }) => {

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import React from 'react'
+import classnames from 'classnames'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+import Card from '../../pb_card/_card'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  isOdd: boolean,
+} & GlobalProps
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  const isMultiple = Array.isArray(children)
+  let ratio = 0
+  let exponent
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+  }
+  if (numberOfChildren === 2) {
+    const [firstChild, secondChild] = React.Children.toArray(children)
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
+    return (
+      <div
+          className={classnames('layout_game', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
+        >
+          <Card.Body padding="xs">{firstChild}</Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">{secondChild}</Card.Body>
+        </Card>
+        {isOdd && numberOfGames > 1  &&
+          <div
+              className="half_box"
+              style={{ height: `calc(${ratio} * 100% + 4px)` }}
+          />
+        }
+      </div>
+      )
+    }
+  }
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+    {((!isMultiple && children) || numberOfChildren >= 1 )? (
+      children
+    ) : (
+      <Card
+          marginY="xs"
+          padding="none"
+          shadow="deep"
+      >
+        <Card.Body padding="xs">To be determined...</Card.Body>
+        <SectionSeparator />
+        <Card.Body padding="xs">To be determined...</Card.Body>
+      </Card>
+    )}
+      {isOdd && numberOfGames > 1  &&
+        <div
+            className="half_box"
+            style={{ height: `calc(${ratio} * 100% + 4px)` }}
+        />
+      }
+    </div>
+  )
+}
+export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+type LayoutRoundLabelProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+} & GlobalProps
+export const RoundLabel = (props: LayoutRoundLabelProps) => {
+  const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  return (
+    <div
+        className={classnames('layout_round_label', className)}
+        style={dynamicInlineProps}
+    >
+      {children}
+    </div>
+  )
+}
+type LayoutRoundProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+} & GlobalProps
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
+  ) : children
+  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
+    <div
+        className="right_connector"
+        key={`right_connector_${index}`}
+    />
+  ))
+  return (
+    <>
+      <div
+          className={classnames('layout_round', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        {childrenWithProps}
+      </div>
+      <div className="connector_container">{rightConnectors}</div>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from "../../utilities/object"
 import { useCallback, useMemo, useState } from 'react'
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 type LineGraphProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_link/link.test.jsx CHANGED Viewed

@@ -73,7 +73,7 @@ test('adds icon', () => {
   const kit = screen.getByTestId('icon-test')
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
@@ -87,7 +87,7 @@ test('adds icon right', () => {
   const kit = screen.getByTestId('icon-right-test')
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED Viewed

@@ -10,6 +10,16 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
+&.error {
+  .wrapper {
+    .input_wrapper {
+      border-color: $error;
+    }
+  }
+  [class*=pb_body_kit_negative] {
+    margin-top: $space_xxs;
+  }
+}
   .wrapper {
     position: relative;
@@ -92,4 +102,17 @@
   .open {
     display: block;
   }
+  &.dark {
+    &.error {
+      .wrapper {
+        .input_wrapper {
+          border-color: $error_dark;
+        }
+      }
+      [class*=pb_body_kit_negative] {
+        color: $error_dark;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -7,9 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import { cloneDeep } from "lodash";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
@@ -35,11 +38,14 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
+  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
+  label?: string
   name?: string
+  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
@@ -56,11 +62,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className,
     data = {},
     disabled = false,
+    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
+    label,
+    required = false,
     returnAllSelected = false,
     treeData,
     onChange = () => null,
@@ -77,6 +86,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
+    error && "error",
     globalProps(props),
     className
   );
@@ -439,6 +449,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
+      {label &&
+        <Caption
+            marginBottom="xs"
+            text={label}
+        />
+      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -462,6 +478,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
+                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -476,6 +493,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -488,6 +506,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -548,6 +567,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
+                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -580,6 +600,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
+      {error &&
+          <Body
+              dark={props.dark}
+              status="negative"
+              text={error}
+          />
+        }
     </div>
   );
 }) as MultiLevelSelectComponent;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb ADDED Viewed

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+<%= pb_rails("multi_level_select", props: {
+    error: "Please make a valid selection",
+    id: "multi-level-select-error-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>