diff --git a/README.md b/README.md
index bb1b078..40e8468 100644
--- a/README.md
+++ b/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
diff --git a/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb b/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb
new file mode 100644
index 0000000..31dc85d
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb
@@ -0,0 +1,3 @@
+
+ <%= yield %>
+
diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container.css b/fixtures/my_app/frontend/components/komponent/container/komponent_container.css
new file mode 100644
index 0000000..a41d825
--- /dev/null
+++ b/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 */
diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container.js b/fixtures/my_app/frontend/components/komponent/container/komponent_container.js
new file mode 100644
index 0000000..70b1a82
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/container/komponent_container.js
@@ -0,0 +1 @@
+import "./komponent_container.css";
diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb b/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb
new file mode 100644
index 0000000..3a2362d
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentContainerComponent
+ extend ComponentHelper
+end
diff --git a/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb b/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb
new file mode 100644
index 0000000..c3a1fae
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb
@@ -0,0 +1,3 @@
+
diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css
new file mode 100644
index 0000000..95a03e4
--- /dev/null
+++ b/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 */
diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js
new file mode 100644
index 0000000..c1d61e6
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js
@@ -0,0 +1 @@
+import "./komponent_footer.css";
diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb
new file mode 100644
index 0000000..9f64ef8
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentFooterComponent
+ extend ComponentHelper
+end
diff --git a/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb b/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb
new file mode 100644
index 0000000..e4feb12
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb
@@ -0,0 +1,3 @@
+
diff --git a/fixtures/my_app/frontend/components/komponent/header/komponent_header.css b/fixtures/my_app/frontend/components/komponent/header/komponent_header.css
new file mode 100644
index 0000000..ac9f194
--- /dev/null
+++ b/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 */
diff --git a/fixtures/my_app/frontend/components/komponent/header/komponent_header.js b/fixtures/my_app/frontend/components/komponent/header/komponent_header.js
new file mode 100644
index 0000000..b013393
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/header/komponent_header.js
@@ -0,0 +1 @@
+import "./komponent_header.css";
diff --git a/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb b/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb
new file mode 100644
index 0000000..7d3d6b6
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentHeaderComponent
+ extend ComponentHelper
+end
diff --git a/fixtures/my_app/frontend/components/komponent/index.js b/fixtures/my_app/frontend/components/komponent/index.js
new file mode 100644
index 0000000..25e71e2
--- /dev/null
+++ b/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";
+
diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb b/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb
new file mode 100644
index 0000000..195ade3
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb
@@ -0,0 +1,10 @@
+
diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css
new file mode 100644
index 0000000..3ac9e59
--- /dev/null
+++ b/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 */
diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js
new file mode 100644
index 0000000..2b3af41
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js
@@ -0,0 +1 @@
+import "./komponent_sidebar.css";
diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb
new file mode 100644
index 0000000..3395063
--- /dev/null
+++ b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentSidebarComponent
+ extend ComponentHelper
+end
diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb
index b6cb274..c9bfe74 100644
--- a/lib/komponent/component.rb
+++ b/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