decidim-design 0.28.2 → 0.29.0.rc2

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

@@ -6,73 +6,77 @@ module Decidim
       def colors_sections
         [
           {
-            id: "base",
+            id: t("decidim.design.helpers.base"),
             contents: [
               {
                 type: :table,
-                options: { headings: ["Value", "Tailwind name", "Usage"] },
+                options: { headings: [t("decidim.design.helpers.value"), t("decidim.design.helpers.tailwind"), t("decidim.design.helpers.usage")] },
                 items: colors_table(
-                  { value: "var(--primary)", name: "primary", usage: "Main nav component background\nNav menus in homepage and space home" },
-                  { value: "var(--secondary)", name: "secondary", usage: "Main color for links and buttons" },
-                  { value: "var(--tertiary)", name: "tertiary", usage: "Graphic ornaments and accent color\nCards and list items hover state border" }
+                  { value: "var(--primary)", name: "primary", usage: t("decidim.design.helpers.usage_base_1") },
+                  { value: "var(--secondary)", name: "secondary", usage: t("decidim.design.helpers.usage_base_2") },
+                  { value: "var(--tertiary)", name: "tertiary", usage: t("decidim.design.helpers.usage_base_3") }
                 )
               }
             ]
           },
           {
-            id: "state",
+            id: t("decidim.design.helpers.state"),
             contents: [
               {
                 type: :table,
-                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "Usage"] },
+                options: { headings: [t("decidim.design.helpers.value"), t("decidim.design.helpers.tailwind"), t("decidim.design.helpers.hex_code"),
+                                      t("decidim.design.helpers.rgba_code"), t("decidim.design.helpers.usage")] },
                 items: colors_table(
-                  { value: "#28A745", name: "success", rgba: "rgba(40,167,69,1)", usage: "Success notice border\nAlert notice icon fill\nButton background on success message" },
-                  { value: "#FFB703", name: "warning", rgba: "rgba(255,183,3,1)", usage: "Warning notice border" },
-                  { value: "#ED1C24", name: "alert", rgba: "rgba(237,28,36,1)", usage: "Alert notice border\nAlert notice icon fill" }
+                  { value: "#28A745", name: "success", rgba: "rgba(40,167,69,1)", usage: t("decidim.design.helpers.usage_state_1") },
+                  { value: "#FFB703", name: "warning", rgba: "rgba(255,183,3,1)", usage: t("decidim.design.helpers.usage_state_2") },
+                  { value: "#ED1C24", name: "alert", rgba: "rgba(237,28,36,1)", usage: t("decidim.design.helpers.usage_state_3") }
                 )
               }
             ]
           },
           {
-            id: "main_colors",
+            id: t("decidim.design.helpers.main_colors"),
             contents: [
               {
-                values: section_subtitle(title: "Typography and texts")
+                values: section_subtitle(title: t("decidim.design.helpers.typography_texts"))
               },
               {
                 type: :table,
-                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "Usage"] },
+                options: { headings: [t("decidim.design.helpers.value"), t("decidim.design.helpers.tailwind"), t("decidim.design.helpers.hex_code"),
+                                      t("decidim.design.helpers.rgba_code"), t("decidim.design.helpers.usage")] },
                 items: colors_table(
-                  { value: "#020203", name: "black", rgba: "rgba(2,2,3,1)", usage: "Headings and section titles" },
-                  { value: "#3E4C5C", name: "gray-2", rgba: "rgba(62,76,92,1)", usage: "Inline text" },
-                  { value: "#FFFFFF", name: "white", rgba: "rgba(255,255,255,1)", usage: "Text over dark background" },
-                  { value: "#155ABF", name: "secondary", rgba: "rgba(21,90,191,1)", usage: "Links and buttons" }
+                  { value: "#020203", name: "black", rgba: "rgba(2,2,3,1)", usage: t("decidim.design.helpers.usage_typography_1") },
+                  { value: "#3E4C5C", name: "gray-2", rgba: "rgba(62,76,92,1)", usage: t("decidim.design.helpers.usage_typography_2") },
+                  { value: "#FFFFFF", name: "white", rgba: "rgba(255,255,255,1)", usage: t("decidim.design.helpers.usage_typography_3") },
+                  { value: "#155ABF", name: "secondary", rgba: "rgba(21,90,191,1)", usage: t("decidim.design.helpers.usage_typography_4") }
                 )
               },
               {
-                values: section_subtitle(title: "Background and borders")
+                values: section_subtitle(title: t("decidim.design.helpers.background"))
               },
               {
                 type: :table,
-                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "Usage"] },
+                options: { headings: [t("decidim.design.helpers.value"), t("decidim.design.helpers.tailwind"), t("decidim.design.helpers.hex_code"),
+                                      t("decidim.design.helpers.rgba_code"), t("decidim.design.helpers.usage")] },
                 items: colors_table(
-                  { value: "#F3F4F7", name: "background", rgba: "rgba(243,244,247,1)", usage: "Aside background" },
-                  { value: "#E4EEFF99", name: "background-4", rgba: "rgba(228,238,255,0.8)", usage: "Selected sidebar filter background" },
-                  { value: "#6B7280CC", name: "gray", rgba: "rgba(107,114,128,0.3)", usage: "Default icon color" },
-                  { value: "#E1E5EF", name: "gray-3", rgba: "rgba(225,229,239,1)", usage: "Lines and separators" },
-                  { value: "#242424", name: "gray-4", rgba: "rgba(36,36,36,1)", usage: "Footer background" },
-                  { value: "#F6F8FA", name: "gray-5", rgba: "rgb(246,248,250,1)", usage: "Admin layout background" }
+                  { value: "#F3F4F7", name: "background", rgba: "rgba(243,244,247,1)", usage: t("decidim.design.helpers.usage_background_1") },
+                  { value: "#E4EEFF99", name: "background-4", rgba: "rgba(228,238,255,0.8)", usage: t("decidim.design.helpers.usage_background_2") },
+                  { value: "#6B7280CC", name: "gray", rgba: "rgba(107,114,128,0.3)", usage: t("decidim.design.helpers.usage_background_3") },
+                  { value: "#E1E5EF", name: "gray-3", rgba: "rgba(225,229,239,1)", usage: t("decidim.design.helpers.usage_background_4") },
+                  { value: "#242424", name: "gray-4", rgba: "rgba(36,36,36,1)", usage: t("decidim.design.helpers.usage_background_5") },
+                  { value: "#F6F8FA", name: "gray-5", rgba: "rgb(246,248,250,1)", usage: t("decidim.design.helpers.usage_background_6") }
                 )
               },
               {
-                values: section_subtitle(title: "Form elements")
+                values: section_subtitle(title: t("decidim.design.helpers.form_elements"))
               },
               {
                 type: :table,
-                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "Usage"] },
+                options: { headings: [t("decidim.design.helpers.value"), t("decidim.design.helpers.tailwind"), t("decidim.design.helpers.hex_code"),
+                                      t("decidim.design.helpers.rgba_code"), t("decidim.design.helpers.usage")] },
                 items: colors_table(
-                  { value: "#FAFBFC", name: "background-2", rgba: "rgba(250,251,252,1)", usage: "Input elements default background" },
-                  { value: "#EFEFEF", name: "background-3", rgba: "rgba(239,239,239,1))", usage: "Input elements disabled state background" }
+                  { value: "#FAFBFC", name: "background-2", rgba: "rgba(250,251,252,1)", usage: t("decidim.design.helpers.usage_formelements_1") },
+                  { value: "#EFEFEF", name: "background-3", rgba: "rgba(239,239,239,1))", usage: t("decidim.design.helpers.usage_formelements_2") }
                 )
               }
             ]

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

@@ -7,36 +7,25 @@ module Decidim
         [
           {
             id: "usage",
+            title: t("decidim.design.helpers.usage"),
             contents: [
               {
                 type: :text,
-                values: ["Make sure the partial <code>decidim/shared/login_modal</code> is present in the DOM.
-                          This partial is placed in the application layout when the user is logged in."]
+                values: [t("decidim.design.helpers.follower_description_html")]
               },
               {
-                type: :table,
-                options: { headings: ["Follow Button"] },
-                items: follow_table(
-                  { partial: "decidim/design/components/follow/static-follow-default" },
-                  { partial: "decidim/design/components/follow/static-follow-unfollow" }
-                ),
+                type: :cell_table,
+                options: { headings: [t("decidim.design.helpers.follow_button")] },
                 cell_snippet: {
                   cell: "decidim/follow_button",
-                  args: [Decidim::User.first]
+                  args: [Decidim::User.where.not(id: current_user&.id).first],
+                  call_string: 'cell("decidim/follow_button", _FOLLOWABLE_RESOURCE_)'
                 }
               }
             ]
           }
         ]
       end
-
-      def follow_table(*table_rows, **_opts)
-        table_rows.map do |table_cell|
-          row = []
-          row << render(partial: table_cell[:partial])
-          row
-        end
-      end
     end
   end
 end

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

@@ -7,32 +7,25 @@ module Decidim
         [
           {
             id: "usage",
+            title: t("decidim.design.helpers.usage"),
             contents: [
               {
                 type: :text,
-                values: ["Report button launches a modal window to flag the current resource."]
+                values: [t("decidim.design.helpers.report_usage_description")]
               },
               {
-                type: :table,
-                options: { headings: ["Report Button"] },
-                items: report_table({}),
+                type: :cell_table,
+                options: { headings: [t("decidim.design.helpers.report_button")] },
                 cell_snippet: {
                   cell: "decidim/report_button",
-                  args: [Decidim::User.first]
+                  args: [Decidim::User.first],
+                  call_string: 'cell("decidim/report_button", _REPORTABLE_RESOURCE_)'
                 }
               }
             ]
           }
         ]
       end
-
-      def report_table(*table_rows, **_opts)
-        table_rows.each_with_index.map do
-          row = []
-          row << render(partial: "decidim/design/components/report/static-report")
-          row
-        end
-      end
     end
   end
 end

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

@@ -7,32 +7,25 @@ module Decidim
         [
           {
             id: "usage",
+            title: t("decidim.design.helpers.usage"),
             contents: [
               {
                 type: :text,
-                values: ["Make sure the partial <code>decidim/shared/share_modal</code> is present in the DOM. This partial is placed in the application layout."]
+                values: [t("decidim.design.helpers.share_usage_description_html")]
               },
               {
-                type: :table,
-                options: { headings: ["Share Button"] },
-                items: share_table({}),
+                type: :cell_table,
+                options: { headings: [t("decidim.design.helpers.share_button")] },
                 cell_snippet: {
                   cell: "decidim/share_button",
-                  args: []
+                  args: [],
+                  call_string: 'cell("decidim/share_button", nil)'
                 }
               }
             ]
           }
         ]
       end
-
-      def share_table(*table_rows, **_opts)
-        table_rows.each_with_index.map do
-          row = []
-          row << { method: :cell, args: ["decidim/share_button", nil] }
-          row
-        end
-      end
     end
   end
 end

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

@@ -7,30 +7,31 @@ module Decidim
         [
           {
             id: "context",
+            title: t("decidim.design.helpers.context"),
             contents: [
               {
                 type: :text,
                 values: [
-                  "This tab-panel component gathers all the related contents or another resources of the main element displayed,
-                    in order to save vertical space. Clicking on the tab will activate the reated panel to show the content.",
-                  "Mainly is used within the <i>layout_item</i> or the <i>layout_center</i>, after the main content of the resource."
+                  t("decidim.design.helpers.tab_panels_context_description"),
+                  t("decidim.design.helpers.tab_panels_context_description_html")
                 ]
               }
             ]
           },
           {
             id: "usage",
+            title: t("decidim.design.helpers.usage"),
             contents: [
               {
                 type: :text,
                 values: [
-                  "This component receives an array of hashes, and rearrange the output of each item into a tab-panel structure. Available properties for each panel:",
-                  "<strong>enabled</strong>: <i>Boolean</i>. Conditionally render the tab",
-                  "<strong>id</strong>: <i>String</i>. Unique id",
-                  "<strong>text</strong>: <i>String</i>. Tab title",
-                  "<strong>icon</strong>: <i>String</i>. Remixicon key",
-                  "<strong>method</strong>: <i>Symbol</i>. Any function rails understands",
-                  "<strong>args</strong>: <i>Array</i>. Arguments for the previous method"
+                  t("decidim.design.helpers.tab_panels_usage_description"),
+                  t("decidim.design.helpers.tab_panels_usage_description_html"),
+                  t("decidim.design.helpers.tab_panels_usage_description_id_html"),
+                  t("decidim.design.helpers.tab_panels_usage_description_tab_html"),
+                  t("decidim.design.helpers.tab_panels_usage_description_remixicon_html"),
+                  t("decidim.design.helpers.tab_panels_usage_description_rails_html"),
+                  t("decidim.design.helpers.tab_panels_usage_description_arguments_html")
                 ]
               },
               {
@@ -42,7 +43,50 @@ module Decidim
                 ),
                 cell_snippet: {
                   cell: "decidim/tab_panels",
-                  args: [tab_panels_items]
+                  args: [tab_panels_items],
+                  call_string: [<<-TEXT1, <<-TEXT2]
+  cell(
+      "decidim/tab_panels",
+      [
+        {
+          enabled: true,
+          id: "button",
+          text: "Button",
+          icon: resource_type_icon_key("images"),
+          method: :cell,
+          args: ["decidim/button", { text: "Send" }]
+        },
+        {
+          enabled: true,
+          id: "announce",
+          text: "Announcement",
+          icon: resource_type_icon_key("documents"),
+          method: :cell,
+          args: ["decidim/announcement", "I am an announcement"]
+        }
+      ]
+    )
+                  TEXT1
+  cell(
+      "decidim/tab_panels",
+      [
+        {
+          enabled: true,
+          id: "icon",
+          text: "Icon",
+          method: :icon,
+          args: ["question-line", { class: "w-4 h-4" }]
+        },
+        {
+          enabled: true,
+          id: "text",
+          text: "Plain",
+          method: :content_tag,
+          args: ["p", "plain text", { class: "text-left" }]
+        }
+      ]
+    )
+                  TEXT2
                 }
               }
             ]
@@ -67,7 +111,7 @@ module Decidim
             text: "Button",
             icon: resource_type_icon_key("images"),
             method: :cell,
-            args: ["decidim/button", { text: "Send" }]
+            args: ["decidim/button", { text: t("decidim.design.helpers.send") }]
           },
           {
             enabled: true,
@@ -75,7 +119,7 @@ module Decidim
             text: "Announcement",
             icon: resource_type_icon_key("documents"),
             method: :cell,
-            args: ["decidim/announcement", "I am an annoucement"]
+            args: ["decidim/announcement", t("decidim.design.components.announcement.iam_an_announcement")]
           }
         ]
       end

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

@@ -11,8 +11,8 @@ module Decidim
               {
                 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"
+                  t("decidim.design.foundations.typography.typefaces_description_1"),
+                  t("decidim.design.foundations.typography.typefaces_description_2")
                 ]
               },
               {
@@ -65,7 +65,8 @@ module Decidim
             contents: [
               {
                 type: :table,
-                options: { headings: ["Size", "Layout cols", "~ Characters per line"] },
+                options: { headings: [t("decidim.design.foundations.typography.headings.size"), t("decidim.design.foundations.typography.headings.layout"),
+                                      t("decidim.design.foundations.typography.headings.characters")] },
                 items: typography_table(
                   { type: "readability", size: "text-xl", layout: 6, chars: 81 },
                   { type: "readability", size: "text-lg", layout: 6, chars: 90 },

data/app/packs/entrypoints/decidim_design.js

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

data/app/packs/stylesheets/_datepicker.scss

@@ -0,0 +1,9 @@
+.datepicker {
+  &__datepicker-row {
+    @apply bottom-10 relative h-0;
+  }
+
+  &__help-text-container {
+    @apply bottom-10 h-0;
+  }
+}

data/app/packs/stylesheets/design.scss

@@ -1,3 +1,5 @@
+@import "tom-select/dist/scss/tom-select";
+
 .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;
 
@@ -105,6 +107,10 @@
 .design__table {
   @apply w-full text-center text-sm text-gray-2;
 
+  [class*="card"] {
+    @apply text-left;
+  }
+
   --cell-width: ;
 
   thead {

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

@@ -1,27 +1,28 @@
 <% content_for :heading do %>
-  Accordions
+  <%= t(".title") %>
 <% 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>.
+  <% accordions_description_link = "https://github.com/jonathanlevaillant/a11y-accordion-component" %>
+  <%= t(".description_accordions_html", link_code: link_to(accordions_description_link, accordions_description_link, target: "_blank", rel: "noopener noreferrer")) %>
 <% end %>
 
 <% content_for :toc do %>
-  <a href="#example">Demo</a>
-  <a href="#usage">Usage</a>
+  <a href="#example"><%= t(".demo") %></a>
+  <a href="#usage"><%= t(".usage") %></a>
 <% end %>
 
 <section id="demo" class="design__section">
-  <h2>Demo</h2>
+  <h2><%= t(".demo") %></h2>
 
-  <p>Throughout the application the accordions are used, mainly, to show/hide content in tabs or fold/unfold visible texts.</p>
+  <p><%= t(".demo_description") %></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 %>
+            <%= t(".trigger") %> <%= tab %>
           </button>
         </li>
       <% end %>
@@ -29,35 +30,36 @@
 
     <% 3.times do |panel| %>
       <div id="panel-1-<%= panel %>" class="py-8 text-sm font-italic">
-        Content of the panel <%= panel %>
+        <%= t(".content_panel") %> <%= panel %>
       </div>
     <% end %>
   </div>
 </section>
 
 <section id="usage" class="design__section">
-  <h2>Usage</h2>
+  <h2><%= t(".usage") %></h2>
 
-  <p>An accordion requires at least three elements:</p>
+  <p><%= t(".usage_p") %></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><%= t(".usage_p_1_html") %></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><%= t(".usage_p_2_html") %></p>
 
-  <p>3. A hideable element, whose <code>id</code> matches the data-controls value the trigger refers to.</p>
+  <p><%= t(".usage_p_3_html") %></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>
+    <% github_link = "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js" %>
+    <p><%= t(".github_source_html", github_link: link_to("decidim-core/app/packs/src/decidim/a11y.js", github_link, target: "_blank", rel: "noopener noreferrer")) %></p>
 
     <code>
-      <textarea rows="8">
+      <textarea spellcheck="false" rows="8">
 <div data-component="accordion" id="example-accordion">
   <button id="trigger" data-controls="panel">
-    Trigger
+    <%= t(".trigger") %>
   </button>
 
   <div id="panel" aria-hidden="true">
-    Panel
+    <%= t(".panel") %>
   </div>
 </div>
       </textarea>

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

@@ -19,7 +19,7 @@
     </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="author__container" 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;>

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

@@ -18,7 +18,7 @@
   </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="author__container" 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;>

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

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Activities
+  <%= t(".activities") %>
 <% end %>
 
 <% content_for :toc do %>

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

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Address
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

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

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Announcement
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

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

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Author
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

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

@@ -1,9 +1,9 @@
 <% content_for :heading do %>
-  Buttons
+ <%= t(".title") %>
 <% end %>
 
 <% content_for :description do %>
-  Buttons are built using different combinations of CSS classes: the <code>button</code> class, a size and a color.
+  <%= t(".description_html") %>
 <% end %>
 
 <% content_for :toc do %>

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

@@ -20,7 +20,7 @@
       €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">
+        <button class="button w-full button__transparent-secondary button__sm" 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>

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

@@ -13,7 +13,7 @@
       <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="author__container" 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; />

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

@@ -7,7 +7,7 @@
       <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="author__container" 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; />

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

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Cards
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>