RubyGems - playbook_ui - Versions diffs - 12.4.0.pre.alpha.map1 → 12.5.0.pre.alpha.datepicker1 - Mend

playbook_ui 12.4.0.pre.alpha.map1 → 12.5.0.pre.alpha.datepicker1

Files changed (65) hide show

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss ADDED Viewed

@@ -0,0 +1,68 @@
+@import "../../pb_textarea/textarea_mixin";
+[class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
+  .pb_date_picker_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  .date_picker_input_wrapper {
+    display: block;
+    input::placeholder,
+    .date_picker_input .placeholder {
+      @include pb_body_light;
+    }
+    input,
+    .date_picker_input {
+      max-height: 45px;
+      @include pb_textarea_light;
+      overflow: hidden;
+    }
+    input:hover,
+    .date_picker_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+    input:focus,
+    .date_picker_input:focus,
+    input:-webkit-autofill:focus,
+    .date_picker_input:-webkit-autofill:focus {
+      @include pb_textarea_focus;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+  }
+  &.error {
+    .date_picker_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+      input,
+      .date_picker_input {
+        border-color: $error;
+      }
+    }
+  }
+  &.inline {
+    .date_picker_input_wrapper input::placeholder,
+    .date_picker_input_wrapper .date_picker_input .placeholder {
+      opacity: 1;
+    }
+    &:not(:hover) {
+      .date_picker_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+type LoadingInlineProps = {
+  align?: "left" | "center" | "right",
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+const LoadingInline = (props: LoadingInlineProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    id,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss(`pb_loading_inline_kit_${align}`),
+    globalProps(props),
+    className
+  )
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      <Body color="light">
+        <Icon
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
+export default LoadingInline

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import LoadingInline from './_loading_inline'
+const testId = "loadingInline"
+test('should render custom class and data', () => {
+    render(
+        <LoadingInline
+            className='custom-class'
+            data={{ testid: testId }}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+test('should render id', () => {
+    render(
+        <LoadingInline
+            data={{ testid: testId }}
+            id={testId}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+test('should render aria-label', () => {
+    render(
+        <LoadingInline
+            aria={{ label: testId }}
+            data={{ testid: testId }}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})

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

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
 import { Map } from '../../'
-import "maplibre-gl/dist/maplibre-gl.css"
 import maplibregl from 'maplibre-gl'
 import mapTheme from '../pbMapTheme'

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

@@ -2,12 +2,12 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
 Basic setup to start using MapLibre:
 - Install the npm package using `yarn add maplibre-gl`
-- import the maplibre-gl CSS using `import "maplibre-gl/dist/maplibre-gl.css"` OR 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");`
+- To include the maplibre css, 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 but for Playbook styling we recommend importing our `MapTheme` file and passing `mapTheme.marker` to the Marker color prop.
 - To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example.
+- Use `mapTheme.marker` to set the Marker color.
+- To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
 - `scrollZoom` has been disabled in these doc examples for page usability

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

@@ -2,12 +2,14 @@ import React, { useRef, useEffect } from 'react'
 import { Map } from '../../'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 import mapTheme from '../pbMapTheme'
 const MapWithPlugin = (props) => {
+    //set Map instance to access from outside useEffect
+    const mapContainerRef = useRef(null)
-  const mapContainerRef = useRef(null)
+      //Set default position
+    const defaultPosition = [-75.379143, 39.831200]
     //This function should contain all maplibre related code
     const loadMap = ( { target: map }) => {
@@ -15,11 +17,11 @@ const MapWithPlugin = (props) => {
         /* eslint-disable-next-line */
         const marker = new maplibregl.Marker({
           color: mapTheme.marker,
-        }).setLngLat([-75.379143, 39.831200])
+        }).setLngLat(defaultPosition)
         .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
+        //add maplibre default zoom controls
         map.addControl(new maplibregl.NavigationControl({showCompass: false}))
         // disable map zoom when using scroll
@@ -39,9 +41,8 @@ const MapWithPlugin = (props) => {
     useEffect(() => {
          new maplibregl.Map({
             container: mapContainerRef.current,
-            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
             center: [-75.379143, 39.831200],
-            zoom: 13,
+            ...mapTheme.mapConfig
         }).on('load', loadMap)
     }, [])

data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} RENAMED Viewed

@@ -13,11 +13,11 @@ import Timestamp from '../pb_timestamp/_timestamp'
 import Title from '../pb_title/_title'
 type MessageProps = {
-  aria: object,
+  aria: { [key: string]: string },
   avatarName?: string,
-  avatarStatus?: string,
+  avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
-  children?: array<React.ReactNode> | React.ReactNode,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: object,
   id?: string,
@@ -61,53 +61,53 @@ const Message = (props: MessageProps) => {
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
-      <If condition={shouldDisplayAvatar}>
+      {shouldDisplayAvatar &&
         <Avatar
-            imageUrl={avatarUrl}
-            name={avatarName}
-            size="xs"
-            status={avatarStatus}
+          imageUrl={avatarUrl}
+          name={avatarName}
+          size="xs"
+          status={avatarStatus}
         />
-      </If>
+      }
       <div className="content_wrapper">
         <Flex
-            justify={alignTimestamp === 'left' ? 'none' : 'between'}
-            orientation="row"
+          justify={alignTimestamp === 'left' ? 'none' : 'between'}
+          orientation="row"
         >
-          <If condition={label}>
+          {label &&
             <Title
-                className="message_title"
-                size={4}
-                text={label}
+              className="message_title"
+              size={4}
+              text={label}
             />
-          </If>
+          }
           <Timestamp
-              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-              text={timestamp}
-              timezone={timezone}
+            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+            text={timestamp}
+            timestamp={''}
+            timezone={timezone}
           />
-          <If condition={timestampObject}>
+          {timestampObject &&
             <Timestamp
-                className={`pull-${alignTimestamp} message_timestamp`}
-                timestamp={timestampObject}
-                timezone={timezone}
+              className={`pull-${alignTimestamp} message_timestamp`}
+              text={''}
+              timestamp={timestampObject}
+              timezone={timezone}
             />
-          </If>
+          }
         </Flex>
-        <If condition={message}>
+        {message &&
           <Body
-              className="pb_message_body"
-              text={message}
+            className="pb_message_body"
+            text={message}
           />
-        </If>
-        <If condition={children}>
-          { children }
-        </If>
+        }
+        {children}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_message/message.test.js ADDED Viewed

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Message from './_message'
+import Image from './../pb_image/_image'
+const testId = "message"
+const MessageDefault = () => {
+    return (
+        <>
+            <Message
+                avatarName="Becca Jacobs"
+                avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+                className='custom-class'
+                data={{ testid: testId }}
+                label="Lucille Sanchez"
+                message="Application for Kate Smith is waiting for your approval"
+                timestamp="2 days ago"
+            >
+                <Image
+                    alt="picture of a misty forest"
+                    size="md"
+                    url="https://unsplash.it/500/400/?image=634"
+                />
+            </Message>
+        </>
+    )
+}
+test('should render message', () => {
+    render(<MessageDefault />)
+    const kit = screen.getByText('Application for Kate Smith is waiting for your approval')
+    expect(kit).toBeInTheDocument()
+})
+test('should render label', () => {
+    render(<MessageDefault />)
+    const kit = screen.getByText('Lucille Sanchez')
+    expect(kit).toBeInTheDocument()
+})
+test('should render timestamp', () => {
+    render(<MessageDefault />)
+    const kit = screen.getByText('2 days ago')
+    expect(kit).toBeInTheDocument()
+})
+test('should render custom class and data', () => {
+    render(<MessageDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+test('should render a children', () => {
+    render(<MessageDefault />)
+    const kit = screen.getByAltText('picture of a misty forest')
+    expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} RENAMED Viewed

@@ -15,7 +15,7 @@ import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
 type PassphraseProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
   data?: object,
@@ -23,7 +23,7 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
-  onChange: (String) => void,
+  onChange: (inputValue: String) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -40,7 +40,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => {},
+    onChange = () => { },
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -62,11 +62,11 @@ const Passphrase = (props: PassphraseProps) => {
   )
   const toggleShowPopover = () => setShowPopover(!showPopover)
-  const handleShouldClosePopover = (shouldClosePopover) => {
+  const handleShouldClosePopover = (shouldClosePopover: boolean) => {
     setShowPopover(!shouldClosePopover)
   }
-  const toggleShowPassphrase = (e) => {
+  const toggleShowPassphrase = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
     setShowPassphrase(!showPassphrase)
   }
@@ -86,54 +86,54 @@ const Passphrase = (props: PassphraseProps) => {
   const popoverReference = (
     <CircleIconButton
-        className={tipClass}
-        dark={dark}
-        icon="info-circle"
-        onClick={toggleShowPopover}
-        variant="link"
+      className={tipClass}
+      dark={dark}
+      icon="info-circle"
+      onClick={toggleShowPopover}
+      variant="link"
     />
   )
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <label>
         <Flex align="baseline">
-          <Caption
-              className="passphrase-label"
-              text={label}
+          <Caption
+            className="passphrase-label"
+            text={label}
           />
-          <If condition={tips.length > 0 && !confirmation}>
+          {tips.length > 0 && !confirmation &&
             <PbReactPopover
-                className="passphrase-tips"
-                closeOnClick="outside"
-                placement="right"
-                reference={popoverReference}
-                shouldClosePopover={handleShouldClosePopover}
-                show={showPopover}
+              className="passphrase-tips"
+              closeOnClick="outside"
+              placement="right"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClosePopover}
+              show={showPopover}
             >
-              <Flex
-                  align="center"
-                  orientation="column"
+              <Flex
+                align="center"
+                orientation="column"
               >
-                <Caption
-                    marginBottom="xs"
-                    text="Tips for a good passphrase"
+                <Caption
+                  marginBottom="xs"
+                  text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
-                    <Caption
-                        key={i}
-                        marginBottom="xs"
-                        size="xs"
+                    <Caption
+                      key={i}
+                      marginBottom="xs"
+                      size="xs"
                     >
-                      <Icon
-                          icon="shield-check"
-                          marginRight="xs"
+                      <Icon
+                        icon="shield-check"
+                        marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -141,34 +141,34 @@ const Passphrase = (props: PassphraseProps) => {
                 </div>
               </Flex>
             </PbReactPopover>
-          </If>
+          }
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-              className="passphrase-text-input"
-              dark={dark}
-              marginBottom="xs"
-              onChange={handleChange}
-              placeholder="Enter a passphrase..."
-              type={showPassphrase ? "text" : "password"}
-              value={displayValue}
-              {...inputProps}
+            className="passphrase-text-input"
+            dark={dark}
+            marginBottom="xs"
+            onChange={handleChange}
+            placeholder="Enter a passphrase..."
+            type={showPassphrase ? "text" : "password"}
+            value={displayValue}
+            {...inputProps}
           />
-          <span
-              className="show-passphrase-icon"
-              onClick={toggleShowPassphrase}
+          <span
+            className="show-passphrase-icon"
+            onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? "hide-icon" : ""}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "hide-icon" : ""}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? "" : "hide-icon"}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "" : "hide-icon"}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye" />
             </Body>

data/app/pb_kits/playbook/pb_phone_number_input/PhoneNumberHelper.js ADDED Viewed

@@ -0,0 +1,12 @@
+const PhoneNumberHelper = () => {
+  // window.addEventListener('DOMContentLoaded', () => {
+    for (let i = 0; i < window.intlTelInputGlobals.getCountryData().length; i++) {
+      let country = window.intlTelInputGlobals.getCountryData()[i]
+      country.name = country.name.split("(")[0].trim()
+      console.log(country.name)
+    }
+  // })
+};
+export default PhoneNumberHelper;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "hello"
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br"
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb ADDED Viewed

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    only_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb ADDED Viewed

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    preferred_countries: ['us', 'br', 'ph', 'gb']
+}) %>

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

@@ -5,3 +5,6 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  rails:
+  - phone_number_input_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb ADDED Viewed

@@ -0,0 +1,15 @@
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
+<script>
+  const formatToGlobalCountryName = () => {
+    return countryName.split('(')[0].trim()
+  }
+  const formatAllCountries = () => {
+    let countryData = window.intlTelInputGlobals.getCountryData()
+    for (let i = 0; i < countryData.length; i++) {
+      let country = countryData[i]
+      country.name = formatToGlobalCountryName(country.name)
+    }
+  }
+  </script>