coveragebook_components 0.8.2 → 0.8.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +445 -308
  3. data/app/assets/build/coco/app.js +631 -397
  4. data/app/assets/build/coco/book.css +18 -4
  5. data/app/assets/build/coco/book.js +408 -224
  6. data/app/assets/build/coco/icons/armchair.svg +1 -1
  7. data/app/assets/build/coco/icons/folder-archive.svg +1 -1
  8. data/app/assets/build/coco/icons/folder-check.svg +1 -1
  9. data/app/assets/build/coco/icons/folder-clock.svg +1 -1
  10. data/app/assets/build/coco/icons/folder-closed.svg +1 -1
  11. data/app/assets/build/coco/icons/folder-cog.svg +1 -1
  12. data/app/assets/build/coco/icons/folder-down.svg +1 -1
  13. data/app/assets/build/coco/icons/folder-edit.svg +1 -1
  14. data/app/assets/build/coco/icons/folder-git.svg +1 -1
  15. data/app/assets/build/coco/icons/folder-heart.svg +1 -1
  16. data/app/assets/build/coco/icons/folder-input.svg +1 -1
  17. data/app/assets/build/coco/icons/folder-key.svg +1 -1
  18. data/app/assets/build/coco/icons/folder-lock.svg +1 -1
  19. data/app/assets/build/coco/icons/folder-minus.svg +1 -1
  20. data/app/assets/build/coco/icons/folder-open.svg +1 -1
  21. data/app/assets/build/coco/icons/folder-plus.svg +1 -1
  22. data/app/assets/build/coco/icons/folder-search-2.svg +1 -1
  23. data/app/assets/build/coco/icons/folder-search.svg +1 -1
  24. data/app/assets/build/coco/icons/folder-tree.svg +1 -1
  25. data/app/assets/build/coco/icons/folder-up.svg +1 -1
  26. data/app/assets/build/coco/icons/folder-x.svg +1 -1
  27. data/app/assets/build/coco/icons/folder.svg +1 -1
  28. data/app/assets/build/coco/icons/folders.svg +1 -1
  29. data/app/assets/build/coco/icons/git-commit-vertical.svg +1 -0
  30. data/app/assets/build/coco/icons/git-compare-arrows.svg +1 -0
  31. data/app/assets/build/coco/icons/git-fork.svg +1 -1
  32. data/app/assets/build/coco/icons/git-graph.svg +1 -0
  33. data/app/assets/build/coco/icons/git-pull-request-arrow.svg +1 -0
  34. data/app/assets/build/coco/icons/git-pull-request-closed.svg +1 -1
  35. data/app/assets/build/coco/icons/git-pull-request-create-arrow.svg +1 -0
  36. data/app/assets/build/coco/icons/git-pull-request-create.svg +1 -0
  37. data/app/assets/build/coco/icons/power-circle.svg +1 -0
  38. data/app/assets/build/coco/icons/power-square.svg +1 -0
  39. data/app/assets/build/coco/icons/power.svg +1 -1
  40. data/app/assets/js/helpers/location.js +1 -1
  41. data/app/assets/js/libs/alpine/index.js +0 -2
  42. data/app/components/coco/app/blocks/sidebar_nav/item/item.css +121 -0
  43. data/app/components/coco/app/blocks/sidebar_nav/item/item.html.erb +9 -0
  44. data/app/components/coco/app/blocks/sidebar_nav/item/item.js +80 -0
  45. data/app/components/coco/app/blocks/sidebar_nav/item/item.rb +50 -0
  46. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.css +138 -0
  47. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.html.erb +24 -0
  48. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.js +12 -0
  49. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.rb +48 -0
  50. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css +75 -0
  51. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb +29 -0
  52. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb +50 -0
  53. data/app/components/coco/base/icon/icon.rb +1 -0
  54. data/app/components/coco/component.rb +2 -2
  55. data/app/helpers/coco/app_helper.rb +5 -1
  56. data/app/helpers/coco/book_helper.rb +4 -4
  57. data/app/helpers/coco/component_helper.rb +2 -2
  58. data/app/helpers/coco/integration_helper.rb +4 -4
  59. data/config/icons.json +9 -1
  60. data/config/tokens.cjs +6 -0
  61. data/lib/coco/options/group.rb +9 -9
  62. data/lib/coco/test_helpers.rb +2 -2
  63. data/lib/coco.rb +1 -1
  64. metadata +23 -11
  65. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css +0 -110
  66. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb +0 -42
  67. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb +0 -28
  68. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css +0 -153
  69. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb +0 -45
  70. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js +0 -44
  71. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb +0 -108
  72. /data/app/assets/build/coco/icons/{git-commit.svg → git-commit-horizontal.svg} +0 -0
  73. /data/app/components/coco/app/blocks/sidebar_nav/{sidebar_nav.js → navbar/navbar.js} +0 -0
@@ -0,0 +1,48 @@
1
+ module Coco
2
+ module App
3
+ module Blocks
4
+ module SidebarNav
5
+ class Menu < Coco::Component
6
+ component_name :app_sidebar_nav_menu
7
+
8
+ renders_many :items, types: {
9
+ link: ->(label, href, qualifier: nil, **kwargs, &block) do
10
+ if items.size < max_links
11
+ coco_link(href, **kwargs, theme: nil, underline: false) do
12
+ tag.span(label, class: "menu-item-label") +
13
+ tag.span(qualifier, class: "menu-item-qualifier")
14
+ end
15
+ else
16
+ overflow_items << ["#{label}#{qualifier.present? ? " (#{qualifier})" : ""}", href]
17
+ nil
18
+ end
19
+ end,
20
+ block_link: ->(href, **kwargs, &block) do
21
+ coco_link(href, **kwargs, theme: nil, underline: false, &block)
22
+ end
23
+ }
24
+
25
+ renders_one :action, ->(*args, **kwargs, &block) do
26
+ coco_button(*args, theme: :primary, **kwargs, size: :sm, fit: :full, &block)
27
+ end
28
+
29
+ attr_reader :max_links, :overflow_items, :prompt
30
+
31
+ def initialize(max_links: 6, prompt: "More links...", **kwargs)
32
+ @max_links = max_links
33
+ @prompt = prompt
34
+ @overflow_items = []
35
+ end
36
+
37
+ def with_link(...)
38
+ with_item_link(...)
39
+ end
40
+
41
+ def with_block_link(...)
42
+ with_item_block_link(...)
43
+ end
44
+ end
45
+ end
46
+ end
47
+ end
48
+ end
@@ -0,0 +1,75 @@
1
+ @layer components {
2
+ [data-coco][data-component="app-sidebar-nav"] {
3
+ @apply bg-background-dark-2 antialiased;
4
+
5
+ @media screen(max-sm) {
6
+ @apply app-sidebar-nav-horizontal;
7
+ }
8
+
9
+ @media screen(sm) and screen(max-md) {
10
+ @apply app-sidebar-nav-vertical-narrow;
11
+ }
12
+
13
+ @media screen(md) {
14
+ @apply app-sidebar-nav-vertical-wide;
15
+ }
16
+
17
+ @media screen(letterbox) {
18
+ @apply app-sidebar-nav-vertical-narrow;
19
+ }
20
+ }
21
+ }
22
+
23
+ @layer utilities {
24
+ .app-sidebar-nav-horizontal {
25
+ @apply w-full h-14 grid;
26
+ grid-auto-flow: column;
27
+ grid-auto-columns: 1fr;
28
+
29
+ .nav-item {
30
+ @apply flex items-stretch;
31
+
32
+ &[data-show-on-mobile="false"] {
33
+ @apply hidden;
34
+ }
35
+ }
36
+
37
+ .nav-item-action {
38
+ .nav-item-label {
39
+ @apply hidden;
40
+ }
41
+ }
42
+ }
43
+
44
+ .app-sidebar-nav-vertical {
45
+ @apply h-full;
46
+
47
+ .nav-item-action {
48
+ .nav-item-label {
49
+ @apply text-content-primary-inverse-vivid;
50
+ }
51
+ }
52
+ }
53
+
54
+ .app-sidebar-nav-vertical-narrow {
55
+ @apply app-sidebar-nav-vertical;
56
+ @apply w-16;
57
+
58
+ .nav-item-action {
59
+ [data-component="app-sidebar-nav-item"] {
60
+ @apply pb-2.5;
61
+ }
62
+ }
63
+ }
64
+
65
+ .app-sidebar-nav-vertical-wide {
66
+ @apply app-sidebar-nav-vertical;
67
+ @apply w-24;
68
+
69
+ .nav-item-action {
70
+ [data-component="app-sidebar-nav-item"] {
71
+ @apply pb-3;
72
+ }
73
+ }
74
+ }
75
+ }
@@ -0,0 +1,29 @@
1
+ <%= render component_tag(x: {data: "appSidebarNav"}) do %>
2
+ <% if actions? %>
3
+ <div class="nav-item nav-item-action">
4
+ <%= render Coco::App::Blocks::SidebarNav::Item.new(label: "Add") do |item| %>
5
+ <% item.with_icon do %>
6
+ <span class="nav-item-action-button">
7
+ <%= coco_icon :plus, size: :full %>
8
+ </span>
9
+ <% end %>
10
+
11
+ <% item.with_menu do %>
12
+ <%= coco_sidebar_nav_menu(class: "nav-card-menu") do |menu| %>
13
+ <% actions_data.each do |action| %>
14
+ <% menu.with_block_link(action[:href], **action.except(:href, :icon, :label, :description)) do %>
15
+ <div class="card">
16
+ <%= coco_icon(action[:icon], size: :md) %>
17
+ <h4><%= action[:label] %></h4>
18
+ <div><%= raw action[:description] %></div>
19
+ </div>
20
+ <% end %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ </div>
26
+ <% end %>
27
+
28
+ <%= safe_join(items) %>
29
+ <% end %>
@@ -0,0 +1,50 @@
1
+ module Coco
2
+ module App
3
+ module Blocks
4
+ module SidebarNav
5
+ class Navbar < Coco::Component
6
+ tag_name :nav
7
+ component_name :app_sidebar_nav
8
+
9
+ renders_many :actions, ->(label, href, icon:, **kwargs) do
10
+ actions_data << {label: label, href: href, icon: icon, **kwargs}
11
+ end
12
+
13
+ renders_many :items, types: {
14
+ link: ->(label, href, show_on_mobile: true, **kwargs, &block) do
15
+ nav_item(mobile: show_on_mobile) do
16
+ render Coco::App::Blocks::SidebarNav::Item.new(label: label, href: href, **kwargs), &block
17
+ end
18
+ end,
19
+ menu: ->(label, show_on_mobile: true, **kwargs, &block) do
20
+ nav_item(mobile: show_on_mobile) do
21
+ render Coco::App::Blocks::SidebarNav::Item.new(label: label, **kwargs) do |item|
22
+ item.with_menu(&block)
23
+ end
24
+ end
25
+ end
26
+ }
27
+
28
+ attr_reader :actions_data
29
+
30
+ def initialize(**)
31
+ @actions_data = []
32
+ @menus_data = {}
33
+ end
34
+
35
+ def nav_item(mobile: true, &block)
36
+ tag.div(class: "nav-item", data: {show_on_mobile: mobile.to_s}, &block)
37
+ end
38
+
39
+ def with_link(...)
40
+ with_item_link(...)
41
+ end
42
+
43
+ def with_menu(...)
44
+ with_item_menu(...)
45
+ end
46
+ end
47
+ end
48
+ end
49
+ end
50
+ end
@@ -7,6 +7,7 @@ module Coco
7
7
  ALIASES = {
8
8
  edit: "pen-line",
9
9
  "edit-3": "pen-line",
10
+ "git-commit": "git-commit-horizontal",
10
11
  grid: "grid-3x3"
11
12
  }.freeze
12
13
 
@@ -47,8 +47,8 @@ module Coco
47
47
  tag_attrs.compact!
48
48
  end
49
49
 
50
- def component_tag(tag = nil, **attrs)
51
- Tag.new(tag || tag_name || :div, root: true, **merge_tag_attrs(**attrs))
50
+ def component_tag(tag = nil, **)
51
+ Tag.new(tag || tag_name || :div, root: true, **merge_tag_attrs(**))
52
52
  end
53
53
 
54
54
  def merge_tag_attrs(**attrs)
@@ -105,7 +105,11 @@ module Coco
105
105
  end
106
106
 
107
107
  def coco_sidebar_nav(*, **, &block)
108
- render Coco::App::Blocks::SidebarNav.new(*, **), &block
108
+ render Coco::App::Blocks::SidebarNav::Navbar.new(*, **), &block
109
+ end
110
+
111
+ def coco_sidebar_nav_menu(*, **, &block)
112
+ render Coco::App::Blocks::SidebarNav::Menu.new(*, **), &block
109
113
  end
110
114
 
111
115
  def coco_menu_item(type, **, &block)
@@ -1,11 +1,11 @@
1
1
  module Coco
2
2
  module BookHelper
3
- def coco_editable_slide(**kwargs, &block)
4
- render Coco::Book::Blocks::Slides::EditableSlide.new(**kwargs), &block
3
+ def coco_editable_slide(**, &block)
4
+ render Coco::Book::Blocks::Slides::EditableSlide.new(**), &block
5
5
  end
6
6
 
7
- def coco_media_slide(src = nil, **kwargs, &block)
8
- render Coco::Book::Blocks::Slides::MediaSlide.new(src: src, **kwargs), &block
7
+ def coco_media_slide(src = nil, **, &block)
8
+ render Coco::Book::Blocks::Slides::MediaSlide.new(src: src, **), &block
9
9
  end
10
10
  end
11
11
  end
@@ -4,8 +4,8 @@ module Coco
4
4
  include Coco::BookHelper
5
5
  include Coco::AppHelper
6
6
 
7
- def coco_component(name, *args, **kwargs)
8
- resolve_component("coco/#{name}", *args, **kwargs)
7
+ def coco_component(name, *, **)
8
+ resolve_component("coco/#{name}", *, **)
9
9
  end
10
10
 
11
11
  def resolve_component(...)
@@ -1,15 +1,15 @@
1
1
  module Coco
2
2
  module IntegrationHelper
3
- def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **opts)
4
- javascript_include_tag "coco/#{context}#{".dev" if dev}", **opts
3
+ def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **)
4
+ javascript_include_tag("coco/#{context}#{".dev" if dev}", **)
5
5
  end
6
6
 
7
7
  def coco_javascript_file_path(context, dev: ENV["COCO_PATH"])
8
8
  File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.js")
9
9
  end
10
10
 
11
- def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **opts)
12
- stylesheet_link_tag "coco/#{context}#{".dev" if dev}", **opts
11
+ def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
12
+ stylesheet_link_tag("coco/#{context}#{".dev" if dev}", **)
13
13
  end
14
14
 
15
15
  def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)
data/config/icons.json CHANGED
@@ -603,12 +603,18 @@
603
603
  "gift",
604
604
  "git-branch",
605
605
  "git-branch-plus",
606
- "git-commit",
606
+ "git-commit-horizontal",
607
+ "git-commit-vertical",
607
608
  "git-compare",
609
+ "git-compare-arrows",
608
610
  "git-fork",
611
+ "git-graph",
609
612
  "git-merge",
610
613
  "git-pull-request",
614
+ "git-pull-request-arrow",
611
615
  "git-pull-request-closed",
616
+ "git-pull-request-create",
617
+ "git-pull-request-create-arrow",
612
618
  "git-pull-request-draft",
613
619
  "github",
614
620
  "gitlab",
@@ -945,7 +951,9 @@
945
951
  "popsicle",
946
952
  "pound-sterling",
947
953
  "power",
954
+ "power-circle",
948
955
  "power-off",
956
+ "power-square",
949
957
  "presentation",
950
958
  "printer",
951
959
  "projector",
data/config/tokens.cjs CHANGED
@@ -172,6 +172,12 @@ const screens = {
172
172
  xl: "1200px",
173
173
  "2xl": "1400px",
174
174
  max: "1800px",
175
+ "max-sm": { max: "576px" },
176
+ "max-md": { max: "768px" },
177
+ "max-lg": { max: "992px" },
178
+ "max-xl": { max: "1200px" },
179
+ "max-2xl": { max: "1400px" },
180
+ "max-max": { max: "1800px" },
175
181
  letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
176
182
  print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
177
183
  };
@@ -54,23 +54,23 @@ module Coco
54
54
  get_option!(...).value
55
55
  end
56
56
 
57
- def set_option_value(*args, value)
58
- if option?(*args)
59
- get_option(*args).value = value
60
- elsif group?(*args)
61
- group = get_group(*args)
57
+ def set_option_value(*, value)
58
+ if option?(*)
59
+ get_option(*).value = value
60
+ elsif group?(*)
61
+ group = get_group(*)
62
62
  if group.shorthand
63
63
  group.set_option_value(group.shorthand, value)
64
64
  end
65
65
  end
66
66
  end
67
67
 
68
- def option_value_equals?(*args, check)
69
- get_option_value(*args) == check
68
+ def option_value_equals?(*, check)
69
+ get_option_value(*) == check
70
70
  end
71
71
 
72
- def merge_option_values(*args, values, overwrite: true)
73
- get_group!(*args).items.each do |item|
72
+ def merge_option_values(*, values, overwrite: true)
73
+ get_group!(*).items.each do |item|
74
74
  if values.key?(item.name)
75
75
  value = values[item.name]
76
76
  if item.is_a?(Option)
@@ -8,8 +8,8 @@ module Coco
8
8
  klass
9
9
  end
10
10
 
11
- def assert_component_selector(name, text: nil, visible: nil, **opts)
12
- assert_selector(component_selector(name, **opts), text: text, visible: visible)
11
+ def assert_component_selector(name, text: nil, visible: nil, **)
12
+ assert_selector(component_selector(name, **), text: text, visible: visible)
13
13
  end
14
14
 
15
15
  def component_selector(name, **opts)
data/lib/coco.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.8.2"
2
+ VERSION = "0.8.4"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: coveragebook_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.8.2
4
+ version: 0.8.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mark Perkins
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-10-26 00:00:00.000000000 Z
11
+ date: 2023-11-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -688,11 +688,17 @@ files:
688
688
  - app/assets/build/coco/icons/gift.svg
689
689
  - app/assets/build/coco/icons/git-branch-plus.svg
690
690
  - app/assets/build/coco/icons/git-branch.svg
691
- - app/assets/build/coco/icons/git-commit.svg
691
+ - app/assets/build/coco/icons/git-commit-horizontal.svg
692
+ - app/assets/build/coco/icons/git-commit-vertical.svg
693
+ - app/assets/build/coco/icons/git-compare-arrows.svg
692
694
  - app/assets/build/coco/icons/git-compare.svg
693
695
  - app/assets/build/coco/icons/git-fork.svg
696
+ - app/assets/build/coco/icons/git-graph.svg
694
697
  - app/assets/build/coco/icons/git-merge.svg
698
+ - app/assets/build/coco/icons/git-pull-request-arrow.svg
695
699
  - app/assets/build/coco/icons/git-pull-request-closed.svg
700
+ - app/assets/build/coco/icons/git-pull-request-create-arrow.svg
701
+ - app/assets/build/coco/icons/git-pull-request-create.svg
696
702
  - app/assets/build/coco/icons/git-pull-request-draft.svg
697
703
  - app/assets/build/coco/icons/git-pull-request.svg
698
704
  - app/assets/build/coco/icons/github.svg
@@ -1029,7 +1035,9 @@ files:
1029
1035
  - app/assets/build/coco/icons/popcorn.svg
1030
1036
  - app/assets/build/coco/icons/popsicle.svg
1031
1037
  - app/assets/build/coco/icons/pound-sterling.svg
1038
+ - app/assets/build/coco/icons/power-circle.svg
1032
1039
  - app/assets/build/coco/icons/power-off.svg
1040
+ - app/assets/build/coco/icons/power-square.svg
1033
1041
  - app/assets/build/coco/icons/power.svg
1034
1042
  - app/assets/build/coco/icons/presentation.svg
1035
1043
  - app/assets/build/coco/icons/printer.svg
@@ -1470,14 +1478,18 @@ files:
1470
1478
  - app/components/coco/app/blocks/nav_drawer/nav_drawer.html.erb
1471
1479
  - app/components/coco/app/blocks/nav_drawer/nav_drawer.js
1472
1480
  - app/components/coco/app/blocks/nav_drawer/nav_drawer.rb
1473
- - app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css
1474
- - app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb
1475
- - app/components/coco/app/blocks/sidebar_nav/sidebar_nav.js
1476
- - app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb
1477
- - app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css
1478
- - app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb
1479
- - app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
1480
- - app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb
1481
+ - app/components/coco/app/blocks/sidebar_nav/item/item.css
1482
+ - app/components/coco/app/blocks/sidebar_nav/item/item.html.erb
1483
+ - app/components/coco/app/blocks/sidebar_nav/item/item.js
1484
+ - app/components/coco/app/blocks/sidebar_nav/item/item.rb
1485
+ - app/components/coco/app/blocks/sidebar_nav/menu/menu.css
1486
+ - app/components/coco/app/blocks/sidebar_nav/menu/menu.html.erb
1487
+ - app/components/coco/app/blocks/sidebar_nav/menu/menu.js
1488
+ - app/components/coco/app/blocks/sidebar_nav/menu/menu.rb
1489
+ - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css
1490
+ - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb
1491
+ - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.js
1492
+ - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb
1481
1493
  - app/components/coco/app/blocks/slat/slat.css
1482
1494
  - app/components/coco/app/blocks/slat/slat.rb
1483
1495
  - app/components/coco/app/blocks/slide_editor/slide_editor.css
@@ -1,110 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-sidebar-nav"] {
3
- @apply bg-background-dark-2 antialiased;
4
- @apply w-full h-14 grid grid-rows-1;
5
- grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
6
-
7
- .nav-action {
8
- @apply cursor-pointer;
9
-
10
- > a {
11
- @apply hover:!bg-background-dark-2;
12
- }
13
-
14
- .nav-item-label {
15
- @apply hidden !text-content-primary-inverse-vivid;
16
- }
17
- }
18
-
19
- .nav-actions-button {
20
- @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
21
- @apply h-10 w-10 flex items-center justify-center mx-auto rounded-full cursor-pointer;
22
-
23
- &:hover {
24
- transform: scale(1.05);
25
- }
26
-
27
- .coco-icon {
28
- @apply h-6 w-6;
29
- }
30
- }
31
-
32
- .nav-item {
33
- @apply hidden sm:contents h-full justify-center w-full;
34
- }
35
-
36
- .mobile-nav-item {
37
- @apply flex sm:contents;
38
- }
39
-
40
- @media screen(sm) {
41
- @apply sidebar-nav-vertical-condensed;
42
- }
43
-
44
- @media screen(lg) {
45
- @apply sidebar-nav-vertical;
46
- }
47
-
48
- @media screen(letterbox) {
49
- @apply sidebar-nav-vertical-condensed;
50
- }
51
- }
52
-
53
- .sidebar-nav-action {
54
- @apply flex items-start p-1;
55
-
56
- .sidebar-nav-action-icon {
57
- @apply flex-none mr-3 text-content-light-1;
58
- }
59
-
60
- .sidebar-nav-action-detail {
61
- @apply w-full text-left;
62
- }
63
-
64
- .sidebar-nav-action-label {
65
- @apply mb-0.5 font-semibold text-content-light-1;
66
- }
67
-
68
- .sidebar-nav-action-description {
69
- @apply text-para-xs;
70
- }
71
- }
72
-
73
- .sidebar-nav-menu a.sidebar-nav-actions-item {
74
- width: 320px;
75
- }
76
- }
77
-
78
- @layer utilities {
79
- .sidebar-nav-vertical-condensed {
80
- @apply block w-18 h-full;
81
-
82
- .nav-action .nav-item-label {
83
- @apply block;
84
- }
85
-
86
- .nav-actions-button {
87
- @apply h-14 w-14 mb-2;
88
-
89
- .coco-icon {
90
- @apply w-8 h-8;
91
- }
92
- }
93
- }
94
-
95
- .sidebar-nav-vertical {
96
- @apply block w-24 h-full;
97
-
98
- .nav-action .nav-item-label {
99
- @apply block;
100
- }
101
-
102
- .nav-actions-button {
103
- @apply h-[72px] w-[72px];
104
-
105
- .coco-icon {
106
- @apply h-10 w-10;
107
- }
108
- }
109
- }
110
- }
@@ -1,42 +0,0 @@
1
- <%= render component_tag(:nav, x: {data: "appSidebarNav"}) do %>
2
- <% if actions? %>
3
- <div class="nav-item mobile-nav-item nav-action">
4
- <%= render Coco::App::Blocks::SidebarNavItem.new(label: "Add", emphasise: true) do |item| %>
5
- <% item.with_icon do %>
6
- <span class="nav-actions-button">
7
- <%= coco_icon :plus, size: :xl %>
8
- </span>
9
- <% end %>
10
-
11
- <% item.with_menu(id: "actions-nav-link") do %>
12
- <% actions_data.each do |action| %>
13
- <%= coco_link(action[:href],
14
- **action.except(:label, :description, :href, :icon),
15
- theme: nil,
16
- class: "sidebar-nav-menu-item sidebar-nav-actions-item") do %>
17
- <div class="sidebar-nav-action">
18
- <div class="sidebar-nav-action-icon">
19
- <%= coco_icon(action[:icon], size: :md) %>
20
- </div>
21
- <div class="sidebar-nav-action-detail">
22
- <h4 class="sidebar-nav-action-label">
23
- <%= action[:label] %>
24
- </h4>
25
- <% if action.key?(:description) %>
26
- <div class="sidebar-nav-action-description">
27
- <%= raw action[:description] %>
28
- </div>
29
- <% end %>
30
- </div>
31
- </div>
32
- <% end %>
33
- <% end %>
34
- <% end %>
35
- <% end %>
36
- </div>
37
- <% end %>
38
-
39
- <% items.each do |item| %>
40
- <%= item %>
41
- <% end %>
42
- <% end %>
@@ -1,28 +0,0 @@
1
- module Coco
2
- module App
3
- module Blocks
4
- class SidebarNav < Coco::Component
5
- renders_many :actions, ->(label, href, icon:, **kwargs) do
6
- @actions_data << {label: label, href: href, icon: icon, **kwargs}
7
- end
8
-
9
- renders_many :items, ->(label, href, show_on_mobile: true, **kwargs, &block) do
10
- tag.div class: ["nav-item", ("mobile-nav-item" if show_on_mobile)] do
11
- render Coco::App::Blocks::SidebarNavItem.new(
12
- label: label,
13
- href: href,
14
- active: helpers.current_page?(href),
15
- **kwargs
16
- ), &block
17
- end
18
- end
19
-
20
- attr_reader :actions_data
21
-
22
- def initialize(**)
23
- @actions_data = []
24
- end
25
- end
26
- end
27
- end
28
- end