anchor_view_components 0.14.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +15 -0
  3. data/app/assets/builds/anchor-view-components.css +1 -1
  4. data/app/components/anchor/breadcrumbs_component.html.erb +1 -1
  5. data/app/components/anchor/icon_component.html.erb +1 -1
  6. data/app/components/anchor/logo_component.html.erb +19 -0
  7. data/app/components/anchor/logo_component.rb +45 -0
  8. data/app/components/anchor/side_nav_component.html.erb +4 -5
  9. data/app/components/anchor/table_component.html.erb +2 -2
  10. data/app/components/anchor/text_component.rb +1 -1
  11. data/app/helpers/anchor/view_helper.rb +8 -2
  12. data/lib/anchor/view_components/version.rb +1 -1
  13. data/previews/anchor/action_menu_component_preview/autoplacement.html.erb +1 -1
  14. data/previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb +2 -2
  15. data/previews/anchor/action_menu_component_preview.rb +2 -2
  16. data/previews/anchor/badge_component_preview.rb +7 -11
  17. data/previews/anchor/banner_component_preview.rb +7 -12
  18. data/previews/anchor/breadcrumbs_component_preview.rb +2 -2
  19. data/previews/anchor/button_component_preview.rb +13 -16
  20. data/previews/anchor/dialog_component_preview/with_custom_show_button.html.erb +4 -3
  21. data/previews/anchor/dialog_component_preview/with_footer.html.erb +4 -6
  22. data/previews/anchor/dialog_component_preview.rb +6 -6
  23. data/previews/anchor/icon_component_preview.rb +2 -2
  24. data/previews/anchor/loading_indicator_component_preview.rb +5 -5
  25. data/previews/anchor/logo_component_preview.rb +45 -0
  26. data/previews/anchor/panel_component_preview/with_banner.html.erb +3 -3
  27. data/previews/anchor/panel_component_preview.rb +13 -15
  28. data/previews/anchor/preview.rb +5 -0
  29. data/previews/anchor/side_nav_component_preview/default.html.erb +9 -9
  30. data/previews/anchor/side_nav_component_preview.rb +1 -1
  31. data/previews/anchor/tab_bar_component_preview.rb +2 -2
  32. data/previews/anchor/table_component_preview.rb +31 -14
  33. data/previews/anchor/text_component_preview.rb +13 -25
  34. data/previews/anchor/toast_component_preview.rb +7 -16
  35. data/previews/pages/helpers.md.erb +9 -0
  36. metadata +7 -3
  37. data/previews/pages/logos.md.erb +0 -50
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 05ca2d9eee357ee997fb4ed6d6f02eab1dee6ccebc9c460d16180bb177ca7539
4
- data.tar.gz: 355864ed2a27945c98d71e5f6958ebcade9914fe27c870f372cb0c89bc1cb96e
3
+ metadata.gz: 8354c6bda5c4866782686bae56e0f670b44a7a527514fa4818ea52a44ba437db
4
+ data.tar.gz: 9c76a0c16bd413793940a306a0424471c695f0dfd7e1b951fa56932e3f86ef68
5
5
  SHA512:
6
- metadata.gz: 82414dd2dec3ab6d27d483b52adcc7a82854c15e393c0ad2411c564d22557bb72d1fb0bc044c9287d05a85a3592af205bb69d04b7ee802d8aa84a25d3cac0d0d
7
- data.tar.gz: eeceb361530e73f2013ff9e98feb68d07302173fe9ccebcf811bc2de50b1ae703f23abb1f533d34a8715180806c175b038b0d5cb1d9da1a71720d92ea04b7515
6
+ metadata.gz: b816f97577b19f88710bdd5f76cfb1fc4c1214af36d95d0b8cab3ba1ea0525310b1ae04a34ca420c45a1426187040a2829cdaebf49b322f5aae6fb85c6c5a710
7
+ data.tar.gz: 68cb273d60c1d12a77be390933d7edf5a8a7627d06e89561fb2394ebdd8b49de833438188c66bae729812451a481bdb6534870c1a3233144bd0a3de1152cac64
data/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.15.0 - 2023-09-19
4
+
5
+ ### Added
6
+
7
+ - Logo component
8
+
9
+ ## 0.14.1 - 2023-09-18
10
+
11
+ - Improve Table previews
12
+ - Improve attribute hashes passed into `anchor_svg`
13
+ - Change default Text tag to `p`
14
+ - Document component helpers
15
+ - Quick Update to breadcrumb testid
16
+ - Add automatic test ids to Table component
17
+
3
18
  ## 0.14.0 - 2023-09-15
4
19
 
5
20
  - Add Table pagination
data/app/assets/builds/anchor-view-components.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:initial solid;border-color:initial;-o-border-image:initial;border-image:initial;background-color:canvas;color:initial;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}@supports not (background-color:canvas){[popover]{background-color:#fff;color:#000}}@supports (width:-moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset:0){[popover]{top:0;left:0;right:0;bottom:0}}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:#101112;max-width:65ch}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:.875rem;line-height:1rem}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.action-menu-item>*{display:block;width:100%;padding:.25rem .75rem;text-align:left}.btn{display:inline-flex;height:2.5rem;align-items:center;gap:.5rem;border-radius:.25rem;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-left:1.25rem;padding-right:1.25rem;font-size:.75rem;line-height:1rem;font-weight:600;text-decoration-line:none}.btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.btn:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.btn-primary:disabled{pointer-events:none;border-color:rgb(235 237 240/var(--tw-border-opacity));background-color:rgb(235 237 240/var(--tw-bg-opacity));color:rgb(156 161 165/var(--tw-text-opacity))}.btn-critical,.btn-primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.btn-critical{border-color:rgb(191 47 29/var(--tw-border-opacity));background-color:rgb(191 47 29/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.btn-critical:hover{--tw-border-opacity:1;border-color:rgb(148 38 25/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(148 38 25/var(--tw-bg-opacity))}.btn-critical:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(235 237 240/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-text{color:rgb(39 110 241/var(--tw-text-opacity))}.btn-text,.btn-text:hover{border-color:#0000;background-color:initial;--tw-text-opacity:1}.btn-text:hover{color:rgb(30 84 183/var(--tw-text-opacity))}.btn-text:disabled{pointer-events:none;border-color:#0000;--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-small{height:1.75rem;padding-right:.75rem}.btn-small,.btn-with-starting-icon{padding-left:.75rem}.btn-with-ending-icon{padding-right:.75rem}.btn-full-width{width:100%;justify-content:center}.toast{align-items:center}.toast>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.toast{border-radius:.25rem;padding:1rem;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.toast.\:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.toast:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-left-full{left:-100%}.-top-full{top:-100%}.bottom-0{bottom:0}.right-0{right:0}.z-10{z-index:10}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.\!ml-10{margin-left:2.5rem!important}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-12{height:3rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.max-h-\[100dvh\]{max-height:100dvh}.max-h-\[200px\]{max-height:200px}.min-h-\[100dvh\]{min-height:100dvh}.w-12{width:3rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-\[15rem\]{width:15rem}.w-\[198px\]{width:198px}.w-\[36rem\]{width:36rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-white\/10>:not([hidden])~:not([hidden]){border-color:#ffffff1a}.self-end{align-self:flex-end}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-grey-100{--tw-border-opacity:1;border-color:rgb(16 17 18/var(--tw-border-opacity))}.border-subdued{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.border-b-transparent{border-bottom-color:#0000}.bg-critical-subdued{--tw-bg-opacity:1;background-color:rgb(255 222 217/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-informational-subdued{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.bg-success-subdued{--tw-bg-opacity:1;background-color:rgb(218 240 227/var(--tw-bg-opacity))}.bg-teal{--tw-bg-opacity:1;background-color:rgb(28 73 87/var(--tw-bg-opacity))}.bg-warning-subdued{--tw-bg-opacity:1;background-color:rgb(255 242 217/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/\[\.05\]{background-color:#ffffff0d}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.bg-\[length\:16px_16px\]{background-size:16px 16px}.bg-\[8px_center\]{background-position:8px}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-6{padding-bottom:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:1.75rem}.text-3xl{font-size:2rem;line-height:2.5rem}.text-4xl{font-size:2.5rem;line-height:3rem}.text-base{font-size:.875rem;line-height:1rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-sm{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.text-critical{--tw-text-opacity:1;color:rgb(191 47 29/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-grey-50{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-secondary{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.text-teal{--tw-text-opacity:1;color:rgb(28 73 87/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/60{color:#fff9}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-\[inset_0_-1px\]{--tw-shadow:inset 0 -1px;--tw-shadow-colored:inset 0 -1px var(--tw-shadow-color)}.shadow-\[inset_0_-1px\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.backdrop\:bg-grey-100\/50::backdrop{background-color:#10111280}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);left:0;right:0}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:bg-blue-500:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.focus-within\:bg-grey-10:focus-within{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-grey-10:hover{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:bg-white\/\[\.05\]:hover{background-color:#ffffff0d}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-grey-70:hover{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:no-underline:focus,.hover\:no-underline:hover{text-decoration-line:none}.group[aria-expanded][data-empty=true][data-loading=false] .group-aria-\[expanded\]\[data-empty\=\'true\'\]\[data-loading\=\'false\'\]\:block,.group[aria-expanded][data-loading=true] .group-aria-\[expanded\]\[data-loading\=\'true\'\]\:block{display:block}.group[data-empty=true] .group-data-\[empty\=\'true\'\]\:hidden,.group[data-loading=true] .group-data-\[loading\=\'true\'\]\:hidden{display:none}.popover-open\:block:popover-open{display:block}.\[\&\>\[aria-selected\=\'true\'\]\]\:bg-blue-20>[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.\[\&\>li\]\:cursor-pointer>li{cursor:pointer}.\[\&\>li\]\:px-3>li{padding-left:.75rem;padding-right:.75rem}.\[\&\>li\]\:py-2>li{padding-top:.5rem;padding-bottom:.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:w-\[3\.5rem\]{width:3.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.side-nav-open .\[\.side-nav-open_\&\]\:px-4{padding-left:1rem;padding-right:1rem}.side-nav-open .\[\.side-nav-open_\&\]\:opacity-0{opacity:0}
1
+ /*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:initial solid;border-color:initial;-o-border-image:initial;border-image:initial;background-color:canvas;color:initial;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}@supports not (background-color:canvas){[popover]{background-color:#fff;color:#000}}@supports (width:-moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset:0){[popover]{top:0;left:0;right:0;bottom:0}}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:#101112;max-width:65ch}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:.875rem;line-height:1rem}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.action-menu-item>*{display:block;width:100%;padding:.25rem .75rem;text-align:left}.btn{display:inline-flex;height:2.5rem;align-items:center;gap:.5rem;border-radius:.25rem;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-left:1.25rem;padding-right:1.25rem;font-size:.75rem;line-height:1rem;font-weight:600;text-decoration-line:none}.btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.btn:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.btn-primary:disabled{pointer-events:none;border-color:rgb(235 237 240/var(--tw-border-opacity));background-color:rgb(235 237 240/var(--tw-bg-opacity));color:rgb(156 161 165/var(--tw-text-opacity))}.btn-critical,.btn-primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.btn-critical{border-color:rgb(191 47 29/var(--tw-border-opacity));background-color:rgb(191 47 29/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.btn-critical:hover{--tw-border-opacity:1;border-color:rgb(148 38 25/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(148 38 25/var(--tw-bg-opacity))}.btn-critical:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(235 237 240/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-text{color:rgb(39 110 241/var(--tw-text-opacity))}.btn-text,.btn-text:hover{border-color:#0000;background-color:initial;--tw-text-opacity:1}.btn-text:hover{color:rgb(30 84 183/var(--tw-text-opacity))}.btn-text:disabled{pointer-events:none;border-color:#0000;--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-small{height:1.75rem;padding-right:.75rem}.btn-small,.btn-with-starting-icon{padding-left:.75rem}.btn-with-ending-icon{padding-right:.75rem}.btn-full-width{width:100%;justify-content:center}.toast{align-items:center}.toast>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.toast{border-radius:.25rem;padding:1rem;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.toast.\:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.toast:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-left-full{left:-100%}.-top-full{top:-100%}.bottom-0{bottom:0}.right-0{right:0}.z-10{z-index:10}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.\!ml-10{margin-left:2.5rem!important}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[500\/341\]{aspect-ratio:500/341}.aspect-\[500\/81\]{aspect-ratio:500/81}.aspect-\[72\/58\]{aspect-ratio:72/58}.h-12{height:3rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.max-h-\[100dvh\]{max-height:100dvh}.max-h-\[200px\]{max-height:200px}.max-h-full{max-height:100%}.min-h-\[100dvh\]{min-height:100dvh}.w-12{width:3rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-\[15rem\]{width:15rem}.w-\[198px\]{width:198px}.w-\[36rem\]{width:36rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-full{max-width:100%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-white\/10>:not([hidden])~:not([hidden]){border-color:#ffffff1a}.self-end{align-self:flex-end}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-grey-100{--tw-border-opacity:1;border-color:rgb(16 17 18/var(--tw-border-opacity))}.border-subdued{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.border-b-transparent{border-bottom-color:#0000}.bg-critical-subdued{--tw-bg-opacity:1;background-color:rgb(255 222 217/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-informational-subdued{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.bg-success-subdued{--tw-bg-opacity:1;background-color:rgb(218 240 227/var(--tw-bg-opacity))}.bg-teal{--tw-bg-opacity:1;background-color:rgb(28 73 87/var(--tw-bg-opacity))}.bg-warning-subdued{--tw-bg-opacity:1;background-color:rgb(255 242 217/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/\[\.05\]{background-color:#ffffff0d}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.bg-\[length\:16px_16px\]{background-size:16px 16px}.bg-\[8px_center\]{background-position:8px}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-6{padding-bottom:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:1.75rem}.text-3xl{font-size:2rem;line-height:2.5rem}.text-4xl{font-size:2.5rem;line-height:3rem}.text-base{font-size:.875rem;line-height:1rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-sm{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.text-coral{--tw-text-opacity:1;color:rgb(242 170 106/var(--tw-text-opacity))}.text-critical{--tw-text-opacity:1;color:rgb(191 47 29/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-grey-50{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-secondary{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.text-teal{--tw-text-opacity:1;color:rgb(28 73 87/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/60{color:#fff9}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-\[inset_0_-1px\]{--tw-shadow:inset 0 -1px;--tw-shadow-colored:inset 0 -1px var(--tw-shadow-color)}.shadow-\[inset_0_-1px\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.backdrop\:bg-grey-100\/50::backdrop{background-color:#10111280}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);left:0;right:0}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:bg-blue-500:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.focus-within\:bg-grey-10:focus-within{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-grey-10:hover{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:bg-white\/\[\.05\]:hover{background-color:#ffffff0d}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-grey-70:hover{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:no-underline:focus,.hover\:no-underline:hover{text-decoration-line:none}.group[aria-expanded][data-empty=true][data-loading=false] .group-aria-\[expanded\]\[data-empty\=\'true\'\]\[data-loading\=\'false\'\]\:block,.group[aria-expanded][data-loading=true] .group-aria-\[expanded\]\[data-loading\=\'true\'\]\:block{display:block}.group[data-empty=true] .group-data-\[empty\=\'true\'\]\:hidden,.group[data-loading=true] .group-data-\[loading\=\'true\'\]\:hidden{display:none}.popover-open\:block:popover-open{display:block}.\[\&\>\[aria-selected\=\'true\'\]\]\:bg-blue-20>[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.\[\&\>li\]\:cursor-pointer>li{cursor:pointer}.\[\&\>li\]\:px-3>li{padding-left:.75rem;padding-right:.75rem}.\[\&\>li\]\:py-2>li{padding-top:.5rem;padding-bottom:.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:w-\[3\.5rem\]{width:3.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.side-nav-open .\[\.side-nav-open_\&\]\:px-4{padding-left:1rem;padding-right:1rem}.side-nav-open .\[\.side-nav-open_\&\]\:opacity-0{opacity:0}
data/app/components/anchor/breadcrumbs_component.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= tag.nav aria: { label: label } do %>
1
+ <%= tag.nav aria: { label: label }, data: { testid: "breadcrumbs" } do %>
2
2
  <ol class="flex items-center">
3
3
  <% items.first.show_separator = false %>
4
4
  <% items.last.active = true %>
data/app/components/anchor/icon_component.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <%= anchor_svg(
2
2
  "icons/#{icon}",
3
- aria_hidden: true,
3
+ aria: { hidden: true },
4
4
  class: classes,
5
5
  data: data,
6
6
  ) %>
data/app/components/anchor/logo_component.html.erb ADDED
@@ -0,0 +1,19 @@
1
+ <%= tag.div(
2
+ class: classes,
3
+ data: data,
4
+ ) do %>
5
+ <%= tag.div(
6
+ class: class_names(
7
+ "w-fit max-w-full",
8
+ variant_aspect_ratio,
9
+ ),
10
+ ) do %>
11
+ <%= anchor_svg(
12
+ variant,
13
+ class: class_names(
14
+ "max-w-full max-h-full",
15
+ color,
16
+ ),
17
+ ) %>
18
+ <% end %>
19
+ <% end %>
data/app/components/anchor/logo_component.rb ADDED
@@ -0,0 +1,45 @@
1
+ module Anchor
2
+ class LogoComponent < Component
3
+ VARIANT_DEFAULT = :default
4
+ VARIANT_MAPPINGS = {
5
+ VARIANT_DEFAULT => "buoy-logo",
6
+ :mark => "buoy-logomark",
7
+ :stacked => "buoy-logo-stacked",
8
+ }.freeze
9
+ VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
10
+
11
+ VARIANT_ASPECT_RATIO_MAPPINGS = {
12
+ default: "aspect-[500/81]",
13
+ mark: "aspect-[72/58]",
14
+ stacked: "aspect-[500/341]",
15
+ }.freeze
16
+
17
+ COLOR_DEFAULT = :teal # TODO: should be `sea`
18
+ COLOR_MAPPINGS = {
19
+ COLOR_DEFAULT => "text-teal", # TODO: should be `sea`
20
+ :coral => "text-coral",
21
+ :white => "text-white",
22
+ }.freeze
23
+ COLOR_OPTIONS = COLOR_MAPPINGS.keys
24
+
25
+ def initialize(
26
+ variant: VARIANT_DEFAULT,
27
+ color: COLOR_DEFAULT,
28
+ **kwargs
29
+ )
30
+ @variant = VARIANT_MAPPINGS[
31
+ fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
32
+ ]
33
+ @color = COLOR_MAPPINGS[
34
+ fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)
35
+ ]
36
+ @variant_aspect_ratio = VARIANT_ASPECT_RATIO_MAPPINGS[variant]
37
+
38
+ super
39
+ end
40
+
41
+ private
42
+
43
+ attr_reader :variant, :variant_aspect_ratio, :color
44
+ end
45
+ end
data/app/components/anchor/side_nav_component.html.erb CHANGED
@@ -26,12 +26,11 @@
26
26
  "[.side-nav-open_&]:px-4 transition-[padding] duration-500",
27
27
  ),
28
28
  ) do %>
29
- <%= anchor_svg(
30
- "buoy-logomark",
31
- aria: true,
29
+ <%= anchor_logo(
30
+ classes: "w-12",
31
+ color: :white,
32
32
  data: { toggle_target: "inertify" },
33
- class: "w-12 h-12",
34
- title: "Buoy",
33
+ variant: :mark,
35
34
  ) %>
36
35
 
37
36
  <%= tag.button(
data/app/components/anchor/table_component.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <div>
2
- <table class="w-full text-base text-left">
2
+ <%= tag.table(class: "w-full text-base text-left", data: {testid: caption && "#{caption.parameterize}-table"}) do %>
3
3
  <% if caption %>
4
4
  <caption class="sr-only"><%= caption %></caption>
5
5
  <% end %>
@@ -41,7 +41,7 @@
41
41
  end
42
42
  end
43
43
  end %>
44
- </table>
44
+ <% end %>
45
45
 
46
46
  <%= render Anchor::Table::PaginationComponent.new(
47
47
  paginate:,
data/app/components/anchor/text_component.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  module Anchor
2
2
  class TextComponent < Component
3
- TAG_DEFAULT = :div
3
+ TAG_DEFAULT = :p
4
4
 
5
5
  VARIANT_DEFAULT = :body_base
6
6
  VARIANT_MAPPING = {
data/app/helpers/anchor/view_helper.rb CHANGED
@@ -11,12 +11,14 @@ module Anchor
11
11
  favicons
12
12
  icon
13
13
  loading_indicator
14
+ logo
14
15
  panel
15
16
  popover
16
17
  prose
17
18
  side_nav
18
19
  tab_bar
19
20
  table
21
+ text
20
22
  toast
21
23
  ].freeze
22
24
 
@@ -55,7 +57,7 @@ module Anchor
55
57
  end
56
58
  end
57
59
 
58
- def anchor_svg(name, data: {}, **attributes)
60
+ def anchor_svg(name, aria: {}, data: {}, **attributes)
59
61
  file = ::Anchor::ViewComponents::SvgResolver.resolve(name)
60
62
  doc = Nokogiri::HTML::DocumentFragment.parse(file)
61
63
  svg = doc.at_css "svg"
@@ -64,8 +66,12 @@ module Anchor
64
66
  svg[key] = value
65
67
  end
66
68
 
69
+ aria.each_pair do |key, value|
70
+ svg["aria-#{key}"] = value
71
+ end
72
+
67
73
  data.each_pair do |key, value|
68
- svg["data-#{key}"] = value
74
+ svg["data-#{key.to_s.dasherize}"] = value
69
75
  end
70
76
 
71
77
  doc.to_html.html_safe
data/lib/anchor/view_components/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
2
  module ViewComponents
3
- VERSION = "0.14.0".freeze
3
+ VERSION = "0.15.0".freeze
4
4
  end
5
5
  end
data/previews/anchor/action_menu_component_preview/autoplacement.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="h-full grid grid-cols-[1fr_1fr]">
2
2
  <% 4.times do |i| %>
3
- <%= render Anchor::ActionMenuComponent.new do |c|
3
+ <%= anchor_action_menu do |c|
4
4
  c.with_show_button(classes: {
5
5
  0 => "justify-self-start",
6
6
  1 => "justify-self-end",
data/previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= render Anchor::ActionMenuComponent.new do |c| %>
1
+ <%= anchor_action_menu do |c| %>
2
2
  <% c.with_show_button_content("Menu") %>
3
3
 
4
4
  <% c.with_item do %>
@@ -13,7 +13,7 @@
13
13
  <% end %>
14
14
  <% end %>
15
15
 
16
- <%= render Anchor::DialogComponent.new(
16
+ <%= anchor_dialog(
17
17
  id: "my-dialog",
18
18
  title: "Dialog Title",
19
19
  ) do |dialog| %>
data/previews/anchor/action_menu_component_preview.rb CHANGED
@@ -1,9 +1,9 @@
1
1
  module Anchor
2
- class ActionMenuComponentPreview < ViewComponent::Preview
2
+ class ActionMenuComponentPreview < Preview
3
3
  include ActionView::Helpers::UrlHelper
4
4
 
5
5
  def playground
6
- render Anchor::ActionMenuComponent.new do |c|
6
+ anchor_action_menu do |c|
7
7
  c.with_show_button do |button|
8
8
  button.with_ending_icon(icon: "nav-arrow-down")
9
9
  "Actions"
data/previews/anchor/badge_component_preview.rb CHANGED
@@ -1,38 +1,34 @@
1
1
  module Anchor
2
- class BadgeComponentPreview < ViewComponent::Preview
2
+ class BadgeComponentPreview < Preview
3
3
  # @param content text "Labels should be one to two words"
4
4
  # @param variant select {{ Anchor::BadgeComponent::VARIANT_OPTIONS }}
5
5
  def playground(
6
6
  content: "Label",
7
7
  variant: Anchor::BadgeComponent::VARIANT_DEFAULT
8
8
  )
9
- render(Anchor::BadgeComponent.new(variant:).with_content(content))
9
+ anchor_badge(content, variant:)
10
10
  end
11
11
 
12
12
  # @!group Variants
13
13
 
14
14
  def neutral
15
- render(Anchor::BadgeComponent.new.with_content("Label"))
15
+ anchor_badge("Label")
16
16
  end
17
17
 
18
18
  def informational
19
- render(Anchor::BadgeComponent.new(variant: :informational)
20
- .with_content("Label"))
19
+ anchor_badge("Label", variant: :informational)
21
20
  end
22
21
 
23
22
  def success
24
- render(Anchor::BadgeComponent.new(variant: :success)
25
- .with_content("Label"))
23
+ anchor_badge("Label", variant: :success)
26
24
  end
27
25
 
28
26
  def critical
29
- render(Anchor::BadgeComponent.new(variant: :critical)
30
- .with_content("Label"))
27
+ anchor_badge("Label", variant: :critical)
31
28
  end
32
29
 
33
30
  def warning
34
- render(Anchor::BadgeComponent.new(variant: :warning)
35
- .with_content("Label"))
31
+ anchor_badge("Label", variant: :warning)
36
32
  end
37
33
 
38
34
  # @!endgroup
data/previews/anchor/banner_component_preview.rb CHANGED
@@ -1,39 +1,34 @@
1
1
  module Anchor
2
- class BannerComponentPreview < ViewComponent::Preview
2
+ class BannerComponentPreview < Preview
3
3
  # @param content text
4
4
  # @param variant select {{ Anchor::BannerComponent::VARIANT_OPTIONS }}
5
5
  def playground(
6
6
  content: "Content",
7
7
  variant: Anchor::BannerComponent::VARIANT_DEFAULT
8
8
  )
9
- render(Anchor::BannerComponent.new(variant:)
10
- .with_content(content))
9
+ anchor_banner(content, variant:)
11
10
  end
12
11
 
13
12
  # @!group Variants
14
13
 
15
14
  def neutral
16
- render(Anchor::BannerComponent.new.with_content("Content"))
15
+ anchor_banner("Content")
17
16
  end
18
17
 
19
18
  def informational
20
- render(Anchor::BannerComponent.new(variant: :informational)
21
- .with_content("Content"))
19
+ anchor_banner("Content", variant: :informational)
22
20
  end
23
21
 
24
22
  def success
25
- render(Anchor::BannerComponent.new(variant: :success)
26
- .with_content("Content"))
23
+ anchor_banner("Content", variant: :success)
27
24
  end
28
25
 
29
26
  def critical
30
- render(Anchor::BannerComponent.new(variant: :critical)
31
- .with_content("Content"))
27
+ anchor_banner("Content", variant: :critical)
32
28
  end
33
29
 
34
30
  def warning
35
- render(Anchor::BannerComponent.new(variant: :warning)
36
- .with_content("Content"))
31
+ anchor_banner("Content", variant: :warning)
37
32
  end
38
33
 
39
34
  # @!endgroup
data/previews/anchor/breadcrumbs_component_preview.rb CHANGED
@@ -1,11 +1,11 @@
1
1
  module Anchor
2
- class BreadcrumbsComponentPreview < ViewComponent::Preview
2
+ class BreadcrumbsComponentPreview < Preview
3
3
  # @param label text "A brief description of the purpose of the navigation,
4
4
  # omitting the term ‘navigation’, as the screen reader will read both the
5
5
  # role and the contents of the label. Defaults to ‘Breadcrumb’."
6
6
  # @param number_of_breadcrumbs number
7
7
  def playground(label: "Accessible label", number_of_breadcrumbs: 3)
8
- render(Anchor::BreadcrumbsComponent.new(label:)) do |c|
8
+ anchor_breadcrumbs(label:) do |c|
9
9
  Array.new(number_of_breadcrumbs || 3) do |i|
10
10
  c.with_item(href: "#").with_content("Breadcrumb #{i + 1}")
11
11
  end
data/previews/anchor/button_component_preview.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
- class ButtonComponentPreview < ViewComponent::Preview
2
+ class ButtonComponentPreview < Preview
3
3
  # @param content text
4
4
  # @param tag select {{ Anchor::ButtonComponent::TAG_OPTIONS }}
5
5
  # @param type select {{ Anchor::ButtonComponent::TYPE_OPTIONS }}
@@ -16,24 +16,25 @@ module Anchor
16
16
  disabled: false,
17
17
  full_width: false
18
18
  )
19
- render(Anchor::ButtonComponent.new(
19
+ anchor_button(
20
+ content,
20
21
  tag:,
21
22
  type:,
22
23
  size:,
23
24
  variant:,
24
25
  disabled:,
25
26
  full_width:
26
- ).with_content(content))
27
+ )
27
28
  end
28
29
 
29
30
  # @!group Sizes
30
31
 
31
32
  def default
32
- render(Anchor::ButtonComponent.new.with_content("Button"))
33
+ anchor_button("Button")
33
34
  end
34
35
 
35
36
  def small
36
- render(Anchor::ButtonComponent.new(size: :small).with_content("Button"))
37
+ anchor_button("Button", size: :small)
37
38
  end
38
39
 
39
40
  # @!endgroup
@@ -41,22 +42,19 @@ module Anchor
41
42
  # @!group Variants
42
43
 
43
44
  def basic
44
- render(Anchor::ButtonComponent.new.with_content("Button"))
45
+ anchor_button("Button")
45
46
  end
46
47
 
47
48
  def primary
48
- render(Anchor::ButtonComponent.new(variant: :primary)
49
- .with_content("Button"))
49
+ anchor_button("Button", variant: :primary)
50
50
  end
51
51
 
52
52
  def critical
53
- render(Anchor::ButtonComponent.new(variant: :critical)
54
- .with_content("Button"))
53
+ anchor_button("Button", variant: :critical)
55
54
  end
56
55
 
57
56
  def text
58
- render(Anchor::ButtonComponent.new(variant: :text)
59
- .with_content("Button"))
57
+ anchor_button("Button", variant: :text)
60
58
  end
61
59
 
62
60
  # @!endgroup
@@ -64,14 +62,14 @@ module Anchor
64
62
  # @!group With Icons
65
63
 
66
64
  def starting_icon
67
- render(Anchor::ButtonComponent.new) do |c|
65
+ anchor_button do |c|
68
66
  c.with_starting_icon(icon: "nav-arrow-left")
69
67
  "Button"
70
68
  end
71
69
  end
72
70
 
73
71
  def ending_icon
74
- render(Anchor::ButtonComponent.new) do |c|
72
+ anchor_button do |c|
75
73
  c.with_ending_icon(icon: "nav-arrow-right")
76
74
  "Button"
77
75
  end
@@ -80,8 +78,7 @@ module Anchor
80
78
  # @!endgroup
81
79
 
82
80
  def link
83
- render(Anchor::ButtonComponent.new(tag: :a, href: "#")
84
- .with_content("Button"))
81
+ anchor_button("Button", tag: :a, href: "#")
85
82
  end
86
83
  end
87
84
  end
data/previews/anchor/dialog_component_preview/with_custom_show_button.html.erb CHANGED
@@ -1,12 +1,13 @@
1
- <%= render Anchor::ButtonComponent.new(
1
+ <%= anchor_button(
2
+ "Show dialog",
2
3
  data: {
3
4
  action: "invoker#openDialog",
4
5
  controller: "invoker",
5
6
  invoker_dialog_outlet: "#my-dialog",
6
7
  },
7
- ).with_content("Show dialog") %>
8
+ ) %>
8
9
 
9
- <%= render Anchor::DialogComponent.new(
10
+ <%= anchor_dialog(
10
11
  id: "my-dialog",
11
12
  title: "Dialog Title",
12
13
  ) do |dialog| %>
data/previews/anchor/dialog_component_preview/with_footer.html.erb CHANGED
@@ -1,17 +1,15 @@
1
- <%= render Anchor::DialogComponent.new(
1
+ <%= anchor_dialog(
2
2
  id: "my-dialog",
3
3
  title: "Dialog Title",
4
4
  ) do |dialog| %>
5
- <% dialog.with_show_button.with_content("Show Dialog") %>
5
+ <% dialog.with_show_button_content("Show Dialog") %>
6
6
 
7
7
  <% dialog.with_body do %>
8
8
  <%= tag.p "Content" %>
9
9
  <% end %>
10
10
 
11
11
  <% dialog.with_footer do %>
12
- <%= render Anchor::ButtonComponent.new(
13
- data: { action: "dialog#close" }
14
- ).with_content("Cancel") %>
15
- <%= render Anchor::ButtonComponent.new(variant: :primary).with_content("Save") %>
12
+ <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
13
+ <%= anchor_button("Save", variant: :primary) %>
16
14
  <% end %>
17
15
  <% end %>
data/previews/anchor/dialog_component_preview.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
- class DialogComponentPreview < ViewComponent::Preview
2
+ class DialogComponentPreview < Preview
3
3
  # @param title text
4
4
  # @param body_text textarea
5
5
  # @param id text
@@ -8,9 +8,9 @@ module Anchor
8
8
  id: "unique-id",
9
9
  title: "Dialog Title"
10
10
  )
11
- render Anchor::DialogComponent.new(id:, title:) do |c|
12
- c.with_show_button.with_content("Show Dialog")
13
- c.with_body.with_content(body_text)
11
+ anchor_dialog(id:, title:) do |c|
12
+ c.with_show_button_content("Show Dialog")
13
+ c.with_body_content(body_text)
14
14
  end
15
15
  end
16
16
 
@@ -22,13 +22,13 @@ module Anchor
22
22
  def with_custom_show_button; end
23
23
 
24
24
  def with_link
25
- render Anchor::DialogComponent.new(
25
+ anchor_dialog(
26
26
  id: "my-dialog",
27
27
  title: "Dialog Title"
28
28
  ) do |c|
29
29
  c.with_show_button(classes: "all-unset underline")
30
30
  .with_content("Show Dialog")
31
- c.with_body.with_content("Content")
31
+ c.with_body_content("Content")
32
32
  end
33
33
  end
34
34
  end
data/previews/anchor/icon_component_preview.rb CHANGED
@@ -1,12 +1,12 @@
1
1
  module Anchor
2
- class IconComponentPreview < ViewComponent::Preview
2
+ class IconComponentPreview < Preview
3
3
  # Icons
4
4
  # ------------
5
5
  # We use icons from [Iconoir](https://iconoir.com). Not all icons are
6
6
  # currently included in Anchor; those that are [can be viewed on
7
7
  # GitHub](https://github.com/BuoySoftware/anchor_view_components/tree/main/app/assets/images/icons).
8
8
  def default
9
- render(Anchor::IconComponent.new(icon: "actions-check-circle-base"))
9
+ anchor_icon(icon: "actions-check-circle-base")
10
10
  end
11
11
  end
12
12
  end
data/previews/anchor/loading_indicator_component_preview.rb CHANGED
@@ -1,25 +1,25 @@
1
1
  module Anchor
2
- class LoadingIndicatorComponentPreview < ViewComponent::Preview
2
+ class LoadingIndicatorComponentPreview < Preview
3
3
  # rubocop:disable Layout/LineLength
4
4
  # @param variant [Symbol] select {{ Anchor::LoadingIndicatorComponent::VARIANT_OPTIONS }}
5
5
  # rubocop:enable Layout/LineLength
6
6
  def playground(
7
7
  variant: Anchor::LoadingIndicatorComponent::VARIANT_DEFAULT
8
8
  )
9
- render Anchor::LoadingIndicatorComponent.new(variant:)
9
+ anchor_loading_indicator(variant:)
10
10
  end
11
11
 
12
12
  # @!group Variants
13
13
  def sm
14
- render Anchor::LoadingIndicatorComponent.new(variant: :sm)
14
+ anchor_loading_indicator(variant: :sm)
15
15
  end
16
16
 
17
17
  def md
18
- render Anchor::LoadingIndicatorComponent.new(variant: :md)
18
+ anchor_loading_indicator(variant: :md)
19
19
  end
20
20
 
21
21
  def lg
22
- render Anchor::LoadingIndicatorComponent.new(variant: :lg)
22
+ anchor_loading_indicator(variant: :lg)
23
23
  end
24
24
  # @!endgroup
25
25
  end
data/previews/anchor/logo_component_preview.rb ADDED
@@ -0,0 +1,45 @@
1
+ module Anchor
2
+ class LogoComponentPreview < Preview
3
+ # @param color select {{ Anchor::LogoComponent::COLOR_OPTIONS }}
4
+ # @param variant select {{ Anchor::LogoComponent::VARIANT_OPTIONS }}
5
+ def playground(
6
+ color: Anchor::LogoComponent::COLOR_DEFAULT,
7
+ variant: Anchor::LogoComponent::VARIANT_DEFAULT
8
+ )
9
+ anchor_logo(variant:, color:)
10
+ end
11
+
12
+ # @!group Variants
13
+
14
+ def default
15
+ anchor_logo(variant: :default)
16
+ end
17
+
18
+ def mark
19
+ anchor_logo(variant: :mark)
20
+ end
21
+
22
+ def stacked
23
+ anchor_logo(variant: :stacked)
24
+ end
25
+
26
+ # @!endgroup
27
+
28
+ # @!group Colors
29
+
30
+ # TODO: should be `sea`
31
+ def teal
32
+ anchor_logo(color: :teal)
33
+ end
34
+
35
+ def coral
36
+ anchor_logo(color: :coral)
37
+ end
38
+
39
+ def white
40
+ anchor_logo(color: :white)
41
+ end
42
+
43
+ # @!endgroup
44
+ end
45
+ end
data/previews/anchor/panel_component_preview/with_banner.html.erb CHANGED
@@ -1,8 +1,8 @@
1
- <%= render Anchor::PanelComponent.new(active: true) do |panel| %>
2
- <% panel.with_header.with_content("Test Results") %>
1
+ <%= anchor_panel(active: true) do |panel| %>
2
+ <% panel.with_header_content("Test Results") %>
3
3
 
4
4
  <% panel.with_body do %>
5
- <%= render Anchor::BannerComponent.new(variant: :critical) do %>
5
+ <%= anchor_banner(variant: :critical) do %>
6
6
  <%= tag.p "Additional testing is required.", class: "text-critical font-semibold" %>
7
7
  <% end %>
8
8
 
data/previews/anchor/panel_component_preview.rb CHANGED
@@ -1,15 +1,15 @@
1
1
  module Anchor
2
- class PanelComponentPreview < ViewComponent::Preview
2
+ class PanelComponentPreview < Preview
3
3
  def inactive
4
- render Anchor::PanelComponent.new(active: false) do |component|
5
- component.with_header.with_content("My Panel")
6
- component.with_body.with_content("I'm hidden")
4
+ anchor_panel(active: false) do |component|
5
+ component.with_header_content("My Panel")
6
+ component.with_body_content("I'm hidden")
7
7
  end
8
8
  end
9
9
 
10
10
  def active
11
- render Anchor::PanelComponent.new(active: true) do |component|
12
- component.with_header.with_content("My Panel")
11
+ anchor_panel(active: true) do |component|
12
+ component.with_header_content("My Panel")
13
13
  component.with_body do
14
14
  "The panel contents are displayed when it is active."
15
15
  end
@@ -17,9 +17,9 @@ module Anchor
17
17
  end
18
18
 
19
19
  def with_footer
20
- render Anchor::PanelComponent.new(active: true) do |component|
21
- component.with_header.with_content("My Panel")
22
- component.with_body.with_content("Panel with footer")
20
+ anchor_panel(active: true) do |component|
21
+ component.with_header_content("My Panel")
22
+ component.with_body_content("Panel with footer")
23
23
  component
24
24
  .with_footer
25
25
  .with_primary_action(form: "example", label: "Save")
@@ -27,15 +27,13 @@ module Anchor
27
27
  end
28
28
 
29
29
  def with_footer_with_supporting_text
30
- render Anchor::PanelComponent.new(active: true) do |component|
31
- component.with_header.with_content("My Panel")
30
+ anchor_panel(active: true) do |component|
31
+ component.with_header_content("My Panel")
32
32
 
33
- component
34
- .with_body
35
- .with_content("Panel with footer and supporting text")
33
+ component.with_body_content("Panel with footer and supporting text")
36
34
 
37
35
  component.with_footer do |footer|
38
- footer.with_supporting_text.with_content("1 of 2")
36
+ footer.with_supporting_text_content("1 of 2")
39
37
  footer.with_primary_action(form: "example", label: "Save")
40
38
  end
41
39
  end
data/previews/anchor/preview.rb ADDED
@@ -0,0 +1,5 @@
1
+ module Anchor
2
+ class Preview < ViewComponent::Preview
3
+ include Anchor::ViewHelper
4
+ end
5
+ end
data/previews/anchor/side_nav_component_preview/default.html.erb CHANGED
@@ -14,27 +14,27 @@
14
14
  "Reports",
15
15
  "Station Installation",
16
16
  "Test Results",
17
- ].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
17
+ ].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
18
18
 
19
19
  apps = [
20
20
  {
21
21
  label: "Centers",
22
- path: "#"
22
+ path: "#"
23
23
  },
24
24
  {
25
25
  label: "Corporate",
26
- path: "#"
26
+ path: "#"
27
27
  },
28
28
  {
29
29
  label: "Medical Device",
30
- path: "#"
30
+ path: "#"
31
31
  }
32
- ]
32
+ ]
33
33
  %>
34
- <%= render Anchor::SideNavComponent.new(
35
- employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'),
36
- nav_items:,
37
- apps:,
34
+ <%= anchor_side_nav(
35
+ employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'),
36
+ nav_items:,
37
+ apps:,
38
38
  apps_button_text: "Medical Device",
39
39
  ) do |c| %>
40
40
  <% c.with_footer_links do %>
data/previews/anchor/side_nav_component_preview.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
- class SideNavComponentPreview < ViewComponent::Preview
2
+ class SideNavComponentPreview < Preview
3
3
  layout "plain"
4
4
 
5
5
  def default; end
data/previews/anchor/tab_bar_component_preview.rb CHANGED
@@ -1,11 +1,11 @@
1
1
  module Anchor
2
- class TabBarComponentPreview < ViewComponent::Preview
2
+ class TabBarComponentPreview < Preview
3
3
  # @param label text "A brief description of the purpose of the navigation,
4
4
  # omitting the term ‘navigation’, as the screen reader will read both the
5
5
  # role and the contents of the label."
6
6
  # @param number_of_tabs number
7
7
  def playground(label: "Accessible label", number_of_tabs: 3)
8
- render(Anchor::TabBarComponent.new(label:)) do |c|
8
+ anchor_tab_bar(label:) do |c|
9
9
  Array.new(number_of_tabs || 3) do |i|
10
10
  c.with_tab(href: "#", active: i.zero?).with_content("Label")
11
11
  end
data/previews/anchor/table_component_preview.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
- class TableComponentPreview < ViewComponent::Preview
2
+ class TableComponentPreview < Preview
3
3
  class MockData
4
4
  attr_reader :id, :name
5
5
 
@@ -13,44 +13,61 @@ module Anchor
13
13
  end
14
14
  end
15
15
 
16
- def playground
17
- render Anchor::TableComponent.new(data:, caption: "Demo table") do |table|
18
- table.with_column(header: "Id", value: :id)
16
+ # @param caption text
17
+ # @param paginate toggle
18
+ # @param rows_link_to text
19
+ # @param sortable toggle
20
+ def playground(
21
+ caption: "Demo table",
22
+ paginate: false,
23
+ rows_link_to: "#a_link/",
24
+ sortable: false,
25
+ sort_url: ->(data) { "/sort/#{data.id}" }
26
+ )
27
+ anchor_table(
28
+ data:,
29
+ caption:,
30
+ paginate:,
31
+ rows_link_to: ->(_) { rows_link_to },
32
+ sortable:,
33
+ sort_url:
34
+ ) do |table|
35
+ table.with_column(header: "ID", value: :id)
19
36
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
20
37
  end
21
38
  end
22
39
 
23
- def with_link
24
- render Anchor::TableComponent.new(
40
+ def with_row_links
41
+ anchor_table(
25
42
  data:,
26
43
  rows_link_to: ->(_record) { "#a_link/" }
27
44
  ) do |table|
28
- table.with_column(header: "Id", value: :id)
45
+ table.with_column(header: "ID", value: :id)
29
46
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
30
47
  end
31
48
  end
32
49
 
33
50
  def sortable
34
- render Anchor::TableComponent.new(
51
+ anchor_table(
35
52
  data:,
36
53
  sortable: true,
37
54
  sort_url: ->(data) { "/sort/#{data.id}" }
38
55
  ) do |table|
39
- table.with_column(header: "Id", value: :id)
56
+ table.with_column(header: "ID", value: :id)
40
57
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
41
58
  end
42
59
  end
43
60
 
44
- def empty
45
- render Anchor::TableComponent.new(data: []) do |table|
46
- table.with_column(header: "Id", value: :id)
61
+ def empty_data
62
+ anchor_table(data: []) do |table|
63
+ table.with_column(header: "ID", value: :id)
47
64
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
48
65
  end
49
66
  end
50
67
 
51
68
  def paginated
52
- render Anchor::TableComponent.new(data:, paginate: true) do |table|
53
- table.with_column(header: "Id", value: :id)
69
+ anchor_table(data:, paginate: true) do |table|
70
+ table.with_column(header: "ID", value: :id)
54
71
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
55
72
  end
56
73
  end
data/previews/anchor/text_component_preview.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
- class TextComponentPreview < ViewComponent::Preview
2
+ class TextComponentPreview < Preview
3
3
  TEXT = "The quick brown fox jumps over the lazy dog.".freeze
4
4
 
5
5
  # @param content text
@@ -11,64 +11,52 @@ module Anchor
11
11
  tag: Anchor::TextComponent::TAG_DEFAULT,
12
12
  variant: Anchor::TextComponent::VARIANT_DEFAULT
13
13
  )
14
- render Anchor::TextComponent.new(variant:, tag:)
15
- .with_content(content)
14
+ anchor_text(content, variant:, tag:)
16
15
  end
17
16
 
18
17
  # @!group Variants
19
18
  def body_sm
20
- render Anchor::TextComponent.new(variant: :body_sm, tag: :div)
21
- .with_content(TEXT)
19
+ anchor_text(TEXT, variant: :body_sm)
22
20
  end
23
21
 
24
22
  def body_base
25
- render Anchor::TextComponent.new(variant: :body_base, tag: :div)
26
- .with_content(TEXT)
23
+ anchor_text(TEXT, variant: :body_base)
27
24
  end
28
25
 
29
26
  def body_lg
30
- render Anchor::TextComponent.new(variant: :body_lg, tag: :div)
31
- .with_content(TEXT)
27
+ anchor_text(TEXT, variant: :body_lg)
32
28
  end
33
29
 
34
30
  def subheading_sm
35
- render Anchor::TextComponent.new(variant: :subheading_sm)
36
- .with_content(TEXT)
31
+ anchor_text(TEXT, variant: :subheading_sm)
37
32
  end
38
33
 
39
34
  def subheading_xs
40
- render Anchor::TextComponent.new(variant: :subheading_xs)
41
- .with_content(TEXT)
35
+ anchor_text(TEXT, variant: :subheading_xs)
42
36
  end
43
37
 
44
38
  def heading_base
45
- render Anchor::TextComponent.new(variant: :heading_base, tag: :h3)
46
- .with_content(TEXT)
39
+ anchor_text(TEXT, variant: :heading_base, tag: :h3)
47
40
  end
48
41
 
49
42
  def heading_lg
50
- render Anchor::TextComponent.new(variant: :heading_lg, tag: :h3)
51
- .with_content(TEXT)
43
+ anchor_text(TEXT, variant: :heading_lg, tag: :h3)
52
44
  end
53
45
 
54
46
  def heading_xl
55
- render Anchor::TextComponent.new(variant: :heading_xl, tag: :h3)
56
- .with_content(TEXT)
47
+ anchor_text(TEXT, variant: :heading_xl, tag: :h3)
57
48
  end
58
49
 
59
50
  def heading_2xl
60
- render Anchor::TextComponent.new(variant: :heading_2xl, tag: :h3)
61
- .with_content(TEXT)
51
+ anchor_text(TEXT, variant: :heading_2xl, tag: :h3)
62
52
  end
63
53
 
64
54
  def heading_3xl
65
- render Anchor::TextComponent.new(variant: :heading_3xl, tag: :h3)
66
- .with_content(TEXT)
55
+ anchor_text(TEXT, variant: :heading_3xl, tag: :h3)
67
56
  end
68
57
 
69
58
  def heading_4xl
70
- render Anchor::TextComponent.new(variant: :heading_4xl, tag: :h3)
71
- .with_content(TEXT)
59
+ anchor_text(TEXT, variant: :heading_4xl, tag: :h3)
72
60
  end
73
61
  # @!endgroup
74
62
  end
data/previews/anchor/toast_component_preview.rb CHANGED
@@ -1,33 +1,24 @@
1
1
  module Anchor
2
- class ToastComponentPreview < ViewComponent::Preview
2
+ class ToastComponentPreview < Preview
3
3
  def variant_notice
4
- render(Anchor::ToastComponent.new(variant: :notice).with_content(
5
- "Questionnaire created"
6
- ))
4
+ anchor_toast("Questionnaire created", variant: :notice)
7
5
  end
8
6
 
9
7
  def variant_success
10
- render(Anchor::ToastComponent.new(variant: :success).with_content(
11
- "Questionnaire created"
12
- ))
8
+ anchor_toast("Questionnaire created", variant: :success)
13
9
  end
14
10
 
15
11
  def variant_error
16
- render(
17
- Anchor::ToastComponent.new(variant: :error, role: :alert)
18
- .with_content("Questionnaire deleted")
19
- )
12
+ anchor_toast("Questionnaire deleted", variant: :error)
20
13
  end
21
14
 
22
15
  def variant_alert
23
- render(Anchor::ToastComponent.new(variant: :alert).with_content(
24
- "Questionnaire created"
25
- ))
16
+ anchor_toast("Questionnaire created", variant: :alert)
26
17
  end
27
18
 
28
19
  def with_icon
29
- render(Anchor::ToastComponent.new) do |component|
30
- component.with_icon(icon: "actions-check-circle-base")
20
+ anchor_toast do |toast|
21
+ toast.with_icon(icon: "actions-check-circle-base")
31
22
  "Confirmed"
32
23
  end
33
24
  end
data/previews/pages/helpers.md.erb ADDED
@@ -0,0 +1,9 @@
1
+ ## Component helpers
2
+
3
+ All components have [a corresponding helper](https://github.com/BuoySoftware/anchor_view_components/blob/main/app/helpers/anchor/view_helper.rb) method which reduces some of the
4
+ repetitive syntax when using ViewComponent’s built-in render call.
5
+
6
+ ```diff
7
+ -<%%= render(Anchor::ButtonComponent.new.with_content("Button")) %>
8
+ +<%%= anchor_button("Button") do %>
9
+ ```
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: anchor_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.14.0
4
+ version: 0.15.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Buoy Software
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-09-15 00:00:00.000000000 Z
11
+ date: 2023-09-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -93,6 +93,8 @@ files:
93
93
  - app/components/anchor/invoker_controller.ts
94
94
  - app/components/anchor/loading_indicator_component.html.erb
95
95
  - app/components/anchor/loading_indicator_component.rb
96
+ - app/components/anchor/logo_component.html.erb
97
+ - app/components/anchor/logo_component.rb
96
98
  - app/components/anchor/panel/body_component.html.erb
97
99
  - app/components/anchor/panel/body_component.rb
98
100
  - app/components/anchor/panel/footer_component.html.erb
@@ -145,15 +147,17 @@ files:
145
147
  - previews/anchor/dialog_component_preview/with_footer.html.erb
146
148
  - previews/anchor/icon_component_preview.rb
147
149
  - previews/anchor/loading_indicator_component_preview.rb
150
+ - previews/anchor/logo_component_preview.rb
148
151
  - previews/anchor/panel_component_preview.rb
149
152
  - previews/anchor/panel_component_preview/with_banner.html.erb
153
+ - previews/anchor/preview.rb
150
154
  - previews/anchor/side_nav_component_preview.rb
151
155
  - previews/anchor/side_nav_component_preview/default.html.erb
152
156
  - previews/anchor/tab_bar_component_preview.rb
153
157
  - previews/anchor/table_component_preview.rb
154
158
  - previews/anchor/text_component_preview.rb
155
159
  - previews/anchor/toast_component_preview.rb
156
- - previews/pages/logos.md.erb
160
+ - previews/pages/helpers.md.erb
157
161
  homepage: https://github.com/BuoySoftware/anchor_view_components
158
162
  licenses:
159
163
  - MIT
data/previews/pages/logos.md.erb DELETED
@@ -1,50 +0,0 @@
1
- Anchor provides SVG assets for Buoy logos. They use a `fill` of `currentColor`,
2
- so that they can be colorized using CSS `color`.
3
-
4
- ## Logo
5
-
6
- ```erb
7
- <%%= anchor_svg(
8
- "buoy-logo",
9
- class: "text-teal", # Use CSS to colorize to your needs
10
- height: "48", # Set exact rendered dimensions to improve browser performance
11
- width: "300", # Set exact rendered dimensions to improve browser performance
12
- ) %>
13
- ```
14
-
15
- <%= anchor_svg(
16
- "buoy-logo",
17
- height: "48",
18
- style: "color: #1C4957;",
19
- width: "300",
20
- ) %>
21
-
22
- <small>Original dimensions: 500×81</small>
23
-
24
- ## Logomark
25
-
26
- ```erb
27
- <%%= anchor_svg "buoy-logomark" %>
28
- ```
29
-
30
- <%= anchor_svg(
31
- "buoy-logomark",
32
- style: "color: #1C4957;",
33
- ) %>
34
-
35
- <small>Original dimensions: 72×58</small>
36
-
37
- ## Logo stacked
38
-
39
- ```erb
40
- <%%= anchor_svg "buoy-logo-stacked" %>
41
- ```
42
-
43
- <%= anchor_svg(
44
- "buoy-logo-stacked",
45
- height: "205",
46
- style: "color: #1C4957;",
47
- width: "300",
48
- ) %>
49
-
50
- <small>Original dimensions: 500×341</small>