playbook_ui 2.9.7 → 2.9.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a5f2bd958a96f0dbfd28803cf2985193685e6befec0ee99cc70b88a9b240724
-  data.tar.gz: c0431904190cb6d3f70b773becf328aa27b270dbcef67325799f6e22bc174536
+  metadata.gz: 886c7c99d455f10b2f169cfea7e6857d12ac0244e48243fbd5f6b7e16733af35
+  data.tar.gz: eb575a0deb1435b1ff816112502ca54eeedd103103a31897e0cb33158ca842eb
 SHA512:
-  metadata.gz: ca568cf8bd38190150704d38a8b209d7732b523162206e8e0900d1e1a34687e1b476a6b02467f2280e8f06337f5b92ceb27716bd383a35abe2924f8dfefbdfbf
-  data.tar.gz: 974ccaefbb7da619678d5345f04c1a8be13ae97aacb20342d09eaf4ae3f7c2909dfd88d027fb167f4f49fbafb0121fe7c3e8e5bd8d2d69b622ae010f8915e9ed
+  metadata.gz: eae3b21bc2932fd555f5a5368a4a01a49c9ea6ecf301d6c42dfdea4c93acedc00d8928513b3522dd995c0717c092b1109c5e8f69ae2169c142cc2d98eff0bdd0
+  data.tar.gz: 167da2b15af3a4d20a5dbb4723520fca0ca393cad64ba6f57695633bb999f61ac0b6c6fe8738d5d8fab69f5a571ad3975fab8774743d8f878102144a6364d984

data/README.md

@@ -12,6 +12,7 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 1. Run `yarn && bundle`
 1. Run `make start`
 1. Bootstrap the database: `docker-compose run web bin/rails db:setup`
+1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8080](http://localhost:8080)
 
 To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
@@ -24,7 +25,7 @@ To clean up this project from your local machine, run `make stop`, which will dr
 * Run `make bundle` to (un-)install gems and update the `Gemfile.lock`
 * Re-start the server with `make start`
 
-To run the tests, do `make test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
+To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
 
 </p>
 </details>

data/app/assets/images/pb.logo.svg

@@ -1,27 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="141px" height="39px" viewBox="0 0 141 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
-    <title>Page 1</title>
+<svg width="143px" height="39px" viewBox="0 0 143 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>pb.logo</title>
     <desc>Created with Sketch.</desc>
     <defs>
-        <polygon id="path-1" points="31.27995 38.3709677 6.29032258e-05 38.3709677 6.29032258e-05 0.0894483871 31.27995 0.0894483871 31.27995 38.3709677"></polygon>
+        <polygon id="path-1" points="31.27995 38.3709677 6.29032258e-05 38.3709677 6.29032258e-05 0.0894483871 31.27995 0.0894483871"></polygon>
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-26.000000, -96.000000)">
-            <g id="Page-1" transform="translate(26.000000, 96.000000)">
-                <path d="M38.900986,25.7250725 L38.900986,20.0998494 L42.9692278,20.0998494 C46.7361183,20.0998494 48.7953517,17.5634764 48.7953517,14.5499641 C48.7953517,11.5113391 46.7361183,8.97496614 42.9692278,8.97496614 L34.5816183,8.97496614 L34.5816183,25.7250725 L38.900986,25.7250725 Z M42.3163001,16.3329589 L38.900986,16.3329589 L38.900986,12.7418566 L42.3163001,12.7418566 C43.4714798,12.7418566 44.4006462,13.3947843 44.4006462,14.5499641 C44.4006462,15.6800312 43.4714798,16.3329589 42.3163001,16.3329589 Z M54.4896223,25.7250725 L54.4896223,8.97496614 L50.6222814,8.97496614 L50.6222814,25.7250725 L54.4896223,25.7250725 Z M68.3203764,25.7250725 L68.3203764,18.1410663 C68.3203764,14.3741758 65.5831026,13.2943339 62.6700407,13.2943339 C60.811708,13.2943339 58.7273619,13.8468112 57.1703805,15.1777791 L58.6017989,17.8648277 C59.5811905,17.0361118 60.7865954,16.5589723 61.9920004,16.5589723 C63.5489818,16.5589723 64.4530355,17.2872378 64.4530355,18.3419671 L64.4530355,19.5473721 C63.72477,18.6433184 62.2933516,18.1159537 60.686145,18.1159537 L60.5385458,18.1180063 C58.7078145,18.1688571 56.5174529,19.1726656 56.5174529,22.0335198 C56.5174529,24.745681 58.8278124,26.0264237 60.686145,26.0264237 C62.2431264,26.0264237 63.6996574,25.4237213 64.4530355,24.5196675 L64.4530355,25.7250725 L68.3203764,25.7250725 Z M62.2933516,23.4900508 C61.2888475,23.4900508 60.3596812,23.0380239 60.3596812,22.083745 C60.3596812,21.1294661 61.2888475,20.6774392 62.2933516,20.6774392 C63.1471801,20.6774392 64.0512338,20.9536779 64.4530355,21.5312678 L64.4530355,22.6111097 C64.0512338,23.1886996 63.1471801,23.4900508 62.2933516,23.4900508 Z M70.8755716,30.4462419 C71.2773732,30.5718049 72.181427,30.6471427 72.5330034,30.6471427 L72.7503997,30.6408447 C74.9447008,30.5602028 76.6513638,29.9591284 77.6094597,27.5764643 L83.130522,13.5956851 L79.0371676,13.5956851 L76.2998939,21.2801417 L73.5375075,13.5956851 L69.4692658,13.5956851 L74.3159982,25.9008607 L74.0397596,26.5537884 C73.8137462,27.0560405 73.2612689,27.2318287 72.3823278,27.2318287 C72.0809765,27.2318287 71.7042875,27.1564909 71.4280489,27.0058153 L70.8755716,30.4462419 Z M88.1467523,21.5312678 L88.1467523,17.8146025 C88.6238917,17.1616748 89.6283959,16.7096479 90.4571118,16.7096479 C91.9889806,16.7096479 93.1441603,17.8397151 93.1441603,19.6478225 C93.1441603,21.4810425 91.9889806,22.6111097 90.4571118,22.6111097 C89.6283959,22.6111097 88.6238917,22.1841954 88.1467523,21.5312678 Z M88.1467523,25.7250725 L88.1467523,24.3187667 C89.1512564,25.4739465 90.381774,26.0264237 91.7378545,26.0264237 C94.7262543,26.0264237 97.086839,23.7662894 97.086839,19.6478225 C97.086839,15.6800312 94.7764795,13.2943339 91.7378545,13.2943339 C90.4068866,13.2943339 89.1010312,13.8216986 88.1467523,15.0271035 L88.1467523,8.97496614 L84.2794114,8.97496614 L84.2794114,25.7250725 L88.1467523,25.7250725 Z M104.915681,26.0264237 C109.084373,26.0264237 111.545408,23.0631366 111.545408,19.6478225 C111.545408,16.2325085 109.084373,13.2943339 104.915681,13.2943339 C100.797214,13.2943339 98.3361789,16.2325085 98.3361789,19.6478225 C98.3361789,23.0631366 100.797214,26.0264237 104.915681,26.0264237 Z M104.915681,22.6111097 C103.258249,22.6111097 102.30397,21.2801417 102.30397,19.6478225 C102.30397,18.0406159 103.258249,16.7096479 104.915681,16.7096479 C106.623338,16.7096479 107.577617,18.0406159 107.577617,19.6478225 C107.577617,21.2801417 106.623338,22.6111097 104.915681,22.6111097 Z M119.37425,26.0264237 C123.542942,26.0264237 126.003977,23.0631366 126.003977,19.6478225 C126.003977,16.2325085 123.542942,13.2943339 119.37425,13.2943339 C115.255783,13.2943339 112.794748,16.2325085 112.794748,19.6478225 C112.794748,23.0631366 115.255783,26.0264237 119.37425,26.0264237 Z M119.37425,22.6111097 C117.716818,22.6111097 116.762539,21.2801417 116.762539,19.6478225 C116.762539,18.0406159 117.716818,16.7096479 119.37425,16.7096479 C121.081907,16.7096479 122.036186,18.0406159 122.036186,19.6478225 C122.036186,21.2801417 121.081907,22.6111097 119.37425,22.6111097 Z M140.487659,25.7250725 L135.716264,25.7250725 L133.054328,21.4308173 L131.899149,22.8120105 L131.899149,25.7250725 L128.031808,25.7250725 L128.031808,8.97496614 L131.899149,8.97496614 L131.899149,18.4424176 L135.590701,13.5956851 L140.261646,13.5956851 L135.791602,19.1204578 L140.487659,25.7250725 Z" id="Playbook" fill="#064DFF" fill-rule="nonzero"></path>
-                <g id="Group-10" transform="translate(0.000000, 0.225194)">
-                    <g id="Group-3">
+        <g id="pb.logo">
+            <path d="M40.900986,25.7250725 L40.900986,20.0998494 L44.9692278,20.0998494 C48.7361183,20.0998494 50.7953517,17.5634764 50.7953517,14.5499641 C50.7953517,11.5113391 48.7361183,8.97496614 44.9692278,8.97496614 L36.5816183,8.97496614 L36.5816183,25.7250725 L40.900986,25.7250725 Z M44.3163001,16.3329589 L40.900986,16.3329589 L40.900986,12.7418566 L44.3163001,12.7418566 C45.4714798,12.7418566 46.4006462,13.3947843 46.4006462,14.5499641 C46.4006462,15.6800312 45.4714798,16.3329589 44.3163001,16.3329589 Z M56.4896223,25.7250725 L56.4896223,8.97496614 L52.6222814,8.97496614 L52.6222814,25.7250725 L56.4896223,25.7250725 Z M70.3203764,25.7250725 L70.3203764,18.1410663 C70.3203764,14.3741758 67.5831026,13.2943339 64.6700407,13.2943339 C62.811708,13.2943339 60.7273619,13.8468112 59.1703805,15.1777791 L60.6017989,17.8648277 C61.5811905,17.0361118 62.7865954,16.5589723 63.9920004,16.5589723 C65.5489818,16.5589723 66.4530355,17.2872378 66.4530355,18.3419671 L66.4530355,19.5473721 C65.72477,18.6433184 64.2933516,18.1159537 62.686145,18.1159537 L62.5385458,18.1180063 C60.7078145,18.1688571 58.5174529,19.1726656 58.5174529,22.0335198 C58.5174529,24.745681 60.8278124,26.0264237 62.686145,26.0264237 C64.2431264,26.0264237 65.6996574,25.4237213 66.4530355,24.5196675 L66.4530355,25.7250725 L70.3203764,25.7250725 Z M64.2933516,23.4900508 C63.2888475,23.4900508 62.3596812,23.0380239 62.3596812,22.083745 C62.3596812,21.1294661 63.2888475,20.6774392 64.2933516,20.6774392 C65.1471801,20.6774392 66.0512338,20.9536779 66.4530355,21.5312678 L66.4530355,22.6111097 C66.0512338,23.1886996 65.1471801,23.4900508 64.2933516,23.4900508 Z M72.8755716,30.4462419 C73.2773732,30.5718049 74.181427,30.6471427 74.5330034,30.6471427 L74.7503997,30.6408447 C76.9447008,30.5602028 78.6513638,29.9591284 79.6094597,27.5764643 L85.130522,13.5956851 L81.0371676,13.5956851 L78.2998939,21.2801417 L75.5375075,13.5956851 L71.4692658,13.5956851 L76.3159982,25.9008607 L76.0397596,26.5537884 C75.8137462,27.0560405 75.2612689,27.2318287 74.3823278,27.2318287 C74.0809765,27.2318287 73.7042875,27.1564909 73.4280489,27.0058153 L72.8755716,30.4462419 Z M90.1467523,21.5312678 L90.1467523,17.8146025 C90.6238917,17.1616748 91.6283959,16.7096479 92.4571118,16.7096479 C93.9889806,16.7096479 95.1441603,17.8397151 95.1441603,19.6478225 C95.1441603,21.4810425 93.9889806,22.6111097 92.4571118,22.6111097 C91.6283959,22.6111097 90.6238917,22.1841954 90.1467523,21.5312678 Z M90.1467523,25.7250725 L90.1467523,24.3187667 C91.1512564,25.4739465 92.381774,26.0264237 93.7378545,26.0264237 C96.7262543,26.0264237 99.086839,23.7662894 99.086839,19.6478225 C99.086839,15.6800312 96.7764795,13.2943339 93.7378545,13.2943339 C92.4068866,13.2943339 91.1010312,13.8216986 90.1467523,15.0271035 L90.1467523,8.97496614 L86.2794114,8.97496614 L86.2794114,25.7250725 L90.1467523,25.7250725 Z M106.915681,26.0264237 C111.084373,26.0264237 113.545408,23.0631366 113.545408,19.6478225 C113.545408,16.2325085 111.084373,13.2943339 106.915681,13.2943339 C102.797214,13.2943339 100.336179,16.2325085 100.336179,19.6478225 C100.336179,23.0631366 102.797214,26.0264237 106.915681,26.0264237 Z M106.915681,22.6111097 C105.258249,22.6111097 104.30397,21.2801417 104.30397,19.6478225 C104.30397,18.0406159 105.258249,16.7096479 106.915681,16.7096479 C108.623338,16.7096479 109.577617,18.0406159 109.577617,19.6478225 C109.577617,21.2801417 108.623338,22.6111097 106.915681,22.6111097 Z M121.37425,26.0264237 C125.542942,26.0264237 128.003977,23.0631366 128.003977,19.6478225 C128.003977,16.2325085 125.542942,13.2943339 121.37425,13.2943339 C117.255783,13.2943339 114.794748,16.2325085 114.794748,19.6478225 C114.794748,23.0631366 117.255783,26.0264237 121.37425,26.0264237 Z M121.37425,22.6111097 C119.716818,22.6111097 118.762539,21.2801417 118.762539,19.6478225 C118.762539,18.0406159 119.716818,16.7096479 121.37425,16.7096479 C123.081907,16.7096479 124.036186,18.0406159 124.036186,19.6478225 C124.036186,21.2801417 123.081907,22.6111097 121.37425,22.6111097 Z M142.487659,25.7250725 L137.716264,25.7250725 L135.054328,21.4308173 L133.899149,22.8120105 L133.899149,25.7250725 L130.031808,25.7250725 L130.031808,8.97496614 L133.899149,8.97496614 L133.899149,18.4424176 L137.590701,13.5956851 L142.261646,13.5956851 L137.791602,19.1204578 L142.487659,25.7250725 Z" id="Playbook" fill="#0056CF" fill-rule="nonzero"></path>
+            <g id="Group-10" transform="translate(0.000000, 0.225194)">
+                <g id="Group-3">
+                    <g id="Fill-1-Clipped">
                         <mask id="mask-2" fill="white">
                             <use xlink:href="#path-1"></use>
                         </mask>
-                        <g id="Clip-2"></g>
-                        <path d="M16.0020145,0.0894483871 C14.7618774,0.0894483871 13.7532242,1.1037629 13.7532242,2.35019032 L13.7532242,5.51862581 L0.999595161,14.8644726 L0.987329032,14.8735935 L0.975377419,14.8824 L0.968458065,14.8877468 C0.361441935,15.340021 6.29032258e-05,16.06215 6.29032258e-05,16.8235935 L6.29032258e-05,26.4795532 C6.29032258e-05,27.2479161 0.363958065,27.9722468 0.974748387,28.424521 L0.986070968,28.4326984 L0.992675806,28.4377306 L0.999595161,28.4427629 L13.9551435,37.9364323 C14.3423129,38.2204403 14.7999339,38.3710935 15.2779984,38.3710935 C16.51845,38.3710935 17.5274177,37.3564645 17.5274177,36.1097226 L17.5274177,32.9419161 L30.2804177,23.5957548 L30.2929984,23.5869484 L30.30495,23.5778274 L30.3109258,23.5731097 C30.9182565,23.1208355 31.27995,22.3983919 31.27995,21.6366339 L31.27995,11.9809887 C31.27995,11.2110532 30.9154258,10.4864081 30.3036919,10.0347629 L30.2929984,10.0269 L30.2870226,10.0221823 L30.2804177,10.0174645 L17.3248694,0.523795161 C16.9380145,0.240101613 16.4803935,0.0894483871 16.0020145,0.0894483871 M16.0020145,1.97654516 C16.0724661,1.97654516 16.1441758,1.99793226 16.2092806,2.04605323 L29.1651435,11.5397226 L29.1805548,11.5510452 C29.3139097,11.6485452 29.3928532,11.8073758 29.3928532,11.9759565 L29.3928532,11.9809887 L29.3928532,21.6331742 L29.3928532,21.6366339 C29.3928532,21.8064726 29.3132806,21.9649887 29.1796113,22.0628032 L29.1651435,22.0734968 L15.640321,31.9851581 L15.640321,36.1097226 C15.640321,36.3305129 15.46545,36.4839968 15.2779984,36.4839968 C15.2078613,36.4839968 15.1358371,36.4619806 15.0704177,36.4141742 L2.11518387,26.9208194 L2.09977258,26.9091823 C1.96610323,26.8113677 1.88715968,26.6531661 1.88715968,26.4845855 L1.88715968,26.4795532 L1.88715968,16.8273677 L1.88715968,16.8235935 C1.88715968,16.6540694 1.96673226,16.4952387 2.10040161,16.3977387 L2.11518387,16.3864161 L15.640321,6.47506935 L15.640321,2.35019032 C15.640321,2.13002903 15.8145629,1.97654516 16.0020145,1.97654516" id="Fill-1" fill="#064DFF" mask="url(#mask-2)"></path>
+                        <g id="path-1"></g>
+                        <path d="M16.0020145,0.0894483871 C14.7618774,0.0894483871 13.7532242,1.1037629 13.7532242,2.35019032 L13.7532242,5.51862581 L0.999595161,14.8644726 L0.987329032,14.8735935 L0.975377419,14.8824 L0.968458065,14.8877468 C0.361441935,15.340021 6.29032258e-05,16.06215 6.29032258e-05,16.8235935 L6.29032258e-05,26.4795532 C6.29032258e-05,27.2479161 0.363958065,27.9722468 0.974748387,28.424521 L0.986070968,28.4326984 L0.992675806,28.4377306 L0.999595161,28.4427629 L13.9551435,37.9364323 C14.3423129,38.2204403 14.7999339,38.3710935 15.2779984,38.3710935 C16.51845,38.3710935 17.5274177,37.3564645 17.5274177,36.1097226 L17.5274177,32.9419161 L30.2804177,23.5957548 L30.2929984,23.5869484 L30.30495,23.5778274 L30.3109258,23.5731097 C30.9182565,23.1208355 31.27995,22.3983919 31.27995,21.6366339 L31.27995,11.9809887 C31.27995,11.2110532 30.9154258,10.4864081 30.3036919,10.0347629 L30.2929984,10.0269 L30.2870226,10.0221823 L30.2804177,10.0174645 L17.3248694,0.523795161 C16.9380145,0.240101613 16.4803935,0.0894483871 16.0020145,0.0894483871 M16.0020145,1.97654516 C16.0724661,1.97654516 16.1441758,1.99793226 16.2092806,2.04605323 L29.1651435,11.5397226 L29.1805548,11.5510452 C29.3139097,11.6485452 29.3928532,11.8073758 29.3928532,11.9759565 L29.3928532,11.9809887 L29.3928532,21.6331742 L29.3928532,21.6366339 C29.3928532,21.8064726 29.3132806,21.9649887 29.1796113,22.0628032 L29.1651435,22.0734968 L15.640321,31.9851581 L15.640321,36.1097226 C15.640321,36.3305129 15.46545,36.4839968 15.2779984,36.4839968 C15.2078613,36.4839968 15.1358371,36.4619806 15.0704177,36.4141742 L2.11518387,26.9208194 L2.09977258,26.9091823 C1.96610323,26.8113677 1.88715968,26.6531661 1.88715968,26.4845855 L1.88715968,26.4795532 L1.88715968,16.8273677 L1.88715968,16.8235935 C1.88715968,16.6540694 1.96673226,16.4952387 2.10040161,16.3977387 L2.11518387,16.3864161 L15.640321,6.47506935 L15.640321,2.35019032 C15.640321,2.13002903 15.8145629,1.97654516 16.0020145,1.97654516" id="Fill-1" fill="#0056CF" fill-rule="nonzero" mask="url(#mask-2)"></path>
                     </g>
-                    <polygon id="Fill-4" fill="#064DFF" points="11.4547403 17.0330927 10.5942242 16.1725766 8.31272419 18.4540766 6.03122419 16.1725766 5.17070806 17.0330927 7.45189355 19.3145927 5.17070806 21.5964073 6.03122419 22.4569234 8.31272419 20.1751089 10.5942242 22.4569234 11.4547403 21.5964073 9.17324032 19.3145927"></polygon>
-                    <path d="M22.805596,15.6235887 C20.7672169,15.6235887 19.1144347,17.2760565 19.1144347,19.3144355 C19.1144347,21.3534435 20.7672169,23.0059113 22.805596,23.0059113 C24.843975,23.0059113 26.4964427,21.3534435 26.4964427,19.3144355 C26.4964427,17.2760565 24.843975,15.6235887 22.805596,15.6235887 M22.805596,16.8407661 C24.1696524,16.8407661 25.2792653,17.950379 25.2792653,19.3144355 C25.2792653,20.6788065 24.1696524,21.7887339 22.805596,21.7887339 C21.441225,21.7887339 20.3316121,20.6788065 20.3316121,19.3144355 C20.3316121,17.950379 21.441225,16.8407661 22.805596,16.8407661" id="Fill-6" fill="#064DFF"></path>
-                    <path d="M18.8099516,17.7868306 L15.2804516,13.9664032 L11.759129,17.7868306 L12.6212177,18.5897903 L14.6907339,16.3293629 L14.6907339,22.8977177 C14.6907339,23.2229274 14.9542984,23.4864919 15.2791935,23.4864919 C15.6047177,23.4864919 15.8679677,23.2229274 15.8679677,22.8977177 L15.8679677,16.3271613 L17.9478629,18.5897903 L18.8099516,17.7868306 Z" id="Fill-8" fill="#064DFF"></path>
                 </g>
+                <polygon id="Fill-4" fill="#0056CF" fill-rule="nonzero" points="11.4547403 17.0330927 10.5942242 16.1725766 8.31272419 18.4540766 6.03122419 16.1725766 5.17070806 17.0330927 7.45189355 19.3145927 5.17070806 21.5964073 6.03122419 22.4569234 8.31272419 20.1751089 10.5942242 22.4569234 11.4547403 21.5964073 9.17324032 19.3145927"></polygon>
+                <path d="M22.805596,15.6235887 C20.7672169,15.6235887 19.1144347,17.2760565 19.1144347,19.3144355 C19.1144347,21.3534435 20.7672169,23.0059113 22.805596,23.0059113 C24.843975,23.0059113 26.4964427,21.3534435 26.4964427,19.3144355 C26.4964427,17.2760565 24.843975,15.6235887 22.805596,15.6235887 M22.805596,16.8407661 C24.1696524,16.8407661 25.2792653,17.950379 25.2792653,19.3144355 C25.2792653,20.6788065 24.1696524,21.7887339 22.805596,21.7887339 C21.441225,21.7887339 20.3316121,20.6788065 20.3316121,19.3144355 C20.3316121,17.950379 21.441225,16.8407661 22.805596,16.8407661" id="Fill-6" fill="#0056CF" fill-rule="nonzero"></path>
+                <path d="M18.8099516,17.7868306 L15.2804516,13.9664032 L11.759129,17.7868306 L12.6212177,18.5897903 L14.6907339,16.3293629 L14.6907339,22.8977177 C14.6907339,23.2229274 14.9542984,23.4864919 15.2791935,23.4864919 C15.6047177,23.4864919 15.8679677,23.2229274 15.8679677,22.8977177 L15.8679677,16.3271613 L17.9478629,18.5897903 L18.8099516,17.7868306 Z" id="Fill-8" fill="#0056CF" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>

data/app/pb_kits/playbook/_playbook.scss

@@ -1,12 +1,10 @@
+@import 'pb_avatar/avatar';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import "pb_body/body";
 @import "pb_button/button";
 @import "pb_caption/caption";
 @import "pb_card/card";
-@import "pb_title/title";
-@import "pb_vertical_nav/vertical_nav";
-@import 'pb_avatar/avatar';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
@@ -22,7 +20,6 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
-@import 'pb_input/input';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -30,6 +27,7 @@
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_message/message';
+@import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
@@ -41,8 +39,10 @@
 @import 'pb_stat_change/stat_change';
 @import 'pb_stat_value/stat_value';
 @import 'pb_table/table';
+@import 'pb_text_input/text_input';
 @import 'pb_time/time';
 @import 'pb_timestamp/timestamp';
+@import "pb_title/title";
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';

data/app/pb_kits/playbook/index.js

@@ -20,7 +20,6 @@ import Icon from "./pb_icon/_icon.jsx"
 import IconCircle from "./pb_icon_circle/_icon_circle.jsx"
 import IconValue from "./pb_icon_value/_icon_value.jsx"
 import Image from "./pb_image/_image.jsx"
-import Input from "./pb_input/_input.jsx"
 import LabelPill from "./pb_label_pill/_label_pill.jsx"
 import LabelValue from "./pb_label_value/_label_value.jsx"
 import Layout from "./pb_layout/_layout.jsx"
@@ -29,6 +28,7 @@ import List from "./pb_list/_list.jsx"
 import ListItem from "./pb_list/_list_item.jsx"
 import LoadingInline from "./pb_loading_inline/_loading_inline.jsx"
 import Message from "./pb_message/_message.jsx"
+import Nav from "./pb_nav/_nav.jsx"
 import OnlineStatus from "./pb_online_status/_online_status.jsx"
 import Person from "./pb_person/_person.jsx"
 import PersonContact from "./pb_person_contact/_person_contact.jsx"
@@ -40,13 +40,14 @@ import StarRating from "./pb_star_rating/_star_rating.jsx"
 import StatChange from "./pb_stat_change/_stat_change.jsx"
 import StatValue from "./pb_stat_value/_stat_value.jsx"
 import Table from "./pb_table/_table.jsx"
+import TextInput from "./pb_text_input/_text_input.jsx"
 import Time from "./pb_time/_time.jsx"
 import TimeStamp from "./pb_timestamp/_timestamp.jsx"
 import Title from "./pb_title/_title.jsx"
 import Toggle from "./pb_toggle/_toggle.jsx"
 import User from "./pb_user/_user.jsx"
 import UserBadge from "./pb_user_badge/_user_badge.jsx"
-import VerticalNav from "./pb_vertical_nav/_vertical_nav.jsx"
+
 
 // Dashboard Settings
 import { commonSettings, dataColors } from "./pb_dashboard/commonSettings"
@@ -62,14 +63,18 @@ export {
   Avatar,
   Badge,
   BarGraph,
+  barGraphSettings,
   Body,
   Button,
   Caption,
   Card,
   Checkbox,
+  commonSettings,
   Contact,
   Currency,
   DashboardValue,
+  dashboardValueSettings,
+  dataColors,
   DateRangeInline,
   DateYearStacked,
   DistributionBar,
@@ -80,16 +85,18 @@ export {
   IconCircle,
   IconValue,
   Image,
-  Input,
   LabelPill,
   LabelValue,
   Layout,
   LineGraph,
+  lineGraphSettings,
   List,
   ListItem,
   LoadingInline,
   Message,
+  Nav,
   OnlineStatus,
+  pbChart,
   Person,
   PersonContact,
   Pill,
@@ -100,17 +107,11 @@ export {
   StatChange,
   StatValue,
   Table,
+  TextInput,
   Time,
   TimeStamp,
   Title,
   Toggle,
   User,
   UserBadge,
-  VerticalNav,
-  barGraphSettings,
-  commonSettings,
-  dashboardValueSettings,
-  dataColors,
-  lineGraphSettings,
-  pbChart,
 }

data/app/pb_kits/playbook/kits/pb_nav.js

@@ -0,0 +1,4 @@
+import Nav from "../pb_nav/_nav.jsx";
+import WebpackerReact from "webpacker-react";
+
+WebpackerReact.setup({ Nav });

data/app/pb_kits/playbook/kits/pb_text_input.js

@@ -0,0 +1,4 @@
+import TextInput from "../pb_text_input/_text_input.jsx";
+import WebpackerReact from "webpacker-react";
+
+WebpackerReact.setup({ TextInput });

data/app/pb_kits/playbook/packs/examples.js

@@ -34,7 +34,6 @@ import * as Icon from "pb_icon/docs";
 import * as IconCircle from "pb_icon_circle/docs";
 import * as IconValue from "pb_icon_value/docs";
 import * as image from "pb_image/docs";
-import * as input from "pb_input/docs";
 import * as LabelPill from "pb_label_pill/docs";
 import * as LabelValue from "pb_label_value/docs";
 import * as layout from "pb_layout/docs";
@@ -42,6 +41,7 @@ import * as LineGraph from "pb_line_graph/docs";
 import * as list from "pb_list/docs";
 import * as LoadingInline from "pb_loading_inline/docs";
 import * as Message from "pb_message/docs";
+import * as Nav from "pb_nav/docs";
 import * as OnlineStatus from "pb_online_status/docs";
 import * as Person from "pb_person/docs";
 import * as PersonContact from "pb_person_contact/docs";
@@ -53,6 +53,7 @@ import * as StarRating from "pb_star_rating/docs";
 import * as StatChange from "pb_stat_change/docs";
 import * as StatValue from "pb_stat_value/docs";
 import * as table from "pb_table/docs";
+import * as TextInput from "pb_text_input/docs";
 import * as Time from "pb_time/docs";
 import * as Timestamp from "pb_timestamp/docs";
 import * as title from "pb_title/docs";
@@ -61,7 +62,6 @@ import * as TitleDetail from "pb_title_detail/docs";
 import * as Toggle from "pb_toggle/docs";
 import * as User from "pb_user/docs";
 import * as UserBadge from "pb_user_badge/docs";
-import * as vertical_nav from "pb_vertical_nav/docs";
 
 WebpackerReact.setup (avatar);
 WebpackerReact.setup (Badge);
@@ -85,7 +85,6 @@ WebpackerReact.setup (Icon);
 WebpackerReact.setup (IconCircle);
 WebpackerReact.setup (IconValue);
 WebpackerReact.setup (image);
-WebpackerReact.setup (input);
 WebpackerReact.setup (LabelPill);
 WebpackerReact.setup (LabelValue);
 WebpackerReact.setup (layout);
@@ -93,6 +92,7 @@ WebpackerReact.setup (LineGraph);
 WebpackerReact.setup (list);
 WebpackerReact.setup (LoadingInline);
 WebpackerReact.setup (Message);
+WebpackerReact.setup (Nav);
 WebpackerReact.setup (OnlineStatus);
 WebpackerReact.setup (Person);
 WebpackerReact.setup (PersonContact);
@@ -104,6 +104,7 @@ WebpackerReact.setup (StarRating);
 WebpackerReact.setup (StatChange);
 WebpackerReact.setup (StatValue);
 WebpackerReact.setup (table);
+WebpackerReact.setup (TextInput);
 WebpackerReact.setup (Time);
 WebpackerReact.setup (Timestamp);
 WebpackerReact.setup (title);
@@ -112,4 +113,3 @@ WebpackerReact.setup (TitleDetail);
 WebpackerReact.setup (Toggle);
 WebpackerReact.setup (User);
 WebpackerReact.setup (UserBadge);
-WebpackerReact.setup (vertical_nav);

data/app/pb_kits/playbook/packs/kits.js

@@ -20,13 +20,13 @@ import "../kits/pb_icon.js";
 import "../kits/pb_icon_circle.js";
 import "../kits/pb_icon_value.js";
 import "../kits/pb_image.js";
-import "../kits/pb_input.js";
 import "../kits/pb_label_pill.js";
 import "../kits/pb_label_value.js";
 import "../kits/pb_layout.js";
 import "../kits/pb_line_graph.js";
 import "../kits/pb_loading_inline.js";
 import "../kits/pb_message.js";
+import "../kits/pb_nav.js";
 import "../kits/pb_online_status.js";
 import "../kits/pb_person.js";
 import "../kits/pb_person_contact.js";
@@ -38,6 +38,7 @@ import "../kits/pb_star_rating.js";
 import "../kits/pb_stat_change.js";
 import "../kits/pb_stat_value.js";
 import "../kits/pb_table.js";
+import "../kits/pb_text_input.js";
 import "../kits/pb_time.js";
 import "../kits/pb_timestamp.js";
 import "../kits/pb_title.js";
@@ -46,4 +47,3 @@ import "../kits/pb_title_detail.js";
 import "../kits/pb_toggle.js";
 import "../kits/pb_user.js";
 import "../kits/pb_user_badge.js";
-import "../kits/pb_vertical_nav.js";

data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss

@@ -20,7 +20,6 @@
 @include doc-color($shadow_colors);
 @include doc-color($text_colors);
 @include doc-color($data_colors);
-@include doc-color($action_colors);
 @include doc-color($status_colors);
 @include doc-color($product_colors);
 

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -124,7 +124,7 @@
       ul {
         li {
           a {
-            color: $primary_action_dk;
+            color: $primary_action;
           }
         }
       }

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames'
 
 type BadgeProps = {
   className?: String,
+  dark?: Boolean,
   id?: String,
   text?: String,
   variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
@@ -13,14 +14,16 @@ type BadgeProps = {
 }
 const Badge = ({
   className,
+  dark = false,
   id,
   text,
   variant = 'neutral',
   rounded = false
 }: BadgeProps) => {
-  const roundedValue = rounded == true ? "rounded" : ""
+  const roundedClass = rounded === true ? "rounded" : ""
+  const darkClass = dark === true ? "dark" : ""
   const css = classnames([
-    `pb_badge_kit_${variant}_${roundedValue}`,
+    `pb_badge_kit_${variant}_${roundedClass}_${darkClass}`,
     className,
   ])
 

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -11,27 +11,39 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 $space_xs / 2;
-  border: 1px solid $white;
+  padding: 0 $space_xs/2;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $card_light;
 
   span {
     transform: translateY(1px);
     display: inline-block;
-    font-size: $font_smaller - 2;
-    font-weight: $boldest;
+    font-size: $font_smaller - 1;
+    font-weight: $bolder;
   }
 
   @each $color_name, $color_value in $status_colors {
     &[class*=_#{$color_name}]  {
-      background: rgba($color_value, $opacity-1);
-      color: $color_value;
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
     }
   }
 
-  &[class*="rounded"] {
+  &[class*=_rounded] {
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
     border-radius: $pb_badge_height / 2;
   }
+
+  &[class*=_dark] {
+    border-width: 0;
+
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -7,6 +7,7 @@ module Playbook
 
       partial "pb_badge/badge"
 
+      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
@@ -14,11 +15,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant, rounded_class, dark_class)
       end
 
     private
 
+      def dark_class
+        dark ? "dark" : nil
+      end
+
       def rounded_class
         rounded ? "rounded" : nil
       end

data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.html.erb

@@ -0,0 +1,124 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "primary",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "primary",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "primary",
+    dark: true
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "success",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "success",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "success",
+    dark: true
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "warning",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "warning",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "warning",
+    dark: true
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "error",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "error",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "error",
+    dark: true
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "info",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "info",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "info",
+    dark: true
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    rounded: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "neutral",
+    dark: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "neutral",
+    dark: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.jsx

@@ -0,0 +1,82 @@
+import React from "react"
+import Badge from "../_badge.jsx"
+
+function BadgeDark() {
+  return (
+    <div>
+      <div>
+        <Badge text="+1" variant="primary" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="primary" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="primary" dark />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="success" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="success" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="success" dark />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="warning" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="warning" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="warning" dark />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="error" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="error" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="error" dark />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="info" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="info" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="info" dark />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="neutral" rounded dark />
+
+        &nbsp;
+
+        <Badge text="+4" variant="neutral" dark />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="neutral" dark />
+      </div>
+    </div>
+  )
+}
+
+export default BadgeDark;

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

@@ -3,8 +3,10 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_dark: Dark
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_dark: Dark