RubyGems - playbook_ui - Versions diffs - 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.table1 - Mend

playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.table1

Files changed (93) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import React from "react";
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Flex from "../pb_flex/_flex";
+import Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+type LabelValueProps = {
+  active?: boolean;
+  aria?: { [key: string]: string };
+  className?: string;
+  dark?: boolean;
+  data?: object;
+  date?: Date;
+  id?: string;
+  label: string;
+  value?: string;
+  variant?: "default" | "details";
+  icon?: string;
+  description?: string;
+  title?: string;
+};
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum();
+  const day = value.toDay();
+  return ` · ${month}/${day}`;
+};
+const LabelValue = (props: LabelValueProps) => {
+  const {
+    active = false,
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    description,
+    icon,
+    id,
+    label,
+    title,
+    value,
+    variant = "default",
+  } = props;
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const formattedDate = new DateTime({ value: date });
+  const variantClass = variant === "details" ? "details" : "";
+  const classes = classnames(
+    buildCss("pb_label_value_kit", variantClass),
+    globalProps(props),
+    className
+  );
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+      title={title}
+    >
+      <Caption dark={dark} text={label} />
+      {variant === "details" ? (
+        <Flex inline vertical="center">
+          {icon && (
+            <Body color="light" dark={dark} marginRight="xs">
+              <Icon dark={dark} fixedWidth icon={icon} />
+            </Body>
+          )}
+          {description && (
+            <Body
+              color="light"
+              dark={dark}
+              marginRight="xs"
+              text={description}
+            />
+          )}
+          {active === true ? (
+            <Flex inline vertical="center">
+              {title && (
+                <Title dark={dark} size={4} text={title} variant="link" />
+              )}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                  variant="link"
+                />
+              )}
+            </Flex>
+          ) : (
+            <>
+              {title && <Title dark={dark} size={4} text={title} />}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                />
+              )}
+            </>
+          )}
+        </Flex>
+      ) : (
+        <Body dark={dark} text={value} />
+      )}
+    </div>
+  );
+};
+export default LabelValue;

data/app/pb_kits/playbook/pb_label_value/label_value.test.js ADDED Viewed

@@ -0,0 +1,109 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import LabelValue from './_label_value'
+const testId = "labelvalue-kit";
+jest.useFakeTimers()
+describe("LabelValue Kit", () => {
+    test("renders LabelValue classname", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_label_value_kit")
+    })
+    test("renders label correctly", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("Role")
+    })
+    test("renders value correctly", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+       const text = kit.querySelector(".pb_body_kit")
+        expect(text.textContent).toEqual("Administrator, Moderator")
+    })
+    test("renders icon if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
+        expect(icon).toBeInTheDocument()
+    })
+    test("renders title if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text.textContent).toEqual("JD Installations LLC")
+    })
+    test("renders date if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                date={new Date('18 Nov 2019')}
+                description="33-12345"
+                icon="home"
+                label="Project"
+                title="Jefferson-Smith"
+                variant="details"
+            />
+        )
+        const text = screen.getByText("11/18", {exact: false})
+        expect(text).toBeInTheDocument()
+    })
+    test("renders title if included with details variant", () => {
+        render(
+            <LabelValue
+                active
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
+        expect(activeProp).toBeInTheDocument()
+    })
+})

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

@@ -82,7 +82,7 @@ test("render all layout variants", () => {
   ]
   testValues.forEach(({ layout, expected }) => {
-    const { getByTestId, container } = render(
+    const { getByTestId } = render(
       <Layout data={{ testid: `test-${layout}` }}
           layout={layout}>
         <Layout.Body>
@@ -90,7 +90,6 @@ test("render all layout variants", () => {
         </Layout.Body>
       </Layout>
     )
-    console.log(container)
     expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
     cleanup()

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

@@ -10,19 +10,52 @@ type SlidesType = {
   current: number,
   onChange: (index: number) => void,
   onClick: (index: number) => void,
+  setIndex?: (index: number)=> void,
 }
 export default function Slides({
   urls = [],
   current = 0,
   onChange = noop,
+  setIndex,
 }: SlidesType): React.ReactElement {
   const [zooming, setZooming] = useState(false)
+  const [touchStart, setTouchStart] = useState(null)
+  const [touchEnd, setTouchEnd] = useState(null)
+const minSwipeDistance = 40
+const onTouchStart = (e: React.TouchEvent) => {
+  setTouchEnd(null)
+  setTouchStart(e.targetTouches[0].clientX)
+}
+const onTouchMove = (e: React.TouchEvent) => setTouchEnd(e.targetTouches[0].clientX)
+const onTouchEnd = () => {
+  if (!touchStart || !touchEnd) return
+  const distance = touchStart - touchEnd
+  const isLeftSwipe = distance > minSwipeDistance
+  const isRightSwipe = distance < -minSwipeDistance
+  if (isLeftSwipe) {
+    setIndex(current < urls.length - 1 ? current + 1 : urls.length - 1)
+  } else if (isRightSwipe) {
+    setIndex(current > 0 ? current - 1 : 0)
+  }
+}
   const handleZoom = (isZooming: boolean) => setZooming(isZooming)
   return (
     <div
         className="Slides"
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
     >
       <Slide
           onClick={() => onChange(current)}

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

@@ -28,10 +28,8 @@ export default function Thumbnails({
 }: ThumbnailsType): React.ReactElement {
   const viewportSize = useWindowSize()
   const thumbnailWidth = viewportSize.width / 8
-  const draggable = thumbnailWidth * urls.length > viewportSize.width
   const shouldBeCentered = (thumbnailWidth * urls.length) < (viewportSize.width * 0.9)
-  const css = classnames('Thumbnails', { draggable }, { centered: shouldBeCentered })
+  const css = classnames('Thumbnails', { centered: shouldBeCentered })
   const otherProps: { buttonRef?: React.RefObject<HTMLButtonElement> } = {}
   const thumbnailsRef: React.RefObject<HTMLDivElement>  = React.createRef()

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

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import { noop } from 'lodash'
 import React, { useEffect } from 'react'
 import Slides from './Slides'
 import Thumbnails from './Thumbnails'
@@ -17,6 +16,7 @@ type CarouselType = {
   }[],
   onChange: (index: number) => void,
   onClick?: (index: number) => void,
+  setIndex?: (index: number)=> void,
 }
 export default function Carousel({
@@ -24,6 +24,7 @@ export default function Carousel({
   photos,
   onClick = noop,
   onChange = noop,
+  setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
     document.body.style.overflow = 'hidden'
@@ -40,6 +41,7 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
+          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}

data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx} RENAMED Viewed

@@ -2,16 +2,16 @@
 /* @flow */
 import React, { useContext } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { LightboxContext } from './_lightbox_context'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { LightboxContext } from '../_lightbox_context'
 import { LightboxHeaderIcon } from './_lightbox_header_icon'
-import { IconSizes } from '../pb_icon/_icon'
+import { IconSizes } from '../../pb_icon/_icon'
-import Caption from '../pb_caption/_caption'
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
-import Title from '../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 type LightboxHeaderProps = {
   aria?: {[key: string]: string},

data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx} RENAMED Viewed

@@ -1,8 +1,8 @@
 /* @flow */
 import React from 'react'
-import Icon from '../pb_icon/_icon'
-import {IconSizes} from '../pb_icon/_icon'
+import Icon from '../../pb_icon/_icon'
+import {IconSizes} from '../../pb_icon/_icon'
 type LightboxHeaderIconProps = {
   onClose: () => void,

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { useKbdControls } from './hooks/useKbdControls'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import LightboxHeader from './_lightbox_header'
+import LightboxHeader from './Header/_lightbox_header'
 import { LightboxContext } from './_lightbox_context'
 import { IconSizes } from '../pb_icon/_icon'
@@ -99,6 +99,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           />
             {children}
             <Carousel
+                setIndex={setActivePhoto}
                 currentIndex={activePhoto}
                 onChange={handleOnSlide}
                 photos={photosMap}

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss CHANGED Viewed

@@ -3,56 +3,7 @@
 $slides-margin: $space-md;
-.carousel {
-  .home-tour-main-content {
-    overflow-y: hidden;
-  }
-  .image-gallery-slide-wrapper {
-    width: 1024px;
-    height: 686px;
-  }
-  .image-gallery-slide div {
-    height: auto;
-  }
-  .image-gallery-slide .image-gallery-image {
-    max-height: 100% !important;
-    max-width: 100% !important;
-    height: 692px !important;
-    width: 100% !important;
-    object-fit: cover;
-  }
-  .image-gallery-left-nav .image-gallery-svg, .image-gallery-right-nav .image-gallery-svg {
-    height: 120px;
-    width: 30px;
-    opacity: 0.4;
-  }
-  .image-gallery-thumbnails {
-    overflow-x: auto;
-  }
-  .image-gallery-thumbnails-container {
-    width: 1024px;
-    padding-left: 4px;
-  }
-  .image-gallery-thumbnails {
-    padding-top: 3px;
-    background: #000;
-  }
-  .image-gallery-thumbnail-image {
-    height: 64px;
-    width: 93px;
-  }
-  .image-gallery-thumbnail + .image-gallery-thumbnail {
-    margin-left: 2px;
-    margin-top: 2px;
-  }
+ .carousel {
   .carousel-header {
     background: rgb(0, 0, 0);
@@ -92,12 +43,13 @@ $slides-margin: $space-md;
 .Lightbox {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   position: fixed;
   left: 0;
   top: 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   flex-direction: column;
   background-color: black;
   z-index: 1;
@@ -189,21 +141,15 @@ $slides-margin: $space-md;
 .Thumbnails {
   display: flex;
+  width: 100vw;
   padding: 3px;
-  overflow: auto;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  overflow: scroll;
+  z-index: 20;
   &.centered {
     justify-content: center;
   }
 }
-.Thumbnails.draggable {
-  align-self: flex-start;
-}
 .Thumbnail {
   padding: 3px;
@@ -217,6 +163,8 @@ $slides-margin: $space-md;
 .Thumbnail.active {
   padding: 6px;
+  display: flex;
+  align-items: center;
   background-color: white;
   box-shadow: 0 0 6px white;
 }

data/app/pb_kits/playbook/pb_popover/popover.rb CHANGED Viewed

@@ -4,7 +4,7 @@ module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
       prop :position, type: Playbook::Props::Enum,
-                      values: %w[top bottom left right],
+                      values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                       default: "left"
       prop :trigger_element_id
       prop :tooltip_id

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx CHANGED Viewed

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 type SectionSeparatorProps = {
-  aria: { [key: string]: string; },
-  className: string,
+  aria?: { [key: string]: string; },
+  className?: string,
   dark?: boolean,
-  data: { [key: string]: string; },
-  id: string,
+  data?: { [key: string]: string; },
+  id?: string,
   orientation?: "horizontal" | "vertical",
-  text: string,
+  text?: string,
   variant?: "card" | "background",
 }

data/app/pb_kits/playbook/pb_table/_table.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 /* @flow */
-import React, { type Node } from 'react'
+import React, { useEffect, type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -45,8 +45,10 @@ const Table = (props: TableProps) => {
   const dataProps = buildDataProps(data)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-  const instance = new PbTable()
-  instance.connect()
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
   return (
     <table

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx CHANGED Viewed

@@ -103,7 +103,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     <React.Fragment>
       <Flex
           className={`add-on-${addOnAlignment} ${borderCss}`}
-          inline
           vertical="center"
       >
         {addOnAlignment == 'left' && <>

data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2 | 3 | 4,
+  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",

data/app/pb_kits/playbook/playbook-rails.js CHANGED Viewed

@@ -6,7 +6,7 @@ window.pbChart = pbChart
 import './pb_form/pb_form_validation'
 // Date Picker
-import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 // Lazy image loading

data/app/pb_kits/playbook/plugins/pb_chart.js CHANGED Viewed

@@ -82,6 +82,11 @@ class pbChart {
     Highcharts.chart(this.defaults.id, {
       chart: {
+        events: {
+          load() {
+            setTimeout(this.reflow.bind(this), 0)
+          },
+        },
         type: this.defaults.style,
         height: this.defaults.height,
       },

data/app/pb_kits/playbook/tokens/_spacing.scss CHANGED Viewed

@@ -1,9 +1,11 @@
+$space_xxs:   4px;
 $space_xs:    8px;
 $space_sm:    16px;
 $space_md:    24px;
 $space_lg:    32px;
 $space_xl:    40px;
 $spaces:(
+  space_xxs:  $space_xxs,
   space_xs:   $space_xs,
   space_sm:   $space_sm,
   space_md:   $space_md,

data/app/pb_kits/playbook/utilities/_spacing.scss CHANGED Viewed

@@ -1,6 +1,7 @@
 @import "../tokens/spacing";
 $space_classes: (
+	xxs: $space_xxs,
 	xs: $space_xs,
 	sm: $space_sm,
 	md: $space_md,

data/app/pb_kits/playbook/utilities/text.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export const titleize = (sentence: string): string => (
 const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
-export const joinPresent = (array: [], separator: string): string => (
+export const joinPresent = (array: string[], separator: string): string => (
   filter(array, notEmpty).join(separator)
 )

data/lib/playbook/spacing.rb CHANGED Viewed

@@ -40,7 +40,7 @@ module Playbook
     end
     def spacing_values
-      %w[none xs sm md lg xl]
+      %w[none xxs xs sm md lg xl]
     end
     def spacing_props

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Playbook
-  PREVIOUS_VERSION = "11.5.0"
-  VERSION = "11.6.1.pre.alpha.rubocop-performance1"
+  PREVIOUS_VERSION = "11.7.0"
+  VERSION = "11.7.0.pre.alpha.table1"
 end