decidim-design 0.30.3 → 0.31.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5186c124f3f82b6c6b426632b5670f5caa6337521d78054dfdb31bd8b5a26b18
-  data.tar.gz: 5443587d4563be612fd0159b15475d507d30925a6220f3c2dd4629b36d7dfb79
+  metadata.gz: 25ad5c9d038b21bcaccb85a93821ef11876af2982e045e02f42dbd0ebfd2dfdc
+  data.tar.gz: 92059b3a899e91a3c50a4e6842d5b4feedf33e73d7647c2c1604b4da7299f0a4
 SHA512:
-  metadata.gz: c99864956c8da9dcf79b3b74c25c12ca864c4be07c9cb01eab37ce1d1fde4c1aa97b988889167d417ac810a729c6b565fe9fc0fc71797d37c2506f0cffeb754f
-  data.tar.gz: 5a11d99b653bf66472af7db864b5a554779910247e2a995c729035a3b5fff5b34f97daa0fc0a9c6796ab4ac7f139936b42ddb3f1b356be3c51b19b52ca729535
+  metadata.gz: f29c7f07c084539afce9651a41ba7fea004751924160bd857e07efaa19780d74f07559ef24b1a44031b170666858c9af01b6216bbc36cfd2fc7b747339b5b8ad
+  data.tar.gz: e30c878dc9a919e0114f24dabeb626fbd2fc1b37ae3bf406e992f1498df22c5634f1053eab5341aaa0288bf7ed0064a6e9ac8387467a35b5368b3ea25bf4cff0

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

@@ -48,7 +48,8 @@ module Decidim
                   { 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") }
+                  { value: "#155ABF", name: "secondary", rgba: "rgba(21,90,191,1)", usage: t("decidim.design.helpers.usage_typography_4") },
+                  { value: "#a3a3a3", name: "neutral-400", rgba: "rgba(163,163,163,1)", usage: t("decidim.design.helpers.usage_typography_5") }
                 )
               },
               {

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

@@ -18,7 +18,7 @@ module Decidim
                 options: { headings: [t("decidim.design.helpers.share_button")] },
                 cell_snippet: {
                   cell: "decidim/share_widget",
-                  args: [{}],
+                  args: [shareable],
                   call_string: 'cell("decidim/share_widget", resource)'
                 }
               }
@@ -26,6 +26,30 @@ module Decidim
           }
         ]
       end
+
+      def shareable
+        ShareableResource.new
+      end
+
+      class ShareableResourcePresenter < SimpleDelegator
+        def title(*)
+          __getobj__.title
+        end
+      end
+
+      class ShareableResource
+        def initialize
+          @title = "Shareable Resource"
+        end
+
+        def presenter = ShareableResourcePresenter.new(self)
+
+        def to_sgid = "#"
+
+        def [](key); end
+
+        attr_accessor :title
+      end
     end
   end
 end

data/app/packs/stylesheets/design.scss

@@ -1,4 +1,4 @@
-@import "tom-select/dist/scss/tom-select";
+@use "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;
@@ -72,8 +72,7 @@
   @apply pb-10 border-b border-background;
 }
 
-.design__heading__description,
-.design__section {
+.design__heading__description {
   @apply mt-10 text-gray-2 text-md font-normal [&>*+*]:mt-4 [&_a]:underline;
 }
 

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

@@ -17,7 +17,7 @@
 
   <p><%= t(".demo_description") %></p>
 
-  <div data-component="accordion" data-multiselectable="false" id="example-accordion-1">
+  <div data-controller="accordion" data-multiselectable="false" id="example-accordion-1">
     <ul class="tab-x-container">
       <% 3.times do |tab| %>
         <li>
@@ -53,7 +53,7 @@
 
     <code>
       <textarea spellcheck="false" rows="8">
-<div data-component="accordion" id="example-accordion">
+<div data-controller="accordion" id="example-accordion">
   <button id="trigger" data-controls="panel">
     <%= t(".trigger") %>
   </button>

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" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+        <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<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;>
@@ -45,7 +45,7 @@
           <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">
+          " aria-describedby="0f99qi-tooltip" data-yeti-box="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") %>">

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" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+      <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<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;>
@@ -44,7 +44,7 @@
         <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">
+        " aria-describedby="j1iaa9-tooltip" data-yeti-box="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") %>">

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

@@ -15,7 +15,7 @@
         <%= icon("wechat-line") %>
         0
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

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" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+          <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<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; />
@@ -40,7 +40,7 @@
             <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">
+            " aria-describedby="5filn3-tooltip" data-yeti-box="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>
@@ -57,7 +57,7 @@
         <%= icon("wechat-line") %>
         2
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

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" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+          <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<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; />
@@ -31,7 +31,7 @@
             <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">
+            " aria-describedby="t17dfd-tooltip" data-yeti-box="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>
@@ -44,7 +44,7 @@
         <%= icon("wechat-line") %>
         0
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

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

@@ -20,7 +20,7 @@
 
   <p><%= t("decidim.design.helpers.dropdowns_demo_1_description") %></p>
 
-  <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element" data-auto-close="true">
+  <button id="dropdown-trigger-element" data-controller="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" %>

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

@@ -40,8 +40,8 @@
 
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>"
-        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> hide_help="true" <% end %>>
+        input type="<%= element %>"  <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> hide_help="true" data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -80,9 +80,9 @@
   <div class="form__wrapper">
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>"
+        input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
         <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
-        <input type="<%= element %>">
+        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -124,8 +124,8 @@
   <div class="form__wrapper">
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>" disabled
-        <input type="<%= element %>" disabled>
+        input type="<%= element %>" disabled <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" disabled <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -166,8 +166,8 @@
 
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>" required
-        <input type="<%= element %>" required>
+        input type="<%= element %>" required <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" required <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
         <div class="form-error">Lorem ipsum dolor sit amet.</div>
       </label>
     <% end %>
@@ -201,23 +201,23 @@
     <%= cell "decidim/announcement", t(".min_max_length_description") %>
 
     <label>
-      input type="text" maxlength="20"
-      <input type="text" maxlength="20">
+      input type="text" maxlength="20" data-controller="character-counter"
+      <input type="text" maxlength="20" data-controller="character-counter">
     </label>
 
     <label>
-      textarea maxlength="20"
-      <textarea cols="30" rows="10" maxlength="20"></textarea>
+      textarea maxlength="20" data-controller="character-counter"
+      <textarea cols="30" rows="10" maxlength="20" data-controller="character-counter"></textarea>
     </label>
 
     <label>
-      input type="text" minlength="5" maxlength="20"
-      <input type="text" minlength="5" maxlength="20">
+      input type="text" minlength="5" maxlength="20" data-controller="character-counter"
+      <input type="text" minlength="5" maxlength="20" data-controller="character-counter">
     </label>
 
     <label>
-      textarea minlength="5" maxlength="20"
-      <textarea cols="30" rows="10" minlength="5" maxlength="20"></textarea>
+      textarea minlength="5" maxlength="20" data-controller="character-counter"
+      <textarea cols="30" rows="10" minlength="5" data-controller="character-counter" maxlength="20"></textarea>
     </label>
   </div>
 </section>
@@ -229,8 +229,8 @@
     <%= cell "decidim/announcement", t(".emojis_description") %>
 
     <label>
-      textarea data-input-emoji="true"
-      <textarea cols="30" rows="10" data-input-emoji="true"></textarea>
+      textarea data-controller="emoji"
+      <textarea cols="30" rows="10" data-controller="emoji"></textarea>
     </label>
   </div>
 </section>
@@ -242,8 +242,8 @@
     <p><%= t(".multiselect_description_html") %></p>
 
     <label>
-      input type="text" class="js-tags-container" value="abc, 123"
-      <input type="text" class="js-tags-container" value="abc, 123">
+      input type="text" data-controller="input-tags" value="abc, 123"
+      <input type="text" data-controller="input-tags" value="abc, 123">
     </label>
   </div>
 </section>

data/app/views/decidim/design/foundations/accessibility.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :description do %>
-  <p><%= t(".decidim_follows_html", link: link_to(t(".wcag_guidelines"), "https://www.w3.org/WAI/standards-guidelines/wcag/", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".decidim_follows_html") %></p>
 <% end %>
 
 <% content_for :toc do %>
@@ -23,7 +23,7 @@
 
   <p><%= t(".illogical_heading_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".illogical_heading_order"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_illogical_heading_order", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_illogical_heading_order", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="unique-h1" class="design__section">
@@ -31,7 +31,7 @@
 
   <p><%= t(".unique_h1_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".unique_h1"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_unique_h1_on_every_page", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_unique_h1_on_every_page", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="one-heading" class="design__section">
@@ -39,7 +39,7 @@
 
   <p><%= t(".important_sections_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".important_sections_heading"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_heading_on_important_sections", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_heading_on_important_sections", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="color-contrast" class="design__section">
@@ -47,7 +47,7 @@
 
   <p><%= t(".color_contrast_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".color_contrast"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_color_contrast ", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_color_contrast ", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="links-buttons" class="design__section">
@@ -55,7 +55,7 @@
 
   <p><%= t(".links_and_buttons_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".color_contrast"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_links_and_buttons", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_links_and_buttons", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="a11y-labels" class="design__section">
@@ -63,7 +63,7 @@
 
   <p><%= t(".accessibility_labels_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".accessibility_labels"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_accessibility_labels", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_accessibility_labels", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="adjacent-links" class="design__section">
@@ -71,7 +71,7 @@
 
   <p><%= t(".adjacent_links_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".adjacent_links_header"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_adjacent_links_for_the_same_resource", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_adjacent_links_for_the_same_resource", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="dynamic-changes" class="design__section">
@@ -79,7 +79,7 @@
 
   <p><%= t(".dynamic_changes_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".dynamic_changes_header"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_dynamic_functionality_changes_the_page_context_unintuitively", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_dynamic_functionality_changes_the_page_context_unintuitively", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="aria" class="design__section">
@@ -87,7 +87,7 @@
 
   <p><%= t(".use_aria_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".use_aria_header"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_use_aria_attributes_where_possible", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_use_aria_attributes_where_possible", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="elements-hidden" class="design__section">
@@ -95,5 +95,5 @@
 
   <p><%= t(".elements_hidden_paragraph") %></p>
 
-  <p><%= t(".learn_more_about_html", link: link_to(t(".elements_hidden_header"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_elements_hidden_from_the_accessibility_api", target: "_blank", rel: "noopener noreferrer")) %></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_elements_hidden_from_the_accessibility_api", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>

data/app/views/layouts/decidim/design/_head.html.erb

@@ -1,4 +1,4 @@
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
 <%= javascript_pack_tag "decidim_core", "decidim_design", defer: false %>
 
 <%= append_stylesheet_pack_tag "decidim_overrides", media: "all" %>

data/app/views/layouts/decidim/design/_layout.html.erb

@@ -53,7 +53,7 @@
     </ul>
   </aside>
 
-  <main id="content">
+  <main>
     <% if content_for?(:heading) %>
       <section class="design__heading__section">
         <h1 class="design__heading__5xl">

data/app/views/layouts/decidim/design/application.html.erb

@@ -1,17 +1,13 @@
 <% add_decidim_page_title(strip_tags(yield(:heading).lines.last).strip) if content_for?(:heading) %>
 <% add_decidim_page_title("Decidim Design Guide") %>
 <!DOCTYPE html>
-<html lang="<%= I18n.locale %>">
+<html>
   <head>
     <title><%= decidim_page_title %></title>
     <%= render partial: "layouts/decidim/design/head" %>
   </head>
 
   <body class="relative text-black text-md form-defaults">
-    <!--noindex--><!--googleoff: all-->
-    <%= link_to t("skip_button", scope: "decidim.accessibility"), "#content", class: "layout-container__skip" %>
-    <!--googleon: all--><!--/noindex-->
-
     <%= render layout: "layouts/decidim/design/layout" do %>
       <%= yield %>
     <% end %>

data/config/assets.rb

@@ -2,7 +2,7 @@
 
 base_path = File.expand_path("..", __dir__)
 
-Decidim::Webpacker.register_path("#{base_path}/app/packs")
-Decidim::Webpacker.register_entrypoints(
+Decidim::Shakapacker.register_path("#{base_path}/app/packs")
+Decidim::Shakapacker.register_entrypoints(
   decidim_design: "#{base_path}/app/packs/entrypoints/decidim_design.js"
 )

data/config/brakeman.ignore

@@ -0,0 +1,51 @@
+{
+  "ignored_warnings": [
+    {
+      "warning_type": "Dynamic Render Path",
+      "warning_code": 15,
+      "fingerprint": "7a3411e36cd1e0fe2644f8be0eafd08ce2b1f5cacab6a6e88d9598671a3ed523",
+      "check_name": "Render",
+      "message": "Render path contains parameter value",
+      "file": "app/controllers/decidim/design/components_controller.rb",
+      "line": 15,
+      "link": "https://brakemanscanner.org/docs/warning_types/dynamic_render_path/",
+      "code": "render(action => \"decidim/design/#{controller_name}/#{params[:id]}\", {})",
+      "render_path": null,
+      "location": {
+        "type": "method",
+        "class": "Decidim::Design::ComponentsController",
+        "method": "show"
+      },
+      "user_input": "params[:id]",
+      "confidence": "Medium",
+      "cwe_id": [
+        22
+      ],
+      "note": ""
+    },
+    {
+      "warning_type": "Dynamic Render Path",
+      "warning_code": 15,
+      "fingerprint": "ef8d78c5d19841fda160e60f935722ac88bb1be92003164a8e63fd7b51e8bcc5",
+      "check_name": "Render",
+      "message": "Render path contains parameter value",
+      "file": "app/controllers/decidim/design/foundations_controller.rb",
+      "line": 15,
+      "link": "https://brakemanscanner.org/docs/warning_types/dynamic_render_path/",
+      "code": "render(action => \"decidim/design/#{controller_name}/#{params[:id]}\", {})",
+      "render_path": null,
+      "location": {
+        "type": "method",
+        "class": "Decidim::Design::FoundationsController",
+        "method": "show"
+      },
+      "user_input": "params[:id]",
+      "confidence": "Medium",
+      "cwe_id": [
+        22
+      ],
+      "note": ""
+    }
+  ],
+  "brakeman_version": "7.0.0"
+}

data/config/locales/ar.yml

@@ -1 +1,7 @@
+---
 ar:
+  decidim:
+    design:
+      foundations:
+        accessibility:
+          here_link: هنا

data/config/locales/bg.yml

@@ -14,7 +14,6 @@ bg:
           trigger: Задействане
           usage: Употреба
           usage_p: '"Акордеонът" изисква поне три елемента'
-          usage_p_1_html: 1. Обвивка <code>div</code>, с атрибута на данните <code>data-component="accordion"</code>, над всички налични задействащи елементи и панели.
           usage_p_2_html: 2. Задействащ елемент, с който потребителят може да действа (като бутон), сочещ към сгъваемия елемент чрез <code>data-controls="panel"</code>, където <i>panel</i> е <code>id </code> на панела.
           usage_p_3_html: 3. Елемент с възможност за скриване, чийто <code>id</code> съвпада със стойността на контролите на данните, към която препраща задействащия елемент.
         activities:
@@ -87,18 +86,21 @@ bg:
           adjacent_links_paragraph: Ако един и същ ресурс има множество съседни линкове, сочещи към него, за такива потребители е трудно да прегледат страницата, тъй като може да се наложи да преминат през множество връзки, за да стигнат до следващия ресурс.
           color_contrast: Цветови контраст
           color_contrast_paragraph: Когато създавате потребителски интерфейси или променяте цветовете, винаги се уверявайте, че не нарушавате достъпността с вашите промени. Можете да използвате инструмента за проверка на цветовия контраст, за да се уверите, че вашите цветове имат достатъчен контраст спрямо цвета на фона, на който се показват.
+          decidim_follows_html: Civil Power следва <u>Указанията за достъпност на уеб съдържанието (WCAG) 2.1</u>
           dynamic_changes_header: Динамичната функционалност променя контекста на страницата неинтуитивно
           dynamic_changes_paragraph: Промените във формуляра не трябва автоматично да променят контекста на страницата.
           elements_hidden: Елементите са скрити
           elements_hidden_header: Елементи, скрити от API за достъпност
           elements_hidden_paragraph: За да скриете елемент от помощни технологии, използвайте атрибута aria-hidden="true" върху него.
           heading_on: Заглавие на важни раздели
+          here_link: тук
           illogical_heading_order: Нелогичен ред на заглавията
           illogical_heading_paragraph: Всяка страница трябва да има логичен ред на заглавията, когато се използват елементите на заглавието <h1>, <h2>, <h3>, <h4>, <h5> и <h6>.
           important_sections_heading: Заглавие на важни раздели
           important_sections_paragraph: Изключително важно е всеки важен раздел на страницата да има заглавие, за да можете по-лесно да разберете какви важни раздели има на страницата, просто като разглеждате заглавията.
           links_and_buttons: Линкове и бутони
           links_and_buttons_paragraph: Елементите (anchor) за "закотвяне" (т.е. линкове) са предназначени да свързват към различни страници или да закотвят позиции в страницата. Ако елементът трябва да, например, отворите някакъв скрит елемент на тази страница, вместо това трябва да използвате елемента <button>.
+          see_further_info_html: Вижте допълнителна информация %{link}
           unique_h1: Уникален H1
           unique_h1_paragraph: Всяка страница трябва да има уникално заглавие H1
           use_aria: Използвайте ARIA
@@ -182,7 +184,6 @@ bg:
         conference_s: Конференция S
         conferences: Конференции
         context: Контекст
-        context_description: Тази клетка показва информация за потребителя. Това е визуална помощ за идентифициране на създателя на ресурса/съдържанието. Задържането на курсора на мишката показва подсказка с допълнителна информация и връзки към неговия профил.
         context_description_2: За ресурси тази клетка се появява под основното заглавие. За друго съдържание се появява до самото съдържание.
         debate_l: Дебат L
         debate_s: Дебат S
@@ -203,7 +204,6 @@ bg:
         dropdowns_description_html: Падащите менюта са функция на javascript, достъпна благодарение на външна библиотека, наречена %{link}.
         dropdowns_usage_1_description: 2. Елемент с възможност за скриване, чийто <code>id</code> съвпада с целевата стойност на данните, към която препраща тригерът.
         dropdowns_usage_description: 'Падащото меню изисква два елемента:'
-        dropdowns_usage_description_html: 1. Елемент с възможност за действие от страна на потребителя с атрибутите на данни <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Упростено описание на ресурса
         dummy_title: Упростено заглавие на ресурса
         follow_button: Бутон за следване