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

playbook_ui 12.2.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 (53) 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 ----------------------*/