decidim-design 0.28.0.rc4

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

@@ -0,0 +1,195 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module CardsHelper
+      # rubocop:disable Layout/LineLength
+      def cards_sections
+        [
+          {
+            id: "types",
+            contents: [
+              {
+                values: section_subtitle(title: "Card L", label: "list")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l"
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l"
+              },
+              {
+                values: section_subtitle(title: "Card G", label: "grid")
+              },
+              {
+                type: :partial,
+                layout: "decidim/design/shared/card_grid",
+                template: ["decidim/design/components/cards/static-card-g", "decidim/design/components/cards/static-card-g"]
+              },
+              {
+                values: section_subtitle(title: "Card S", label: "search")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-s"
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-s"
+              }
+            ]
+          },
+          {
+            id: "variations",
+            contents: [
+              {
+                type: :text,
+                values: ["Each card will look like different regarding the properties of the resource displayed. You can override such behaviour in the specific cell."]
+              },
+              {
+                values: section_subtitle(title: "Metadata items")
+              },
+              {
+                type: :partial,
+                layout: "decidim/design/shared/card_grid",
+                template: ["decidim/design/components/cards/static-card-g-metadata", "decidim/design/components/cards/static-card-g-metadata-2"]
+              },
+              {
+                type: :text,
+                values: ["Each resource define its own metadata items"]
+              },
+              {
+                values: section_subtitle(title: "Highlight")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-g-highlight"
+              },
+              {
+                type: :text,
+                values: ["Used by resources who allow to highlight"]
+              },
+              {
+                values: section_subtitle(title: "Image and description")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l-image"
+              },
+              {
+                type: :text,
+                values: ["Used by <i>Blogs</i> cards"]
+              },
+              {
+                values: section_subtitle(title: "Description")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l-description"
+              },
+              {
+                type: :text,
+                values: ["Used by <i>Debates</i> cards"]
+              },
+              {
+                values: section_subtitle(title: "Use different template for the image block")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l-meetings"
+              },
+              {
+                type: :text,
+                values: ["Used by <i>Meetings</i> cards"]
+              },
+              {
+                values: section_subtitle(title: "Use the extra_data block")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l-extra-data"
+              },
+              {
+                type: :text,
+                values: ["Used by <i>Accountability projects</i> cards. This card requires the module assets to display properly, i.e. <code>append_stylesheet_pack_tag \"decidim_accountability\"</code>"]
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/cards/static-card-l-extra-data-2"
+              },
+              {
+                type: :text,
+                values: ["Used by <i>Budget projects</i> cards. This card requires the module assets to display properly, i.e. <code>append_stylesheet_pack_tag \"decidim_budgets\"</code>"]
+              }
+            ]
+          },
+          {
+            id: "sourcecode",
+            contents: [
+              {
+                type: :table,
+                options: { headings: %w(Card Code Usage) },
+                items: cards_table(
+                  { name: "Card L (core)", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/card_l_cell.rb", usage: "--" },
+                  { name: "Card G (core)", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/card_g_cell.rb", usage: "--" },
+                  { name: "Card S (core)", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/card_s_cell.rb", usage: "--" },
+                  { name: "Result L", url: "https://github.com/decidim/decidim/blob/develop/decidim-accountability/app/cells/decidim/accountability/result_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-accountability/app/cells/decidim/accountability/results/show.erb#L3" },
+                  { name: "Post L", url: "https://github.com/decidim/decidim/blob/develop/decidim-blogs/app/cells/decidim/blogs/post_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-blogs/app/views/decidim/blogs/posts/index.html.erb#L16" },
+                  { name: "Project L", url: "https://github.com/decidim/decidim/blob/develop/decidim-budgets/app/cells/decidim/budgets/project_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-budgets/app/views/decidim/budgets/projects/_project.html.erb#L2" },
+                  { name: "Debate L", url: "https://github.com/decidim/decidim/blob/develop/decidim-debates/app/cells/decidim/debates/debate_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-debates/app/views/decidim/debates/debates/_debates.html.erb#L6" },
+                  { name: "Meeting L", url: "https://github.com/decidim/decidim/blob/develop/decidim-meetings/app/cells/decidim/meetings/meeting_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-meetings/app/views/decidim/meetings/shared/_meetings.html.erb#L20" },
+                  { name: "Collaborative Draft L",
+                    url: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/cells/decidim/proposals/collaborative_draft_l_cell.rb", usage: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/views/decidim/proposals/collaborative_drafts/_collaborative_drafts.html.erb#L10" },
+                  { name: "Proposal L", url: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/cells/decidim/proposals/proposal_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/views/decidim/proposals/proposals/_proposals.html.erb#L15" },
+                  { name: "Sortition L", url: "https://github.com/decidim/decidim/blob/develop/decidim-sortitions/app/cells/decidim/sortitions/sortition_l_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-sortitions/app/views/decidim/sortitions/sortitions/_sortitions.html.erb#L6" },
+                  { name: "Assembly G", url: "https://github.com/decidim/decidim/blob/develop/decidim-assemblies/app/cells/decidim/assemblies/assembly_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-assemblies/app/views/decidim/assemblies/assemblies/_collection.html.erb#L4" },
+                  { name: "Post G", url: "https://github.com/decidim/decidim/blob/develop/decidim-blogs/app/cells/decidim/blogs/post_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-blogs/app/cells/decidim/blogs/content_blocks/highlighted_posts/content.erb#L15" },
+                  { name: "Conference G", url: "https://github.com/decidim/decidim/blob/develop/decidim-conferences/app/cells/decidim/conferences/conference_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-conferences/app/views/decidim/conferences/conferences/index.html.erb#L30" },
+                  { name: "Election G", url: "https://github.com/decidim/decidim/blob/develop/decidim-elections/app/cells/decidim/elections/election_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-elections/app/views/decidim/elections/elections/_elections.html.erb#L13" },
+                  { name: "Voting G", url: "https://github.com/decidim/decidim/blob/develop/decidim-elections/app/cells/decidim/votings/voting_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-elections/app/views/decidim/votings/votings/_votings.html.erb#L14" },
+                  { name: "Initiative G", url: "https://github.com/decidim/decidim/blob/develop/decidim-initiatives/app/cells/decidim/initiatives/initiative_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-initiatives/app/views/decidim/initiatives/initiatives/_initiatives.html.erb#L12" },
+                  { name: "Process G",
+                    url: "https://github.com/decidim/decidim/blob/develop/decidim-participatory_processes/app/cells/decidim/participatory_processes/process_g_cell.rb", usage: "https://github.com/decidim/decidim/blob/develop/decidim-participatory_processes/app/views/decidim/participatory_processes/participatory_processes/_collection.html.erb#L5" },
+                  { name: "Process Group G",
+                    url: "https://github.com/decidim/decidim/blob/develop/decidim-participatory_processes/app/cells/decidim/participatory_processes/process_group_g_cell.rb", usage: "https://github.com/decidim/decidim/blob/develop/decidim-participatory_processes/app/views/decidim/participatory_process_groups/_participatory_process_group.html.erb#L1" },
+                  { name: "Proposal G", url: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/cells/decidim/proposals/proposal_g_cell.rb",
+                    usage: "https://github.com/decidim/decidim/blob/develop/decidim-proposals/app/views/decidim/proposals/proposals/_proposals.html.erb#L15" }
+                )
+              }
+            ]
+          }
+        ]
+      end
+      # rubocop:enable Layout/LineLength
+
+      def cards_table(*table_rows, **_opts)
+        table_rows.map do |table_cell|
+          [
+            table_cell[:name],
+            link_to(table_cell[:url].split("/").last, table_cell[:url], target: "_blank", class: "text-secondary underline", rel: "noopener"),
+            if table_cell[:usage].to_s.start_with?("http")
+              link_to(table_cell[:usage].split("/").last, table_cell[:usage], target: "_blank", class: "text-secondary underline", rel: "noopener")
+            else
+              table_cell[:usage]
+            end
+          ]
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ColorsHelper
+      def colors_sections
+        [
+          {
+            id: "base",
+            contents: [
+              {
+                type: :table,
+                options: { headings: ["Value", "Tailwind name", "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" }
+                )
+              }
+            ]
+          },
+          {
+            id: "state",
+            contents: [
+              {
+                type: :table,
+                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "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" }
+                )
+              }
+            ]
+          },
+          {
+            id: "main_colors",
+            contents: [
+              {
+                values: section_subtitle(title: "Typography and texts")
+              },
+              {
+                type: :table,
+                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "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" }
+                )
+              },
+              {
+                values: section_subtitle(title: "Background and borders")
+              },
+              {
+                type: :table,
+                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "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" }
+                )
+              },
+              {
+                values: section_subtitle(title: "Form elements")
+              },
+              {
+                type: :table,
+                options: { headings: ["Value", "Tailwind name", "Hex code", "RGBA code", "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" }
+                )
+              }
+            ]
+          }
+        ]
+      end
+
+      def colors_table(*table_rows, **_opts)
+        table_rows.map do |table_cell|
+          row = []
+          row << content_tag(:div, nil, class: "w-8 h-8 rounded shadow", style: "background-color: #{table_cell[:value]};")
+          row << table_cell[:name]
+          row << table_cell[:value] if table_cell[:rgba].present?
+          row << table_cell[:rgba] if table_cell[:rgba].present?
+          row << table_cell[:usage]
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module FollowHelper
+      def follow_sections
+        [
+          {
+            id: "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."]
+              },
+              {
+                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" }
+                ),
+                cell_snippet: {
+                  cell: "decidim/follow_button",
+                  args: [Decidim::User.first]
+                }
+              }
+            ]
+          }
+        ]
+      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/iconography_helper.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module IconographyHelper
+      include Decidim::IconHelper
+      include Decidim::SocialShareButtonHelper
+
+      def iconography_sections
+        (remix_icons + social_share_icons).sort_by { |section| section[:id] }
+      end
+
+      def iconography_table(table_rows)
+        options = { class: "mx-auto w-4 h-4 text-gray fill-current flex-none" }
+        table_rows.map do |table_cell|
+          row = []
+
+          row << icon(table_cell[:name], **options)
+          row << content_tag(:code, table_cell[:icon])
+          row << table_cell[:category]
+          row << table_cell[:description]
+
+          row
+        end
+      end
+
+      def remix_icons
+        Decidim.icons.categories.map do |category, values|
+          {
+            id: category,
+            contents: [
+              {
+                type: :table,
+                options: { headings: %w(Icon Code Category Description) },
+                items: iconography_table(values.sort_by { |v| v[:icon] })
+              }
+            ]
+          }
+        end
+      end
+
+      def social_share_icons
+        [
+          {
+            id: "social-share",
+            contents: [
+              {
+                type: :table,
+                options: { headings: %w(Icon Code Category Description) },
+                items: social_share_iconography_table
+              }
+            ]
+          }
+        ]
+      end
+
+      def social_share_iconography_table
+        options = { class: "mx-auto w-4 h-4 text-gray fill-current flex-none" }
+        Decidim.social_share_services_registry.manifests.map do |service|
+          row = []
+
+          row << render_social_share_icon(service, **options)
+          row << content_tag(:code, service.name)
+          row << "social-share"
+          row << t("decidim.shared.share_modal.share_to", service: service.name)
+
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ReportHelper
+      def report_sections
+        [
+          {
+            id: "usage",
+            contents: [
+              {
+                type: :text,
+                values: ["Report button launches a modal window to flag the current resource."]
+              },
+              {
+                type: :table,
+                options: { headings: ["Report Button"] },
+                items: report_table({}),
+                cell_snippet: {
+                  cell: "decidim/report_button",
+                  args: [Decidim::User.first]
+                }
+              }
+            ]
+          }
+        ]
+      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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ShareHelper
+      def share_sections
+        [
+          {
+            id: "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."]
+              },
+              {
+                type: :table,
+                options: { headings: ["Share Button"] },
+                items: share_table({}),
+                cell_snippet: {
+                  cell: "decidim/share_button",
+                  args: []
+                }
+              }
+            ]
+          }
+        ]
+      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

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module TabPanelsHelper
+      def tab_panels_sections
+        [
+          {
+            id: "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."
+                ]
+              }
+            ]
+          },
+          {
+            id: "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"
+                ]
+              },
+              {
+                type: :table,
+                options: { headings: %w(Display Values), style: "--cell-width: 50%;" },
+                items: tab_panels_table(
+                  { values: tab_panels_items },
+                  { values: tab_panels_items_alt }
+                ),
+                cell_snippet: {
+                  cell: "decidim/tab_panels",
+                  args: [tab_panels_items]
+                }
+              }
+            ]
+          }
+        ]
+      end
+
+      def tab_panels_table(*table_rows, **_opts)
+        table_rows.each_with_index.map do |table_cell, _ix|
+          row = []
+          row << { method: :cell, args: ["decidim/tab_panels", table_cell[:values]] }
+          row << content_tag(:pre, content_tag(:code, JSON.pretty_generate(table_cell[:values])), class: "text-left")
+          row
+        end
+      end
+
+      def tab_panels_items
+        [
+          {
+            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 annoucement"]
+          }
+        ]
+      end
+
+      def tab_panels_items_alt
+        [
+          {
+            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" }]
+          }
+        ]
+      end
+    end
+  end
+end