decidim-design 0.28.0.rc4

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

@@ -0,0 +1,15 @@
+<% content_for :heading do %>
+  Buttons
+<% end %>
+
+<% content_for :description do %>
+  Buttons are built using different combinations of CSS classes: the <code>button</code> class, a size and a color.
+<% end %>
+
+<% content_for :toc do %>
+  <% buttons_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: buttons_sections } %>

data/app/views/decidim/design/components/cards/_static-card-g-highlight.html.erb

@@ -0,0 +1,18 @@
+<a class="card__highlight" id="participatory_process_highlight_1" href="#">
+  <div class="card__highlight-img">
+    <img alt="Imagen para los medios: Sequi impedit dolores sunt ad." src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--27708e9cb6acd3d8911e959ba1338519589fcb30/hero_image.jpeg">
+  </div>
+  <div class="card__highlight-text">
+    <h3 class="h3 text-secondary">Sequi impedit dolores sunt ad.</h3>
+    Minima aut incidunt.
+    <div class="card__highlight-metadata">
+      <span>
+      <span class="card__grid-loader" style="--value:0.7542662116040956;"></span>queda aproximadamente 2 meses
+      </span>
+      <span>
+        <%= icon("direction-line") %>
+        Expedita vel.
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-g-metadata-2.html.erb

@@ -0,0 +1,17 @@
+<a class="card__grid" id="participatory_process_2" href="#">
+  <div class="card__grid-img">
+    <img alt="Media picture: Ut vel architecto hic tempore." src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBQdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--051324c06b42809063d50b326d116e0339d96aab/hero_image.jpeg">
+  </div>
+  <div class="card__grid-text">
+    <h3 class="h4 text-secondary">Ut vel architecto hic tempore.</h3>
+    <div class="card__grid-metadata">
+      <span>
+      <span class="card__grid-loader" style="--value:0.7706484641638225;"></span>about 2 months remaining
+      </span>
+      <span>
+        <%= icon("direction-line") %>
+        Sit.
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-g-metadata.html.erb

@@ -0,0 +1,14 @@
+<a class="card__grid" id="conference_2" href="#">
+  <div class="card__grid-img">
+    <img alt="Media picture: Enim earum quos rerum et." src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0lCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f9dcdd2b5fa8a4c7c371725abbec4b531a241788/hero_image.jpeg">
+  </div>
+  <div class="card__grid-text">
+    <h3 class="h4 text-secondary">Enim earum quos rerum et.</h3>
+    <div class="card__grid-metadata">
+      <span>
+        <%= icon("calendar-line") %>
+        05 Oct → 05 Dec
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-g.html.erb

@@ -0,0 +1,17 @@
+<a class="card__grid" id="participatory_process_1" href="#">
+  <div class="card__grid-img">
+    <img alt="Media picture: Sequi impedit dolores sunt ad." src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--27708e9cb6acd3d8911e959ba1338519589fcb30/hero_image.jpeg">
+  </div>
+  <div class="card__grid-text">
+    <h3 class="h4 text-secondary">Sequi impedit dolores sunt ad.</h3>
+    <div class="card__grid-metadata">
+      <span>
+      <span class="card__grid-loader" style="--value:0.7706484641638225;"></span>about 2 months remaining
+      </span>
+      <span>
+        <%= icon("direction-line") %>
+        Expedita vel.
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-l-description.html.erb

@@ -0,0 +1,28 @@
+<a class="card__list" id="debates__debate_18" href="#">
+  <div class="card__list-content">
+    <div class="h4 card__list-title">
+      Magni cupiditate.
+    </div>
+    <div class="card__list-text">
+      <p>Et eum doloribus. Iste est ipsa. Est alias ea.</p>
+    </div>
+    <div class="card__list-metadata">
+      <span>
+        <%= icon("time-line") %>
+        Open debate
+      </span>
+      <span data-comments-count="">
+        <%= icon("wechat-line") %>
+        0
+      </span>
+      <span data-endorsements-count="">
+        <%= icon("like") %>
+        0
+      </span>
+      <span>
+        <%= icon("price-tag-3-line") %>
+        Quaerat perspiciatis sequi deleniti consectetur.
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-l-extra-data-2.html.erb

@@ -0,0 +1,31 @@
+<%= append_stylesheet_pack_tag "decidim_budgets" %>
+
+<div class="budget-list">
+  <div class="project-item" id="project-1-item">
+    <div class="card__list">
+      <a class="card__list-content" href="#">
+        <div class="h4 card__list-title">
+          Sed harum.
+        </div>
+        <div class="card__list-metadata">
+          <span>
+            <%= icon("price-tag-3-line") %>
+            Occaecati veritatis nesciunt fugiat aut.
+          </span>
+        </div>
+      </a>
+    </div>
+    <div class="budget__card__list-project">
+      <span class="budget__card__list-project__amount">
+      €15,233,687
+      </span>
+      <form class="button_to" method="post" action="/processes/corpse-curriculum/f/4/budgets/1/order/line_item?project_id=1&amp;show_only_added=false" data-remote="true">
+        <button class="button w-full hollow button__transparent-secondary button__sm budget-list__action" id="project-vote-button-1" data-add="true" data-disable="true" data-budget="15233687" data-allocation="15233687" data-redirect-url="/processes/corpse-curriculum/f/4/budgets/1/projects/1" title="Add project Sed harum. to your vote." type="submit">
+          Add
+          <%= icon("add-fill") %>
+        </button>
+        <input type="hidden" name="authenticity_token" value="pm2aa6Q12U56FRLuwBjfFxGA0yxN0ETuJtgbaAq1rwpQziebMK_OBdVFgCumlN0MC7vy8IpsS93kHFpd2EWbOg" autocomplete="off">
+      </form>
+    </div>
+  </div>
+</div>

data/app/views/decidim/design/components/cards/_static-card-l-extra-data.html.erb

@@ -0,0 +1,16 @@
+<%= append_stylesheet_pack_tag "decidim_accountability" %>
+
+<a class="card__list" id="accountability__result_101" href="#">
+  <div class="card__list-content">
+    <div class="h4 card__list-title">
+      Explicabo et.
+    </div>
+    <div class="card__list-metadata">
+      <span>
+        <%= icon("price-tag-3-line") %>
+        Sint aut neque debitis id.
+      </span>
+    </div>
+  </div>
+  <div class="accountability__progress">78%</div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-l-image.html.erb

@@ -0,0 +1,66 @@
+<a class="card__list" id="blogs__post_6" href="#">
+  <div class="card__list-image">
+    <img class="w-full h-full object-cover" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0lCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f9dcdd2b5fa8a4c7c371725abbec4b531a241788/hero_image.jpeg" alt="hero_image">
+  </div>
+  <div class="card__list-content">
+    <div class="h4 card__list-title">
+      With images
+    </div>
+    <div class="card__list-text">
+      <div class="rich-text-display">Provident eum nobis. Voluptates ratione consequatur. Velit consectetur dolor. Quibusdam alias culpa. Placeat dolorem similique. Et eos ex. Distinctio temporibus culpa. Autem accusamus omnis. Temporibus aperiam officiis. Deleniti vel officiis. Voluptas non temporibus. Aspernatur eos et. Corporis aliquam sint. Eos ut et. Fuga eveniet cum. Error quis architecto. Sed alias est. Molestias at veniam. Culpa unde nesciunt. Fuga voluptatem pariatur.</div>
+    </div>
+    <div class="card__list-metadata">
+      <span>
+        <!-- linthtml-disable -->
+        <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: Terica MacGyver Sr.&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;>Terica MacGyver Sr.</span>
+            <span class=&quot;text-md&quot;>@elina</span>
+            </div>
+            </div>
+            <div class=&quot;author__tooltip-links&quot;>
+            <a href=&quot;/profiles/elina/followers&quot;>
+            <span id=&quot;followers_count_user_16&quot;>0</span> Followers
+            </a>
+            <a href=&quot;/profiles/elina/following&quot;>
+            2 Follows
+            </a>
+            </div>
+            <a class=&quot;button button__sm button__transparent&quot; href=&quot;/conversations/new?recipient_id=16&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>
+            <a class=&quot;button button__sm button__transparent&quot; title=&quot;Follow&quot; id=&quot;follow_user_16&quot; data-remote=&quot;true&quot; rel=&quot;nofollow&quot; data-method=&quot;post&quot; href=&quot;/follow?follow%5Bbutton_classes%5D=button+button__sm+button__transparent&amp;follow%5Bfollowable_gid%5D=BAh7CEkiCGdpZAY6BkVUSSIzZ2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlci8xNgY7AFRJIgxwdXJwb3NlBjsAVEkiDGRlZmF1bHQGOwBUSSIPZXhwaXJlc19hdAY7AFRJIh0yMDIzLTExLTE5VDE0OjMzOjEzLjIwMFoGOwBU--7f5a417635cb6014539ff6341140054f59ef9773&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>
+            </a>
+            </div>
+            " aria-describedby="5filn3-tooltip" data-yeti-box="5filn3-tooltip" data-toggle="5filn3-tooltip" data-resize="5filn3-tooltip" id="toggle-0rsefa" aria-controls="5filn3-tooltip">
+            <span class="author__avatar-container">
+            <img alt="Avatar: Terica MacGyver Sr." class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+            </span>
+            <span class="author__name">Terica MacGyver Sr.</span>
+          </div>
+        </div>
+        <!-- linthtml-enable -->
+      </span>
+      <span>
+        <%= icon("calendar-todo-line") %>
+        05 Oct 2023
+      </span>
+      <span data-comments-count="">
+        <%= icon("wechat-line") %>
+        2
+      </span>
+      <span data-endorsements-count="">
+        <%= icon("like") %>
+        0
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-l-meetings.html.erb

@@ -0,0 +1,30 @@
+<a class="card__list card__calendar-list__reset" id="meetings__meeting_52" href="#">
+  <time class="card__calendar" datetime="2023-10-07T00:00:00Z">
+    <div class="card__calendar-month">Oct</div>
+    <div class="card__calendar-day">07</div>
+    <div class="card__calendar-time">00:00</div>
+  </time>
+  <div class="card__list-content">
+    <h3 class="h4 card__list-title">
+      Sed ratione.
+    </h3>
+    <div class="card__list-metadata">
+      <span>
+        <%= icon("home-wifi-line") %>
+        Hybrid
+      </span>
+      <span>
+        <%= icon("time-line") %>
+        16d
+      </span>
+      <span data-comments-count="">
+        <%= icon("wechat-line") %>
+        0
+      </span>
+      <span>
+        <%= icon("price-tag-3-line") %>
+        Praesentium nam delectus in numquam.
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-l.html.erb

@@ -0,0 +1,60 @@
+<a class="card__list" id="proposals__proposal_4" href="#">
+  <div class="card__list-content">
+    <div class="h4 card__list-title">
+      Quae reiciendis. Et.
+    </div>
+    <div class="card__list-metadata">
+      <span>
+        <!-- linthtml-disable -->
+        <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: Tammy Lesch VM&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;>Tammy Lesch VM</span>
+            <span class=&quot;text-md&quot;>@gia</span>
+            </div>
+            </div>
+            <div class=&quot;author__tooltip-links&quot;>
+            <a href=&quot;/profiles/gia/followers&quot;>
+            <span id=&quot;followers_count_user_group_24&quot;>0</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_24&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;lS3Qr0rPEGR-g40UKR1aXFG0ekPAg3vX75katkSHYSttywRbOAj5EvsNAWZ91bMhwstNuRYPuhbLQE-AvlAs6w&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;BAh7CEkiCGdpZAY6BkVUSSI4Z2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlckdyb3VwLzI0BjsAVEkiDHB1cnBvc2UGOwBUSSIMZGVmYXVsdAY7AFRJIg9leHBpcmVzX2F0BjsAVEkiHTIwMjMtMTEtMTlUMDc6MDg6NDAuNDU3WgY7AFQ=--a0875a4b535cbc4218f1e0707cc6ea2148e213f3&quot; autocomplete=&quot;off&quot; /></form>
+            </div>
+            " aria-describedby="t17dfd-tooltip" data-yeti-box="t17dfd-tooltip" data-toggle="t17dfd-tooltip" data-resize="t17dfd-tooltip" id="toggle-2k3n55" aria-controls="t17dfd-tooltip">
+            <span class="author__avatar-container">
+            <img alt="Avatar: Tammy Lesch VM" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
+            </span>
+            <span class="author__name">Tammy Lesch VM</span>
+          </div>
+        </div>
+        <!-- linthtml-enable -->
+      </span>
+      <span data-comments-count="">
+        <%= icon("wechat-line") %>
+        0
+      </span>
+      <span data-endorsements-count="">
+        <%= icon("like") %>
+        0
+      </span>
+      <span>
+      <span class="label warning">Evaluating</span>
+      </span>
+      <span>
+        <%= icon("question-line") %>
+        Amendment
+      </span>
+    </div>
+  </div>
+</a>

data/app/views/decidim/design/components/cards/_static-card-s.html.erb

@@ -0,0 +1,15 @@
+<a class="card__search" id="assembly_3" href="#">
+  <h3 class="h4 card__search-title">
+    Blanditiis nulla quis enim consequatur.
+  </h3>
+  <div class="card__search-metadata">
+    <span>
+      <%= icon("government-line") %>
+      1 assembly
+    </span>
+    <span>
+      <%= icon("group-2-line") %>
+      ipsum
+    </span>
+  </div>
+</a>

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

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

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

@@ -0,0 +1,89 @@
+<% content_for :heading do %>
+  Dialogs
+<% end %>
+
+<% content_for :description do %>
+  Dialogs are a javascript feature available thanks to an external library called <a href="https://github.com/jonathanlevaillant/a11y-dialog-component" target="_blank" rel="noopener noreferrer">a11y-dialog-component</a>.
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#example">Demo</a>
+  <a href="#usage">Usage</a>
+  <a href="#html">HTML tips</a>
+<% end %>
+
+<section id="demo" class="design__section">
+  <h2>Demo</h2>
+
+  <p>The dialogs, or modal components, are implemented thorugh the rails helper <code>decidim_modal</code>. </p>
+
+  <button data-dialog-open="example" class="button button__lg button__secondary">
+    Show modal
+  </button>
+
+  <%= decidim_modal id: "example" do %>
+    I am a modal
+  <% end %>
+</section>
+
+<section id="usage" class="design__section">
+  <h2>Usage</h2>
+
+  <p>An dialog requires two elements:</p>
+
+  <p>1. A user actionable element, with the data-attribute <code>data-dialog-open="example"</code>, where example is the <code>id</code> of the modal.</p>
+
+  <p>2. A modal element, whose <code>id</code> matches the data-target 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="7">
+&lt;button data-dialog-open=&quot;example&quot; class=&quot;button button__lg button__secondary&quot;&gt;
+  Show modal
+&lt;/button&gt;
+
+&#60;%= decidim_modal id: "example" do %&#62;
+  I am a modal
+&#60;% end %&#62;
+      </textarea>
+    </code>
+  </div>
+</section>
+
+<section id="html" class="design__section">
+  <h2>HTML tips</h2>
+
+  <p>In order to display a complex modal, matching up the styles, do the following markup:</p>
+
+  <p>Pay attention to the <i>data-attributes</i> and the <i>ids</i>. For instance, the <code>[data-dialog-title]</code>'s id starts with <i>dialog-title</i> plus the <i>modal id</i>.</p>
+
+  <div class="design__section-snippet" style="margin-top: inherit;">
+    <code>
+      <textarea rows="20">
+&#60;%= decidim_modal id: "example" do %&#62;
+  <div data-dialog-container>
+    &#60;%= icon "icon_identificator" %&#62; // ... pick a desired icon
+    <h3 id="dialog-title-example" tabindex="-1" data-dialog-title>
+      Modal title
+    </h3>
+    <div>
+      <p id="dialog-desc-example">
+        Modal description (optional)
+      </p>
+
+      // ... add more HTML
+    </div>
+  </div>
+  <div data-dialog-actions>
+    <button data-dialog-close="example">
+      Close modal
+    </button>
+    // ... add more buttons
+  </div>
+&#60;% end %&#62;
+      </textarea>
+    </code>
+  </div>
+</section>

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

@@ -0,0 +1,64 @@
+<% content_for :heading do %>
+  Dropdowns
+<% end %>
+
+<% content_for :description do %>
+  Dropdowns are a javascript feature available thanks to an external library called <a href="https://github.com/jonathanlevaillant/a11y-dropdown-component" target="_blank" rel="noopener noreferrer">a11y-dropdown-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>The dropdowns are used along the application in order to collapse large, easy-readable menus for desktop devices, but too wordy for mobile devices.</p>
+
+  <p>This javascript feature is enhanced with a small css, through the naming: the hideable content MUST HAVE an <code>id</code> starting with <i>dropdown-menu</i>.</p>
+
+  <p>The following example will not be noticeable in desktop, but mobile:</p>
+
+  <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element" data-auto-close="true">
+    <span><%= t("decidim.searches.filters.jump_to") %></span>
+    <%= icon "arrow-down-s-line" %>
+    <%= icon "arrow-up-s-line" %>
+  </button>
+
+  <ul id="dropdown-menu-element">
+    <% 3.times do |item| %>
+      <li class="p-2 text-gray-2">
+        Item <%= item %>
+      </li>
+    <% end %>
+  </ul>
+</section>
+
+<section id="usage" class="design__section">
+  <h2>Usage</h2>
+
+  <p>An dropdown requires two elements:</p>
+
+  <p>1. A user actionable element, with the data-attributes <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.</p>
+
+  <p>2. A hideable element, whose <code>id</code> matches the data-target 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">
+&lt;button id=&quot;dropdown-trigger-element&quot; data-component=&quot;dropdown&quot; data-target=&quot;dropdown-menu-element&quot;&gt;
+  Trigger
+&lt;/button&gt;
+
+&lt;ul id=&quot;dropdown-menu-element&quot;&gt;
+  &lt;li&gt;Item&lt;/li&gt;
+  &lt;li&gt;Item&lt;/li&gt;
+  &lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+      </textarea>
+    </code>
+  </div>
+</section>

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

@@ -0,0 +1,4 @@
+<a class="button button__sm button__text-secondary only:m-auto" title="Seguir" id="follow_meeting_1821" data-remote="true" rel="nofollow" data-method="post" href="#">
+  <span class="">Follow</span>
+  <%= icon("notification-3-line") %>
+</a>

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

@@ -0,0 +1,4 @@
+<a class="button button__sm button__text-secondary only:m-auto" title="Stop following" id="follow_meeting_1821" data-remote="true" rel="nofollow" data-method="delete" href="#">
+  <span class="">Stop following</span>
+  <%= icon("notification-3-fill") %>
+</a>

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

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