RubyGems - playbook_ui - Versions diffs - 12.1.0 → 12.3.0 - Mend

playbook_ui 12.1.0 → 12.3.0

Files changed (72) 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