Stops komponent components from being listed in the style guide sidebar

README.md

@@ -182,7 +182,7 @@ Each component comes with a Ruby `module`. You can use it to set properties:
 
 module ButtonComponent
   extend ComponentHelper
-  
+
   property :href, required: true
   property :text, default: 'My button'
 end
@@ -204,7 +204,7 @@ If your partial becomes too complex and you want to extract logic from it, you m
 
 module ButtonComponent
   extend ComponentHelper
-  
+
   property :href, required: true
   property :text, default: 'My button'
 
@@ -461,9 +461,9 @@ resolved_paths:
 
 ## Running tests
 
-Run all Cucumber features and unit tests with `bundle exec appraisal rake test`
+Install all the gems `bundle exec appraisal install`
 
-Run the full test matrix with `bundle exec appraisal rake test`
+then run the full test matrix with `bundle exec appraisal rake test`
 
 ## Contributing
 

fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb

@@ -0,0 +1,3 @@
+<div class="komponent-container">
+  <%= yield %>
+</div>

fixtures/my_app/frontend/components/komponent/container/komponent_container.css

@@ -0,0 +1,17 @@
+/* stylelint-disable value-list-comma-newline-after */
+
+.komponent-container {
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  margin: 40px 60px 0 300px;
+
+  .komponent-code {
+    background-color: #333;
+    color: #fff;
+    margin: 10px 0;
+    padding: 10px;
+  }
+}
+
+/* stylelint-enable */

fixtures/my_app/frontend/components/komponent/container/komponent_container.js

@@ -0,0 +1 @@
+import "./komponent_container.css";

fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentContainerComponent
+  extend ComponentHelper
+end

fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb

@@ -0,0 +1,3 @@
+<div class="komponent-footer">
+  Built with <%= link_to "Komponent", "http://komponent.io", target: "_blank" %>
+</div>

fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css

@@ -0,0 +1,27 @@
+/* stylelint-disable value-list-comma-newline-after */
+
+.komponent-footer {
+  bottom: 30px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  position: fixed;
+  right: 30px;
+  text-align: center;
+
+  &,
+  a {
+    color: #999;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: #0038ea;
+    }
+  }
+}
+
+/* stylelint-enable */

fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js

@@ -0,0 +1 @@
+import "./komponent_footer.css";

fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentFooterComponent
+  extend ComponentHelper
+end

fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb

@@ -0,0 +1,3 @@
+<div class="komponent-header">
+  <div class="logo">Styleguide</div>
+</div>

fixtures/my_app/frontend/components/komponent/header/komponent_header.css

@@ -0,0 +1,15 @@
+/* stylelint-disable value-list-comma-newline-after */
+
+.komponent-header {
+  align-items: center;
+  background-color: #0038ea;
+  color: white;
+  display: flex;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  height: 60px;
+  padding: 0 20px;
+}
+
+/* stylelint-enable */

fixtures/my_app/frontend/components/komponent/header/komponent_header.js

@@ -0,0 +1 @@
+import "./komponent_header.css";

fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentHeaderComponent
+  extend ComponentHelper
+end

fixtures/my_app/frontend/components/komponent/index.js

@@ -0,0 +1,5 @@
+import "components/komponent/container/komponent_container";
+import "components/komponent/footer/komponent_footer";
+import "components/komponent/header/komponent_header";
+import "components/komponent/sidebar/komponent_sidebar";
+

fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb

@@ -0,0 +1,10 @@
+<div class="komponent-sidebar">
+  <div class="komponent-sidebar-title">Components</div>
+  <ul class="komponent-sidebar-items">
+    <%- components.each do |_k, component| %>
+      <li class="komponent-sidebar-item">
+        <%= link_to_unless_current component.title, styleguide_path(id: component.id) %>
+      </li>
+    <% end %>
+  </ul>
+</div>

fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css

@@ -0,0 +1,43 @@
+/* stylelint-disable value-list-comma-newline-after */
+
+.komponent-sidebar {
+  background-color: #dbe1f3;
+  bottom: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  left: 0;
+  overflow: auto;
+  padding: 20px;
+  position: absolute;
+  top: 60px;
+  width: 240px;
+
+  &-title {
+    color: #0038ea;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin: 0 0 20px;
+    text-transform: uppercase;
+  }
+
+  &-items {
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 1.25;
+    list-style: none;
+    margin: 0 0 30px;
+    padding: 0;
+  }
+
+  &-item {
+    margin: 0 0 5px;
+  }
+
+  a {
+    color: #333;
+    text-decoration: none;
+  }
+}
+
+/* stylelint-enable */

fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js

@@ -0,0 +1 @@
+import "./komponent_sidebar.css";

fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentSidebarComponent
+  extend ComponentHelper
+end

lib/komponent/component.rb

@@ -13,8 +13,7 @@ def all
         Dir.glob(component_dirs).sort.each do |component_dir|
           component_path = Pathname.new(component_dir).relative_path_from(components_root).to_s
 
-          next unless File.exist?(components_root.join(component_path)
-            .join("#{component_path.underscore.gsub('/', '_')}_component.rb"))
+          next unless list_this_component_path?(component_path)
 
           components[component_path] = Component.new(component_path)
         end
@@ -32,6 +31,15 @@ def find(id)
       def components_root
         @components_root ||= Rails.application.config.komponent.root.join('components')
       end
+
+      private
+
+      def list_this_component_path?(component_path)
+        return false if component_path.starts_with?('komponent/')
+
+        File.exist?(components_root.join(component_path)
+            .join("#{component_path.underscore.gsub('/', '_')}_component.rb"))
+      end
     end
 
     attr_reader :id