power-compass 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b310dc5041bdff68ef213139f0d1c1a05059382b47430f31e9b6024b9e7d6720
-  data.tar.gz: a2e420b773128a5027bf199e5c6384b17ff6fec9bcbaf6ba9ff3427cb35eb9e7
+  metadata.gz: 6de7fc7a9466e382286e7ca098f1604b7feed4888f75c14007e074fd5a21d476
+  data.tar.gz: a69c7fc91b7505b16a31e36fd46a0899cf66968a2ef23993c6871152c05fd5be
 SHA512:
-  metadata.gz: b570ab5a2fa7d4da1bf51cac5e2fcaa5e08396dd89a0cb070a6480cca24c4cebbb2f59cc42d3946ab81fbdc554945d1ed9f08574f662e146df5c0127f23c55b1
-  data.tar.gz: 7239db58aeb179be84317182ba7db0359744d52775eb12cc2ff31460400d02a6b96922dbaa5d0fef1fdb0ae2912a8a6111e6c3b4dbb7f91f2ba2ac4cbe2a4f9c
+  metadata.gz: 0d98a62ed219c206e3b99ce5c719d653f798e427ab08daae854bbbc807b431d9697833c3f1c5ea4b1ecbf652f3e3308481bc1ec5e7f750ea63db4aa2d91890ff
+  data.tar.gz: 8b0f6976aee4e2358dcac4d2d9fedc8e5a028ba59b3c89e34d9052a45a3c924d2eae3b8b4dca254474f5125070a8c93a49ff8e15d17330fbaf2bf06f77e6c745

data/Rakefile

@@ -10,4 +10,29 @@ RSpec::Core::RakeTask.new(:spec)
 require "rubocop/rake_task"
 RuboCop::RakeTask.new(:rubocop)
 
+namespace :compass do
+  desc "Vendorize compiled version of compass/layout.scss for production"
+  task :compile do
+    gem_root = File.expand_path(__dir__)
+    dummy_root = File.join(gem_root, "spec", "dummy")
+    raise "Dummy app not found at #{dummy_root}" unless File.directory?(dummy_root)
+
+    Dir.chdir(dummy_root) do
+      ENV["RAILS_ENV"] = "development"
+      require File.join(dummy_root, "config", "environment")
+      env = Sprockets::Railtie.build_environment(Rails.application)
+      asset = env["compass/layout.css"]
+      raise "Could not compile compass/layout.css" unless asset
+
+      out = File.join(gem_root, "vendor", "assets", "stylesheets", "compass", "layout.css")
+      FileUtils.mkdir_p(File.dirname(out))
+      File.write(out, asset.source)
+      puts "Wrote #{out}"
+    end
+  end
+end
+
+# Compile the compass/layout.css file before building the gem
+Rake::Task["build"].enhance %w[compass:compile]
+
 task default: %i[rubocop spec]

data/app/assets/stylesheets/compass/layout.scss

@@ -0,0 +1,41 @@
+@import "tokens/index";
+
+$navigation-bg: $primary;
+$navigation-height: 60px;
+$navigation-crumbs-height: 30px;
+$full-nav-height: $navigation-height + $navigation-crumbs-height;
+$navigation-zindex: 10010;
+
+@import "navigation/all";
+
+body {
+  margin: 0px;
+  min-height: 100%;
+  height: auto;
+}
+
+html {
+  height: 100%;
+}
+
+html, body {
+  background: $bg_light;
+}
+
+// These are here because they were in navigation/_all.scss.
+// They should probably be moved back to, because they're not a compass concern.
+.select2-drop {
+  z-index: ($navigation-zindex + 4) !important;
+}
+.popover,
+#colorbox,
+#cboxOverlay,
+#cboxWrapper {
+  z-index: ($navigation-zindex + 3) !important;
+}
+.modal {
+  z-index: ($navigation-zindex + 2) !important;
+}
+.modal-backdrop {
+  z-index: ($navigation-zindex + 1) !important;
+}

data/app/assets/stylesheets/compass/navigation/_all.scss

@@ -0,0 +1,6 @@
+@import "recent-crumbs";
+@import "label";
+@import "main-page-content";
+@import "sidebar";
+@import "spinner";
+@import "header";

data/app/assets/stylesheets/compass/navigation/_header.scss

@@ -0,0 +1,168 @@
+@import "tokens/colors";
+@import "tokens/spacing";
+@import "tokens/screen_sizes";
+
+@import "tokens/colors";
+@import "tokens/spacing";
+
+.nitro-navigation {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  right: 0;
+  width: 100%;
+  z-index: $navigation-zindex;
+
+  .compass-logo {
+    display: block;
+  
+    @include break_at($screen-xs-max) {
+      display: none;
+    }
+  }
+  
+  .compass-logo-mobile {
+    display: none;
+  
+    @include break_at($screen-xs-max) {
+      display: block;
+    }
+  }
+
+  .navigation-topbar {
+    margin: 0;
+    border-bottom: 0;
+    position: relative;
+    height: 60px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-left, &-center, &-right {
+      position: static;
+      padding: 0 $space_lg;
+      color: #FFFFFF;
+      margin: 2px;
+      flex-basis: 33%;
+
+      @include break_at($screen-md-max) {
+        padding: 0 $space_xs;
+      }
+    }
+  }
+
+  .navigation-topbar-center {
+    @include break_at($screen-md-max) {
+      flex: 1;
+    }
+  }
+  .navigation-topbar-right {
+    color: $white;
+    margin: 2px;
+
+    @include break_at($screen-md-max) {
+      flex: 0;
+      padding-right: 0px;
+    }
+
+    .impersonating {
+      border: 2px solid rgb(255, 112, 52);
+    }
+
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        min-width: 280px;
+        max-height: calc(100vh - 90px);
+
+        & > [class*="pb_dropdown_option"][class*="selected"] [class^="pb_body"] {
+          color: $text_lt_light !important;
+        }
+      }
+
+      div[data-dropdown-custom-trigger] {
+        display: block !important;
+      }
+
+      &:has(svg.svg_3x) {
+        .pb_dropdown_trigger {
+          width: 65px !important;
+        }
+
+        .icon-caret svg.svg_xs {
+          position: relative !important;
+          right: 10px !important;
+        }
+      }
+
+      &:has(svg.svg_2x) {
+        .pb_dropdown_trigger {
+          width: 45px !important;
+        }
+
+        .icon-caret svg.svg_xs {
+          position: relative !important;
+          right: 5px !important;
+        }
+      }
+
+      .pb_dropdown_trigger img {
+        width: 38px;
+        border-radius: 1000px;
+      }
+    }
+
+    .menu-section-options {
+      li {
+        padding: 0px;
+        svg {
+          margin-right: $space_xs;
+        }
+      }
+      a {
+        color: $text_lt_light;
+      }
+      &:hover {
+        background-color: $bg_light;
+      }
+    }
+    .pb_dropdown_option_selected_focused,
+    .pb_dropdown_option_selected {
+      background-color: unset !important;
+    }
+    [class^="pb_dropdown"] {
+      [class*="pb_list_kit"] li {
+        padding: 0px !important;
+      }
+    }
+  }
+  .navigation-topbar-left {
+    @include break_at($screen-md-max) {
+      flex: 0;
+      padding-left: 0px;
+    }
+  }
+  .nitro-header-breadcrumbs-menu {
+    .breadcrumbs-separator {
+      width: 1px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+      &::before,
+      &::after {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+    .breadcrumb-item {
+      white-space: nowrap;
+      &:hover {
+        svg,
+        .pb_detail_kit_color_light.dark {
+          color: $white !important;
+        }
+      }
+    }
+    .breadcrumb-item:first-child {
+      min-width: 59px;
+    }
+  }
+}

data/app/assets/stylesheets/compass/navigation/_label.scss

@@ -0,0 +1,31 @@
+@import "tokens/screen_sizes";
+@import "tokens/typography";
+
+.nitro-navigation {
+  .navigation-topbar-label {
+    position: absolute;
+    left: 60px;
+    font-size: 0.75em;
+    font-weight: bold;
+    color: #FFF;
+
+    @include break_at($screen-xs-max) {
+      left: 40px;
+      bottom: 2px;
+      font-size: $font_smallest;
+    }
+
+    & > * {
+      padding: .15em .8em;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      line-height: 1;
+      white-space: nowrap;
+      border-radius: .25em;
+
+      &:last-child {
+        margin-left: 5px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/compass/navigation/_main-page-content.scss

@@ -0,0 +1,61 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  &.page-container-mobile {
+    height: 100%;
+  }
+  #main-view {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-grow: 1;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    .main-page-content {
+      flex-grow: 1;
+      min-height: 100%;
+      overflow-y: visible;
+      padding: 30px;
+      position: relative;
+      overflow-x: auto;
+      position: static;
+
+      .container {
+        // For this new layout we need all default responsive bootstrap
+        // widths to be max-width instead.
+        width: 100%;
+        max-width: 1187px;
+      }
+
+      &.full {
+        padding: 0;
+      }
+
+      &::after {
+        content: "";
+        width: 100%;
+        display: block;
+        float: none;
+        clear: both;
+      }
+    }
+
+    &.full-width {
+      .main-page-content {
+        padding: 0;
+      }
+    }
+  }
+
+  &::after {
+    content: "";
+    width: 100%;
+    display: block;
+    float: none;
+    clear: both;
+  }
+}

data/app/assets/stylesheets/compass/navigation/_recent-crumbs.scss

@@ -0,0 +1,17 @@
+@import "tokens/opacity";
+@import "tokens/colors";
+
+.nitro-navigation {
+  $power-navy:        #004976;
+
+  #main-crumbs {
+    background: mix($bg_dark, $power-navy);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: $navigation-crumbs-height;
+    min-height: $navigation-crumbs-height;
+    margin: 0;
+    overflow: hidden;
+  }
+}

data/app/assets/stylesheets/compass/navigation/_sidebar.scss

@@ -0,0 +1,123 @@
+@import "tokens/colors";
+@import "tokens/typography";
+@import "tokens/opacity";
+@import "tokens/spacing";
+
+$full-nav-height: 92px;
+
+.main-page-sidebar {
+  transition: width 0.2s ease;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: calc(100vh - #{$full-nav-height});
+  background: white;
+  border-right: 1px solid $border_light;
+  position: sticky;
+  position: -webkit-sticky;
+  top: $full-nav-height;
+  left: 0;
+  z-index: 1000;
+  transition: all 0.2s ease-out;
+
+  .nitro_sidebar {
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    > div:first-child {
+      height: 100%; // Needed to vertically center loading state
+    }
+
+    //override needed till updates made in PB
+    [class^="pb_nav_list"][class*="_vertical"][class*="_normal"]
+      [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"][class*="_active"][class*="_highlighted_border_none"] {
+      box-shadow: inset 3px 0 0 #0056cf !important;
+    }
+
+    .pb_collapsible_content_kit {
+      .pb_nav_list_item_link {
+        padding-left: 47px !important;
+      }
+    }
+
+    .collapsed_nav_icon_container {
+      font-size: $font_base + 2;
+    }
+
+    .pb_nav_list_item_text_collapsible {
+      overflow: hidden;
+      display: -webkit-box;
+      line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+
+    .collapsible_nav_wrapper_active {
+      .pb_collapsible_content_kit {
+        box-shadow: inset 3px 0 0 $primary !important;
+        background-color: $active_light;
+      }
+    }
+    .pb_collapsible_content_kit {
+      margin-left: unset !important;
+    }
+    .pb_nav_list_item_icon_left,
+    .pb_nav_list_item_icon_left_collapsible {
+      color: $text_lt_light !important;
+      font-size: $font_base + 2 !important;
+    }
+    [class^="pb_nav_list"][class*="_vertical"][class*="_normal"]
+      [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"][class*="_link"]:hover
+      [class*="_icon"] {
+      color: $primary !important;
+    }
+  }
+}
+
+@mixin mobileDeviceMenu {
+  .page-container {
+    #main-view {
+      .main-page-sidebar {
+        position: fixed;
+        top: 0;
+        left: -420px;
+        max-width: 420px;
+        height: 100vh;
+        z-index: 5000;
+        padding-top: $full-nav-height;
+
+        &-mobile {
+          min-height: $navigation-height;
+          display: flex;
+          color: white;
+        }
+
+        &.mobile-open {
+          left: 0;
+          width: 100%;
+        }
+      }
+      .main-page-content {
+        position: relative;
+
+        &.mobile-open {
+          &::after {
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba($text_lt_default, $opacity_3);
+            z-index: 4990;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: #{$screen-xs-max}) {
+  @include mobileDeviceMenu;
+}

data/app/assets/stylesheets/compass/navigation/_spinner.scss

@@ -0,0 +1,27 @@
+@import "tokens/opacity";
+@import "tokens/spacing";
+
+.page-container {
+  $sky-lighter:     #F9FAFB;
+  $power-navy:        #004976;
+  
+  #spinner {
+    position: absolute;
+    top: calc(#{$full-nav-height} + #{$space_sm});
+    right: $space_sm;
+    left: auto;
+    bottom: auto;
+    z-index: $navigation-zindex + 2;
+
+    .badge {
+      display: inline-block;
+      background: rgba($sky-lighter, $opacity_7);
+
+      svg {
+        path {
+          fill: $power-navy;
+        }
+      }
+    }
+  }
+}

data/app/components/compass/application_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Compass
+  class ApplicationComponent < ::ViewComponent::Base
+    include Playbook::Props
+    include Playbook::PbKitHelper
+  end
+end

data/app/components/compass/layout/banner.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: background_props) do %>
+  <%= content %>
+<% end %>

data/app/components/compass/layout/banner.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Compass
+  class Layout
+    class Banner < ApplicationComponent
+      prop :background
+
+      def background_props
+        others = background || {}
+        { display: "block", position: "relative", text_align: "center", **others }
+      end
+    end
+  end
+end

data/app/components/compass/layout/breadcrumb_item.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("flex/flex_item", props: { classname: "breadcrumb-item", cursor: "pointer", height: "100%", padding_x: "xs" }) do %>
+  <%= pb_rails("link", props: {
+                                align_items: "center",
+                                display: "flex",
+                                href: url,
+                                height: "100%",
+                                justify_content: "center",
+                                width: "100%",
+                                text: icon_text
+                            }) %>
+<% end %>
+
+<% if show_separator %>
+  <%= pb_rails("section_separator", props: {
+                                        classname: "breadcrumbs-separator",
+                                        height: "100%",
+                                        margin_x: "none",
+                                        orientation: "vertical",
+                                    }) %>
+<% end %>

data/app/components/compass/layout/breadcrumb_item.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Compass
+  class Layout
+    class BreadcrumbItem < ApplicationComponent
+      prop :label
+      prop :url
+      prop :icon
+      prop :show_separator
+
+      def icon_text
+        capture do
+          concat pb_rails("icon", props: { color: "text_light_dark", icon: }) if icon.present?
+          concat pb_rails("detail", props: { color: "light", dark: true, text: label }) if label.present?
+        end
+      end
+    end
+  end
+end

data/app/components/compass/layout/breadcrumbs.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("background", props: {
+                              background_color: "category_17",
+                              classname: "nitro-header-breadcrumbs-menu",
+                              height: "30px",
+                              id: "main-crumbs",
+                              min_height: "30px",
+                          }) do %>
+  <%= pb_rails("flex", props: { align: "center", height: "30px", min_height: "30px", vertical: "stretch" }) do %>
+    <%= render(Compass::Layout::BreadcrumbItem.new(url: "/", icon: "home", show_separator: true)) %>
+    <% breadcrumbs.each_with_index do |breadcrumb, index| %>
+      <%= render(Compass::Layout::BreadcrumbItem.new(url: breadcrumb[:url], label: breadcrumb[:label], show_separator: index < breadcrumbs.length - 1)) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/compass/layout/breadcrumbs.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Compass
+  class Layout
+    class Breadcrumbs < ApplicationComponent
+      prop :breadcrumbs
+    end
+  end
+end

data/app/components/compass/layout/content_container_component.html.erb

@@ -0,0 +1,3 @@
+<div class="new-style">
+  <%= content %>
+</div>

data/app/components/compass/layout/content_container_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Compass
+  class Layout
+    class ContentContainerComponent < ApplicationComponent
+      prop :content
+    end
+  end
+end

data/app/components/compass/layout/header/dropdown_menu.html.erb

@@ -0,0 +1,15 @@
+<% if icon.present? %>
+  <%= pb_rails("dropdown", props: options) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") do %>
+      <%= pb_rails("flex", props: { align_items: "center", cursor: "pointer", classname: icon_wrapper_classname }) do %>
+        <%= pb_rails(pb_component, props: icon_props) %>
+        <%= pb_rails("icon", props: { icon: "caret-down-solid", size: "xs" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("dropdown/dropdown_container", props: { right: { inset: true, value: "xxs" }, padding_y: "sm" }) do %>
+      <%= component ? render(component) : content %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= component ? render(component) : content %>
+<% end %>

data/app/components/compass/layout/header/dropdown_menu.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Compass
+  class Layout
+    class Header
+      class DropdownMenu < ApplicationComponent
+        prop :icon
+        prop :component
+        prop :options, default: {}
+
+      private
+
+        def image?
+          icon&.try(:key?, :url)
+        end
+
+        def pb_component
+          image? ? "image" : "icon"
+        end
+
+        def icon_wrapper_classname
+          image? ? "image-caret" : "icon-caret"
+        end
+
+        def icon_props
+          case icon
+          when ::String
+            { icon:, size: "2x", fixed_width: true }
+          else
+            icon
+          end
+        end
+      end
+    end
+  end
+end