RubyGems - playbook_ui - Versions diffs - 12.1.0 → 12.3.0.pre.alpha.patchtest1 - Mend

playbook_ui 12.1.0 → 12.3.0.pre.alpha.patchtest1

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

data/app/pb_kits/playbook/pb_map/_map.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+type MapProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactChild[] | React.ReactNode,
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+const Map = (props: MapProps) => {
+  const {
+  aria = {},
+  children,
+  className,
+  data = {},
+  id,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_map'), globalProps(props), className)
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children}
+    </div>
+  )
+}
+export default Map

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx ADDED Viewed

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect } from 'react'
+import { Map } from '../../'
+import maplibregl from 'maplibre-gl'
+const MapDefault = () => {
+  const mapContainerRef = useRef(null)
+    useEffect(() => {
+      if (!maplibregl.supported()) {
+        alert('Your browser does not support MapLibre GL');
+        } else {
+         const map = new maplibregl.Map({
+            container: mapContainerRef.current,
+            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+            center: [-75.379143, 39.831200],
+            zoom: 13,
+        })
+        //set marker/pin
+        /* eslint-disable-next-line */
+        const marker = new maplibregl.Marker({
+          color: "#0056CF",
+        }).setLngLat([-75.379143, 39.831200])
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+        //add zoom controls
+        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        // disable map zoom when using scroll
+        map.scrollZoom.disable();
+      }
+    }, [])
+return (
+  <Map>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+           }}
+        />
+    </Map>
+)
+}
+export default MapDefault

data/app/pb_kits/playbook/pb_map/docs/_map_default.md ADDED Viewed

@@ -0,0 +1,13 @@
+This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found [here](https://maplibre.org/maplibre-gl-js-docs/api/).
+Basic setup to start using MapLibre:
+- Install the npm package using `yarn add maplibre-gl`
+- Include a link to the CSS file as a CDN in your stylesheet using the following syntax:
+`@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
+ or include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
+- To use Maplibre, you must also set a height on the containing div.
+- You can now use MapLibre within the Map Kit as shown in this example.
+__Notes__ :
+- The MapLibre Marker allows us to pass it a HEX value as a color prop. In these doc examples we are using our primary color for the Marker.
+- `scrollZoom` has been disabled in these doc examples for page usability

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+import React, { useRef, useEffect } from 'react'
+import { Map } from '../../'
+import maplibregl from 'maplibre-gl'
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+const MapWithPlugin = () => {
+  const mapContainerRef = useRef(null)
+    useEffect(() => {
+      if (!maplibregl.supported()) {
+        alert('Your browser does not support MapLibre GL');
+        } else {
+         const map = new maplibregl.Map({
+            container: mapContainerRef.current,
+            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+            center: [-75.379143, 39.831200],
+            zoom: 13,
+        })
+        //set marker/pin
+        /* eslint-disable-next-line */
+        const marker = new maplibregl.Marker({
+          color: "#0056CF",
+        }).setLngLat([-75.379143, 39.831200])
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+        //add zoom controls
+        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        // disable map zoom when using scroll
+        map.scrollZoom.disable();
+        //Add polygon draw button using map-box-gl-draw plugin
+        var draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+            polygon: true,
+            trash: true
+            }
+            });
+            map.addControl(draw);
+      }
+    }, [])
+return (
+  <Map>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+export default MapWithPlugin

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md ADDED Viewed

@@ -0,0 +1,8 @@
+Various plugins are available for use with MapLibre, one of which is the [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw). This plugin is recommended by MapLibre if you need to add the functionality of drawing polygons on the map.
+To test this tool:
+- Click the "draw box" icon to activate the polygon tool
+- Click on a spot on the map to start drawing
+- Continue clicking to create new points, defining the boundaries of the polygon
+- Press enter or re-click the first point to finish the polygon
+- Once drawn, polygons can be selected on click and then moved, by dragging-and-dropping the entire shape; resized, by dragging-and-dropping any boundary point(s); or deleted, by clicking the "trash" button.

data/app/pb_kits/playbook/pb_map/docs/example.yml ADDED Viewed

@@ -0,0 +1,7 @@
+examples:
+  react:
+  - map_default: Default
+  - map_with_plugin: Map With Polygon Draw Plugin

data/app/pb_kits/playbook/pb_map/docs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as MapDefault } from './_map_default.jsx'
2	+ export { default as MapWithPlugin } from './_map_with_plugin.jsx'

data/app/pb_kits/playbook/pb_map/map.test.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+import { Map } from '../'
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+  const kit = renderKit(Map , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_progress_simple/{_progress_simple.jsx → _progress_simple.tsx} RENAMED Viewed

@@ -1,16 +1,15 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   id?: string,
-  max?: string,
+  max?: number,
   muted: boolean,
   percent: string,
   value: number,
@@ -23,6 +22,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
     align,
     className,
     dark = false,
+    data ={},
     max,
     muted = false,
     percent = '',
@@ -34,6 +34,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
     width: width,
   }
+  const dataProps = buildDataProps(data)
   const variantStyle = variant == 'default' ? '' : variant
   const valueStyles = {
@@ -52,7 +53,8 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   )
   return (
-    <div className={wrapperClass}>
+    <div {...dataProps}
+      className={wrapperClass}>
       <div
           className={kitClass}
           data-value={value}

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js ADDED Viewed

@@ -0,0 +1,120 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+import ProgressSimple from './_progress_simple'
+const testId = "progress-simple-test"
+test('renders default class name and percentage', () => {
+  render(
+    <div>
+    <ProgressSimple
+        data={{ testid: testId }}
+        percent={45}
+    />
+  </div>
+  )
+  const kit = screen.getByTestId(testId)
+  const progress = kit.querySelector(".progress_simple_value")
+  expect(kit).toHaveClass('pb_progress_simple_wrapper')
+  expect(progress).toHaveStyle("width: 45%")
+})
+test('renders values', () => {
+    render(
+      <div>
+      <ProgressSimple
+          data={{ testid: testId }}
+          max='10'
+          value='2'
+      />
+    </div>
+    )
+    const kit = screen.getByTestId(testId)
+    const progress = kit.querySelector(".progress_simple_value")
+    expect(progress).toHaveStyle("width: 20%")
+  })
+  test('renders progress bar width', () => {
+    render(
+      <div>
+      <ProgressSimple
+          data={{ testid: testId }}
+          percentage={40}
+          width="100px"
+      />
+    </div>
+    )
+    const kit = screen.getByTestId(testId)
+    const progress = kit.querySelector(".pb_progress_simple_kit")
+    expect(progress).toHaveStyle("width: 100px")
+  })
+  test('renders color variants', () => {
+    [
+        "positive",
+        "negative",
+        "warning"
+    ].forEach((colorVariant) => {
+    render(
+      <div>
+      <ProgressSimple
+          data={{ testid: testId }}
+          percentage={40}
+          variant={colorVariant}
+      />
+    </div>
+    )
+    const kit = screen.getByTestId(testId)
+    const progress = kit.querySelector(`.pb_progress_simple_kit_${colorVariant}`)
+    expect(progress).toBeInTheDocument()
+    cleanup()
+    })
+})
+test('renders muted prop', () => {
+    render(
+      <div>
+      <ProgressSimple
+          data={{ testid: testId }}
+          muted
+          percentage={40}
+      />
+    </div>
+    )
+    const kit = screen.getByTestId(testId)
+    const progress = kit.querySelector('.pb_progress_simple_kit_muted')
+    expect(progress).toBeInTheDocument()
+})
+test('renders align prop', () => {
+    [
+      "left",
+      "center",
+      "right"
+    ].forEach((alignProp) => {
+      render(
+        <ProgressSimple
+            align={alignProp}
+            data={{ testid: testId }}
+            percentage={45}
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`pb_progress_simple_wrapper_${alignProp}`)
+      cleanup()
+    })
+  })

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss CHANGED Viewed

@@ -19,12 +19,11 @@ $pb_selectable_card_border: 2px;
       display: inherit;
       flex-direction: inherit;
       padding: 1px;
-      transition-property: all;
-      transition-duration: $transition_short;
-      transition-timing-function: $easeIn;
     }
     @include pb_card;
+    transition-property: none;
+    transition-duration: 0s;
     background-color: $white;
     padding: $space_sm;
     margin-bottom: $space_sm;
@@ -55,9 +54,6 @@ $pb_selectable_card_border: 2px;
       top: -($pb_selectable_card_indicator_size/2);
       right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
-      transition-property: opacity;
-      transition-duration: $transition_short;
-      transition-timing-function: $easeIn;
     }
   }
@@ -77,6 +73,8 @@ $pb_selectable_card_border: 2px;
         position: relative;
         @include pb_card_selected;
+        transition-property: none;
+        transition-duration: 0s;
         .pb_selectable_card_circle {
           opacity: $opacity_10;
@@ -127,9 +125,6 @@ $pb_selectable_card_border: 2px;
   .separator {
     align-self: stretch;
-    transition-property: all;
-    transition-duration: $transition_short;
-    transition-timing-function: $easeIn;
     width: 1px;
     margin-right: 1px;
     margin-top: -1px;

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
+}
+const iconMap = {
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
+}
+type StatChangeProps = {
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  id?: string,
+  value?: string | number,
+}
+const StatChange = (props: StatChangeProps): React.ReactElement => {
+  const { change = 'neutral', className, icon, id, value } = props
+  const status = statusMap[change as keyof typeof statusMap]
+  let returnedIcon = iconMap[change as keyof typeof iconMap]
+  if (icon) {
+    returnedIcon = icon
+  }
+  return (
+    <>
+      {value &&
+        <div
+            className={classnames(
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
+            id={id}
+        >
+          <Body status={status}>
+            {returnedIcon &&
+              <>
+                <Icon
+                    fixed_width
+                    icon={returnedIcon}
+                />
+                {' '}
+              </>
+            }
+            {`${value}%`}
+          </Body>
+        </div>
+      }
+    </>
+  )
+}
+export default StatChange

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import StatChange from './_stat_change'
+test('it renders each status', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+    const kit = screen.getByText('28.4%')
+    expect(kit).toHaveClass(`pb_body_kit_positive`)
+})
+test('it renders preset icon', () => {
+    render(
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
+    )
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
+})
+test('it renders custom icon', () => {
+    render(
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+    )
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
+})

data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -10,10 +8,10 @@ type StatValueProps = {
   className?: string,
   id?: string,
   unit?: string,
-  value: string | number
+  value: string | number,
 }
-const StatValue = (props: StatValueProps) => {
+const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
     className,
     id,
@@ -21,7 +19,7 @@ const StatValue = (props: StatValueProps) => {
     value = 0,
   } = props
-  const displayValue = function(value) {
+  const displayValue = function(value: string | number) {
     if (value || value === 0) {
       return (
         <Title
@@ -33,7 +31,7 @@ const StatValue = (props: StatValueProps) => {
     }
   }
-  const displayUnit = function(unit) {
+  const displayUnit = function(unit: string) {
     if (unit) {
       return (
         <Title

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatValue from '../_stat_value.jsx'
+import StatValue from '../_stat_value'
 const StatValueUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js ADDED Viewed

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import StatValue from './_stat_value'
+test('it renders the component with the value', () => {
+  render(
+    <StatValue
+        value={1048}
+    />
+  )
+  const kit = screen.getByText('1048')
+  expect(kit).toBeTruthy()
+})
+test('it renders the component with the unit', () => {
+  render(
+    <StatValue
+        unit="appt"
+        value="5,294"
+    />
+  )
+  const kit = screen.getByText('appt')
+  expect(kit).toBeTruthy()
+})

data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -12,16 +10,16 @@ import Caption from '../pb_caption/_caption'
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   date?: string,
   id?: string,
   time: number | Date,
   timeZone?: string,
 }
-const TimeStackedDefault = (props: TimeStackedProps) => {
+const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
   const {

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import TimeStacked from '../_time_stacked.jsx'
+import TimeStacked from '../_time_stacked'
 const TimeStackedDefault = (props) => {
   return (

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

	@@ -1 +1 @@
1	- export { default as TimeStackedDefault } from './_time_stacked_default~~.jsx~~'
1	+ export { default as TimeStackedDefault } from './_time_stacked_default'

data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -11,8 +9,8 @@ import Caption from '../pb_caption/_caption'
 type TimestampProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
-  className?: string | array<string>,
+  aria?: { [key: string]: string },
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   text: string,
@@ -26,7 +24,7 @@ type TimestampProps = {
   variant?: "default" | "elapsed" | "updated"
 }
-const Timestamp = (props: TimestampProps) => {
+const Timestamp = (props: TimestampProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -90,9 +88,9 @@ const Timestamp = (props: TimestampProps) => {
   const captionText = () => {
     switch (variant) {
     case 'updated':
-      return formatUpdatedString(userDisplay, dateTimestamp)
+      return formatUpdatedString()
     case 'elapsed':
-      return formatElapsedString(userDisplay, timeDisplay, updatedText)
+      return formatElapsedString()
     default:
       return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4