playbook_ui_docs 14.14.0.pre.rc.4 → 14.14.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f270b29c635bca418f611e62f1bd4c74e27e946cd66a76a22e26bbd1612460fd
-  data.tar.gz: aaefeec03cf4b40f9a3e4f5006e2ad9e3b760f8ff5f37e3053e184963dd7581f
+  metadata.gz: 77cd42e1868ed0ad1a450bb0579d120934b00ec06f7bf261f0c8436fd1278313
+  data.tar.gz: c877bcd73fedd3075afb24a25d1866b11b466c4546732b277d8e1540245bd098
 SHA512:
-  metadata.gz: 5d912f8c5ca639993f1bb25f4cc40365006adf0973e43b4b705828a53d27129e7630aeb842a38488676095260bb08b34bfb37d0e8be17d4c796e84cfc331b4bd
-  data.tar.gz: 5bbabba7c251d673ffc49f4104e7dbb4675514e50f908bae29d84bf7e531cf0fc5aaff883149ce24dc9ede9b6d9e6072a0b974d7ab2e99f585e99555ef7a211d
+  metadata.gz: bb428dae24ab5608cce026261b099f17c7258d6c1d2ed7c84073344a4cd58f83c2703e402e6ff8073999878bac38c7301c3f2cdfadd5f7792d247aefde26a796
+  data.tar.gz: 04f3bdc3bf9a64b978df5e9747f5b92f6e4736e781e9e9814e0ece2861054cbf5f5ce6f8ef0434dd435ac5927cdf77923fd2d56cf5de2d6ffd3ad0a7964410e1

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsFullWidth = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 5 steps complete' }}
+                fullWidthPill
+                steps={5}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md

@@ -0,0 +1 @@
+Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md

@@ -0,0 +1 @@
+Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width

data/app/pb_kits/playbook/pb_progress_pills/docs/index.js

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'