RubyGems - playbook_ui - Versions diffs - 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490 - Mend

playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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 (269) hide show

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

@@ -0,0 +1,121 @@
+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'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  lastRoundWithSelf?: number,
+  isOdd: boolean,
+} & GlobalProps
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd, lastRoundWithSelf } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  const isMultiple = Array.isArray(children)
+  let ratio = 0
+  let exponent
+  let currentRound = numberOfRounds
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+    currentRound = exponent + 1
+  }
+  let hasWinner = false
+  const hasLastWinnerAndSelf = lastRoundWithSelf === currentRound
+  if (numberOfChildren === 2) {
+    const [firstChildWithoutProps, secondChildWithoutProps] = React.Children.toArray(children)
+    const firstChild = React.isValidElement(firstChildWithoutProps) ? React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf }) : firstChildWithoutProps
+    const secondChild = React.isValidElement(secondChildWithoutProps) ? React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf }) : secondChildWithoutProps
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
+      if (
+        firstChild?.props && typeof firstChild.props === 'object' && 'winner' in firstChild.props ||
+        secondChild?.props && typeof secondChild.props === 'object' && 'winner' in secondChild.props
+      ) {
+        hasWinner = true
+      }
+      return (
+        <div
+            className={classnames('layout_game', globalProps(props), className)}
+            style={dynamicInlineProps}
+        >
+          <Card
+              marginY="xs"
+              overflow="hidden"
+              padding="none"
+              shadow="deep"
+          >
+            <Card.Body padding="none">{firstChild}</Card.Body>
+            <SectionSeparator className="game_separator"/>
+            <Card.Body padding="none">{secondChild}</Card.Body>
+          </Card>
+          {isOdd && numberOfGames > 1 &&
+            <div
+                className="half_box"
+                style={{ height: `calc(${ratio} * 100% + 4px)` }}
+            />
+          }
+          {numberOfGames > 1 && hasWinner &&
+            <div className="polygon_node" />
+          }
+        </div>
+      )
+    }
+  }
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+      {((!isMultiple && children) || numberOfChildren >= 1) ? (
+        children
+      ) : (
+        <div className="layout_tbd">
+          <Card
+              marginY="xs"
+              padding="none"
+              shadow="deep"
+          >
+            <Card.Body padding="xs">
+              <Body color="light">
+                To be determined...
+              </Body>
+            </Card.Body>
+            <SectionSeparator className="game_separator"/>
+            <Card.Body padding="xs">
+              <Body color="light">
+                To be determined...
+              </Body>
+            </Card.Body>
+          </Card>
+        </div>
+      )}
+      {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/_participant.tsx ADDED Viewed

@@ -0,0 +1,79 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+import Avatar from "../../pb_avatar/_avatar";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import Badge from "../../pb_badge/_badge";
+import Detail from "../../pb_detail/_detail";
+import Background from "../../pb_background/_background";
+type LayoutParticipantProps = {
+  className?: string,
+  name?: string,
+  territory?: string,
+  points?: string,
+  rank?: string,
+  avatar?: string,
+  winner?: boolean,
+  self?: boolean,
+} & GlobalProps
+export const Participant = (props: LayoutParticipantProps) => {
+  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
+  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
+  return (
+    <Background
+        backgroundColor={winner ? "success_subtle" : "white"}
+        className={classes}
+        padding="xs"
+        style={dynamicInlineProps}
+    >
+      <Flex justify="between">
+        <Avatar
+            imageUrl={avatar}
+            marginRight="sm"
+            name={name}
+            size="sm"
+        />
+        <Body flexGrow={1}>
+          <Flex justify="between">
+            <Body
+                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
+                truncate={1}
+            >
+              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
+            </Body>
+            <Body
+                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                display="flex"
+            >
+              {points && (<>
+                <strong>{points}</strong>
+                <Detail
+                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                    text="pts"
+                />
+              </>)}
+            </Body>
+          </Flex>
+          <Body color="light">
+            {territory}
+            &nbsp;
+            <Badge
+                text={rank}
+                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
+            />
+          </Body>
+        </Body>
+      </Flex>
+    </Background>
+  )
+}
+export default Participant

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

@@ -0,0 +1,74 @@
+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,
+  lastRoundWithSelf: number,
+} & GlobalProps
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds, lastRoundWithSelf } = 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}`,
+            lastRoundWithSelf
+          })
+        : child
+    )
+  : React.isValidElement(children)
+    ? React.cloneElement(children, {
+        numberOfRounds,
+        numberOfGames: numberOfChildren,
+        lastRoundWithSelf
+      })
+    : 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_line_graph/docs/_line_graph_pb_styles.jsx ADDED Viewed

@@ -0,0 +1,52 @@
+import React from 'react'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const baseOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+const LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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

@@ -11,6 +11,7 @@ examples:
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts ADDED Viewed

@@ -0,0 +1,110 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+const lineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { enabled: false },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+export default lineGraphTheme;

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_nav/_nav_item.test.js CHANGED Viewed

@@ -95,11 +95,13 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
+    expect(icon).toBeInTheDocument()
 })
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="users-class" />)
+    render(<NavDefault iconLeft="angle-up" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
+    expect(icon).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_overlay/_overlay.scss CHANGED Viewed

@@ -18,34 +18,39 @@ $overlay_colors: (
   card_dark: $card_dark,
   bg_dark: $bg_dark,
   bg_light: $bg_light,
+  black: $black,
+  white: $white,
+  success: $success,
+  error: $error
 );
-@mixin overlay($direction, $size, $color) {
+@mixin overlay($direction, $size, $color, $apply_gradient: true) {
   display: block;
   position: absolute;
   pointer-events: none;
   z-index: 1;
   content: "";
-  @if $direction == "left" {
-    inset: 0 auto 0 0;
-    background: linear-gradient(to right, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "right" {
-    inset: 0 0 0 auto;
-    background: linear-gradient(to left, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "top" {
-    inset: 0 0 auto 0;
-    background: linear-gradient(to bottom, $color 0%, transparent 100%);
-    height: $size;
-  }
-  @if $direction == "bottom" {
-    inset: auto 0 0 0;
-    background: linear-gradient(to top, $color 0%, transparent 100%);
-    height: $size;
+  @if $apply_gradient {
+    @if $direction == "left" {
+      inset: 0 auto 0 0;
+      background: linear-gradient(to right, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "right" {
+      inset: 0 0 0 auto;
+      background: linear-gradient(to left, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "top" {
+      inset: 0 0 auto 0;
+      background: linear-gradient(to bottom, $color 0%, transparent 100%);
+      height: $size;
+    } @else if $direction == "bottom" {
+      inset: auto 0 0 0;
+      background: linear-gradient(to top, $color 0%, transparent 100%);
+      height: $size;
+    }
+  } @else {
+    background: $color;
   }
 }
@@ -69,7 +74,7 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
@@ -77,9 +82,65 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
+  &.overlay-full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    &.no_gradient {
+      @each $color_name, $color in $overlay_colors {
+        &[data-overlay-color="#{$color_name}"] {
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: $color;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+    @each $key, $value in $opacity {
+      &.#{$key}::before {
+        opacity: $value;
+      }
+    }
+  }
+  &.no_gradient {
+    @each $color_name, $color in $overlay_colors {
+      .overlay_#{$color_name} {
+        @each $name, $size in $overlay_sizes {
+          @each $position in $overlay_positions {
+            &_#{$position}_#{$name} {
+              @include overlay($position, $size, $color, false);
+            }
+          }
+        }
+      }
+    }
+    @each $key, $value in $opacity {
+      &.#{$key} {
+        [class^=overlay] {
+          opacity: $value;
+        }
+      }
+    }
+  }
 }