epages-essence 0.1.0 → 0.2.0

data/app/components/essence/button_group_component/button_group_component.css

@@ -0,0 +1,21 @@
+.button-group {
+  display: flex;
+
+  & > .button {
+    border-radius: 0;
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+
+    &:first-child {
+      border-top-left-radius: var(--button-borderRadius);
+      border-bottom-left-radius: var(--button-borderRadius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--button-borderRadius);
+      border-bottom-right-radius: var(--button-borderRadius);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+<div <%= tag.attributes **html_options %>>
+  <% button_group_elements.each do |button_group_element| %>
+    <%= button_group_element %>
+  <% end %>
+</div>

data/app/components/essence/button_group_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Essence
+  class ButtonGroupComponent < ApplicationComponent
+    attr_reader :html_options
+
+    renders_many :group, types: {
+      button: lambda { |**args|
+        ButtonComponent.new(size: 16, **args.merge(display_as: :button))
+      },
+      link: lambda { |**args|
+        LinkComponent.new(size: 16, **args.merge(display_as: :button))
+      }
+    }
+
+    def initialize(**html_options)
+      @html_options = html_options
+    end
+
+    alias button_group_elements group
+
+    private
+
+    def before_render
+      set_base_html_options('button-group')
+    end
+  end
+end

data/app/components/essence/card_component/card_component.css

@@ -0,0 +1,66 @@
+:root {
+  --ribbon-text: #ffffff;
+  --ribbon-light-background: #a6a6a6;
+  --ribbon-light-shadow: #808080;
+}
+
+.card {
+  background-color: var(--card-background);
+  border-radius: var(--card-borderRadius);
+  box-shadow: var(--card-shadow);
+  padding: var(--card-padding);
+  position: relative;
+}
+
+.card-ribbon {
+  position: absolute;
+  top: -8px;
+  right: 40px;
+  display: inline-block;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  color: var(--ribbon-text);
+}
+
+.card-ribbon-light {
+  background-color: var(--ribbon-light-background);
+
+  .card-ribbon-text::after {
+    border-bottom: 8px solid var(--ribbon-light-shadow);
+  }
+}
+
+.card-ribbon-dark {
+  background-color: var(--ribbon-dark-background);
+
+  .card-ribbon-text::after {
+    border-bottom: 8px solid var(--ribbon-dark-shadow);
+  }
+}
+
+.card-ribbon-text {
+  position: relative;
+
+  &::after {
+    content: "";
+    border-right: 7px solid transparent;
+    position: absolute;
+    top: -7px;
+    right: -17px;
+  }
+}
+
+.card-headline {
+  color: var(--card-headline);
+  font-size: 140%;
+  margin: -10px 0 0.83em;
+}
+
+.card-sub-headline {
+  color: var(--formGroup-label);
+  font-size: 13px;
+  margin: 0 0 20px;
+}

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

@@ -1,7 +1,13 @@
 <div <%= tag.attributes **html_options %>>
+  <% if ribbon? %>
+    <%= ribbon %>
+  <% end %>
   <% if headline? %>
     <h2 class="card-headline"><%= headline %></h2>
   <% end %>
+  <% if sub_headline? %>
+    <p class="card-sub-headline"><%= sub_headline %></p>
+  <% end %>
   <div class="card-content">
     <%= content %>
   </div>

data/app/components/essence/card_component/ribbon_component.html.erb

@@ -0,0 +1,3 @@
+<div <%= tag.attributes **html_options %>>
+  <span class="card-ribbon-text"><%= text %></span>
+</div>

data/app/components/essence/card_component.rb

@@ -2,12 +2,46 @@
 
 module Essence
   class CardComponent < ApplicationComponent
-    attr_reader :headline, :html_options
+    attr_reader :headline, :sub_headline, :html_options
+
+    renders_one :ribbon, 'RibbonComponent'
 
     def initialize(headline: nil,
+                   sub_headline: nil,
                    **html_options)
-      @headline     = headline
-      @html_options = html_options
+      @headline       = headline
+      @sub_headline   = sub_headline
+      @html_options   = html_options
+    end
+
+    class RibbonComponent < ApplicationComponent
+      attr_reader :text, :html_options
+
+      DEFAULT_VARIANT = :light
+
+      VARIANT_MAPPINGS = {
+        DEFAULT_VARIANT => 'card-ribbon-light',
+        :dark => 'card-ribbon-dark'
+      }.freeze
+
+      VARIANT_OPTIONS = VARIANT_MAPPINGS.keys.freeze
+
+      def initialize(text:,
+                     variant: DEFAULT_VARIANT,
+                     **html_options)
+        @text         = text
+        @variant      = fetch_or_fallback(VARIANT_OPTIONS, variant.to_sym, DEFAULT_VARIANT)
+        @html_options = html_options
+      end
+
+      private
+
+      def before_render
+        set_base_html_options(
+          'card-ribbon',
+          VARIANT_MAPPINGS[@variant]
+        )
+      end
     end
 
     private
@@ -20,7 +54,7 @@ module Essence
       content?
     end
 
-    [:headline].each do |method_name|
+    [:headline, :sub_headline].each do |method_name|
       define_method(:"#{method_name}?") do
         instance_variable_get(:"@#{method_name}").present?
       end

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

@@ -5,9 +5,9 @@
   > *:has(.clipboard-copy-input) {
     flex: 1;
   }
+}
 
-  &-link {
-    margin-left: 30px;
-    padding: 6px 0 !important;
-  }
+.clipboard-copy-link {
+  margin-left: 30px;
+  padding: 6px 0 !important;
 }

data/app/components/essence/empty_state_component/empty_state_component.css

@@ -0,0 +1,42 @@
+.empty-state {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.empty-state-image {
+  flex-shrink: 0;
+  margin: 0 60px 0 0;
+  max-width: 200px;
+
+  .bubbles {
+    fill: var(--emptyState-bubbles);
+  }
+
+  .outline {
+    fill: var(--emptyState-outline);
+  }
+
+  .surface {
+    fill: var(--emptyState-surface);
+  }
+}
+
+.empty-state-text {
+  display: grid;
+  gap: 20px;
+}
+
+.empty-state-headline {
+  color: var(--emptyState-headline);
+  font-size: 300%;
+  font-weight: lighter;
+  line-height: 1;
+  margin-bottom: 0;
+}
+
+.empty-state-body {
+  color: var(--emptyState-help-text);
+  font-size: 125%;
+  margin: 0;
+}

data/app/components/essence/expandable_component/expandable_component.css

@@ -0,0 +1,36 @@
+.expandable {
+  &[data-expandable-expanded-value="false"] {
+    .expandable-content {
+      height: 0;
+    }
+  }
+
+  &[data-expandable-expanded-value="true"] {
+    .button-icon {
+      transform: rotate(90deg);
+    }
+
+    .expandable-content {
+      margin-top: 10px;
+    }
+  }
+
+  .expandable-button {
+    font-weight: bold;
+
+    .button-icon {
+      fill: currentColor;
+      height: 10px;
+      width: 10px;
+    }
+  }
+
+  .expandable-content {
+    interpolate-size: allow-keywords;
+    height: auto;
+    margin-top: 0;
+    overflow: hidden;
+    padding-left: 20px;
+    transition: height 250ms, margin-top 250ms;
+  }
+}

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

@@ -0,0 +1,8 @@
+<div <%= tag.attributes **html_options %>>
+  <%= render Essence::ButtonComponent.new(name:, display_as: :link, type: :button, class: 'expandable-button', data: { action: 'expandable#toggle' }) do |button| %>
+    <% button.with_left_icon 'arrow_right' %>
+  <% end %>
+  <div class="expandable-content">
+    <%= content %>
+  </div>
+</div>

data/app/components/essence/expandable_component/expandable_component_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static outlets = [
+    "expandable-toggle"
+  ]
+
+  static values = {
+    expanded: Boolean
+  }
+
+  toggle() {
+    this.#updateExpandedState(!this.expandedValue)
+  }
+
+  expand() {
+    this.#updateExpandedState(true)
+  }
+
+  collapse() {
+    this.#updateExpandedState(false)
+  }
+
+  #updateExpandedState(expandedState) {
+    this.expandedValue = expandedState
+    this.#triggerOutletsCheckExpandables()
+  }
+
+  #triggerOutletsCheckExpandables() {
+    this.expandableToggleOutlets.forEach(expandable => expandable.checkExpandables())
+  }
+}

data/app/components/essence/expandable_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Essence
+  class ExpandableComponent < ApplicationComponent
+    attr_reader :name, :html_options
+
+    DEFAULT_EXPANDED = false
+
+    def initialize(name:,
+                   expanded: DEFAULT_EXPANDED,
+                   **html_options)
+      @name         = name
+      @expanded     = fetch_or_fallback_boolean(expanded, fallback: DEFAULT_EXPANDED)
+      @html_options = html_options
+    end
+
+    private
+
+    def before_render
+      set_base_html_options(
+        'expandable',
+        data: {
+          controller: 'expandable',
+          expandable_expanded_value: @expanded,
+          expandable_expand_all_button_outlet: '.expandable-toggle'
+        }
+      )
+    end
+  end
+end

data/app/components/essence/expandable_toggle_component/expandable_toggle_component.css

@@ -0,0 +1,7 @@
+.expandable-toggle {
+  .button-icon {
+    fill: currentColor;
+    height: 15px;
+    width: 15px;
+  }
+}

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

@@ -0,0 +1,3 @@
+<%= render Essence::ButtonComponent.new(name: expand_all_text, display_as: :link, type: :button, **html_options) do |button| %>
+  <% button.with_left_icon 'chevron_up_down' %>
+<% end %>

data/app/components/essence/expandable_toggle_component/expandable_toggle_component.yml

@@ -0,0 +1,4 @@
+---
+en:
+  expand_all_text: Expand all
+  collapse_all_text: Collapse all

data/app/components/essence/expandable_toggle_component/expandable_toggle_component_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static outlets = [
+    "expandable"
+  ]
+
+  static values = {
+    expandAllText: String,
+    collapseAllText: String,
+    allExpanded: Boolean
+  }
+
+  connect() {
+    this.checkExpandables()
+  }
+
+  toggleAll() {
+    this.#updateExpandablesState(!this.allExpandedValue)
+  }
+
+  collapseAll() {
+    this.#updateExpandablesState(false)
+  }
+
+  expandAll() {
+    this.#updateExpandablesState(true)
+  }
+
+  checkExpandables() {
+    if (this.expandableOutlets.length === 0) return
+
+    const allExpanded = this.expandableOutlets.every(expandable => expandable.expandedValue)
+    const allCollapsed = this.expandableOutlets.every(expandable => !expandable.expandedValue)
+
+    if (allExpanded) {
+      this.#updateExpandedState(true)
+    } else if (allCollapsed) {
+      this.#updateExpandedState(false)
+    }
+  }
+
+  #updateExpandablesState(expandedState) {
+    this.#updateExpandedState(expandedState)
+    this.expandableOutlets.forEach(expandable => expandedState ? expandable.expand() : expandable.collapse())
+  }
+
+  #updateExpandedState(expandedState) {
+    this.allExpandedValue = expandedState
+    this.element.querySelector("span").textContent = expandedState ? this.collapseAllTextValue : this.expandAllTextValue
+  }
+}

data/app/components/essence/expandable_toggle_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Essence
+  class ExpandableToggleComponent < ApplicationComponent
+    attr_reader :expand_all_text, :html_options
+
+    DEFAULT_TARGET = '.expandable'
+
+    def initialize(target: DEFAULT_TARGET,
+                   expand_all_text: nil,
+                   collapse_all_text: nil,
+                   **html_options)
+      @target            = target
+      @expand_all_text   = expand_all_text
+      @collapse_all_text = collapse_all_text
+      @html_options      = html_options
+    end
+
+    private
+
+    def before_render
+      @expand_all_text   ||= t('.expand_all_text')
+      @collapse_all_text ||= t('.collapse_all_text')
+
+      set_base_html_options(
+        'expandable-toggle',
+        data: {
+          controller: 'expandable-toggle',
+          action: 'expandable-toggle#toggleAll',
+          expandable_toggle_expandable_outlet: @target,
+          expandable_toggle_expand_all_text_value: @expand_all_text,
+          expandable_toggle_collapse_all_text_value: @collapse_all_text,
+          expandable_toggle_all_expanded_value: false
+        }
+      )
+    end
+  end
+end

data/app/components/essence/flash_component/container_component.html.erb

@@ -0,0 +1,7 @@
+<div class="flash-container" id="flash_container">
+  <% helpers.flash.each do |variant, message| %>
+    <%= render Essence::FlashComponent.new(variant:) do %>
+      <%= message %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/essence/flash_component/flash_component.css

@@ -0,0 +1,101 @@
+.flash {
+  background-color: var(--notification-background);
+  border-radius: var(--notification-borderRadius);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  display: inline-flex;
+  position: relative;
+  right: 25px;
+  top: 97px;
+  pointer-events: auto;
+  opacity: 1;
+  animation: show 700ms ease-out;
+}
+
+.flash-hide {
+  opacity: 0;
+  right: -250px;
+  transition: all 1.3s ease-out;
+}
+
+.flash-container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.flash-body {
+  color: var(--notification-text);
+  padding: 8px 14px;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+.flash-close {
+  width: 40px;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flash-close-icon {
+  width: 8px;
+  height: 8px;
+  position: relative;
+  fill: gray;
+}
+
+.flash-danger,
+.flash-alert {
+  .flash-indicator {
+    background-color: var(--notification-danger);
+  }
+}
+
+.flash-icon {
+  display: block;
+  fill: var(--notification-background);
+  height: 18px;
+  width: 18px;
+}
+
+.flash-indicator {
+  padding: 10px 8px;
+}
+
+.flash-info {
+  .flash-indicator {
+    background-color: var(--notification-info);
+  }
+}
+
+.flash-success,
+.flash-notice {
+  .flash-indicator {
+    background-color: var(--notification-success);
+  }
+}
+
+.flash-warning {
+  .flash-indicator {
+    background-color: var(--notification-warning);
+  }
+}
+
+@keyframes show {
+  from {
+    opacity: 0;
+    right: -250px;
+  }
+
+  to {
+    opacity: 1;
+    right: 25px;
+  }
+}

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

@@ -0,0 +1,11 @@
+<div <%= tag.attributes **html_options %>>
+  <div class="flash-indicator">
+    <%= render Essence::IconComponent.new(name: icon, class: 'flash-icon') %>
+  </div>
+  <div class="flash-body">
+    <%= content %>
+  </div>
+  <div class="flash-close" data-action="click->flash#dismiss">
+    <%= render Essence::IconComponent.new(name: 'x_mark', class: 'flash-close-icon') %>
+  </div>
+</div>

data/app/components/essence/flash_component/flash_component_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const flash = this.element
+
+    if (flash.classList.contains("flash-success") ||
+        flash.classList.contains("flash-notice") ||
+        flash.classList.contains("flash-info")) {
+      setTimeout(() => {
+        this.dismiss()
+      }, 3300);
+    }
+  }
+
+  dismiss() {
+    const flash = this.element
+
+    flash.classList.add("flash-hide")
+    setTimeout(() => {
+      flash.remove()
+    }, 1300)
+  }
+}

data/app/components/essence/flash_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Essence
+  class FlashComponent < NotificationComponent
+    class ContainerComponent < ApplicationComponent; end
+
+    VARIANT_MAPPINGS = {
+      :success => 'flash-success',
+      :notice => 'flash-notice',
+      DEFAULT_VARIANT => 'flash-info',
+      :warning => 'flash-warning',
+      :danger => 'flash-danger',
+      :alert => 'flash-danger'
+    }.freeze
+
+    private
+
+    def before_render
+      set_base_html_options(
+        'flash',
+        VARIANT_MAPPINGS[@variant],
+        data: {
+          controller: 'flash'
+        }
+      )
+      set_icon
+    end
+  end
+end