material_design 0.7.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 267d95cd22d5c516fdd24f30262e6a6c5a11b9804c82be744167f385f644d38a
-  data.tar.gz: 2b04c3523424970989ec9f41946f9e24e18f8cd66c984c72404dfc92af792e8c
+  metadata.gz: 501465343ada2fe0bb7395ee4c3b4a5c9b7445900652ce708f4c3624624824b1
+  data.tar.gz: 1521b11bdda2eed12d22b25b4bfaf7c596967b90c0c0fe48301eadbdb2cfc63c
 SHA512:
-  metadata.gz: 2fcc6c55b74177b993d7d75b8a546edf70470b9cb79032048ca9511349623acf6187968e800ac9042e2cdbabf4a9cc1667a118129ec652610d4a4aabed50601a
-  data.tar.gz: 4282b24f18fb7a2e04487804449f833aa45f83b03f0c18ddddff7ea19adf2e5d9d5748f06fc06f25517ad5f0ea478f0bcea98b512432d1225ff2dcf7b5369602
+  metadata.gz: ef3296019b0cb8baf3c0f6555901e82c7e13d7438a137987bc792407dd80f3cb3022a0b8cd5bd785119320b533001f5e0f3ad375eea61da5082398e7afeb5a2e
+  data.tar.gz: dd14b3ed25d14787d566dcff0a304e250f1d37ad111925d434de21e9ee56b47113323aa16a1525ca48a35ae6d555a76389253e32255dab18aa05a81c906f5a15

data/app/assets/config/material_design_manifest.js

@@ -0,0 +1,3 @@
+//= link_directory ../stylesheets/material_design .css
+//= link_directory ../../javascript/material_design .js
+//= link_directory ../../javascript/material_design/controllers .js

data/app/assets/stylesheets/material_design/chips.css

@@ -0,0 +1,118 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --md-sys-hover-layer-state: rgb(
+      var(--md-sys-light-on-surface-variant) /
+        var(--md-sys-light-state-hover-state-layer-opacity)
+    );
+    --md-sys-hover-selected-state: rgb(
+      var(--md-sys-light-on-secondary-container) /
+        var(--md-sys-light-state-hover-state-layer-opacity)
+    );
+    --md-sys-pressed-layer-state: rgb(
+      var(--md-sys-light-on-secondary-container) / 0.1
+    );
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --md-sys-hover-layer-state: rgb(
+      var(--md-sys-dark-on-surface-variant) /
+        var(--md-sys-dark-state-hover-state-layer-opacity)
+    );
+    --md-sys-hover-selected-state: rgb(
+      var(--md-sys-dark-on-secondary-container) /
+        var(--md-sys-dark-state-hover-state-layer-opacity)
+    );
+    --md-sys-pressed-layer-state: rgb(
+      var(--md-sys-dark-on-secondary-container) /
+        var(--md-sys-dark-state-pressed-state-layer-opacity)
+    );
+  }
+}
+
+.chip {
+  align-items: center;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  padding: 0px 8px;
+  white-space: nowrap;
+  @media (prefers-color-scheme: light) {
+    border: 1px solid rgb(var(--md-sys-light-outline-variant));
+    color: rgb(var(--md-sys-light-on-surface-variant));
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid rgb(var(--md-sys-dark-outline-variant));
+    color: rgb(var(--md-sys-dark-on-surface-variant));
+  }
+}
+
+.chip:hover {
+  background: var(--md-sys-hover-layer-state)
+    radial-gradient(circle, transparent 1%, var(--md-sys-hover-layer-state) 1%)
+    center/15000%;
+}
+
+.chip.selected {
+  border-color: transparent;
+  @media (prefers-color-scheme: light) {
+    background: rgb(var(--md-sys-light-secondary-container));
+    color: rgb(var(--md-sys-light-on-secondary-container));
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--md-sys-dark-secondary-container));
+    color: rgb(var(--md-sys-dark-on-secondary-container));
+  }
+}
+
+.chip.selected:hover {
+  background: var(--md-sys-hover-selected-state)
+    radial-gradient(
+      circle,
+      transparent 1%,
+      var(--md-sys-hover-selected-state) 1%
+    )
+    center/15000%;
+}
+
+.chip__container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+}
+
+.chip__dropdown {
+  box-sizing: border-box;
+  display: block;
+  max-width: calc(100vw - 60px);
+  min-width: 100%;
+  position: absolute;
+  width: fit-content;
+  z-index: 1051;
+}
+
+@media (min-width: 768px) {
+  .chip__dropdown {
+    max-width: calc(100vw - 140px);
+  }
+}
+
+.chip__label {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0px 8px;
+}
+
+.dropdown--hidden {
+  display: none;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}

data/app/assets/stylesheets/material_design/segmented_button.css

@@ -0,0 +1,56 @@
+.segmented-control {
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 30px;
+    overflow: hidden;
+    background-color: var(--md-sys-surface);
+    width: fit-content;
+  }
+
+  .segmented-control label {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    cursor: pointer;
+    border-left: 1px solid #ccc;
+    transition: background-color 0.3s ease;
+    font-size: 14px;
+    color: var(--md-sys-on-surface);
+    background-color: transparent;
+  }
+
+  .segmented-control label:first-child {
+    border-left: none;
+    border-radius: 12px 0 0 12px;
+  }
+
+  .segmented-control label:last-child {
+    border-radius: 0 12px 12px 0;
+  }
+
+  .segmented-control input[type="radio"] {
+    display: none;
+  }
+
+  .segmented-control input[type="radio"]:checked + label {
+    background-color: rgb(var(--md-sys-light-primary-container)) !important;
+    color: rgb(var(--md-sys-on-primary-container));
+  }
+
+  .segmented-control label.active {
+    background-color: rgb(var(--md-sys-light-primary-container)) !important;
+    color: rgb(var(--md-sys-on-primary-container));
+  }
+
+  .checkmark {
+    margin-right: 8px;
+    visibility: hidden;
+  }
+
+  .segmented-control input[type="radio"]:checked + label .checkmark {
+    visibility: visible;
+  }
+
+  .segmented-control label:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }

data/app/helpers/material_design/chip_helper.rb

@@ -0,0 +1,32 @@
+module MaterialDesign
+  module ChipHelper
+    def md_filter_chip(label=nil, leading_icon: nil, trailing_icon: nil, selected: false, data: {}, style: nil, &block)
+      merged_data = data.merge(controller: "filter-chip", filter_chip_selected_value: selected, action: "#{block_given? ? "click->filter-chip#toggleDropdown" : "click->filter-chip#toggleSelect"}")
+
+      chip_content = content_tag(:div, class: "chip__container", data: merged_data) do
+        concat(content_tag(:div, class: class_names("chip", selected: selected), data: { filter_chip_target: "chip"}, style: style) do
+          concat(content_tag(:span, class: "dropdown--hidden", data: {filter_chip_target: "selectedIcon"}) do
+            render("material_design/icons/icon", locals: { icon: "check", size: 18 })
+          end)
+          concat(content_tag(:span, data: {filter_chip_target: "leadingIcon"}) do
+            render("material_design/icons/icon", locals: { icon: leading_icon, size: 18 }) if leading_icon
+          end)
+          concat(content_tag(:p, label, class: "chip__label", data: {filter_chip_target: "label"}))
+          concat(content_tag(:span, data: {filter_chip_target: "chevronIcon"}) do
+            render("material_design/icons/icon", locals: { icon: "arrow_drop_down", size: 18 })
+          end) if block_given?
+          concat(content_tag(:span, data: {filter_chip_target: "trailingIcon"}) do
+            render("material_design/icons/icon", locals: { icon: trailing_icon, size: 18 }) if trailing_icon && !block_given?
+          end)
+        end)
+        if block_given?
+          concat(content_tag(:div,  class: "dropdown--hidden chip__dropdown", data: {filter_chip_target: "dropdown"}) do
+            capture(&block)
+          end)
+        end
+      end
+
+      chip_content
+    end
+  end
+end

data/app/javascript/material_design/application.js

@@ -0,0 +1 @@
+import "controllers";

data/app/javascript/material_design/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus";
+
+const application = Application.start();
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus = application;
+
+export { application };

data/app/javascript/material_design/controllers/filter_chip_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside, useTransition } from "stimulus-use";
+
+export default class extends Controller {
+  static targets = [
+    "chevronIcon",
+    "chip",
+    "dropdown",
+    "label",
+    "leadingIcon",
+    "selectedIcon",
+    "trailingIcon",
+  ];
+  static values = { open: Boolean, selected: Boolean };
+
+  connect() {
+    this.setSelected();
+
+    useTransition(this, {
+      element: this.dropdownTarget,
+      enterActive: "transition ease-out duration-100",
+      enterFrom: "transform opacity-0 scale-95",
+      enterTo: "transform opacity-100 scale-100",
+      leaveActive: "transition ease-in duration-75",
+      leaveFrom: "transform opacity-100 scale-100",
+      leaveTo: "transform opacity-0 scale-95",
+      hiddenClass: "dropdown--hidden",
+      transitioned: false,
+    });
+
+    useClickOutside(this);
+
+    if (this.openValue) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  clickOutside() {
+    this.closeDropdown();
+  }
+
+  toggleDropdown() {
+    if (this.dropdownTarget.classList.contains("dropdown--hidden")) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  openDropdown() {
+    this.enter();
+    this.chevronIconTarget.classList.add("rotate-180");
+  }
+
+  closeDropdown() {
+    this.leave();
+    this.chevronIconTarget.classList.remove("rotate-180");
+  }
+
+  setSelected() {
+    if (this.selectedValue) {
+      this.selectedIconTarget.classList.remove("dropdown--hidden");
+      this.leadingIconTarget.classList.add("dropdown--hidden");
+    }
+  }
+
+  toggleSelected() {
+    this.selectedIconTarget.classList.toggle("dropdown--hidden");
+    this.leadingIconTarget.classList.toggle("dropdown--hidden");
+  }
+}

data/app/javascript/material_design/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "./application";
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+eagerLoadControllersFrom("controllers", application);
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/app/views/material_design/_chip.html.erb

@@ -0,0 +1,3 @@
+<div class="chip <%= locals[:class] %>">
+  <%= locals[:label] %>
+</div>

data/app/views/material_design/buttons/_segmented_button.html.erb

@@ -0,0 +1,13 @@
+<div class="segmented-control">
+  <% options.each do |option| %>
+    <%= form.radio_button field_name, option[:value], checked: option[:checked], id: "#{field_name}_#{option[:value]}" %>
+    <%= form.label "#{field_name}_#{option[:value]}", class: "segmented-btn grey-hover #{option[:class]}" do %>
+      <% if option[:checked] %>
+        <div class="mr-2">
+          <%= render "material_design/icons/icon", locals: { size: 18, icon: "check" } %>
+        </div>
+      <% end %>
+      <%= option[:label] %>
+    <% end %>
+  <% end %>
+</div>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+pin "application-md", to: "material_design/application.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin_all_from MaterialDesign::Engine.root.join("app/javascript/material_design/controllers"), under: "controllers", to: "material_design/controllers"
+

data/lib/material_design/engine.rb

@@ -1,5 +1,18 @@
+require "importmap-rails"
+require "stimulus-rails"
+
 module MaterialDesign
   class Engine < ::Rails::Engine
     isolate_namespace MaterialDesign
+
+    initializer "material_design.assets" do |app|
+      app.config.assets.paths << root.join("app/javascript")
+      app.config.assets.precompile += %w[ material_design_manifest ]
+    end
+
+    initializer "material_design.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/javascript")
+    end
   end
 end

data/lib/material_design/railtie.rb

@@ -1,10 +1,11 @@
 require "rails/railtie"
 
 module MyGem
-  class Railtie < Rails::Railtie  #add uma funcionalidade a um app rails a partir de uma gem
+  class Railtie < Rails::Railtie
     initializer "material_design.action_controller" do
-      ActiveSupport.on_load(:action_controller_base) do #quando a base controller for carregada
-        helper MaterialDesign::ButtonHelper #disponibiliza o helper em todos os arquivos
+      ActiveSupport.on_load(:action_controller_base) do
+        helper MaterialDesign::ButtonHelper
+        helper MaterialDesign::ChipHelper
       end
     end
   end

data/lib/material_design/version.rb

@@ -1,3 +1,3 @@
 module MaterialDesign
-  VERSION = "0.7.0"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,16 +1,18 @@
 --- !ruby/object:Gem::Specification
 name: material_design
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Eduardo Yutaka Nakanishi
 - Fabiana Ramos
 - Mariana Negrão Trancoso
+- Prscila Sabino
+- Bianca Cristina Ramos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-03 00:00:00.000000000 Z
+date: 2024-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -26,6 +28,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 7.1.3
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Material is Google’s open-source design system. Design and build beautiful,
   usable products with Material.
 email:
@@ -37,26 +67,36 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/config/material_design_manifest.js
 - app/assets/stylesheets/material_design/app_bars.css
 - app/assets/stylesheets/material_design/application.css
 - app/assets/stylesheets/material_design/buttons.css
 - app/assets/stylesheets/material_design/cards.css
+- app/assets/stylesheets/material_design/chips.css
 - app/assets/stylesheets/material_design/dividers.css
 - app/assets/stylesheets/material_design/icons.css
 - app/assets/stylesheets/material_design/lists.css
 - app/assets/stylesheets/material_design/navigation.css
+- app/assets/stylesheets/material_design/segmented_button.css
 - app/assets/stylesheets/material_design/tabs.css
 - app/assets/stylesheets/material_design/typography.css
 - app/controllers/material_design/application_controller.rb
 - app/helpers/material_design/application_helper.rb
 - app/helpers/material_design/button_helper.rb
+- app/helpers/material_design/chip_helper.rb
+- app/javascript/material_design/application.js
+- app/javascript/material_design/controllers/application.js
+- app/javascript/material_design/controllers/filter_chip_controller.js
+- app/javascript/material_design/controllers/index.js
 - app/jobs/material_design/application_job.rb
 - app/mailers/material_design/application_mailer.rb
 - app/models/material_design/application_record.rb
 - app/views/layouts/material_design/application.html.erb
+- app/views/material_design/_chip.html.erb
 - app/views/material_design/app_bars/_top_bar.html.erb
 - app/views/material_design/buttons/_fab.html.erb
 - app/views/material_design/buttons/_icon_button.html.erb
+- app/views/material_design/buttons/_segmented_button.html.erb
 - app/views/material_design/cards/_outlined.html.erb
 - app/views/material_design/dividers/_horizontal.html.erb
 - app/views/material_design/icons/_10k.html.erb
@@ -2200,6 +2240,7 @@ files:
 - app/views/material_design/typography/_label_large.html.erb
 - app/views/material_design/typography/_title_large.html.erb
 - app/views/material_design/typography/_title_small.html.erb
+- config/importmap.rb
 - config/routes.rb
 - lib/material_design.rb
 - lib/material_design/engine.rb
@@ -2226,7 +2267,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.3
+rubygems_version: 3.5.21
 signing_key: 
 specification_version: 4
 summary: Material Design