epages-essence 0.1.0 → 0.2.0

data/app/components/essence/link_component/link_component.css

@@ -0,0 +1,49 @@
+.link {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: inline-flex;
+  height: fit-content;
+  padding: 0;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.link-primary {
+  color: var(--primaryLink-color);
+
+  &:hover {
+    color: var(--primaryLink-hover-color);
+  }
+}
+
+.link-secondary {
+  color: var(--secondaryLink-color);
+
+  &:hover {
+    color: var(--secondaryLink-hover-color);
+  }
+}
+
+.link-danger {
+  color: var(--dangerLink-color);
+
+  &:hover {
+    color: var(--dangerLink-hover-color);
+  }
+}
+
+.link-icon {
+  fill: currentColor;
+  height: 15px;
+  width: 15px;
+
+  &:first-child {
+    margin-right: 5px;
+  }
+
+  &:last-child {
+    margin-left: 6px;
+  }
+}

data/app/components/essence/notification_component/notification_component.css

@@ -0,0 +1,55 @@
+.notification {
+  background-color: var(--notification-background);
+  border-radius: var(--notification-borderRadius);
+  display: flex;
+}
+
+.notification-body {
+  color: var(--notification-text);
+  padding: 8px 14px;
+}
+
+.notification-danger,
+.notification-alert {
+  border: 1px solid var(--notification-danger);
+
+  .notification-indicator {
+    background-color: var(--notification-danger);
+  }
+}
+
+.notification-icon {
+  display: block;
+  fill: var(--notification-background);
+  height: 18px;
+  width: 18px;
+}
+
+.notification-indicator {
+  padding: 10px 8px;
+}
+
+.notification-info {
+  border: 1px solid var(--notification-info);
+
+  .notification-indicator {
+    background-color: var(--notification-info);
+  }
+}
+
+.notification-success,
+.notification-notice {
+  border: 1px solid var(--notification-success);
+
+  .notification-indicator {
+    background-color: var(--notification-success);
+  }
+}
+
+.notification-warning {
+  border: 1px solid var(--notification-warning);
+
+  .notification-indicator {
+    background-color: var(--notification-warning);
+  }
+}

data/app/components/essence/notification_component.rb

@@ -8,18 +8,22 @@ module Essence
 
     VARIANT_MAPPINGS = {
       :success => 'notification-success',
+      :notice => 'notification-notice',
       DEFAULT_VARIANT => 'notification-info',
       :warning => 'notification-warning',
-      :danger => 'notification-danger'
+      :danger => 'notification-danger',
+      :alert => 'notification-danger'
     }.freeze
 
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys.freeze
 
     ICON_MAPPINGS = {
       :success => 'circle_check',
+      :notice => 'circle_check',
       DEFAULT_VARIANT => 'circle_info',
       :warning => 'circle_exclamation',
-      :danger => 'circle_xmark'
+      :danger => 'circle_xmark',
+      :alert => 'circle_xmark'
     }.freeze
 
     def initialize(variant: DEFAULT_VARIANT,

data/app/components/essence/paragraph_component/{paragraph_component.scss → paragraph_component.css}

@@ -1,8 +1,3 @@
-:root {
-  --primaryLink-color:       deepskyblue;
-  --primaryLink-hover-color: #0099cc;
-}
-
 .paragraph {
   & > *:first-child {
     margin-top: 0;

data/app/components/essence/scroll_shadow_component/{scroll_shadow_component.scss → scroll_shadow_component.css}

@@ -1,3 +1,7 @@
+scroll-shadow {
+  width: 100%;
+}
+
 .scroll-shadow {
   max-height: 100%;
   max-width: 100%;

data/app/components/essence/spinner_component/{spinner_component.scss → spinner_component.css}

@@ -1,25 +1,18 @@
-:root {
-  --spinner-border:              #c0c0c0;
-  --spinner-border-highlighting: #676767;
-}
-
-$spinner-size: 40px;
-
 .spinner {
-  height: $spinner-size;
+  height: var(--spinner-size);
   position: relative;
-  width: $spinner-size;
+  width: var(--spinner-size);
 
   &::after {
     animation: spin 1.5s infinite linear;
     border: solid 4px var(--spinner-border);
     border-bottom-color: var(--spinner-border-highlighting);
     border-radius: 50%;
-    content: '';
-    height: $spinner-size;
+    content: "";
+    height: var(--spinner-size);
     position: absolute;
     transform-origin: center;
-    width: $spinner-size;
+    width: var(--spinner-size);
   }
 }
 

data/app/components/essence/spinner_component/spinner_component.html.erb

@@ -1 +1 @@
-<div <%= tag.attributes **html_options %>></div>
+<span <%= tag.attributes **html_options %>></span>

data/app/components/essence/spinner_component.rb

@@ -4,14 +4,16 @@ module Essence
   class SpinnerComponent < ApplicationComponent
     attr_reader :html_options
 
-    def initialize(**html_options)
+    def initialize(size: 40,
+                   **html_options)
+      @size         = integer_or_fallback(size, 40)
       @html_options = html_options
     end
 
     private
 
     def before_render
-      set_base_html_options('spinner')
+      set_base_html_options('spinner', style: "--spinner-size: #{@size}px;")
     end
   end
 end

data/app/components/essence/status_component/status_component.css

@@ -0,0 +1,64 @@
+.status {
+  align-items: center;
+  border-radius: 3px;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding: 4px 6px;
+}
+
+.status-bubble {
+  border-radius: 3px;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 10px;
+  margin-right: 6px;
+  width: 10px;
+
+  &.status-bubble-dotted {
+    border: 1px dotted currentColor;
+  }
+
+  &.status-bubble-outline,
+  &.status-bubble-solid {
+    border: 1px solid currentColor;
+  }
+}
+
+.status-todo {
+  background-color: var(--todo-status-background);
+  color: var(--todo-status-text);
+
+  .status-bubble-solid {
+    background-color: var(--todo-status-icon);
+  }
+}
+
+.status-active {
+  background-color: var(--active-status-background);
+  color: var(--active-status-text);
+
+  .status-bubble-solid {
+    background-color: var(--active-status-icon);
+  }
+}
+
+.status-danger {
+  background-color: var(--danger-status-background);
+  color: var(--danger-status-text);
+
+  .status-bubble-solid {
+    background-color: var(--danger-status-icon);
+  }
+}
+
+.status-outline {
+  background-color: var(--outline-status-background);
+  border: 1px solid var(--outline-status-border);
+  color: var(--outline-status-text);
+
+  .status-bubble-solid {
+    background-color: var(--outline-status-icon);
+  }
+}

data/app/components/essence/status_component.rb

@@ -30,7 +30,7 @@ module Essence
                    variant: DEFAULT_VARIANT,
                    bubble: DEFAULT_BUBBLE,
                    **html_options)
-      @text         = text&.to_s&.strip&.presence&.downcase
+      @text         = text.presence&.strip&.downcase
       @variant      = fetch_or_fallback(VARIANT_OPTIONS, variant.to_sym, DEFAULT_VARIANT)
       @bubble       = fetch_or_fallback(BUBBLE_OPTIONS, bubble&.to_sym, DEFAULT_BUBBLE)
       @html_options = html_options

data/app/components/essence/step_list_component/step_list_component.css

@@ -0,0 +1,72 @@
+.step-list {
+  background-color: var(--stepList-background);
+  padding: 25px;
+  counter-reset: item-count;
+}
+
+.step-list-title {
+  color: var(--stepList-headline);
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  margin-top: 0;
+}
+
+.step-list-items {
+  margin-left: -2px;
+}
+
+.step-list-item {
+  display: flex;
+
+  &:not(:nth-last-child(1 of .step-list-item)) {
+    padding-bottom: 20px;
+
+    > div:first-child {
+      &::before {
+        content: " ";
+        position: absolute;
+        left: 10px;
+        width: 2px;
+        height: 100%;
+        background-color: var(--stepList-bubble-line);
+        top: 20px;
+      }
+    }
+  }
+
+  > div:first-child {
+    position: relative;
+    width: 35px;
+    flex-shrink: 0;
+  }
+}
+
+.step-list-bubble {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: var(--stepList-bubble-background);
+  color: var(--stepList-bubble-text);
+  line-height: 19px;
+  font-size: 11px;
+  font-weight: bold;
+  text-align: center;
+
+  &::before {
+    counter-increment: item-count;
+    content: counter(item-count);
+  }
+}
+
+.step-list-headline {
+  font-weight: bold;
+  line-height: 1.2;
+  margin-bottom: 5px;
+  color: var(--stepList-headline);
+}
+
+.step-list-description {
+  font-size: 14px;
+  margin: 0;
+}

data/app/components/essence/step_list_component/step_list_component.html.erb

@@ -1,5 +1,7 @@
 <div <%= tag.attributes **html_options %>>
-  <h4 class="step-list-title"><%= title %></h4>
+  <% if title? %>
+    <h4 class="step-list-title"><%= title %></h4>
+  <% end %>
   <div class="step-list-items">
     <% items.each do |item| %>
       <%= item %>

data/app/components/essence/step_list_component.rb

@@ -6,7 +6,7 @@ module Essence
 
     renders_many :items, 'ItemComponent'
 
-    def initialize(title:,
+    def initialize(title: nil,
                    **html_options)
       @title        = title
       @html_options = html_options
@@ -30,5 +30,11 @@ module Essence
     def render?
       items.any?
     end
+
+    [:title].each do |method_name|
+      define_method(:"#{method_name}?") do
+        instance_variable_get(:"@#{method_name}").present?
+      end
+    end
   end
 end

data/app/components/essence/table_component/{table_component.scss → table_component.css}

@@ -1,15 +1,8 @@
-:root {
-  --table-row-border:               1px solid #e6e6e6;
-  --table-row-background:           white;
-  --table-row-background-hover:     #b3ecff;
-  --table-header-background:        #ebebeb;
-  --table-header-link:              #3e3e3e;
-}
-
 .table {
   border-collapse: collapse;
   overflow: hidden;
   text-align: left;
+  width: 100%;
 
   thead {
     background-color: var(--table-header-background);
@@ -20,6 +13,10 @@
       th {
         padding: 15px;
         white-space: nowrap;
+
+        &::first-letter {
+          text-transform: uppercase;
+        }
       }
     }
   }

data/app/components/essence/title_component/{title_component.scss → title_component.css}

@@ -1,7 +1,3 @@
-:root {
-  --workspace-headline: #676767;
-}
-
 .title {
   color: var(--workspace-headline);
   font-size: 190%;

data/app/components/essence/tooltip_component/tooltip_component.css

@@ -0,0 +1,55 @@
+.tooltip {
+  display: flex;
+}
+
+.tooltip-arrow {
+  background: var(--tooltip-background);
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: -1;
+}
+
+.tooltip-bubble {
+  background-color: var(--tooltip-background);
+  border-radius: var(--tooltip-borderRadius);
+  box-shadow: var(--tooltip-boxShadow);
+  color: var(--tooltip-text);
+  cursor: default;
+  display: none;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 1.4;
+  max-width: 350px;
+  padding: 1em;
+  position: absolute;
+  transition: opacity cubic-bezier(0, 0, 0.57, 0.74) 0.2s, 0.2s visibility;
+  z-index: 1;
+
+  &:before {
+    content: '';
+    display: block;
+    height: 14px;
+    left: -10px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+  }
+
+  &:hover {
+    display: block;
+  }
+}
+
+.tooltip-icon {
+  fill: var(--tooltip-icon);
+  height: 14px;
+  width: 14px;
+
+  &:hover {
+    ~.tooltip-bubble {
+      display: block;
+    }
+  }
+}

data/app/inputs/file_input.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+class FileInput < SimpleForm::Inputs::FileInput
+  def input(wrapper_options = nil)
+    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
+
+    input_options = merged_input_options.extract!(:accept, :capture, :multiple)
+
+    template.content_tag(:div, **stimulus_configuration) do
+      template.concat(build_file_button_label(merged_input_options))
+      template.concat(build_filename_display)
+      template.concat(build_hidden_file_field(input_options))
+    end
+  end
+
+  private
+
+  def build_file_button_label(merged_options)
+    template.content_tag(:label, button_text,
+                         merged_options.merge(for: input_id, data: { file_input_target: 'button' }))
+  end
+
+  def build_filename_display
+    template.content_tag(:span, filename, class: 'form-label file-name',
+                                          data: { file_input_target: 'fileName' })
+  end
+
+  def build_hidden_file_field(input_options)
+    @builder.file_field(attribute_name, input_options.merge(style: 'display: none;',
+                                                            data: {
+                                                              file_input_target: 'input',
+                                                              action: 'change->file-input#change'
+                                                            }))
+  end
+
+  def input_id
+    ActionView::Helpers::Tags::Base.new(@builder.object_name, attribute_name, template).send(:tag_id)
+  end
+
+  def stimulus_configuration
+    {
+      data: {
+        controller: 'file-input',
+        file_input_change_file_text_value: translate_text(:change_file),
+        file_input_button_text_value: translate_text(:choose_file)
+      }
+    }
+  end
+
+  def button_text
+    file_present? ? translate_text(:change_file) : translate_text(:choose_file)
+  end
+
+  def translate_text(key)
+    I18n.t("simple_form.file_input.#{key}")
+  end
+
+  def file_present?
+    return false unless @builder.object.respond_to?(attribute_name)
+
+    file = @builder.object.send(attribute_name)
+
+    file.present? && file.respond_to?(:filename)
+  end
+
+  def filename
+    return nil unless file_present?
+
+    @builder.object.send(attribute_name).filename
+  rescue StandardError
+    nil
+  end
+end

data/app/javascript/essence/application.js

@@ -1,4 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "./controllers"
-
+import "@hotwired/turbo-rails"
+import "controllers"
 import "scroll-shadow-element"

data/app/javascript/essence/controllers/file_input_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="file-input"
+export default class extends Controller {
+  static values = {
+    buttonText: String,
+    changeFileText: String
+  }
+
+  static targets = [
+    "button",
+    "fileName",
+    "input"
+  ]
+
+  change() {
+    this.#updateFileName()
+    this.#updateButtonText()
+  }
+
+  #updateFileName() {
+    const files     = this.inputTarget.files
+    let displayText = this.noFileSelectedTextValue
+
+    if (files.length === 1) {
+      displayText = files[0].name
+    } else if (files.length > 1) {
+      displayText = `${files.length} files selected`
+    }
+
+    this.fileNameTarget.textContent = displayText;
+  }
+
+  #updateButtonText() {
+    if (this.inputTarget.files.length > 0) {
+      this.buttonTarget.textContent = this.changeFileTextValue;
+    } else {
+      this.buttonTarget.textContent = this.buttonTextValue;
+    }
+  }
+}

data/app/javascript/essence/controllers/index.js

@@ -1,12 +1,27 @@
 // Import and register all your controllers from the importmap under controllers/*
 
-import { application } from "./controllers/application"
+import { application } from "controllers/application"
 
-import ParagraphComponentController from 'components/essence/paragraph_component/paragraph_component_controller'
-application.register('paragraph', ParagraphComponentController)
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+import ButtonComponentController from 'components/essence/button_component/button_component_controller'
+application.register('button', ButtonComponentController)
 
 import ClipboardCopyComponentController from 'components/essence/clipboard_copy_component/clipboard_copy_component_controller'
 application.register('clipboard-copy', ClipboardCopyComponentController)
 
+import ExpandableComponentController from 'components/essence/expandable_component/expandable_component_controller'
+application.register('expandable', ExpandableComponentController)
+
+import ExpandableToggleComponentController from 'components/essence/expandable_toggle_component/expandable_toggle_component_controller'
+application.register('expandable-toggle', ExpandableToggleComponentController)
+
+import FlashComponentController from 'components/essence/flash_component/flash_component_controller'
+application.register('flash', FlashComponentController)
+
+import ParagraphComponentController from 'components/essence/paragraph_component/paragraph_component_controller'
+application.register('paragraph', ParagraphComponentController)
+
 import TooltipComponentController from 'components/essence/tooltip_component/tooltip_component_controller'
 application.register('tooltip', TooltipComponentController)

data/app/views/essence/beyond/body.html.erb

@@ -1,5 +1,6 @@
 <%= yield :action_bar %>
 <div class="content">
+  <%= render Essence::FlashComponent::ContainerComponent.new %>
   <%= render Essence::BreadcrumbComponent.new(style: 'margin-bottom: 30px;') %>
   <%= render Essence::TitleComponent.new(text: yield(:title), style: 'margin-bottom: 30px;') %>
   <main>

data/config/importmap.rb

@@ -1,8 +1,11 @@
 # frozen_string_literal: true
 
 pin 'essence/application', to: 'essence/application.js', preload: true
+pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
 pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
+pin_all_from Essence::Engine.root.join('app/javascript/essence/controllers'), under: 'controllers',
+                                                                              to: 'essence/controllers'
 pin_all_from Essence::Engine.root.join('app/components'), under: 'components', to: ''
 pin '@floating-ui/dom', to: '@floating-ui--dom.js' # @1.6.11
 pin '@floating-ui/core', to: '@floating-ui--core.js' # @1.6.8

data/config/initializers/essence/inline_svg.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+InlineSvg.configure do |config|
+  config.asset_finder = InlineSvg::PropshaftAssetFinder
+end