playbook_ui 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8736 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8856

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import "../BarGraphStyles.scss";
-// Your path might look more like this
-//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
-
-const columnChartData = [
-  {
-    name: "Installation",
-    data: [1475, 200, 3000, 654, 656],
-  },
-  {
-    name: "Manufacturing",
-    data: [4434, 524, 2320, 440, 500],
-  },
-  {
-    name: "Sales & Distribution",
-    data: [3387, 743, 1344, 434, 440],
-  },
-  {
-    name: "Project Development",
-    data: [3227, 878, 999, 780, 1000],
-  },
-  {
-    name: "Other",
-    data: [1111, 677, 3245, 500, 200],
-  },
-];
-
-const columnOptions = {
-  chart: {
-    type: "column",
-  },
-  series: columnChartData,
-  title: {
-    text: "Solar Employment Growth by Sector, 2010-2016",
-  },
-  subtitle: {
-    text: "Source: thesolarfoundation.com",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: false },
-  credits: { enabled: false },
-};
-
-const BarGraphPbStyles = () => (
-  <div>
-    <HighchartsReact highcharts={Highcharts}
-        options={columnOptions}
-    />
-  </div>
-)
-
-export default BarGraphPbStyles

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.  

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const baseOptions = {
-  series: [{ data: data }],
-}
-
-const CircleChartPbStyles = () => {
-  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -1,220 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "../utilities/test-utils";
-import { Button, PbReactPopover } from "playbook-ui";
-
-const testId = "popover-kit";
-
-//Test default popover
-const PopoverTest = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-//Test popover with z-index
-const PopoverTestZIndex = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          offset
-          reference={popoverReference}
-          show={mockState}
-          zIndex={3}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test popover with max-height and max-width
-const PopoverTestHeight = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          maxHeight="150px"
-          maxWidth="240px"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'anywhere'
-const PopoverTestClicktoClose = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="any"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'inside'
-const PopoverTestClicktoClose2 = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="inside"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Inside"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'outside'
-const PopoverTestClicktoClose3 = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover}
-        text="Click Me"
-    />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="outside"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Outside"}
-      </PbReactPopover>
-  )
-};
-
-
-  test("renders Popover", () => {
-    render(<PopoverTest data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument();
-  });
-
-  test("renders Popover with z index", () => {
-    render(<PopoverTestZIndex data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body z_index_3");
-  });
-
-  test("renders Popover with max height and max width", () => {
-    render(<PopoverTestHeight data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
-  });
-
-  test("closes Popover on click anywhere", async () => {
-    render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument();
-    fireEvent.click(document.body);
-
-    expect(kit).not.toBeInTheDocument;
-  });
-
-  test("closes Popover on click inside", async () => {
-    render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Inside");
-    expect(kit).toBeInTheDocument();
-    fireEvent.click(kit);
-
-    expect(kit).not.toBeInTheDocument;
-  });
-
-  test("closes Popover on click outside", async () => {
-    render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Outside");
-    expect(kit).toBeInTheDocument();
-    fireEvent.click(kit);
-    expect(kit).toBeInTheDocument();
-    fireEvent.click(btn);
-
-    expect(kit).not.toBeInTheDocument;
-  });

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js

@@ -1,47 +0,0 @@
-import React from "react";
-import { render } from "../utilities/test-utils";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import Link from "@tiptap/extension-link";
-
-import RichTextEditor from "./_rich_text_editor";
-
-const kitClass = "pb_rich_text_editor_advanced_container";
-
-const EditorTest = (props) => {
-  const editor = useEditor({
-    extensions: [StarterKit, Link],
-    content: "",
-  });
-
-  return (
-    <RichTextEditor 
-        advancedEditor={editor} 
-        {...props}
-    >
-      <EditorContent editor={editor} />
-    </RichTextEditor>
-  );
-};
-
-test("returns namespaced class name", () => {
-  const { container } = render(<EditorTest />);
-
-  expect(container.getElementsByClassName(kitClass).length).toBeGreaterThan(0);
-});
-
-test("returns toolbar class name", () => {
-  const { container } = render(<EditorTest />);
-
-  expect(
-    container.getElementsByClassName(`${kitClass} toolbar-active`).length
-  ).toBeGreaterThan(0);
-});
-
-test("doesn't returns toolbar class name", () => {
-  const { container } = render(<EditorTest advancedEditorToolbar={false} />);
-
-  expect(
-    container.getElementsByClassName(`${kitClass} toolbar-active`).length
-  ).toBe(0);
-});