playbook_ui_docs 14.11.1.pre.alpha.play1724darkmodeauditmap5413 → 14.11.1.pre.alpha.play17725372

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 364db9a32d67ef8695aa48175b6281ce41ca017ababac0f98507a349efb31f57
-  data.tar.gz: 51c8d0f6422756b9f015b98b56aebf4c25fef5ac4536e225e3004b831a132276
+  metadata.gz: 71665013535983bbbb262a5e9fd63b1418f67026361e2660fbe3c5f4c2ccea1a
+  data.tar.gz: a343b17a0932ac52611e4861419b243c188e410d07a8502a8acab75e029ff42f
 SHA512:
-  metadata.gz: b107c5b9a7271ac4c9b28c8476b0127cfd2149f7f5e2b9466ad8204f2e68c4c0c99a67a5d28c011d2ab7f0265a9ba6fcf5017b381624620e0c34b3ba142aa345
-  data.tar.gz: 55542d06b2056c8c4f617b2acbfdb0e9a66115d4352d51f342e3fcbc0bb90924f9740d26382ffaea54a4a1cf4677e2de140d599b70b89e53bb599dde600bd682
+  metadata.gz: 7a91954d5fef65f3f118f85a45ab2c038560f6a5016a740ce0e6114d3040fa71a3148829dd0874ef4ada370d5018370cd48dbadcd506832a64e0ef384c90f2ba
+  data.tar.gz: d0c777e8b3e108bef802adfa5f68cf78017af5505ad3e39278399fc8721effc54d74c5a2263640477e39a3b8809ab6c6193897fc6e94571f656aa6a420d8d2a8

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

@@ -25,12 +25,12 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
+        .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
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
 
     }, [])
 
-return (
+return ( 
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -63,7 +63,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

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

@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
+        .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
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
 
     }, [])
 
-return (
-  <Map
+return ( 
+  <Map 
       {...props}
   >
     <Map.Controls flyTo
@@ -59,10 +59,10 @@ return (
         zoomInClick={() => {handleZoomIn(mapInstance)}}
         zoomOutClick={()=> {handleZoomOut(mapInstance)}}
     >
-      <MapCustomButton icon="home"
+      <MapCustomButton icon="home" 
           onClick={() => alert("button clicked!")}
       />
-      <MapCustomButton icon="search"
+      <MapCustomButton icon="search" 
           onClick={() => alert("button clicked!")}
       />
     </Map.Controls>
@@ -72,7 +72,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

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

@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
+        .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 maplibre default zoom controls
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
         map.addControl(new maplibregl.AttributionControl({
             compact: true
         }));
-
+          
         //set map instance
         setMapInstance(map)
     }
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
     }, [])
 
 
-
-return (
+    
+return ( 
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -77,7 +77,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,50 @@
+
+
+
+<%= pb_rails("title", props: { text: "Input Masks", size: 4, margin_bottom: "md" }) %>
+
+<div class="pb--doc-demo-elements">
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Social Security Number",
+    mask: "ssn",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency"
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>
+
+</div>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+This mask feature lets you style your inputs while maintaining the value that the user typed in.
+
+There's a hidden input file that stores the raw value, and has the `name` feild. It will also copy the id field with a "#{your-id-sanitized}"

data/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""