decidim-design 0.28.0.rc4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 33ba30809afe60f670af1852d42a7907b8be469ffe0258758bc7fcdb44f6e33e
+  data.tar.gz: 4d7b5f2110a21492e55f0f572e37aba6aff86d4bb14cf3cb837ad7e042c381f9
+SHA512:
+  metadata.gz: 11afb8f8ebd15a40f3ee4fe64b47c9d634737df2184ed923b4a700ac71ade1c50bf2f17effe21b6e85d844a082febf0a2d989e6accd3f529f77978d680035ea2
+  data.tar.gz: 2d479847014f448709b316fe3136522f8091f6bc60a2f495d3f6542e232ca021a8e4b8c3b5a40dcce15c17b3456b36351b7eea2be4dd3492e1525bbd9ffeb4f3

data/README.md

@@ -0,0 +1,29 @@
+# decidim-design
+
+The Design module implements the design guide for Decidim, a guide that includes all information related with the design of the platform.
+
+## Usage
+
+The design application index is available at `/design` path
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'decidim-design'
+```
+
+And then execute:
+
+```bash
+bundle
+```
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+## License
+
+See [Decidim](https://github.com/decidim/decidim).

data/Rakefile

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"

data/app/controllers/concerns/decidim/design/has_templates.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Decidim
+  module Design
+    # Common logic of design controllers
+    module HasTemplates
+      extend ActiveSupport::Concern
+
+      included do
+        def show
+          raise ActionController::RoutingError, "Not Found" unless lookup_context.exists?("decidim/design/#{controller_name}/#{params[:id]}")
+
+          render "decidim/design/#{controller_name}/#{params[:id]}"
+        end
+      end
+    end
+  end
+end

data/app/controllers/decidim/design/application_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    class ApplicationController < ::DecidimController
+      include NeedsOrganization
+
+      helper Decidim::MetaTagsHelper
+
+      helper_method :path_items
+
+      def path_items(path)
+        files = Dir.glob("#{gem_path}/app/views/decidim/design/#{path}/*.html.erb")
+
+        files.map do |file|
+          name = File.basename(file, ".html.erb")
+          { name:, path: send("#{path.singularize}_path", name) }
+        end
+      end
+
+      private
+
+      def gem_path
+        @gem_path ||= Bundler.load.specs.find { |spec| spec.name == "decidim-design" }.full_gem_path
+      end
+    end
+  end
+end

data/app/controllers/decidim/design/components_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    class ComponentsController < Decidim::Design::ApplicationController
+      include Decidim::ControllerHelpers
+      include Decidim::Design::HasTemplates
+
+      helper ButtonsHelper
+      helper CardsHelper
+      helper ShareHelper
+      helper AnnouncementHelper
+      helper AuthorHelper
+      helper ActivitiesHelper
+      helper TabPanelsHelper
+      helper ReportHelper
+      helper AddressHelper
+      helper FollowHelper
+    end
+  end
+end

data/app/controllers/decidim/design/foundations_controller.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    class FoundationsController < Decidim::Design::ApplicationController
+      include Decidim::ControllerHelpers
+      include Decidim::Design::HasTemplates
+
+      helper ColorsHelper
+      helper TypographyHelper
+      helper IconographyHelper
+    end
+  end
+end

data/app/controllers/decidim/design/home_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    class HomeController < Decidim::Design::ApplicationController
+      include Decidim::ControllerHelpers
+
+      def index; end
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ActivitiesHelper
+      def activities_sections
+        [
+          {
+            id: "demo",
+            contents: [
+              {
+                type: :text,
+                values: ["This cell receives a model of LastActivity items and displays the following elements:"]
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/activities/static-activities"
+              },
+              {
+                type: :text,
+                values: ["Used by the last activity page, in a content block and within the dropdowns."]
+              }
+            ]
+          },
+          {
+            id: "variations",
+            contents: [
+              {
+                type: :text,
+                values: ["Regarding the type of activity, the cell could show different content, reporting the distinct resources,
+                          whether belong to a participatory space or not, has an author or not."]
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/activities/static-activity"
+              }
+            ]
+          },
+          {
+            id: "sourcecode",
+            contents: [
+              {
+                type: :table,
+                options: { headings: %w(Cell Code) },
+                items: activities_table(
+                  { name: "Activities", url: "https://github.com/decidim/decidim/blob/develop/decidim-core/app/cells/decidim/activities_cell.rb" },
+                  { name: "Activitiy", url: "https://github.com/decidim/decidim/blob/develop/decidim-core/app/cells/decidim/activity_cell.rb" }
+                )
+              }
+            ]
+          }
+        ]
+      end
+
+      def activities_table(*table_rows, **_opts)
+        table_rows.map do |table_cell|
+          row = []
+          row << table_cell[:name]
+          row << link_to(table_cell[:url].split("/").last, table_cell[:url], target: "_blank", class: "text-secondary underline", rel: "noopener")
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module AddressHelper
+      def address_sections
+        [
+          {
+            id: "demo",
+            contents: [
+              {
+                type: :text,
+                values: [
+                  "Address cell receives a resource, and searches the geolocalizable attributes to render an specific markup."
+                ]
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/address/static-address-person"
+              },
+              {
+                type: :text,
+                values: [
+                  "Depending of the type of the content, the address could be an online url.
+                    For such cases, the displayed information is quite the same but shaped to fit."
+                ]
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/address/static-address-online"
+              }
+            ]
+          },
+          {
+            id: "sourcecode",
+            contents: [
+              {
+                type: :table,
+                options: { headings: %w(Cell Code) },
+                items: address_table(
+                  { name: "Address", url: "https://github.com/decidim/decidim/blob/develop/decidim-core/app/cells/decidim/address_cell.rb" }
+                )
+              }
+            ]
+          }
+        ]
+      end
+
+      def address_table(*table_rows, **_opts)
+        table_rows.map do |table_cell|
+          row = []
+          row << table_cell[:name]
+          row << link_to(table_cell[:url].split("/").last, table_cell[:url], target: "_blank", class: "text-secondary underline", rel: "noopener")
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module AnnouncementHelper
+      def announcement_sections
+        [
+          {
+            id: "callout_class",
+            contents: [
+              {
+                type: :text,
+                values: ["This attribute applies an status to the announcement. By default, it uses secondary color."]
+              },
+              {
+                type: :table,
+                options: { headings: ["Announcement", "Callout class"] },
+                items: announcement_table(
+                  { text: "I am an announcement", callout_class: nil },
+                  { text: "I am an announcement", callout_class: "alert" },
+                  { text: "I am an announcement", callout_class: "warning" },
+                  { text: "I am an announcement", callout_class: "success" }
+                ),
+                cell_snippet: {
+                  cell: "decidim/announcement",
+                  args: ["I am an annoucement"]
+                }
+              }
+            ]
+          },
+          {
+            id: "plain_text_vs_hash",
+            contents: [
+              {
+                type: :text,
+                values: ["You can provide as first argument both a plain text and a hash object"]
+              },
+              {
+                type: :table,
+                options: { headings: ["Announcement", "Callout class", "Argument"] },
+                items: announcement_table(
+                  { text: "I am just plain text", callout_class: "secondary", argument: '"I am just plain text"' },
+                  { text: { title: "This is the title", body: "This is the body" }, callout_class: "secondary",
+                    argument: '{ title: "This is the title", body: "This is the body" }' },
+                  { text: { title: "This is the title", body: "This is the body" }, callout_class: "warning",
+                    argument: '{ text: { title: "This is the title", body: "This is the body" }, callout_class: "warning" }' },
+                  { text: { title: "This is the title", body: "This is the body" }, callout_class: "alert",
+                    argument: '{ text: { title: "This is the title", body: "This is the body" }, callout_class: "alert" }' },
+                  { text: { title: "This is the title", body: "This is the body" }, callout_class: "success",
+                    argument: '{ text: { title: "This is the title", body: "This is the body" }, callout_class: "success" }' }
+                ),
+                cell_snippet: {
+                  cell: "decidim/announcement",
+                  args: [{ title: "This is the title", body: "This is the body" }]
+                }
+              }
+            ]
+          }
+        ]
+      end
+
+      def announcement_table(*table_rows, **_opts)
+        table_rows.each_with_index.map do |table_cell, _ix|
+          row = []
+          row << { method: :cell, args: ["decidim/announcement", table_cell[:text], { callout_class: table_cell[:callout_class] }] }
+          row << table_cell[:callout_class] if table_cell[:callout_class].present?
+          row << table_cell[:argument] if table_cell[:argument].present?
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ApplicationHelper
+      include Decidim::IconHelper
+
+      # For the moment keep this as a constant and later decide where to move
+      # this
+      RELEASE_ID = "develop"
+
+      def section_title(section)
+        content_tag(:h2, section_text(section))
+      end
+
+      def section_subtitle(section)
+        content_tag(:h3, section_text(section))
+      end
+
+      def section_text(section)
+        title = section[:title] || section[:id]&.titleize
+        return title if section[:label].blank?
+
+        title += content_tag(:span, section[:label], class: "label")
+        title.html_safe
+      end
+
+      def render_content(content)
+        case content[:type]
+        when :text
+          html = ""
+          content[:values].each do |value|
+            html += content_tag(:p, value.html_safe, class: content[:class])
+          end
+          html.html_safe
+        when :table
+          render partial: "decidim/design/shared/table", locals: content.slice(:items).merge(content[:options] || {})
+        when :partial
+          partial = render_partial(content)
+
+          return partial if content[:layout].blank?
+
+          render layout: content[:layout] do
+            partial.html_safe
+          end
+        else
+          content[:values].to_s.html_safe
+        end
+      end
+
+      def render_partial(content)
+        if content[:template].is_a?(Array)
+          templates = ""
+          content[:template].each do |value|
+            templates += render partial: value, locals: content[:locals]
+          end
+          return templates
+        end
+
+        render partial: content[:template], locals: content[:locals]
+      end
+
+      def render_cell_snippet(content)
+        return "" if content[:cell_snippet].blank?
+
+        render partial: "decidim/design/shared/cell_snippet", locals: cell_snippet_locals(content[:cell_snippet][:cell], content[:cell_snippet][:args])
+      end
+
+      def cell_snippet_locals(cell, args)
+        path = args.delete(:path) || File.join("decidim-core/app/cells/", cell)
+        {
+          text: path,
+          url: "https://github.com/decidim/decidim/blob/#{RELEASE_ID}/#{path}_cell.rb",
+          cell:,
+          args:
+        }
+      end
+
+      def render_row(row)
+        if row.is_a?(Array)
+          html = ""
+          row.each do |cell|
+            html += render_cell(cell)
+          end
+          html.html_safe
+        end
+      end
+
+      def render_cell(cell)
+        content_tag(:td) do
+          if cell.is_a?(Hash)
+            send(cell[:method], *cell[:args]).to_s
+          else
+            cell
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module AuthorHelper
+      def author_sections
+        [
+          {
+            id: "context",
+            contents: [
+              {
+                type: :text,
+                values: [
+                  "This cell display some information about a user. It a visual help to identify the resource/content creator.
+                    Hovering with the mouse displays a tooltip with further info and links to its profile",
+                  "For resources, this cell appears beneath the main heading. For other contents, it appears next to the content itself."
+                ]
+              }
+            ]
+          },
+          {
+            id: "variations",
+            contents: [
+              {
+                type: :text,
+                values: ["There are three different versions of this cell. Each one fits better regarding the context it is being displayed."]
+              },
+              {
+                values: section_subtitle(title: "Default")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/author/static-default"
+              },
+              {
+                type: :text,
+                values: ["Calling the cell with no extra arguments, but the user itself."]
+              },
+              {
+                values: section_subtitle(title: "Compact")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/author/static-compact"
+              },
+              {
+                type: :text,
+                values: ["This author version is the common way to identify the resource creator."]
+              },
+              {
+                values: section_subtitle(title: "Avatar")
+              },
+              {
+                type: :partial,
+                template: "decidim/design/components/author/static-avatar"
+              },
+              {
+                type: :text,
+                values: ["It is used when there are narrow spaces, where the author is a secondary information."]
+              }
+            ]
+          },
+          {
+            id: "source_code",
+            contents: [
+              type: :table,
+              options: { headings: %w(Card Code Usage) },
+              items: author_table(
+                { name: "Default", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/author",
+                  usage: "https://github.com/decidim/decidim/blob/develop/decidim-core/app/cells/decidim/card_l/author.erb" },
+                { name: "Compact", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/author",
+                  usage: "https://github.com/decidim/decidim/blob/develop/decidim-blogs/app/views/decidim/blogs/posts/show.html.erb" },
+                { name: "Avatar", url: "https://github.com/decidim/decidim/tree/develop/decidim-core/app/cells/decidim/author", usage: "https://github.com/decidim/decidim/blob/develop/decidim-core/app/cells/decidim/endorsers_list/show.erb" }
+              )
+            ]
+          }
+        ]
+      end
+
+      def author_table(*table_rows, **_opts)
+        table_rows.map do |table_cell|
+          row = []
+          row << table_cell[:name]
+          row << link_to(table_cell[:url].split("/").last, table_cell[:url], target: "_blank", class: "text-secondary underline", rel: "noopener")
+          row << link_to(table_cell[:usage].split("/").last, table_cell[:usage], target: "_blank", class: "text-secondary underline", rel: "noopener")
+          row
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Design
+    module ButtonsHelper
+      def buttons_sections
+        [
+          {
+            id: "sizes",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__primary button__xs" },
+                  { button_classes: "button button__primary button__sm" },
+                  { button_classes: "button button__primary button__lg" },
+                  { button_classes: "button button__primary button__xl" }
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__primary button__xs" }] }
+              }
+            ]
+          },
+          {
+            id: "colors",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__lg button__primary" },
+                  { button_classes: "button button__lg button__secondary" },
+                  { button_classes: "button button__lg button__tertiary" }
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__primary" }] }
+              }
+            ]
+          },
+          {
+            id: "transparent",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__lg button__transparent-primary" },
+                  { button_classes: "button button__lg button__transparent-secondary" },
+                  { button_classes: "button button__lg button__transparent-tertiary" }
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__transparent-primary" }] }
+              },
+              {
+                type: :text,
+                values: ["In case of a darker background:"]
+              },
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__lg button__transparent" },
+                  background: true
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__transparent" }] }
+              }
+            ]
+          },
+          {
+            id: "text",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__lg button__text" },
+                  { button_classes: "button button__lg button__text-primary" },
+                  { button_classes: "button button__lg button__text-secondary" },
+                  { button_classes: "button button__lg button__text-tertiary" }
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__text" }] }
+              }
+            ]
+          },
+          {
+            id: "icons",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  { button_classes: "button button__lg button__secondary", icon: "question-line" },
+                  { button_classes: "button button__lg button__transparent-secondary", icon: "question-line" }
+                ),
+                cell_snippet: { cell: "decidim/button", args: [{ text: "Send", icon: "question-line" }, { button_classes: "button button__lg button__secondary" }] }
+              }
+            ]
+          },
+          {
+            id: "disabled",
+            contents: [
+              {
+                type: :table,
+                options: buttons_table_options,
+                items: buttons_table_items_from_args(
+                  {
+                    button_classes: "button button__lg button__secondary",
+                    html_options: { disabled: true },
+                    description: "<code>disabled</code> data-attribute present".html_safe
+                  }
+                ),
+                cell_snippet: {
+                  cell: "decidim/button",
+                  args: [
+                    { text: "Send" },
+                    { button_classes: "button button__lg button__secondary", html_options: { disabled: true } }
+                  ]
+                }
+              }
+            ]
+          }
+        ]
+      end
+
+      def button_row(button_args)
+        [
+          { method: :cell, args: ["decidim/button", button_args.slice(:icon).merge(text: "Send"), button_args] },
+          button_args[:description] || button_args[:button_classes]
+        ]
+      end
+
+      def background_button_row(button_args)
+        [
+          content_tag(:div, cell("decidim/button", button_args.slice(:icon_name).merge(text: "Send"), button_args), class: "bg-primary p-4 rounded"),
+          button_args[:description] || button_args[:button_classes]
+        ]
+      end
+
+      def buttons_table_items_from_args(*buttons_args, **opts)
+        buttons_args.map do |button_args|
+          opts[:background] ? background_button_row(button_args) : button_row(button_args)
+        end
+      end
+
+      def buttons_table_options
+        @buttons_table_options ||= { headings: %w(Button Classes) }
+      end
+    end
+  end
+end