npm - testio-tailwind - Versions diffs - 3.20.5 → 3.22.0 - Mend

testio-tailwind 3.20.5 → 3.22.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 (137) hide show

package/AI_DESIGN_SYSTEM_REFERENCE.md +2407 -0
package/package.json +2 -1
package/src/_data/navigation.json +4 -0
package/src/_includes/header.njk +8 -8
package/src/_includes/page-with-sidebar.njk +10 -1
package/src/assets/scripts/app.js +43 -0
package/src/assets/stylesheets/app.css +2 -0
package/src/assets/stylesheets/components/designsystem/designsystem-styles.css +4 -2
package/src/assets/stylesheets/components/forms.css +19 -11
package/src/assets/stylesheets/components/tables.css +4 -0
package/src/assets/stylesheets/plugin_themes/flatpickr.css +86 -0
package/src/pages/buttons/block.haml +1 -0
package/src/pages/buttons/button_group.haml +1 -0
package/src/pages/buttons/buttons-lg.haml +1 -0
package/src/pages/buttons/buttons-round.haml +1 -0
package/src/pages/buttons/buttons-sm.haml +1 -0
package/src/pages/buttons/buttons-xl.haml +1 -0
package/src/pages/buttons/buttons.haml +1 -0
package/src/pages/buttons/buttons_input.haml +4 -0
package/src/pages/buttons/dropdown-menu.haml +2 -11
package/src/pages/buttons/square-buttons.haml +15 -0
package/src/pages/components/alerts.haml +1 -0
package/src/pages/components/banner_cards.haml +1 -0
package/src/pages/components/card_badges.haml +8 -7
package/src/pages/components/cards.haml +15 -22
package/src/pages/components/cards_customer.haml +1 -0
package/src/pages/components/cards_fixedwidth.haml +7 -0
package/src/pages/components/cards_iconheader.haml +1 -0
package/src/pages/components/cards_tester.haml +1 -0
package/src/pages/components/descriptionlist.haml +12 -3
package/src/pages/components/devices.haml +1 -0
package/src/pages/components/drawer.haml +1 -0
package/src/pages/components/drawer_filter.haml +1 -0
package/src/pages/components/emptystate.haml +2 -0
package/src/pages/{buttons → components}/info_popover.haml +2 -1
package/src/pages/components/listitem_with_actionbar.haml +1 -0
package/src/pages/components/listitem_with_footer.haml +1 -0
package/src/pages/components/listitems.haml +1 -0
package/src/pages/components/listitems_badge.haml +1 -0
package/src/pages/components/listitems_collapsable.haml +1 -0
package/src/pages/components/listitems_nested.haml +1 -0
package/src/pages/components/listitems_selectable.haml +1 -0
package/src/pages/components/loading_spinner.haml +1 -0
package/src/pages/components/metasidebar.haml +1 -0
package/src/pages/components/modal_details.haml +3 -1
package/src/pages/components/notifications.haml +2 -1
package/src/pages/components/user_item.haml +1 -0
package/src/pages/forms/attachments.pug +71 -0
package/src/pages/forms/checkboxes.haml +1 -0
package/src/pages/forms/checkboxes_devices.haml +1 -0
package/src/pages/forms/date-time.haml +24 -0
package/src/pages/forms/dropzone.pug +38 -0
package/src/pages/forms/flatpickr.haml +27 -0
package/src/pages/forms/form-addon.haml +1 -0
package/src/pages/forms/form-card.haml +1 -0
package/src/pages/forms/form_grid.haml +1 -0
package/src/pages/forms/form_hint.haml +1 -0
package/src/pages/forms/forms.haml +1 -0
package/src/pages/forms/radiobuttons.haml +1 -0
package/src/pages/forms/rating_scale.haml +1 -0
package/src/pages/forms/search.haml +1 -0
package/src/pages/forms/selectable_token.haml +1 -0
package/src/pages/forms/selectable_token_browsers.haml +1 -0
package/src/pages/forms/selectable_token_lg.haml +1 -0
package/src/pages/forms/selectable_token_xl.haml +1 -0
package/src/pages/forms/textarea.haml +4 -0
package/src/pages/forms/toggle-buttons.haml +1 -0
package/src/pages/forms/toggle-switch.haml +1 -0
package/src/pages/forms/trix_editor.pug +1 -0
package/src/pages/icons/bug-icons.haml +1 -0
package/src/pages/icons/index.njk +18 -14
package/src/pages/icons/status-icons.haml +1 -0
package/src/pages/layout/app_layout.haml +2 -0
package/src/pages/layout/margins.haml +1 -0
package/src/pages/layout/max_width.haml +2 -1
package/src/pages/layout/paddings.haml +1 -0
package/src/pages/layout/spacing.haml +1 -0
package/src/pages/{examples → layouts}/agenticqa_splitview.haml +1 -1
package/src/pages/layouts/layout-actionbar.haml +45 -0
package/src/pages/{examples → layouts}/layout-basic.haml +3 -2
package/src/pages/{examples → layouts}/layout-chat.haml +3 -2
package/src/pages/{examples/layout-sidebar-actionbar-metasidebar.haml → layouts/layout-chatwindow.haml} +3 -2
package/src/pages/{examples → layouts}/layout-customer.haml +3 -2
package/src/pages/{examples → layouts}/layout-form-sidebar-actionbar-metasidebar.haml +5 -228
package/src/pages/{examples → layouts}/layout-manager.haml +3 -2
package/src/pages/{examples → layouts}/layout-metasidebar.haml +3 -2
package/src/pages/{examples → layouts}/layout-sidebar.haml +3 -2
package/src/pages/{examples → layouts}/layout-tester.haml +3 -2
package/src/pages/{examples → layouts}/splitview-metasidebar.haml +3 -3
package/src/pages/{examples → layouts}/splitview-testcases.haml +2 -2
package/src/pages/{examples → layouts}/splitview.haml +3 -3
package/src/pages/navigation/header-manager.haml +1 -0
package/src/pages/navigation/header-tester.haml +1 -0
package/src/pages/navigation/header.haml +1 -0
package/src/pages/navigation/header_customer.haml +1 -0
package/src/pages/navigation/header_tester_epam.haml +1 -0
package/src/pages/navigation/product_dropdown.haml +2 -0
package/src/pages/navigation/radio_tabs.haml +1 -0
package/src/pages/navigation/sidebar-manager.haml +2 -1
package/src/pages/navigation/sidebar-tester-elements.haml +1 -0
package/src/pages/navigation/sidebar-tester-seatlimitation.haml +1 -1
package/src/pages/navigation/sidebar-tester.haml +1 -1
package/src/pages/navigation/sidebar.haml +1 -0
package/src/pages/navigation/sidebar_collapsables.haml +1 -0
package/src/pages/navigation/sidebar_customer.haml +1 -0
package/src/pages/navigation/tabnavigation.haml +1 -0
package/src/pages/navigation/tabnavigation_actions.haml +1 -0
package/src/pages/navigation/tabnavigation_pills.haml +1 -0
package/src/pages/navigation/tabnavigation_sm.haml +1 -0
package/src/pages/navigation/test-header-tester.haml +2 -0
package/src/pages/tables/index.njk +7 -0
package/src/pages/tables/tables-cellstyle.haml +38 -0
package/src/pages/tables/tables-grid.haml +31 -0
package/src/pages/tables/tables.haml +16 -0
package/src/pages/tables/tables_alternating.haml +27 -0
package/src/pages/tables/tables_borders.haml +22 -0
package/src/pages/tables/tables_cells.haml +50 -0
package/src/pages/tables/tables_footer.haml +27 -0
package/src/pages/tables/tables_formrow.haml +31 -0
package/src/pages/tables/tables_header.haml +22 -0
package/src/pages/{components → tables}/tables_linked.haml +11 -10
package/src/pages/typography/link_with_icon.haml +10 -2
package/src/pages/typography/linked_icon.haml +6 -0
package/src/pages/typography/section_header.haml +1 -0
package/src/pages/typography/section_header_actions.haml +1 -0
package/src/pages/typography/text_with_icon.haml +3 -2
package/utils/filters.js +161 -0
package/CLAUDE_DESIGN_SYSTEM_REFERENCE.md +0 -1978
package/src/pages/buttons/link-with-icon.haml +0 -13
package/src/pages/components/tables-cellstyle.pug +0 -285
package/src/pages/components/tables-grid.pug +0 -258
package/src/pages/components/tables.haml +0 -57
package/src/pages/components/tables_cells.pug +0 -57
package/src/pages/components/tables_formrow.haml +0 -55
package/src/pages/examples/layout-actionbar.haml +0 -268
package/src/pages/examples/layout-sidebar-actionbar.haml +0 -308
package/src/pages/forms/uploads.pug +0 -101

package/src/pages/components/tables_formrow.haml DELETED Viewed

@@ -1,55 +0,0 @@
----
-tags: ['components']
-title: Table within form
----
-%p.mb-xs Tables cannot contain form elements directly, instead wrap the whole table with a form element.
-%form
-  %table.table.table-bordered.align-top
-    %thead
-      %th Table header
-      %th Table header
-      %th Table header
-      %th
-    %tbody
-      %tr
-        %td Cell content
-        %td Cell content
-        %td Cell content
-        %td.text-right
-          %details.dropdown-actions.dropright.ml-auto
-            %summary
-              .btn.btn-square
-                %span.icon.text-icon-default.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-pencil
-                Edit
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-duplicate
-                Duplicate
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-remove
-                Delete
-      %tr
-        %td
-          %select.tom-select.min-w-spacing-4xl{placeholder: "Please select"}
-            %option{value: ""}
-            %option{value:"Option 1"} Option 1
-            %option{value:"Option 2"} Option 2
-            %option{value:"Option 3"} Option 3
-            %option{value:"Option 4"} ABC
-            %option{value:"Option 5"} DEF
-            %option{value:"Option 6"} WHY
-            %option{value:"Option 7"} XYZ
-        %td
-          %input.form-control.min-w-spacing-4xl{type:'text', placeholder:"Add min-w to avoid squishing"}
-        %td
-          %textarea.form-control.min-w-spacing-4xl{rows:'1', placeholder:"Text area with min-w"}
-        %td.text-right
-          .btn-group.ml-auto
-            %button.btn.btn-primary.btn-square
-              .icon.icon-check
-            %button.btn.btn-danger.btn-square
-              .icon.icon-cross

package/src/pages/examples/layout-actionbar.haml DELETED Viewed

@@ -1,268 +0,0 @@
----
-layout: page-example.njk
-title: "Layout with actionbar"
-tags: "examples"
----
-%main.main-content.main-content-padding
-  %h1.mb-heading Layout with actionbar
-  %section.section
-    %h4.mb-heading Structure
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
-      %p .app-body
-      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
-      .bg-white.p-xs.pl-md.h-xxl .main-content
-      .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
-      .bg-petrol.text-white.p-xs.pl-md.rounded-bottom footer.actionbar
-    %h5.mt-md HTML structure
-    %code
-      &#60body class=&quotapp-body&quot&#62
-      %br
-      .ml-md &#60header class=&quotheader&quot&#62
-      .ml-md &#60main class=&quotmain-content&quot&#62
-      .ml-md &#60div class=&quotchat-container&quot&#62
-      .ml-md &#60footer class=&quotactionbar&quot&#62
-      &#60/body&quot&#62
-  %section.section
-    %h2.mb-heading Dummy Content
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-%footer.actionbar
-  %button.btn.btn-default.btn-primary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Primary
-  %button.btn.btn-default.btn-secondary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Secondary
-  %button.btn.btn-default.btn-info
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Info
-  %button.btn-intercom
-    %span.icon.icon-intercom
-.chat-container
-  %details.chat-window
-    %summary.chat-window-header
-      .chat-message-counter 999
-      %a{href:""} #123321
-      .chat-title Chat title
-      %button.btn.btn-xs.btn-ghost-inverted.btn-square
-        .icon.icon-xs.icon-cross
-    .list-chat-messages
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender
-        .chat-message
-          Here's a short message.
-        .chat-actions
-          .btn
-            .icon.icon-heart
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          Here's a short message which you liked.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                1
-              .popover-menu.info
-                .popover-title 1 person likes this
-                .popover-content You
-        .chat-actions
-          .btn
-            .icon.icon-heart-filled
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender
-        .chat-message
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author You
-        .chat-message
-          Your short chat message with no lorem ipsum.
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author You
-        .chat-message
-          Another message by you with a lot ofLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-      .chat-message-item.announcement
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.announcement Announcement
-          %span.text-mentioned @All
-          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-          .chat-message-addons
-            %a.btn{href:""} Show in chat
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-      .chat-message-item
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.mentioned You were mentioned
-          %span.text-mentioned @You
-          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-    %form.chat-window-actions
-      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
-      .btn.btn-sm.btn-square.btn-primary.btn-send-message
-        %input{type:"submit", value:""}

package/src/pages/examples/layout-sidebar-actionbar.haml DELETED Viewed

@@ -1,308 +0,0 @@
----
-layout: page-example.njk
-title: "Layout with sidebar and actionbar"
-tags: "examples"
----
-%nav.sidebar{arialabel:'Sidebar'}
-  %a.navlink.active{href:'#'}
-    %span.navlink-badge.icon.icon-home
-    Navlink active
-  %a.navlink{href:'#'}
-    %span.navlink-badge.icon.icon-bug
-    Navlink
-  %details
-    %summary.navlink-container
-      .navlink
-        %span.navlink-badge.icon.icon-product
-        Navlink collapsable
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-    %a.navlink{href:'#'}
-      %span.navlink-badge.icon.icon-test
-      Navlink children
-  %a.navlink{href:'#'}
-    %span.navlink-badge.icon.icon-bug-reproduction
-    Navlink with a long title to see how things are breaking into several lines and don&apos;t cause a broken layout
-%main.main-content.main-content-padding
-  %h1.mb-heading Layout with sidebar and actionbar
-  %section.section
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
-      %p .app-body
-      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
-      .grid.grid-cols-2-auto-fr.gap-1px
-        .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar
-        .grid.gap-1px
-          .grid.grid-cols-2-fr-auto
-            .bg-white.p-xs.pl-md.h-xxl .main-content
-          .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
-          .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
-    %h5.mt-md HTML structure
-    %code
-      &#60body class=&quotapp-body&quot&#62
-      %br
-      .ml-md &#60header class=&quotheader&quot&#62
-      .ml-md &#60nav class=&quotsidebar&quot&#62
-      .ml-md &#60main class=&quotmain-content&quot&#62
-      .ml-md &#60div class=&quotchat-container&quot&#62
-      .ml-md &#60footer class=&quotactionbar&quot&#62
-      &#60/body&quot&#62
-  %section.section
-    %h2.mb-heading Dummy Content
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-%footer.actionbar
-  %button.btn.btn-default.btn-primary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Primary action
-  %button.btn.btn-default.btn-secondary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Secondary action
-  %button.btn-intercom
-    %span.icon.icon-intercom
-.chat-container
-  %details.chat-window
-    %summary.chat-window-header
-      .chat-message-counter 999
-      %a{href:""} #123321
-      .chat-title Chat title
-      %button.btn.btn-xs.btn-ghost-inverted.btn-square
-        .icon.icon-xs.icon-cross
-    .list-chat-messages
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender
-        .chat-message
-          Here's a short message.
-        .chat-actions
-          .btn
-            .icon.icon-heart
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          Here's a short message which you liked.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                1
-              .popover-menu.info
-                .popover-title 1 person likes this
-                .popover-content You
-        .chat-actions
-          .btn
-            .icon.icon-heart-filled
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender
-        .chat-message
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item
-        %details.dropdown-actions.chat-avatar
-          %summary
-            .user-item.linked
-              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-          .popover-menu
-            %a.popover-action{href:'#'}
-              %span.icon.icon-user-story-test
-              Tester profile
-            %a.popover-action{href:'#'}
-              %span.icon.icon-review-exclamation
-              Report tester
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author You
-        .chat-message
-          Your short chat message with no lorem ipsum.
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author You
-        .chat-message
-          Another message by you with a lot ofLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-        .chat-actions
-          %details.dropdown-actions.chat-message-actions
-            %summary
-              .btn
-                .icon.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.icon-pencil
-                Action
-              %a.popover-action{href:'#'}
-                %span.icon.icon-remove
-                Action
-      .chat-message-item.announcement
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.announcement Announcement
-          %span.text-mentioned @All
-          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-          .chat-message-addons
-            %a.btn{href:""} Show in chat
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-      .chat-message-item
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.mentioned You were mentioned
-          %span.text-mentioned @You
-          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-    %form.chat-window-actions
-      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
-      .btn.btn-sm.btn-square.btn-primary.btn-send-message
-        %input{type:"submit", value:""}