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

playbook_ui 12.2.0 → 12.3.0

Files changed (52) hide show

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_typeahead/_typeahead.jsx CHANGED Viewed

@@ -18,7 +18,7 @@ import Option from './components/Option'
 import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
-import { noop } from '../utilities/props'
+import { noop, buildDataProps } from '../utilities/props'
 /**
  * @typedef {object} Props
@@ -32,6 +32,8 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
+  data?: object,
+  error?: string,
   id?: string,
   label?: string,
   loadOptions?: string,
@@ -49,6 +51,8 @@ const Typeahead = ({
   async,
   components = {},
   createable,
+  error = "",
+  data = {},
   getOptionLabel,
   getOptionValue,
   id,
@@ -106,13 +110,18 @@ const Typeahead = ({
     }
   }
+  const dataProps = buildDataProps(data)
   const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
   const inlineClass = selectProps.inline ? 'inline' : null
   return (
-    <div className={classnames(classes, inlineClass)}>
+    <div {...dataProps}
+        className={classnames(classes, inlineClass)}
+    >
       <Tag
           classNamePrefix="typeahead-kit-select"
+          error={error}
           onChange={handleOnChange}
           {...selectProps}
       />

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED Viewed

@@ -181,8 +181,6 @@
       }
     }
   }
   .typeahead-kit-select__menu {
     .typeahead-kit-select__option {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx ADDED Viewed

@@ -0,0 +1,95 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Typeahead from './_typeahead'
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+test('typeahead classname + label renders as expected', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'typeahead-test' }}
+        defaultValue={[options[0]]}
+        label="Colors"
+        options={options}
+    />
+  )
+  const kit = screen.getByTestId('typeahead-test')
+  const label = kit.querySelector(".pb_caption_kit_md.pb_text_input_kit_label")
+  expect(kit).toHaveClass("pb_typeahead_kit")
+  expect(label).toHaveTextContent("Colors")
+})
+test('to be error variant', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'error-test' }}
+        error='Please make a valid selection'
+        options={options}
+    />
+  )
+  const kit = screen.getByTestId("error-test")
+  const error = kit.querySelector(".pb_body_kit_negative")
+  expect(error).toBeInTheDocument()
+})
+test('should be inline variant', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'inline-test' }}
+        inline
+        options={options}
+    />
+  )
+  const kit = screen.getByTestId('inline-test')
+  expect(kit).toHaveClass("inline")
+})
+test('typeahead with pills', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'pills-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        options={options}
+    />
+  )
+  const kit = screen.getByTestId('pills-test')
+  const pill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(pill).toBeInTheDocument()
+})
+test('typeahead multi select with badges and small pills', () => {
+  render(
+    <>
+    <Typeahead
+        data={{ testid: 'badge-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        multiKit="badge"
+        options={options}
+    />
+    <Typeahead
+        data={{ testid: 'small-pill-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        multiKit="smallPill"
+        options={options}
+    />
+    </>
+  )
+  const kit = screen.getByTestId('small-pill-test')
+  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
+  expect(badge).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx CHANGED Viewed

@@ -7,7 +7,7 @@ const ClearContainer = (props: any) => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, true)
+  }, [true])
   return (
     <components.ClearIndicator

data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
         dark={props.selectProps.dark}
+        error={props.selectProps.error}
         label={props.selectProps.label}
     >
       <Flex>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-error-example-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+// @flow
+import React, { useState, useEffect } from 'react'
+import Typeahead from '../_typeahead'
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+const TypeaheadErrorState = (props) => {
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const [searchValue, setSearchValue] = useState(null);
+  const handleOnChange = (value) => setSearchValue(value)
+    useEffect(() => {
+      if(searchValue) {
+        setErrorState("")
+      } else {
+        setErrorState("Please make a valid selection")
+      }
+    }, [searchValue])
+  return (
+    <Typeahead
+        error={errorState}
+        label="Colors"
+        onChange={handleOnChange}
+        options={options}
+        {...props}
+    />
+  )
+}
+export default TypeaheadErrorState

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED Viewed

@@ -8,6 +8,7 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
+    - typeahead_error_state: Error State
   react:
     - typeahead_default: Default
@@ -20,3 +21,4 @@ examples:
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
+    - typeahead_error_state: Error State

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

@@ -8,3 +8,4 @@ export { default as TypeaheadInline } from './_typeahead_inline.jsx'
 export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
+export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED Viewed

@@ -5,6 +5,8 @@ module Playbook
     class Typeahead < Playbook::KitBase
       prop :async, type: Playbook::Props::Boolean, default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :error, type: Playbook::Props::String,
+                   default: ""
       prop :get_option_label
       prop :get_option_value
       prop :id
@@ -57,6 +59,7 @@ module Playbook
         base_options = {
           dark: dark,
           defaultValue: default_options,
+          error: error,
           id: id,
           inline: inline,
           isMulti: is_multi,

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

@@ -55,6 +55,7 @@ import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Map from 'pb_map/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -152,6 +153,7 @@ WebpackerReact.setup({
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,
+  ...Map,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,

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

@@ -96,11 +96,13 @@ $hover_colors: (
 );
 /* Focus colors -----------------------*/
+$focus_color:         $primary;
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
-  focus_input_dark:         $focus_input_dark
+  focus_input_dark:         $focus_input_dark,
+  focus_color:              $focus_color
 );
 /* Border colors ----------------------*/