epages-essence 0.1.0 → 0.2.0

data/app/assets/stylesheets/essence/beyond/variables.css

@@ -0,0 +1,281 @@
+/**
+* @tokens baseColors
+* @presenter Color
+*/
+:root {
+  /*
+  /*  ---------------------------------------------------
+  /*  Brand
+  /*  --------------------------------------------------- */
+  --primary-color: Orange;
+  --secondary-color: #383838;
+  --tertiary-color: DeepSkyBlue;
+  /*
+  /*  ---------------------------------------------------
+  /*  Global layout
+  /*  --------------------------------------------------- */
+  --workspace-text: #3e3e3e;
+  --workspace-background: #e6e6e6;
+  --workspace-border: #d2d2d2;
+  --workspace-headline: #676767;
+  --padding: 40px;
+  --borderRadius: 3px;
+  --surfaceHover-color: #b3ecff;
+  /*
+  /*  ---------------------------------------------------
+  /*  Card
+  /*  --------------------------------------------------- */
+  --card-headline: #a3a3a3;
+  --card-background: white;
+  --card-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
+  --card-divider-border: 1px solid #e6e6e6;
+  --card-borderRadius: 3px;
+  --card-padding: 40px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Breadcrumb
+  /*  --------------------------------------------------- */
+  --breadcrumb-text: #787878;
+  --breadcrumb-link: #787878;
+  --breadcrumb-link-hover: #525252;
+  --breadcrumb-icon: #787878;
+  /*
+  /*  ---------------------------------------------------
+  /*  Action bar
+  /*  --------------------------------------------------- */
+  --workspace-toolbar-background: white;
+  --workspace-toolbar-border: 1px solid rgba(0, 0, 0, 0.2);
+  --header-bar-height: 73px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Notification and Toast messages
+  /*  --------------------------------------------------- */
+  --notification-background: white;
+  --notification-text: gray;
+  --notification-borderRadius: 4px;
+  --notification-boxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --notification-success: #97c344;
+  --notification-info: #999999;
+  --notification-warning: #f3b547;
+  --notification-danger: #da3c3c;
+  /*
+  /*  ---------------------------------------------------
+  /*  Modal
+  /*  --------------------------------------------------- */
+  --modal-overlay-background: rgba(0, 0, 0, 0.75);
+  --modal-container-background: white;
+  --modal-container-borderRadius: 3px;
+  --modal-closeButton-icon: #8b8b8b;
+  --modal-closeButton-icon-hover: #717171;
+  --modal-container-padding: 40px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Empty states
+  /*  --------------------------------------------------- */
+  --emptyState-surface: #e3e3e3;
+  --emptyState-bubbles: #dedede;
+  --emptyState-outline: #575757;
+  --emptyState-headline: #676767;
+  --emptyState-help-text: gray;
+  /*
+  /*  ---------------------------------------------------
+  /*  Loading spinner
+  /*  --------------------------------------------------- */
+  --spinner-border: #c0c0c0;
+  --spinner-border-highlighting: #676767;
+  /*
+  /*  ---------------------------------------------------
+  /*  States
+  /*  --------------------------------------------------- */
+  --danger-color: #da3c3c;
+  --success-color: #97c344;
+  --warning-color: #f3b547;
+  --disabled-color: #d0d0d0;
+  --default-color: #999999;
+  /*
+  /* ---------------------------------------------------
+  /* Status bubbles
+  /* --------------------------------------------------- */
+  --todo-status-background: #f9dca7;
+  --todo-status-text: #af740b;
+  --todo-status-icon: #f0a217;
+  --active-status-background: #cde2a5;
+  --active-status-text: #4e6721;
+  --active-status-icon: #8ab43a;
+  --danger-status-background: #eeb3a7;
+  --danger-status-text: #c72626;
+  --danger-status-icon: #e46f6f;
+  --outline-status-background: transparent;
+  --outline-status-border: #b3b3b3;
+  --outline-status-text: #808080;
+  --outline-status-icon: #cdcdcd;
+  /*
+  /*  ---------------------------------------------------
+  /*  Link
+  /*  --------------------------------------------------- */
+  --primaryLink-color: DeepSkyBlue;
+  --primaryLink-hover-color: #0099cc;
+  --secondaryLink-color: #787878;
+  --secondaryLink-hover-color: #5e5e5e;
+  --dangerLink-color: #da3c3c;
+  --dangerLink-hover-color: #bf2424;
+  --defaultLink-color: #787878;
+  --defaultLink-hover-color: #5e5e5e;
+  /*
+  /*  ---------------------------------------------------
+  /*  Buttons
+  /*  --------------------------------------------------- */
+  --button-text: white;
+  --button-borderRadius: 4px;
+  --button-borderBottom-width: 2px;
+  --button-horizontal-padding: calc(8px - 2px / 2);
+  --button-primary-background: Orange;
+  --button-primary-background-hover: #cc8400;
+  --button-primary-borderBottom-color: #cc8400;
+  --button-secondary-background: #999999;
+  --button-secondary-background-hover: #7f7f7f;
+  --button-secondary-borderBottom-color: #7f7f7f;
+  --button-danger-background: #da3c3c;
+  --button-danger-background-hover: #ae3535;
+  --button-danger-borderBottom-color: #ae3535;
+  --button-disabled-background: #d0d0d0;
+  --button-disabled-borderBottom-color: #aaaaaa;
+  --button-disabled-text: #909090;
+  --button-disabled-textShadow: 1px 1px 0 #ffffff;
+  --button-outline-border-color: Orange;
+  --button-outline-border-width: 1px;
+  --button-outline-borderBottom-width: 2px;
+  --button-outline-background: transparent;
+  --button-outline-background-hover: #ffedcc;
+  --button-outline-text: #eb9800;
+  --button-link-primary-text: DeepSkyBlue;
+  --button-link-secondary-text: #787878;
+  --button-default-background: #999999;
+  --button-default-background-hover: #7f7f7f;
+  --button-default-borderBottom-color: #7f7f7f;
+  --button-link-default-text: #787878;
+  /*
+  /*  ---------------------------------------------------
+  /*  Copilot
+  /*  --------------------------------------------------- */
+  --button-copilot-background: linear-gradient(
+    90deg,
+    oklch(from Orange calc(l - 0.1) c h),
+    Orange,
+    oklch(from Orange calc(l + 0.1) c h),
+    Orange,
+    oklch(from Orange calc(l - 0.1) c h)
+  );
+  --button-copilot-borderBottom-color: Orange;
+  /*
+  /*  ---------------------------------------------------
+  /*  RichTextEditor
+  /*  --------------------------------------------------- */
+  --textEditor-text: #3e3e3e;
+  --textEditor-background: white;
+  --textEditor-border-color: #d2d2d2;
+  --textEditor-border-radius: 3px;
+  --textEditor-toolbar-background: #f3f3f3;
+  --textEditor-toolbar-border-color: #d2d2d2;
+  --textEditor-button-background: #f3f3f3;
+  --textEditor-button-background-hover: #e6e6e6;
+  --textEditor-button-active-background: #d4d4d4;
+  --textEditor-button-icon: #676767;
+  --textEditor-button-icon-disabled: #b3b3b3;
+  /*
+  /*  ---------------------------------------------------
+  /*  Table
+  /*  --------------------------------------------------- */
+  --table-row-border: 1px solid #e6e6e6;
+  --table-row-background: white;
+  --table-row-background-hover: #b3ecff;
+  --table-header-background: #ebebeb;
+  --table-header-link: #3e3e3e;
+  --table-header-link-hover: #252525;
+  --table-header-sort-icon-default: #b3b3b3;
+  --table-header-sort-icon: currentcolor;
+  /*
+  /*  ---------------------------------------------------
+  /*  Media queries
+  /*  --------------------------------------------------- */
+  --screen-xs-max: 47.9375em;
+  --screen-sm: 48em;
+  --screen-sm-max: 61.9375em;
+  --screen-md: 62em;
+  --screen-md-max: 74.9375em;
+  --screen-lg: 75em;
+  --screen-lg-max: 112.4375em;
+  --screen-xl: 112.5em;
+  /*
+  /*  ---------------------------------------------------
+  /*  Form elements
+  /*  --------------------------------------------------- */
+  --formGroup-label: gray;
+  --formGroup-validation-error: #da3c3c;
+  --formGroup-validation-text: white;
+  --formGroup-validation-borderRadius: 3px;
+  --inputField-borderRadius: 3px;
+  --inputField-border: #d2d2d2;
+  --inputField-border-focus: Orange;
+  --inputField-text: #3e3e3e;
+  --inputField-background: white;
+  --inputField-background-focus: white;
+  --inputField-background-disabled: #f5f5f5;
+  --inputField-text-disabled: #9a9a9a;
+  --inputField-placeholder-text: #a4a4a4;
+  --inputField-hint-text: gray;
+  --smartInputField-suggestion-active: #b3ecff;
+  --smartInputField-value-background: #d9d9d9;
+  --smartInputField-value-text: #666666;
+  --smartInputField-value-icon: currentcolor;
+  --smartInputField-value-icon-hover: #4d4d4d;
+  --smartInputField-value-borderRadius: 3px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Checkboxes and Radio buttons
+  /*  --------------------------------------------------- */
+  --check-color: #97c344;
+  --uncheck-color: #b3b3b3;
+  --check-disabled-text: #c5c5c5;
+  --check-disabled-icon: #d9d9d9;
+  /*
+  /*  ---------------------------------------------------
+  /*  FlipSwitch
+  /*  --------------------------------------------------- */
+  --flipSwitch-unchecked-background: #b3b3b3;
+  --flipSwitch-checked-background: #97c344;
+  --flipSwitch-border: #c0c0c0;
+  --flipSwitch-label: gray;
+  --flipSwitch-text: silver;
+  /*
+  /*  ---------------------------------------------------
+  /*  Step list
+  /*  --------------------------------------------------- */
+  --stepList-background: #f0f0f0;
+  --stepList-headline: #747474;
+  --stepList-bubble-line: #808080;
+  --stepList-bubble-background: #808080;
+  --stepList-bubble-text: white;
+  /*
+  /*  ---------------------------------------------------
+  /*  Reseller logo
+  /*  --------------------------------------------------- */
+  --logo-width: 238px;
+  --logo-height: 76px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Gray scale colors
+  /*  --------------------------------------------------- */
+  --white: white;
+  --gray: gray;
+  --silver: silver;
+  /*
+  /*  ---------------------------------------------------
+  /*  Tooltip
+  /*  --------------------------------------------------- */
+  --tooltip-icon: Orange;
+  --tooltip-background: white;
+  --tooltip-text: #3e3e3e;
+  --tooltip-borderRadius: 3px;
+  --tooltip-boxShadow: 0 0 14px 0 rgba(0, 0, 0, 0.4);
+}

data/app/assets/stylesheets/essence/beyond.css

@@ -0,0 +1,39 @@
+@import url("beyond/variables.css");
+
+@import url("beyond/layout/base.css");
+@import url("beyond/layout/content.css");
+
+@import url("flexboxgrid.css");
+
+@import url("beyond/simple_form/control.css");
+@import url("beyond/simple_form/error.css");
+@import url("beyond/simple_form/fieldset.css");
+@import url("beyond/simple_form/group.css");
+@import url("beyond/simple_form/hint.css");
+@import url("beyond/simple_form/label.css");
+@import url("beyond/simple_form/row.css");
+@import url("beyond/simple_form/wrapper.css");
+
+@import url("beyond/utils/margin.css");
+
+@import url("action_bar_component/action_bar_component.css");
+@import url("app_info_component/app_info_component.css");
+@import url("breadcrumb_component/breadcrumb_component.css");
+@import url("button_component/button_component.css");
+@import url("button_group_component/button_group_component.css");
+@import url("card_component/card_component.css");
+@import url("clipboard_copy_component/clipboard_copy_component.css");
+@import url("empty_state_component/empty_state_component.css");
+@import url("expandable_component/expandable_component.css");
+@import url("expandable_toggle_component/expandable_toggle_component.css");
+@import url("flash_component/flash_component.css");
+@import url("link_component/link_component.css");
+@import url("notification_component/notification_component.css");
+@import url("paragraph_component/paragraph_component.css");
+@import url("scroll_shadow_component/scroll_shadow_component.css");
+@import url("spinner_component/spinner_component.css");
+@import url("status_component/status_component.css");
+@import url("step_list_component/step_list_component.css");
+@import url("table_component/table_component.css");
+@import url("title_component/title_component.css");
+@import url("tooltip_component/tooltip_component.css");

data/app/components/essence/action_bar_component/action_bar_component.css

@@ -0,0 +1,23 @@
+.action-bar {
+  background-color: var(--workspace-toolbar-background);
+  border-bottom: var(--workspace-toolbar-border);
+  height: var(--header-bar-height);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.action-bar-wrapper {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  padding: 0 25px;
+}
+
+.action-bar-left-content,
+.action-bar-right-content {
+  align-items: center;
+  display: flex;
+  gap: 30px;
+}

data/app/components/essence/action_bar_component.rb

@@ -7,7 +7,8 @@ module Essence
     [:left, :right].each do |side|
       renders_many side, types: {
         button: ButtonComponent,
-        link: LinkComponent
+        link: LinkComponent,
+        button_group: ButtonGroupComponent
       }
     end
 

data/app/components/essence/app_info_component/app_info_component.css

@@ -0,0 +1,45 @@
+.app-info {
+  display: grid;
+  grid-template-columns: 10fr 2fr;
+  column-gap: 30px;
+  grid-auto-rows: minmax(auto, max-content);
+}
+
+.app-info-headline {
+  color: var(--card-headline);
+  font-size: 190%;
+  font-weight: normal;
+  line-height: 1;
+}
+
+.app-info-sub-headline {
+  margin-top: 15px;
+  font-size: 110%;
+  color: var(--workspace-headline);
+  font-weight: bold;
+  line-height: 1;
+}
+
+.app-info-text {
+  ul {
+    padding-left: 24px;
+
+    li {
+      list-style: none;
+
+      &::before {
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"/></svg>');
+        content: '';
+        background-size: contain;
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+.app-info-logo {
+  width: 100%;
+}

data/app/components/essence/application_component.rb

@@ -15,9 +15,7 @@ module Essence
       end
     end
 
-    def assets_path
-      self.class.assets_path
-    end
+    delegate :assets_path, to: :class
 
     private
 

data/app/components/essence/breadcrumb_component/breadcrumb_component.css

@@ -0,0 +1,35 @@
+.breadcrumb {
+  font-size: 90%;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-icon {
+  fill: var(--breadcrumb-icon);
+
+  &:first-child {
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    margin-bottom: 3px;
+  }
+
+  &:not(:first-child) {
+    width: 8px;
+    height: 8px;
+    margin: 0 10px;
+  }
+}
+
+.breadcrumb-item {
+  color: var(--breadcrumb-link);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--breadcrumb-link-hover);
+  }
+}
+
+.breadcrumb-current {
+  color: var(--breadcrumb-text);
+}

data/app/components/essence/button_component/button_component.css

@@ -0,0 +1,140 @@
+.button {
+  border: 0;
+  border-bottom-style: solid;
+  border-bottom-width: var(--button-borderBottom-width);
+  border-radius: var(--button-borderRadius);
+  color: var(--button-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: bold;
+  height: fit-content;
+  line-height: 1;
+  padding: var(--button-horizontal-padding) 12px;
+  position: relative;
+  text-decoration: none;
+  transition: all 0.4s cubic-bezier(0, 0, 0.1, 1);
+  width: fit-content;
+  white-space: nowrap;
+
+  &:disabled,
+  &.button-busy {
+    background: var(--button-disabled-background);
+    border-color: var(--button-disabled-background);
+    border-bottom-color: var(--button-disabled-borderBottom-color);
+    color: var(--button-disabled-text);
+    cursor: default;
+    text-shadow: var(--button-disabled-textShadow);
+  }
+
+  &:not(:disabled):not(.button-busy) {
+    &.button-primary {
+      background: var(--button-primary-background);
+      border-bottom-color: var(--button-primary-borderBottom-color);
+
+      &:hover {
+        background: var(--button-primary-background-hover);
+      }
+    }
+
+    &.button-secondary {
+      background: var(--button-secondary-background);
+      border-bottom-color: var(--button-secondary-borderBottom-color);
+
+      &:hover {
+        background: var(--button-secondary-background-hover);
+      }
+    }
+
+    &.button-danger {
+      background: var(--button-danger-background);
+      border-bottom-color: var(--button-danger-borderBottom-color);
+
+      &:hover {
+        background: var(--button-danger-background-hover);
+      }
+    }
+
+    &.button-outline {
+      background-color: var(--button-outline-background);
+      border: var(--button-outline-border-width) solid
+        var(--button-outline-border-color);
+      border-bottom-width: var(--button-outline-borderBottom-width);
+      color: var(--button-outline-text);
+      padding-top: calc(var(--button-horizontal-padding) - 1px);
+
+      &:hover {
+        background-color: var(--button-outline-background-hover);
+      }
+    }
+
+    &.button-copilot {
+      background-image: var(--button-copilot-background);
+      background-size: 200% auto;
+      border-bottom-color: var(--button-copilot-borderBottom-color);
+      transition: background-position 0.3s ease;
+
+      &::before {
+        content: "";
+        width: 17px;
+        background-color: var(--button-text);
+        mask: url("data:image/svg+xml,%3Csvg data-token-category='icons' xmlns='http://www.w3.org/2000/svg' width='83.75' height='67.98' viewBox='0 0 83.75 67.98'%3E%3Cpath d='M83 32.98l-8.7-1c-11.2-1.4-20.1-10.2-21.4-21.4l-1-8.7c-.1-1-1.6-1-1.7 0l-1 8.7c-1.4 11.2-10.2 20.1-21.4 21.4l-8.7 1c-1 .1-1 1.6 0 1.7l8.7 1c11.2 1.4 20.1 10.2 21.4 21.4l1 8.7c.1 1 1.6 1 1.7 0l1-8.7c1.4-11.2 10.2-20.1 21.4-21.4l8.7-1c1-.1 1-1.6 0-1.7zM2.2 15.48l4 .5c5.1.6 9.2 4.6 9.8 9.8l.5 4c.1.5.8.5.8 0l.5-4c.6-5.1 4.6-9.2 9.8-9.8l4-.5c.5-.1.5-.8 0-.8l-4-.5c-5.1-.6-9.2-4.6-9.8-9.8l-.5-4c-.1-.5-.8-.5-.8 0l-.5 4c-.6 5.1-4.6 9.2-9.8 9.8l-4 .5c-.5.1-.5.8 0 .8zm23.2 39.3l-3.4-.4c-4.4-.5-7.9-4-8.4-8.4l-.4-3.4c-.1-.4-.7-.4-.7 0l-.4 3.4c-.5 4.4-4 7.9-8.4 8.4l-3.4.4c-.4.1-.4.7 0 .7l3.4.4c4.4.5 7.9 4 8.4 8.4l.4 3.4c.1.4.7.4.7 0l.4-3.4c.5-4.4 4-7.9 8.4-8.4l3.4-.4c.4-.1.4-.7 0-.7z'%3E%3C/path%3E%3C/svg%3E%0A")
+          no-repeat center;
+        mask-size: contain;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg data-token-category='icons' xmlns='http://www.w3.org/2000/svg' width='83.75' height='67.98' viewBox='0 0 83.75 67.98'%3E%3Cpath d='M83 32.98l-8.7-1c-11.2-1.4-20.1-10.2-21.4-21.4l-1-8.7c-.1-1-1.6-1-1.7 0l-1 8.7c-1.4 11.2-10.2 20.1-21.4 21.4l-8.7 1c-1 .1-1 1.6 0 1.7l8.7 1c11.2 1.4 20.1 10.2 21.4 21.4l1 8.7c.1 1 1.6 1 1.7 0l1-8.7c1.4-11.2 10.2-20.1 21.4-21.4l8.7-1c1-.1 1-1.6 0-1.7zM2.2 15.48l4 .5c5.1.6 9.2 4.6 9.8 9.8l.5 4c.1.5.8.5.8 0l.5-4c.6-5.1 4.6-9.2 9.8-9.8l4-.5c.5-.1.5-.8 0-.8l-4-.5c-5.1-.6-9.2-4.6-9.8-9.8l-.5-4c-.1-.5-.8-.5-.8 0l-.5 4c-.6 5.1-4.6 9.2-9.8 9.8l-4 .5c-.5.1-.5.8 0 .8zm23.2 39.3l-3.4-.4c-4.4-.5-7.9-4-8.4-8.4l-.4-3.4c-.1-.4-.7-.4-.7 0l-.4 3.4c-.5 4.4-4 7.9-8.4 8.4l-3.4.4c-.4.1-.4.7 0 .7l3.4.4c4.4.5 7.9 4 8.4 8.4l.4 3.4c.1.4.7.4.7 0l.4-3.4c.5-4.4 4-7.9 8.4-8.4l3.4-.4c.4-.1.4-.7 0-.7z'%3E%3C/path%3E%3C/svg%3E%0A")
+          no-repeat center;
+        -webkit-mask-size: contain;
+        margin-right: 7px;
+      }
+
+      &:hover {
+        background-position: 100%;
+      }
+    }
+  }
+
+  &.button-busy {
+    &::before {
+      display: none;
+    }
+
+    .button-spinner {
+      display: block;
+    }
+  }
+
+  .button-spinner {
+    display: none;
+    position: relative;
+    height: 14px;
+    width: 22px;
+    margin-right: 10px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: -4px;
+      left: 0;
+      border: solid 3px #aaa;
+      border-bottom-color: var(--button-disabled-text);
+      border-radius: 50%;
+      height: var(--spinner-size);
+      width: var(--spinner-size);
+      animation: spin 1.5s infinite linear;
+      transform-origin: center;
+    }
+  }
+
+  .button-icon {
+    fill: currentColor;
+    height: 14px;
+    width: 14px;
+
+    &:first-child {
+      margin-right: 5px;
+    }
+
+    &:last-child {
+      margin-left: 6px;
+    }
+  }
+}

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

@@ -1,12 +1,14 @@
 <% if url.present? %>
   <%= button_to url, **html_options do %>
     <%= left_icon if left_icon? %>
+    <%= render Essence::SpinnerComponent.new(size: 22, class: 'button-spinner') if display_as_button? %>
     <span><%= name %></span>
     <%= right_icon if right_icon? %>
   <% end %>
 <% else %>
   <%= button_tag **html_options do %>
     <%= left_icon if left_icon? %>
+    <%= render Essence::SpinnerComponent.new(size: 22, class: 'button-spinner') if display_as_button? %>
     <span><%= name %></span>
     <%= right_icon if right_icon? %>
   <% end %>

data/app/components/essence/button_component/button_component_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const button = this.element
+    const formId = button.getAttribute("form")
+
+    this.form = formId
+      ? document.getElementById(formId)
+      : button.closest("form")
+
+    if (!this.form) return
+
+    this._start = () => button.classList.add("button-busy")
+    this._end   = () => button.classList.remove("button-busy")
+
+    this.form.addEventListener("turbo:submit-start", this._start)
+    this.form.addEventListener("turbo:submit-end", this._end)
+  }
+
+  disconnect() {
+    if (!this.form) return
+
+    this.form.removeEventListener("turbo:submit-start", this._start)
+    this.form.removeEventListener("turbo:submit-end", this._end)
+  }
+}

data/app/components/essence/button_component.rb

@@ -8,12 +8,15 @@ module Essence
 
     DEFAULT_VARIANT = :primary
 
+    DEFAULT_BUSY = false
+
     BUTTON_MAPPINGS = {
       DEFAULT_DISPLAY_AS => {
         DEFAULT_VARIANT => 'button-primary',
         secondary: 'button-secondary',
         danger: 'button-danger',
-        outline: 'button-outline'
+        outline: 'button-outline',
+        copilot: 'button-copilot'
       }
     }.freeze
 
@@ -31,11 +34,13 @@ module Essence
                    url: nil,
                    variant: DEFAULT_VARIANT,
                    display_as: DEFAULT_DISPLAY_AS,
+                   busy: DEFAULT_BUSY,
                    **html_options)
       @name         = name
       @url          = url
       @variant      = fetch_or_fallback(VARIANT_MAPPINGS[display_as.to_sym].keys, variant.to_sym, DEFAULT_VARIANT)
       @display_as   = fetch_or_fallback(DISPLAY_AS_OPTIONS, display_as.to_sym, DEFAULT_DISPLAY_AS)
+      @busy         = fetch_or_fallback_boolean(busy, fallback: DEFAULT_BUSY)
       @html_options = html_options
     end
 
@@ -43,9 +48,29 @@ module Essence
 
     def before_render
       set_base_html_options(
+        *css_classes,
+        **options
+      )
+    end
+
+    def css_classes
+      classes = [
         @display_as.to_s,
         VARIANT_MAPPINGS.dig(@display_as.to_sym, @variant.to_sym)
-      )
+      ]
+      classes << 'button-busy' if @busy && display_as_button?
+
+      classes
+    end
+
+    def options
+      return {} unless display_as_button?
+
+      { data: { controller: 'button' } }
+    end
+
+    def display_as_button?
+      @display_as == :button
     end
   end
 end