playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import defaultColors from "../tokens/exports/_colors.scss";
-
-type OverlayProps = {
-    aria?: { [key: string]: string },
-    className?: string,
-    children: React.ReactNode[] | React.ReactNode,
-    color: "white" | "bg_light" | "card_dark" | "bg_dark",
-    data?: { [key: string]: string },
-    htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-    id?: string,
-    layout: { [key: string]: string },
-}
-
-const previousOverlayDirectionMap: { [key: string]: string } = {
-    "bottom": "to top",
-    "top": "to bottom",
-    "left-right": "to right",
-    "top-bottom": "to top",
-}
-
-const subsequentOverlayDirectionMap: { [key: string]: string } = {
-    "bottom": "to top",
-    "top": "to bottom",
-    "left-right": "to left",
-    "top-bottom": "to bottom",
-}
-
-const Overlay = (props: OverlayProps) => {
-    const {
-        aria = {},
-        className,
-        children,
-        color = "white",
-        data = {},
-        htmlOptions = {},
-        id,
-        layout = { "bottom": "100%" },
-    } = props
-
-    const ariaProps = buildAriaProps(aria)
-    const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
-    const htmlProps = buildHtmlProps(htmlOptions)
-
-    const getPosition = () => {
-        return Object.keys(layout)[0]
-    }
-
-    const getSize = () => {
-        return Object.values(layout)[0]
-    }
-
-    const getPreviousOverlayDirection = () => {
-        return previousOverlayDirectionMap[getPosition()]
-    }
-
-    const getSubsequentOverlayDirection = () => {
-        return subsequentOverlayDirectionMap[getPosition()]
-    }
-
-    const hasSubsequentOverlay = getPosition() === "left-right" || getPosition() === "top-bottom"
-
-    const previousOverlay = `linear-gradient(${getPreviousOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
-    const subsequentOverlay = `linear-gradient(${getSubsequentOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
-
-    return (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-            <div className="overlay-container">
-                <div className="overlay"
-                    style={{ background: previousOverlay }} />
-
-                {children}
-
-                { hasSubsequentOverlay &&
-                    <div className="overlay"
-                        style={{ background: subsequentOverlay }} />
-                }
-            </div>
-        </div>
-    )
-}
-
-export default Overlay

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import {
-    Overlay,
-    Table,
-} from '../..'
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <thead>
-                <tr>
-                    <th>{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    )
-}
-
-const OverlayDefault = () => (
-    <>
-        <Overlay>
-            <TableExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayDefault

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +0,0 @@
-Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
-
-The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
-
-The `position` prop sets the side where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` prop accepts a percentage value as a string and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `100%` so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from '../..'
-
-const InlineCardsExample = () => {
-    return (
-        <Flex
-            columnGap="lg"
-            orientation="row"
-            overflowX="auto"
-        >
-            {Array.from({ length: 15 }, (_, index) => (
-                <FlexItem key={index}>
-                    <Card>{"Card Content"}</Card>
-                </FlexItem>
-            ))}
-        </Flex>
-    )
-}
-
-const OverlayMultiDirectional = () => (
-    <>
-        <Overlay
-            color="white"
-            layout={{"left-right": "10%"}}
-        >
-            <InlineCardsExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md

@@ -1,5 +0,0 @@
-Optionally, you can pass multi-directional options (`left-right` or `top-bottom`) to the `position` prop, which create multiple overlays. 
-
-Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` percentage you set. 
-
-NOTE: Multi-directional overlays share the available container space, so passing a size greater than "50%" to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a size of 25% when using multi-directional overlays.

data/app/pb_kits/playbook/pb_overlay/docs/example.yml

@@ -1,4 +0,0 @@
-examples:
-  react:
-  - overlay_default: Default
-  - overlay_multi_directional: Multi-directional

data/app/pb_kits/playbook/pb_overlay/docs/index.js

@@ -1,2 +0,0 @@
-export { default as OverlayDefault } from './_overlay_default.jsx'
-export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { render, screen } from '../utilities/test-utils'
-import { Overlay } from '..'
-
-const testId = "overlay"
-const children = "This is the Overlay children"
-
-test('should pass data prop', () => {
-    const props = {
-        children,
-        data: { testid: testId }
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toBeInTheDocument()
-})
-
-test("should pass className prop", () => {
-    const className = "custom-class-name"
-    const props = {
-        className,
-        children,
-        data: { testid: testId },
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(className)
-})
-
-test('should pass aria prop', () => {
-    const props = {
-        aria: { label: testId },
-        children,
-        data: { testid: testId },
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveAttribute('aria-label', testId)
-})
-
-test('should pass id prop', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveAttribute('id', testId)
-})
-
-test('should render children', () => {
-    const props = {
-        children,
-        data: { testid: testId }
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveTextContent(props.children)
-})

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md

@@ -1,2 +0,0 @@
-Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
-In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table") do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { text_align: "center" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { text_align: "right" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md

@@ -1,2 +0,0 @@
-Pass our `text_align` global prop to any `table/table_row` subcomponent to change the text alignment of all cells within that row.
-The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb

@@ -1,54 +0,0 @@
-<%= pb_rails("table") do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "&nbsp;" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Price" }) %>
-    <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Total", vertical_align: "bottom" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        $12<br/>
-        $46<br/>
-        $25<br/>
-        -------<br/>
-        $83
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-<br/>
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "Espresso Drinks" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Ingredients" }) %>
-    <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Cappuccino", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk<br/>
-        Milk Foam
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Hot Chocolate<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md

@@ -1,2 +0,0 @@
-Pass our `vertical_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
-The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md

@@ -1 +0,0 @@
-Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb

@@ -1,53 +0,0 @@
-<%= pb_rails("table") do %>
-    <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>       
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1a
-          <br />
-          Value 1a
-          <br />
-          Value 1a
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1b
-          <br />
-          Value 1b
-          <br />
-          Value 1b
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1c
-          <br />
-          Value 1c
-          <br />
-          Value 1c
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-  

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md

@@ -1 +0,0 @@
-Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx

@@ -1,76 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-import Button from '../../pb_button/_button'
-
-const TableOuterPadding = (props) => {
-  return (
-    <Table
-        outerPadding="sm"
-        size="sm"
-        {...props}
-    >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th>{'Column 4'}</th>
-          <th>{''}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export default TableOuterPadding

data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md

@@ -1 +0,0 @@
-Pass any of our spacing tokens to the `outerPadding` / `outer_padding` prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).

data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss

@@ -1,21 +0,0 @@
-@import "../../tokens/spacing";
-
-[class^=pb_table] {
-  @each $name, $value in $spaces {
-    &.outer_padding_#{$name} {
-      td:first-child,
-      th:first-child,
-      .pb_table_td:first-child,
-      .pb_table_th:first-child {
-        padding-left: #{$value} !important;
-      }
-  
-      td:last-child,
-      th:last-child,
-      .pb_table_td:last-child,
-      .pb_table_th:last-child {
-        padding-right: #{$value} !important;
-      }
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import TreemapChart from './_treemap_chart';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'treemapchart1';
-
-test('uses exact classname', () => {
-  const data = [
-    {
-      name: "Pepperoni",
-      parent: "Toppings",
-      value: 600,
-    }, {
-      name: "Cheese",
-      parent: "Toppings",
-      value: 510,
-    }, {
-      name: "Mushroom",
-      parent: "Toppings",
-      value: 330,
-    },{
-      name: "Onions",
-      parent: "Toppings",
-      value: 250,
-    }, {
-      name: "Olives",
-      parent: "Toppings",
-      value: 204,
-    }, {
-      name: "Pineapple",
-      parent: "Toppings",
-      value: 90,
-    }, {
-      name: "Pizza Toppings",
-      id: "Toppings",
-    },
-  ]
-  render(
-    <TreemapChart
-        chartData={data}
-        data={{ testid: testId }}
-        id="tree-map-id"
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_treemap_chart');
-});

data/app/pb_kits/playbook/tokens/_vertical_align.scss

@@ -1,18 +0,0 @@
-$vertical_align_baseline:   baseline !default;
-$vertical_align_sub:         sub !default;
-$vertical_align_super:       super !default;
-$vertical_align_text_top:    text-top !default; 
-$vertical_align_text_bottom: text-bottom !default;
-$vertical_align_middle:      middle !default;
-$vertical_align_top:         top !default;
-$vertical_align_bottom:      bottom !default;
-$vertical_align: (
-  baseline:         $vertical_align_baseline,
-  sub:              $vertical_align_sub,
-  super:            $vertical_align_super,
-  text_top:         $vertical_align_text_top,
-  text_bottom:      $vertical_align_text_bottom,
-  middle:           $vertical_align_middle,
-  top:              $vertical_align_top,
-  bottom:           $vertical_align_bottom
-);

data/app/pb_kits/playbook/utilities/_vertical_align.scss

@@ -1,16 +0,0 @@
-@import "../tokens/vertical_align";
-
-
-$vertical_align_classes: (
-  vertical_align_baseline: $vertical_align_baseline,
-  vertical_align_sub: $vertical_align_sub,
-  vertical_align_super: $vertical_align_super,
-  vertical_align_text_top: $vertical_align_text_top,
-  vertical_align_text_bottom: $vertical_align_text_bottom,
-  vertical_align_middle: $vertical_align_middle,
-  vertical_align_top: $vertical_align_top,
-  vertical_align_bottom: $vertical_align_bottom,
-);
-
-
-@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align');

data/lib/playbook/forms/builder/dropdown_field.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module Forms
-    class Builder
-      def dropdown_field(name, props: {})
-        props[:name] = name
-        props[:margin_bottom] = "sm"
-        props[:label] = @template.label(@object_name, name) if props[:label] == true
-        @template.pb_rails("dropdown", props: props)
-      end
-    end
-  end
-end