decidim-design 0.28.0.rc4

data/app/helpers/decidim/design/typography_helper.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module TypographyHelper
+      def typography_sections
+        [
+          {
+            id: "typefaces",
+            contents: [
+              {
+                type: :text,
+                values: [
+                  "Decidim uses Source Sans Pro as primary typeface. This typeface supports 310 languages",
+                  "This fonts are licensed under the Open Font License"
+                ]
+              },
+              {
+                type: :table,
+                options: { headings: %w(Example) },
+                items: typography_table(
+                  { type: "typefaces", example: "Source Sans Pro Bold", class: "font-bold" },
+                  { type: "typefaces", example: "Source Sans Pro Semibold", class: "font-semibold" },
+                  { type: "typefaces", example: "Source Sans Pro Regulars", class: "font-normal" }
+                )
+              }
+            ]
+          },
+          {
+            id: "headings",
+            contents: [
+              {
+                type: :table,
+                options: { headings: ["Level", "Semibold 600", "Bold 700", "Size"] },
+                items: typography_table(
+                  { type: "headings", level: "Hero H1", text: "Hero heading", size: "text-5xl" },
+                  { type: "headings", level: "H1", text: "Heading H1", size: "text-4xl" },
+                  { type: "headings", level: "H2", text: "Heading H2", size: "text-3xl" },
+                  { type: "headings", level: "H3", text: "Heading H3", size: "text-2xl" },
+                  { type: "headings", level: "H4", text: "Heading H4", size: "text-xl" },
+                  { type: "headings", level: "H5", text: "Heading H5", size: "text-lg" },
+                  { type: "headings", level: "H6", text: "Heading H6", size: "text-md" }
+                )
+              }
+            ]
+          },
+          {
+            id: "content",
+            contents: [
+              {
+                type: :table,
+                options: { headings: ["Regular 400", "Semibold 600", "Bold 700", "Size"] },
+                items: typography_table(
+                  { type: "content", text: "Sample content", size: "text-xl" },
+                  { type: "content", text: "Sample content", size: "text-lg" },
+                  { type: "content", text: "Sample content", size: "text-md" },
+                  { type: "content", text: "Sample content", size: "text-sm" },
+                  { type: "content", text: "Sample content", size: "text-xs" }
+                )
+              }
+            ]
+          },
+          {
+            id: "readability",
+            contents: [
+              {
+                type: :table,
+                options: { headings: ["Size", "Layout cols", "~ Characters per line"] },
+                items: typography_table(
+                  { type: "readability", size: "text-xl", layout: 6, chars: 81 },
+                  { type: "readability", size: "text-lg", layout: 6, chars: 90 },
+                  { type: "readability", size: "text-md", layout: 5, chars: 84 },
+                  { type: "readability", size: "text-sm", layout: 4, chars: 76 }
+                )
+              }
+            ]
+          }
+        ]
+      end
+
+      def typography_table(*table_rows, **_opts)
+        table_rows.each_with_index.map do |table_cell, ix|
+          row = []
+
+          row << content_tag(:span, table_cell[:example], class: "text-lg #{table_cell[:class]}") if table_cell[:type] == "typefaces"
+
+          if table_cell[:type] == "headings"
+            row << table_cell[:level]
+            row << content_tag(:span, ix.positive? ? table_cell[:text] : "", class: "font-semibold #{table_cell[:size]}")
+            row << content_tag(:span, table_cell[:text], class: "font-bold #{table_cell[:size]}")
+            row << content_tag(:span, table_cell[:size], class: "text-secondary underline text-center")
+          end
+
+          if table_cell[:type] == "content"
+            row << content_tag(:span, table_cell[:text], class: "font-normal #{table_cell[:size]}")
+            row << content_tag(:span, table_cell[:text], class: "font-semibold  #{table_cell[:size]}")
+            row << content_tag(:span, table_cell[:text], class: "font-bold  #{table_cell[:size]}")
+            row << content_tag(:span, table_cell[:size], class: "text-secondary underline text-center")
+          end
+
+          if table_cell[:type] == "readability"
+            row << content_tag(:span, table_cell[:size], class: "text-secondary underline")
+            row << table_cell[:layout].to_s
+            row << table_cell[:chars].to_s
+          end
+
+          row
+        end
+      end
+    end
+  end
+end

data/app/packs/entrypoints/decidim_design.js

@@ -0,0 +1,2 @@
+// CSS
+import "stylesheets/design.scss"

data/app/packs/stylesheets/design.scss

@@ -0,0 +1,121 @@
+.design__layout {
+  @apply grid md:grid-cols-12 container min-h-screen before:content-[''] before:absolute before:-z-10 before:w-1/2 before:h-full before:inset-0 before:bg-background;
+
+  aside:first-child {
+    @apply col-span-2 py-12 pr-16;
+  }
+
+  main {
+    @apply bg-white col-span-8 py-12 px-16 [&_section+section]:mt-10;
+  }
+
+  aside:last-child {
+    @apply bg-white col-span-2 py-12 pl-16;
+  }
+}
+
+.design__navigation {
+  @apply sticky top-12 space-y-4;
+
+  & > li > *:not(ul) {
+    @apply flex gap-1 items-center;
+
+    svg {
+      @apply text-gray fill-current;
+    }
+
+    span {
+      @apply font-semibold;
+    }
+  }
+
+  & > li > a {
+    @apply hover:underline;
+  }
+
+  & > li > ul {
+    @apply pl-5 pt-4 space-y-4;
+  }
+
+  & > li > ul > li {
+    @apply text-sm text-black cursor-pointer flex items-center gap-1;
+
+    svg {
+      @apply w-3 h-3 fill-current;
+    }
+
+    a {
+      @apply hover:underline first-letter:capitalize;
+    }
+  }
+}
+
+.design__navigation__right {
+  @apply sticky top-12;
+
+  nav {
+    @apply space-y-2 text-sm [&>*]:block [&_a]:text-secondary [&_a]:underline;
+  }
+
+  strong {
+    @apply text-md mb-4;
+  }
+}
+
+.design__heading__5xl {
+  @apply text-5xl font-bold text-black;
+}
+
+.design__heading__section {
+  @apply pb-10 border-b border-background;
+}
+
+.design__heading__description {
+  @apply mt-10 text-gray-2 text-md font-normal [&>*+*]:mt-4 [&_a]:underline;
+}
+
+.design__section {
+  @apply [&>*+*]:mt-6 [&>p]:text-gray-2;
+
+  h2 {
+    @apply text-3xl font-semibold;
+  }
+
+  h3 {
+    @apply text-xl font-semibold inline-flex items-center gap-1;
+  }
+
+  &-snippet {
+    @apply mt-0;
+
+    p {
+      @apply bg-gray-3 px-4 py-2 text-sm text-gray-2;
+    }
+
+    a {
+      @apply text-secondary underline;
+    }
+
+    textarea {
+      @apply w-full text-sm;
+    }
+  }
+}
+
+.design__table {
+  @apply w-full text-center text-sm text-gray-2;
+
+  --cell-width: ;
+
+  thead {
+    @apply bg-gray-3;
+  }
+
+  th {
+    @apply px-6 py-2 font-normal border border-background;
+  }
+
+  td {
+    @apply px-6 py-4 border border-background w-[var(--cell-width)];
+  }
+}

data/app/views/decidim/design/components/accordions.html.erb

@@ -0,0 +1,66 @@
+<% content_for :heading do %>
+  Accordions
+<% end %>
+
+<% content_for :description do %>
+  Accordions are a javascript feature available thanks to an external library called <a href="https://github.com/jonathanlevaillant/a11y-accordion-component" target="_blank" rel="noopener noreferrer">a11y-accordion-component</a>.
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#example">Demo</a>
+  <a href="#usage">Usage</a>
+<% end %>
+
+<section id="demo" class="design__section">
+  <h2>Demo</h2>
+
+  <p>Throughout the application the accordions are used, mainly, to show/hide content in tabs or fold/unfold visible texts.</p>
+
+  <div data-component="accordion" data-multiselectable="false" id="example-accordion-1">
+    <ul class="tab-x-container">
+      <% 3.times do |tab| %>
+        <li>
+          <button id="trigger-1-<%= tab %>" class="tab-x" data-controls="panel-1-<%= tab %>" <%= "data-open=true" if tab.zero? %>>
+            Trigger <%= tab %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+
+    <% 3.times do |panel| %>
+      <div id="panel-1-<%= panel %>" class="py-8 text-sm font-italic">
+        Content of the panel <%= panel %>
+      </div>
+    <% end %>
+  </div>
+</section>
+
+<section id="usage" class="design__section">
+  <h2>Usage</h2>
+
+  <p>An accordion requires at least three elements:</p>
+
+  <p>1. A wrapper <code>div</code>, with the data-attribute <code>data-component="accordion"</code>, over all the available triggers and panels.</p>
+
+  <p>2. A trigger element, user actionable (as a button), pointing to the collapsable element through <code>data-controls="panel"</code>, where <i>panel</i> is the <code>id</code> of the panel.</p>
+
+  <p>3. A hideable element, whose <code>id</code> matches the data-controls value the trigger refers to.</p>
+
+  <div class="design__section-snippet" style="margin-top: inherit;">
+    <p>Source code on GitHub: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>
+
+    <code>
+      <textarea rows="8">
+<div data-component="accordion" id="example-accordion">
+  <button id="trigger" data-controls="panel">
+    Trigger
+  </button>
+
+  <div id="panel" aria-hidden="true">
+    Panel
+  </div>
+</div>
+      </textarea>
+    </code>
+  </div>
+</section>

data/app/views/decidim/design/components/activities/_static-activities.html.erb

@@ -0,0 +1,79 @@
+<div class="activity__container">
+  <div class="activity" data-activity="">
+    <div class="activity__time">
+      about 2 months ago
+    </div>
+    <div class="activity__content">
+      <span>
+        <span>
+          <%= icon("chat-1-line") %>
+          New comment:
+        </span>
+        <a href="#">
+        This is a very short comment
+        </a>
+      </span>
+      <span>
+      <a href="#">Initiative without members </a>
+      </span>
+    </div>
+    <div class="activity__author">
+      <div class="author" data-author="">
+        <div class="author__container has-tip" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+          <div class=&quot;author__container&quot;>
+          <span class=&quot;author__avatar-container&quot;>
+          <a href=&quot;#&quot;>
+          <img alt=&quot;Avatar: User Group 28078&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
+          </a>
+          </span>
+          <div>
+          <a class=&quot;author__name underline&quot; href=&quot;#&quot;>User Group 28078</a>
+          <span class=&quot;text-md&quot;>@anon-ug-28078</span>
+          </div>
+          </div>
+          <div class=&quot;author__tooltip-links&quot;>
+          <a href=&quot;#&quot;>
+          <span id=&quot;followers_count_user_group_28078&quot;>27</span> Followers
+          </a>
+          </div>
+          <a class=&quot;button button__sm button__transparent&quot; href=&quot;/users/sign_in&quot;>
+          <span>Send private message</span>
+          <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-mail-send-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+          </a>
+          <form class=&quot;button_to&quot; method=&quot;post&quot; action=&quot;#&quot;><button class=&quot;button button__sm button__transparent&quot; title=&quot;Please log in before performing this action&quot; aria-haspopup=&quot;true&quot; id=&quot;follow_user_group_28078&quot; data-dialog-open=&quot;loginModal&quot; type=&quot;submit&quot;>
+          <span class=&quot;&quot;>Follow</span>
+          <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+          </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;l10A9D-VXx2J_sZi-EpPchvyyTbr_MuBIof0orqJ8mjskMZN38Nr1MLZHbYb06Q8XSxGIxtHP1Yz99QH5NtWaA&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJajFuYVdRNkx5OWtaV05wWkdsdExYQnZjSFZzWVhSbExYSmxaR1Z6YVdkdUwwUmxZMmxrYVcwNk9sVnpaWEpIY205MWNDOHlPREEzT0FZNkJrVlUiLCJleHAiOiIyMDIzLTEyLTA4VDE3OjM2OjUxLjk1MVoiLCJwdXIiOiJkZWZhdWx0In19--3388eefc3a8a7c90bdb54c2473912eb49caa3192&quot; autocomplete=&quot;off&quot; /></form>
+          </div>
+          " aria-describedby="0f99qi-tooltip" data-yeti-box="0f99qi-tooltip" data-toggle="0f99qi-tooltip" data-resize="0f99qi-tooltip" id="toggle-0q86" aria-controls="0f99qi-tooltip" data-events="resize">
+          <span class="author__avatar-container">
+          <a href="#">
+          <img alt="Avatar: User Group 28078" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+          </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="activity" data-activity="">
+    <div class="activity__time">
+      about 2 months ago
+    </div>
+    <div class="activity__content">
+      <span>
+        <span>
+          <%= icon("map-pin-line") %>
+          New meeting:
+        </span>
+        <a href="#">
+        Citizen Initiative Presentation &amp; Signature Gathering Event
+        </a>
+      </span>
+      <span>
+      <a href="#">Initiative without members </a>
+      </span>
+    </div>
+    <div class="activity__author">
+    </div>
+  </div>
+</div>

data/app/views/decidim/design/components/activities/_static-activity.html.erb

@@ -0,0 +1,56 @@
+<div class="activity" data-activity="">
+  <div class="activity__time">
+    2 months ago
+  </div>
+  <div class="activity__content">
+    <span>
+      <span>
+        <%= icon("chat-new-line") %>
+        New proposal:
+      </span>
+      <a href="#">
+      La millor proposta
+      </a>
+    </span>
+    <span>
+    <a href="#">New park in Poblenou (Kat test)</a>
+    </span>
+  </div>
+  <div class="activity__author">
+    <div class="author" data-author="">
+      <div class="author__container has-tip" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+        <div class=&quot;author__container&quot;>
+        <span class=&quot;author__avatar-container&quot;>
+        <a href=&quot;#&quot;>
+        <img alt=&quot;Avatar: User Group 28036&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
+        </a>
+        </span>
+        <div>
+        <a class=&quot;author__name underline&quot; href=&quot;#&quot;>User Group 28036</a>
+        <span class=&quot;text-md&quot;>@anon-ug-28036</span>
+        </div>
+        </div>
+        <div class=&quot;author__tooltip-links&quot;>
+        <a href=&quot;#&quot;>
+        <span id=&quot;followers_count_user_group_28036&quot;>4</span> Followers
+        </a>
+        </div>
+        <a class=&quot;button button__sm button__transparent&quot; href=&quot;#&quot;>
+        <span>Send private message</span>
+        <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-mail-send-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+        </a>
+        <form class=&quot;button_to&quot; method=&quot;post&quot; action=&quot;#&quot;><button class=&quot;button button__sm button__transparent&quot; title=&quot;Please log in before performing this action&quot; aria-haspopup=&quot;true&quot; id=&quot;follow_user_group_28036&quot; data-dialog-open=&quot;loginModal&quot; type=&quot;submit&quot;>
+        <span class=&quot;&quot;>Follow</span>
+        <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+        </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;YDKRsY0hZ4fwm-K_uG6tJua9MP4qEnaP46S_3F9VAVMb_1cIbXdTTru8OWtb90ZooGO_69qpgljy1J95AQelUw&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJajFuYVdRNkx5OWtaV05wWkdsdExYQnZjSFZzWVhSbExYSmxaR1Z6YVdkdUwwUmxZMmxrYVcwNk9sVnpaWEpIY205MWNDOHlPREF6TmdZNkJrVlUiLCJleHAiOiIyMDIzLTEyLTEwVDExOjM3OjA1LjExNFoiLCJwdXIiOiJkZWZhdWx0In19--8488df6a633dd76191d973d968ce85a2fee73622&quot; autocomplete=&quot;off&quot; /></form>
+        </div>
+        " aria-describedby="j1iaa9-tooltip" data-yeti-box="j1iaa9-tooltip" data-toggle="j1iaa9-tooltip" data-resize="j1iaa9-tooltip" id="toggle-nuqmnw" aria-controls="j1iaa9-tooltip" data-events="resize">
+        <span class="author__avatar-container">
+        <a href="#">
+        <img alt="Avatar: User Group 28036" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+        </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/decidim/design/components/activities.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Activities
+<% end %>
+
+<% content_for :toc do %>
+  <% activities_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: activities_sections } %>

data/app/views/decidim/design/components/address/_static-address-online.html.erb

@@ -0,0 +1,9 @@
+<div class="address__container">
+  <%= icon("map-pin-line") %>
+  <div class="address">
+    <div class="address__location">Online</div>
+    <a href="#" target="_blank" rel="noopener noreferrer" class="address__hints underline break-all" data-remote="true">
+      https://meet.jit.si/DecidimTry
+      <span data-external-link="true" class="inline-block mx-0.5"><%= icon("external-link-line") %><span class="sr-only">(External link)</span></span></a>
+  </div>
+</div>

data/app/views/decidim/design/components/address/_static-address-person.html.erb

@@ -0,0 +1,8 @@
+<div class="address__container">
+  <%= icon("map-pin-line") %>
+  <div class="address">
+    <div class="address__location">Barcelona</div>
+    <div class="address__address">Carrer Aragó 200, Barcelona </div>
+    <div class="address__hints"></div>
+  </div>
+</div>

data/app/views/decidim/design/components/address.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Address
+<% end %>
+
+<% content_for :toc do %>
+  <% address_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: address_sections } %>

data/app/views/decidim/design/components/announcement.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Announcement
+<% end %>
+
+<% content_for :toc do %>
+  <% announcement_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: announcement_sections } %>

data/app/views/decidim/design/components/author/_static-avatar.html.erb

@@ -0,0 +1,38 @@
+<div class="author" data-author="">
+  <div class="author__container has-tip" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+    <div class=&quot;author__container&quot;>
+    <span class=&quot;author__avatar-container&quot;>
+    <a href=&quot;#&quot;>
+    <img alt=&quot;Avatar: Ettie Hickle&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
+    </a>
+    </span>
+    <div>
+    <a class=&quot;author__name underline&quot; href=&quot;#&quot;>Ettie Hickle</a>
+    <span class=&quot;text-md&quot;>@jarred_vandervort</span>
+    </div>
+    </div>
+    <div class=&quot;author__tooltip-links&quot;>
+    <a href=&quot;#&quot;>
+    <span id=&quot;followers_count_user_1&quot;>0</span> Seguidoras
+    </a>
+    <a href=&quot;#&quot;>
+    4 Siguiendo
+    </a>
+    </div>
+    <a class=&quot;button button__sm button__transparent&quot; href=&quot;/users/sign_in&quot;>
+    <span>Envia mensaje privado</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-mail-send-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </a>
+    <form class=&quot;button_to&quot; method=&quot;post&quot; action=&quot;#&quot;><button class=&quot;button button__sm button__transparent&quot; title=&quot;Pro favor, inicia sesión antes de realizar esta acción&quot; aria-haspopup=&quot;true&quot; id=&quot;follow_user_1&quot; data-dialog-open=&quot;loginModal&quot; type=&quot;submit&quot;>
+    <span class=&quot;&quot;>Seguir</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;0tc00Idqu62KnwJ8Jt2TkvxtdXn4Y1719QeR5jI-J_JC-F3DGwPDOyQJGvv7FHfIg83tAiQdRmXe63Nv4miWKw&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;BAh7CEkiCGdpZAY6BkVUSSIyZ2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlci8xBjsAVEkiDHB1cnBvc2UGOwBUSSIMZGVmYXVsdAY7AFRJIg9leHBpcmVzX2F0BjsAVEkiHTIwMjMtMTItMDhUMTE6MDg6MjQuODMzWgY7AFQ=--3d47942fb13084110877f3470e21f67c7649c114&quot; autocomplete=&quot;off&quot; /></form>
+    </div>
+    " aria-describedby="60onjg-tooltip" data-yeti-box="60onjg-tooltip" data-toggle="60onjg-tooltip" data-resize="60onjg-tooltip" id="toggle-36j4hx" aria-controls="60onjg-tooltip">
+    <span class="author__avatar-container">
+    <a href="#">
+    <img alt="Avatar: Ettie Hickle" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+    </a>
+    </span>
+  </div>
+</div>

data/app/views/decidim/design/components/author/_static-compact.html.erb

@@ -0,0 +1,46 @@
+<div class="author" data-author="">
+  <div class="author__container is-compact has-tip" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+    <div class=&quot;author__container&quot;>
+    <span class=&quot;author__avatar-container&quot;>
+    <a href=&quot;#&quot;>
+    <img alt=&quot;Avatar: Rolande Jacobi 1 2 endr1&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
+    </a>
+    </span>
+    <div>
+    <a class=&quot;author__name underline&quot; href=&quot;#&quot;>Rolande Jacobi 1 2 endr1</a>
+    <span class=&quot;text-md&quot;>@fausto_kassulke</span>
+    </div>
+    </div>
+    <div class=&quot;author__tooltip-links&quot;>
+    <a href=&quot;#&quot;>
+    <span id=&quot;followers_count_user_107&quot;>0</span> Seguidoras
+    </a>
+    <a href=&quot;#&quot;>
+    0 Siguiendo
+    </a>
+    </div>
+    <a class=&quot;button button__sm button__transparent&quot; href=&quot;/users/sign_in&quot;>
+    <span>Envia mensaje privado</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-mail-send-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </a>
+    <form class=&quot;button_to&quot; method=&quot;post&quot; action=&quot;#&quot;><button class=&quot;button button__sm button__transparent&quot; title=&quot;Pro favor, inicia sesión antes de realizar esta acción&quot; aria-haspopup=&quot;true&quot; id=&quot;follow_user_107&quot; data-dialog-open=&quot;loginModal&quot; type=&quot;submit&quot;>
+    <span class=&quot;&quot;>Seguir</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;mPVFPECIb-iR5Aw7rIVzmwi8j7F_fHW9MizYAWFLyvwI2iwv3OEXfj9yFLxxTJfBdxwXyqMCbS0ZwDqIsR17JQ&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;BAh7CEkiCGdpZAY6BkVUSSI0Z2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlci8xMDcGOwBUSSIMcHVycG9zZQY7AFRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUSSIdMjAyMy0xMi0wOFQxMDo1NDozNC42OTBaBjsAVA==--757a138d9c782a459354bce8e4849567be436ea6&quot; autocomplete=&quot;off&quot; /></form>
+    </div>
+    " aria-describedby="tooltip-d98lre" data-yeti-box="3gjzgq-tooltip" data-toggle="3gjzgq-tooltip"
+    data-resize="3gjzgq-tooltip" id="toggle-oe62o" aria-controls="3gjzgq-tooltip">
+    <span class="author__avatar-container">
+    <a href="#">
+    <img alt="Avatar: Rolande Jacobi 1 2 endr1" class="author__avatar"
+      src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+    </a>
+    </span>
+    <div>
+      <a class="author__name underline" href="#">Rolande Jacobi 1 2 endr1</a>
+      <span class="author__metadata">
+      25/10/2023 12:50
+      </span>
+    </div>
+  </div>
+</div>

data/app/views/decidim/design/components/author/_static-default.html.erb

@@ -0,0 +1,35 @@
+<div class="author" data-author="">
+  <div class="author__container has-tip" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+    <div class=&quot;author__container&quot;>
+    <span class=&quot;author__avatar-container&quot;>
+    <img alt=&quot;Avatar: Clint Runolfsdottir 2 2 0&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
+    </span>
+    <div>
+    <span class=&quot;author__name&quot;>Clint Runolfsdottir 2 2 0</span>
+    <span class=&quot;text-md&quot;>@macie</span>
+    </div>
+    </div>
+    <div class=&quot;author__tooltip-links&quot;>
+    <a href=&quot;#&quot;>
+    <span id=&quot;followers_count_user_66&quot;>0</span> Seguidoras
+    </a>
+    <a href=&quot;#&quot;>
+    0 Siguiendo
+    </a>
+    </div>
+    <a class=&quot;button button__sm button__transparent&quot; href=&quot;/users/sign_in&quot;>
+    <span>Envia mensaje privado</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-mail-send-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </a>
+    <form class=&quot;button_to&quot; method=&quot;post&quot; action=&quot;#&quot;><button class=&quot;button button__sm button__transparent&quot; title=&quot;Pro favor, inicia sesión antes de realizar esta acción&quot; aria-haspopup=&quot;true&quot; id=&quot;follow_user_66&quot; data-dialog-open=&quot;loginModal&quot; type=&quot;submit&quot;>
+    <span class=&quot;&quot;>Seguir</span>
+    <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
+    </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;prDEaQztVBlA3g5I6jFlPpN8SZXJfsqBsfxqfPmEaa42n616kIQsj-5IFs83-IFk7NzR7hUA0hGaEIj1KdLYdw&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;BAh7CEkiCGdpZAY6BkVUSSIzZ2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlci82NgY7AFRJIgxwdXJwb3NlBjsAVEkiDGRlZmF1bHQGOwBUSSIPZXhwaXJlc19hdAY7AFRJIh0yMDIzLTEyLTA4VDExOjA1OjQwLjc5M1oGOwBU--3e2a9169f4eca80b74b92866053e11182b15c059&quot; autocomplete=&quot;off&quot; /></form>
+    </div>
+    " aria-describedby="tooltip-6kqmd" data-yeti-box="f8ufax-tooltip" data-toggle="f8ufax-tooltip" data-resize="f8ufax-tooltip" id="toggle-bce33" aria-controls="f8ufax-tooltip">
+    <span class="author__avatar-container">
+    <img alt="Avatar: Clint Runolfsdottir 2 2 0" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+    </span>
+    <span class="author__name">Clint Runolfsdottir 2 2 0</span>
+  </div>
+</div>

data/app/views/decidim/design/components/author.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Author
+<% end %>
+
+<% content_for :toc do %>
+  <% author_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: author_sections } %>