RubyGems - playbook_ui - Versions diffs - 12.28.0.pre.alpha.PLAY814removemomentjs871 → 12.28.0.pre.alpha.PLAY837MapCustomButton868 - Mend

playbook_ui 12.28.0.pre.alpha.PLAY814removemomentjs871 → 12.28.0.pre.alpha.PLAY837MapCustomButton868

Files changed (31) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from "react";
 import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
-const dateString = (value: Date) => {
-  const month = DateTime.toMonthNum(value);
-  const day = DateTime.toDay(value);
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum();
+  const day = value.toDay();
   return ` · ${month}/${day}`;
 };
@@ -52,6 +52,7 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -61,81 +62,59 @@ const LabelValue = (props: LabelValueProps) => {
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-        title={title}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+      title={title}
     >
-      <Caption dark={dark}
-          text={label}
-      />
+      <Caption dark={dark} text={label} />
       {variant === "details" ? (
-        <Flex inline
-            vertical="center"
-        >
+        <Flex inline vertical="center">
           {icon && (
-            <Body color="light"
-                dark={dark}
-                marginRight="xs"
-            >
-              <Icon dark={dark}
-                  fixedWidth
-                  icon={icon}
-              />
+            <Body color="light" dark={dark} marginRight="xs">
+              <Icon dark={dark} fixedWidth icon={icon} />
             </Body>
           )}
           {description && (
             <Body
-                color="light"
-                dark={dark}
-                marginRight="xs"
-                text={description}
+              color="light"
+              dark={dark}
+              marginRight="xs"
+              text={description}
             />
           )}
           {active === true ? (
-            <Flex inline
-                vertical="center"
-            >
+            <Flex inline vertical="center">
               {title && (
-                <Title dark={dark}
-                    size={4}
-                    text={title}
-                    variant="link"
-                />
+                <Title dark={dark} size={4} text={title} variant="link" />
               )}
               {date && (
                 <Title
-                    dark={dark}
-                    marginLeft="xs"
-                    size={4}
-                    text={" " + dateString(date)}
-                    variant="link"
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                  variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark}
-                  size={4}
-                  text={title}
-                        />
-              }
+              {title && <Title dark={dark} size={4} text={title} />}
               {date && (
                 <Title
-                    dark={dark}
-                    marginLeft="xs"
-                    size={4}
-                    text={" " + dateString(date)}
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark}
-            text={value}
-        />
+        <Body dark={dark} text={value} />
       )}
     </div>
   );

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx ADDED Viewed

@@ -0,0 +1,120 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
+import Title from '../pb_title/_title'
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+  return ` · ${month}/${day}`
+}
+type LogisticProps = {
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  date: string,
+  id?: string,
+  link?: string,
+  projectName?: string,
+  projectNumber?: number,
+}
+const Logistic = (props: LogisticProps) => {
+  const { aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    id,
+    link,
+    projectName,
+    projectNumber } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
+  const classes = classnames(
+    buildCss('pb_logistic_kit', { dark }),
+    globalProps(props),
+    className
+  )
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Body color="light">
+        <Caption text="Project" />
+        <Icon
+            fixedWidth
+            icon="home"
+        />
+        {` ${projectNumber}`}
+        <Choose>
+          <When condition={link}>
+            <a
+                className="pb_logistic_kit_links"
+                href={link}
+            >
+              <Choose>
+                <When condition={date}>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName + dateString(formattedDate)}
+                  />
+                </When>
+                <Otherwise>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName}
+                  />
+                </Otherwise>
+              </Choose>
+            </a>
+          </When>
+          <Otherwise>
+            <Choose>
+              <When condition={date}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName + dateString(formattedDate)}
+                />
+              </When>
+              <Otherwise>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName}
+                />
+              </Otherwise>
+            </Choose>
+          </Otherwise>
+        </Choose>
+      </Body>
+    </div>
+  )
+}
+export default Logistic

data/app/pb_kits/playbook/pb_map/_map.scss CHANGED Viewed

@@ -5,6 +5,21 @@
 @import "./_pb_map_button_mixin.scss";
 [class*="pb_map"] {
+  .pb_map-custom-button {
+    @include pb_map_button;
+    position: relative;
+    margin-top: $space_xs;
+    box-shadow: $shadow_deep;
+    .pb_icon_kit {
+      width: $space_sm - 2;
+      height: $space_sm;
+    }
+    .pb_button_content {
+      height: $space_sm;
+    }
+  }
   .mapboxgl-map,
   .maplibregl-map {
     font-family: $font_family_base !important;
@@ -185,7 +200,7 @@
     }
     .map-zoom-in-button,
     .map-zoom-out-button,
-    .map-flyto-button {
+    .map-flyto-button, .pb_map-custom-button {
       @include pb_map_button_dark;
     }

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

@@ -3,9 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import Flex  from "../pb_flex/_flex"
-import Icon from '../pb_icon/_icon'
-import Button from '../pb_button/_button'
+import MapControls from './_map_controls';
 type MapProps = {
   aria?: { [key: string]: string },
@@ -47,29 +45,13 @@ const Map = (props: MapProps) => {
     >
       {
         zoomBtns ? (
-          <Flex className="custom-nav-control" orientation='column'>
-            <div className="custom-nav-control-zoom">
-              <Button className='map-zoom-in-button'
-                  onClick={zoomInClick}
-              >
-                    <Icon icon="plus"/>
-              </Button>
-              <Button className='map-zoom-out-button'
-                 onClick={zoomOutClick}
-              >
-                    <Icon icon="minus"/>
-              </Button>
-            </div>
-            {
-              flyTo ? (
-                <Button className='map-flyto-button'
-                  onClick={flyToClick}
-                >
-                      <Icon icon="eye"/>
-                </Button>
-              ) : null
-            }
-         </Flex>
+          <Map.Controls
+          flyTo={flyTo}
+          flyToClick={flyToClick}
+          zoomBtns={zoomBtns}
+          zoomInClick={zoomInClick}
+          zoomOutClick={zoomOutClick}
+          />
          ) : null
       }
       {children}
@@ -77,4 +59,5 @@ const Map = (props: MapProps) => {
   )
 }
+Map.Controls = MapControls
 export default Map

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

@@ -0,0 +1,47 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+import Flex from "../pb_flex/_flex";
+type MapControlTypes = {
+  zoomBtns?: boolean,
+  flyTo?: boolean,
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
+  children?: React.ReactNode | React.ReactNode[]
+}
+const MapControls = ({
+  zoomBtns,
+  zoomInClick,
+  zoomOutClick,
+  flyTo,
+  flyToClick,
+  children,
+}: MapControlTypes) => {
+  return (
+    <Flex className="custom-nav-control" orientation="column">
+      {zoomBtns ? (
+        <>
+          <div className="custom-nav-control-zoom">
+            <Button className="map-zoom-in-button" onClick={zoomInClick}>
+              <Icon icon="plus" />
+            </Button>
+            <Button className="map-zoom-out-button" onClick={zoomOutClick}>
+              <Icon icon="minus" />
+            </Button>
+          </div>
+          {flyTo ? (
+            <Button className="map-flyto-button" onClick={flyToClick}>
+              <Icon icon="eye" />
+            </Button>
+          ) : null}
+        </>
+      ) : null}
+      {children}
+    </Flex>
+  );
+};
+export default MapControls;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+type MapCustomButtonTypes = {
+  onClick?: () => {};
+  icon?: string;
+};
+const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
+  return (
+    <Button className="pb_map-custom-button" onClick={onClick}>
+      <Icon icon={icon} />
+    </Button>
+  );
+};
+export default MapCustomButton;

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

@@ -0,0 +1,83 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme, MapCustomButton } from '../..'
+import maplibregl from 'maplibre-gl'
+const MapWithCustomButton = (props) => {
+  //set Map instance to access from outside useEffect
+  const [mapInstance, setMapInstance] = useState(null)
+  const mapContainerRef = useRef(null)
+  //Set default position
+  const defaultPosition = [-75.379143, 39.831200]
+  // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
+  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
+  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
+  const handleFlyTo = (map) => {map.flyTo({
+                                center: defaultPosition,
+                                ... mapTheme.flyToConfig
+                                });}
+  //This function is called by the useEffect when map instance first loads
+  const loadMap = ( { target: map }) => {
+        //set marker/pin
+        new maplibregl.Marker({
+          color: mapTheme.marker,
+        }).setLngLat(defaultPosition)
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+        // disable map zoom when using scroll
+        map.scrollZoom.disable();
+        //add attributioncontrols
+        map.addControl(new maplibregl.AttributionControl({
+          compact: true
+          }));
+        //set map instance
+        setMapInstance(map)
+  }
+    useEffect(() => {
+         new maplibregl.Map({
+            container: mapContainerRef.current,
+            center: defaultPosition,
+            ...mapTheme.mapConfig
+        }).on('load', loadMap)
+    }, [])
+return (
+  <Map
+      {...props}
+  >
+    <Map.Controls flyTo
+        flyToClick={()=> {handleFlyTo(mapInstance)}}
+        zoomBtns
+        zoomInClick={() => {handleZoomIn(mapInstance)}}
+        zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+    >
+      <MapCustomButton icon="home"
+          onClick={() => alert("button clicked!")}
+      />
+      <MapCustomButton icon="search"
+          onClick={() => alert("button clicked!")}
+      />
+    </Map.Controls>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+export default MapWithCustomButton

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

	@@ -0,0 +1 @@
1	+ If you want to add custom buttons to the Map, you can use the `MapCustomButton` component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.

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

@@ -4,3 +4,4 @@ examples:
   react:
   - map_default: Default
   - map_with_plugin: Map With Polygon Draw Plugin
+  - map_with_custom_button: Map With Custom Button

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

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

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -23,8 +23,8 @@ type MessageProps = {
   id?: string,
   label?: string,
   message: string,
-  timestamp?: Date,
-  timestampObject?: Date,
+  timestamp?: string,
+  timestampObject?: string,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-            imageUrl={avatarUrl}
-            name={avatarName}
-            size="xs"
-            status={avatarStatus}
+          imageUrl={avatarUrl}
+          name={avatarName}
+          size="xs"
+          status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-            justify={alignTimestamp === 'left' ? 'none' : 'between'}
-            orientation="row"
+          justify={alignTimestamp === 'left' ? 'none' : 'between'}
+          orientation="row"
         >
           {label &&
             <Title
-                className="message_title"
-                size={4}
-                text={label}
+              className="message_title"
+              size={4}
+              text={label}
             />
           }
           <Timestamp
-              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-              text={timestamp.toString()}
-              timestamp={null}
-              timezone={timezone}
+            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+            text={timestamp}
+            timestamp={''}
+            timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-                className={`pull-${alignTimestamp} message_timestamp`}
-                text={''}
-                timestamp={timestampObject}
-                timezone={timezone}
+              className={`pull-${alignTimestamp} message_timestamp`}
+              text={''}
+              timestamp={timestampObject}
+              timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-              className="pb_message_body"
-              text={message}
+            className="pb_message_body"
+            text={message}
           />
         }
         {children}

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -13,7 +13,7 @@ type TimeProps = {
   align?: "left" | "center" | "right";
   className?: string | string[];
   data?: string;
-  date: Date;
+  date: string;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,6 +41,8 @@ const Time = (props: TimeProps) => {
     className
   );
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
   return (
     <div className={classes}>
       {showIcon && (
@@ -68,18 +70,18 @@ const Time = (props: TimeProps) => {
             )
       )}
-      <time dateTime={date.toString()}>
+      <time dateTime={date}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {DateTime.toTimeWithMeridiem(date, timeZone)}
+                    {dateTimestamp.toTimeWithMeridian()}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {DateTime.toTimeZone(date, timeZone)}
+                      {dateTimestamp.toTimezone()}
                     </span>
                   )}
                 </>
@@ -90,13 +92,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
+                        text={dateTimestamp.toTimeWithMeridian()}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={DateTime.toTimeZone(date, timeZone)}
+                          text={dateTimestamp.toTimezone()}
                       />
                     )}
                   </>
@@ -106,13 +108,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
+                        text={dateTimestamp.toTimeWithMeridian()}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={DateTime.toTimeZone(date, timeZone)}
+                          text={dateTimestamp.toTimezone()}
                       />
                     )}
                   </>