optics_view_components 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +12 -0
- data/app/components/optics/button/component.rb +12 -11
- data/app/components/optics/sidebar/component.rb +34 -17
- data/demo/Gemfile.lock +1 -1
- data/demo/app/helpers/application_helper.rb +3 -0
- data/demo/package.json +2 -2
- data/demo/yarn.lock +8 -29
- data/lib/optics/view_components/version.rb +1 -1
- data/previews/component_helper.rb +7 -0
- data/previews/optics/button_preview/with_icon.html.erb +4 -0
- data/previews/optics/button_preview.rb +45 -17
- data/previews/optics/icon_preview.rb +10 -17
- data/previews/optics/sidebar_preview.rb +18 -0
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: db165928ba46774fcb8412d71cd02ae0c4e066e323bff171c7bedaae7f7e1cf9
|
|
4
|
+
data.tar.gz: 482b366146b1e0ff14e8cd2c6c5819e51374ae142bb969b7f520f8f68a5de220
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e8783ca32282a2e8f8f45b97b443198be8507f65d1c48cc773fe6f4ddd5ef737bdfa3a865b7591101b57fbf700e9d1af96858443f1ad3883338713f662ad2b7d
|
|
7
|
+
data.tar.gz: e21dd5880c6d94568f53c3202b154e7702d809fe7535e31134b3aef6c9ee56c8ce06a60de87a1069fb4381b4ee993c4bf5bb56b2d2ec3442720a479a7838d4c9
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -38,6 +38,18 @@ Add to `config/application.rb`:
|
|
|
38
38
|
config.view_component.preview_paths << Optics::ViewComponents::Engine.root.join('previews')
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
If you need a custom layout add:
|
|
42
|
+
```
|
|
43
|
+
config.view_component.default_preview_layout = 'preview'
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
To use the shorthand `component 'optics/icon'` syntax, add this to `app/helpers/application_helper.rb`:
|
|
47
|
+
```
|
|
48
|
+
def component(name, *args, **kwargs, &)
|
|
49
|
+
render(name.camelize.constantize::Component.new(*args, **kwargs), &)
|
|
50
|
+
end
|
|
51
|
+
```
|
|
52
|
+
|
|
41
53
|
## Development
|
|
42
54
|
|
|
43
55
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
|
@@ -6,30 +6,27 @@ module Optics
|
|
|
6
6
|
SIZES = %w[small medium large].freeze
|
|
7
7
|
STYLES = %w[default primary secondary delete].freeze
|
|
8
8
|
|
|
9
|
-
renders_one :leading_icon, lambda { |name:, size: 'normal'|
|
|
10
|
-
Optics::Icon::Component.new(name:, size:)
|
|
11
|
-
}
|
|
12
|
-
|
|
13
9
|
accepts :label
|
|
10
|
+
accepts :active, default: false
|
|
14
11
|
accepts :border, default: true
|
|
12
|
+
accepts :disabled, default: false
|
|
15
13
|
accepts :icon, default: false
|
|
14
|
+
accepts :icon_with_label, default: false
|
|
15
|
+
accepts :pill, default: false
|
|
16
16
|
accepts :size, default: 'medium'
|
|
17
17
|
accepts :variant, default: 'default'
|
|
18
18
|
accepts :url
|
|
19
19
|
|
|
20
20
|
def call
|
|
21
21
|
build_button do
|
|
22
|
-
|
|
23
|
-
concat leading_icon
|
|
24
|
-
concat label
|
|
25
|
-
end
|
|
22
|
+
content || label
|
|
26
23
|
end
|
|
27
24
|
end
|
|
28
25
|
|
|
29
26
|
def build_button(&)
|
|
30
|
-
return link_to(url, class: classes, **@attributes.except(:class), &) if url
|
|
27
|
+
return link_to(url, class: classes, **@attributes.except(:class), &) if url && !disabled
|
|
31
28
|
|
|
32
|
-
tag.button(class: classes, **@attributes.except(:class), &)
|
|
29
|
+
tag.button(class: classes, disabled:, **@attributes.except(:class), &)
|
|
33
30
|
end
|
|
34
31
|
|
|
35
32
|
def button_class
|
|
@@ -43,8 +40,12 @@ module Optics
|
|
|
43
40
|
@attributes[:class],
|
|
44
41
|
button_class,
|
|
45
42
|
size_class,
|
|
43
|
+
'btn--active': active,
|
|
44
|
+
'btn--disabled': disabled,
|
|
46
45
|
'btn--icon': icon,
|
|
47
|
-
'btn--
|
|
46
|
+
'btn--icon-with-label': icon_with_label,
|
|
47
|
+
'btn--no-border': !border,
|
|
48
|
+
'btn--pill': pill
|
|
48
49
|
).join(' ')
|
|
49
50
|
end
|
|
50
51
|
|
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
module Optics
|
|
4
4
|
module Sidebar
|
|
5
5
|
class Component < ApplicationViewComponent
|
|
6
|
+
VARIANTS = %w[drawer compact rail].freeze
|
|
7
|
+
|
|
6
8
|
renders_one :brand, 'Brand'
|
|
7
|
-
renders_many :
|
|
9
|
+
renders_many :sidebar_contents, 'SidebarContent'
|
|
8
10
|
|
|
11
|
+
accepts :responsive, default: false
|
|
9
12
|
accepts :variant, default: 'drawer'
|
|
10
13
|
|
|
11
14
|
def call
|
|
@@ -15,16 +18,9 @@ module Optics
|
|
|
15
18
|
) do
|
|
16
19
|
capture do
|
|
17
20
|
concat brand
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
:div,
|
|
21
|
-
class: 'sidebar__content sidebar__content--center'
|
|
22
|
-
) do
|
|
23
|
-
buttons.each do |button|
|
|
24
|
-
concat button
|
|
25
|
-
end
|
|
21
|
+
sidebar_contents.each do |content|
|
|
22
|
+
concat content
|
|
26
23
|
end
|
|
27
|
-
)
|
|
28
24
|
end
|
|
29
25
|
end
|
|
30
26
|
end
|
|
@@ -33,7 +29,8 @@ module Optics
|
|
|
33
29
|
class_names(
|
|
34
30
|
'sidebar',
|
|
35
31
|
variant_class,
|
|
36
|
-
@attributes[:class]
|
|
32
|
+
@attributes[:class],
|
|
33
|
+
'sidebar--responsive': responsive
|
|
37
34
|
).join(' ')
|
|
38
35
|
end
|
|
39
36
|
|
|
@@ -43,24 +40,44 @@ module Optics
|
|
|
43
40
|
|
|
44
41
|
class Brand < ApplicationViewComponent
|
|
45
42
|
accepts :url
|
|
46
|
-
accepts :
|
|
43
|
+
accepts :img_src
|
|
44
|
+
accepts :name
|
|
47
45
|
|
|
48
46
|
def call
|
|
49
47
|
link_to(url, class: 'sidebar__brand') do
|
|
50
|
-
image_tag(
|
|
48
|
+
name || image_tag(img_src)
|
|
51
49
|
end
|
|
52
50
|
end
|
|
53
51
|
end
|
|
54
52
|
|
|
55
|
-
class
|
|
56
|
-
|
|
53
|
+
class SidebarContent < ApplicationViewComponent
|
|
54
|
+
accepts :position, default: 'center'
|
|
55
|
+
|
|
56
|
+
def call
|
|
57
|
+
content_tag(:div, class: classes) do
|
|
58
|
+
content
|
|
59
|
+
end
|
|
60
|
+
end
|
|
57
61
|
|
|
58
|
-
|
|
62
|
+
def classes
|
|
63
|
+
class_names(
|
|
64
|
+
'sidebar__content',
|
|
65
|
+
position_class
|
|
66
|
+
).join(' ')
|
|
67
|
+
end
|
|
68
|
+
|
|
69
|
+
def position_class
|
|
70
|
+
"sidebar__content--#{position}"
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
|
|
74
|
+
class LinksComponent < ApplicationViewComponent
|
|
75
|
+
accepts :img_src
|
|
59
76
|
accepts :url
|
|
60
77
|
|
|
61
78
|
def call
|
|
62
79
|
link_to(url, class: 'sidebar__brand') do
|
|
63
|
-
image_tag(
|
|
80
|
+
image_tag(img_src)
|
|
64
81
|
end
|
|
65
82
|
end
|
|
66
83
|
end
|
data/demo/Gemfile.lock
CHANGED
data/demo/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"dependencies": {
|
|
3
|
-
"@rolemodel/optics": "^0.
|
|
4
|
-
"sass": "^1.
|
|
3
|
+
"@rolemodel/optics": "^0.4.2",
|
|
4
|
+
"sass": "^1.63.6"
|
|
5
5
|
},
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
|
data/demo/yarn.lock
CHANGED
|
@@ -2,25 +2,12 @@
|
|
|
2
2
|
# yarn lockfile v1
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
"@
|
|
6
|
-
version "
|
|
7
|
-
resolved "https://registry.yarnpkg.com/@
|
|
8
|
-
integrity sha512-
|
|
9
|
-
dependencies:
|
|
10
|
-
"@orchidjs/unicode-variants" "^1.0.4"
|
|
11
|
-
|
|
12
|
-
"@orchidjs/unicode-variants@^1.0.4":
|
|
13
|
-
version "1.0.4"
|
|
14
|
-
resolved "https://registry.yarnpkg.com/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz#6d2f812e3b19545bba2d81caffff1204de9a6a58"
|
|
15
|
-
integrity sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==
|
|
16
|
-
|
|
17
|
-
"@rolemodel/optics@^0.3.1":
|
|
18
|
-
version "0.3.1"
|
|
19
|
-
resolved "https://registry.yarnpkg.com/@rolemodel/optics/-/optics-0.3.1.tgz#87a8f3733d8fc3e59d26f3c484e3a308cffd1f54"
|
|
20
|
-
integrity sha512-/bbYc63WH8Yp/PWJ8jew/O1mYqKYqTIw7ixWViEDt/XM4AG8WYZZV+WUvMBUrff5k8kM6M8ZZVLkmaDple8e/Q==
|
|
5
|
+
"@rolemodel/optics@^0.4.2":
|
|
6
|
+
version "0.4.2"
|
|
7
|
+
resolved "https://registry.yarnpkg.com/@rolemodel/optics/-/optics-0.4.2.tgz#c8cadfa37091a4d97e81f5ff8662af1b74505af5"
|
|
8
|
+
integrity sha512-yppM7DbMF5AmWQ4g21N5fLufwtmef9pmlTGlLPgUtMgVDBGZmoz0BiRf6VjUsAXNRmvgqCK/g+YrT1kyEtQE1A==
|
|
21
9
|
dependencies:
|
|
22
10
|
modern-css-reset "^1.4.0"
|
|
23
|
-
tom-select "^2.0.0"
|
|
24
11
|
|
|
25
12
|
anymatch@~3.1.2:
|
|
26
13
|
version "3.1.3"
|
|
@@ -127,10 +114,10 @@ readdirp@~3.6.0:
|
|
|
127
114
|
dependencies:
|
|
128
115
|
picomatch "^2.2.1"
|
|
129
116
|
|
|
130
|
-
sass@^1.
|
|
131
|
-
version "1.
|
|
132
|
-
resolved "https://registry.yarnpkg.com/sass/-/sass-1.
|
|
133
|
-
integrity sha512-
|
|
117
|
+
sass@^1.63.6:
|
|
118
|
+
version "1.63.6"
|
|
119
|
+
resolved "https://registry.yarnpkg.com/sass/-/sass-1.63.6.tgz#481610e612902e0c31c46b46cf2dad66943283ea"
|
|
120
|
+
integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==
|
|
134
121
|
dependencies:
|
|
135
122
|
chokidar ">=3.0.0 <4.0.0"
|
|
136
123
|
immutable "^4.0.0"
|
|
@@ -147,11 +134,3 @@ to-regex-range@^5.0.1:
|
|
|
147
134
|
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
|
|
148
135
|
dependencies:
|
|
149
136
|
is-number "^7.0.0"
|
|
150
|
-
|
|
151
|
-
tom-select@^2.0.0:
|
|
152
|
-
version "2.2.2"
|
|
153
|
-
resolved "https://registry.yarnpkg.com/tom-select/-/tom-select-2.2.2.tgz#8e5f9296e6d80254feccb57f0986bd6c44d126e2"
|
|
154
|
-
integrity sha512-igGah1yY6yhrnN2h/Ky8I5muw/nE/YQxIsEZoYu5qaA4bsRibvKto3s8QZZosKpOd0uO8fNYhRfAwgHB4IAYew==
|
|
155
|
-
dependencies:
|
|
156
|
-
"@orchidjs/sifter" "^1.0.3"
|
|
157
|
-
"@orchidjs/unicode-variants" "^1.0.4"
|
|
@@ -2,31 +2,59 @@
|
|
|
2
2
|
|
|
3
3
|
module Optics
|
|
4
4
|
class ButtonPreview < ViewComponent::Preview
|
|
5
|
+
include ComponentHelper
|
|
6
|
+
|
|
7
|
+
# @param active toggle
|
|
5
8
|
# @param border toggle
|
|
9
|
+
# @param disabled toggle
|
|
6
10
|
# @param icon toggle
|
|
11
|
+
# @param icon_with_label toggle
|
|
7
12
|
# @param id text
|
|
8
13
|
# @param label text
|
|
14
|
+
# @param pill toggle
|
|
9
15
|
# @param size select {{ Optics::Button::Component::SIZES }}
|
|
10
16
|
# @param variant select {{ Optics::Button::Component::STYLES }}
|
|
11
17
|
# @param url text
|
|
12
18
|
def default( # rubocop:disable Metrics/ParameterLists
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
19
|
+
active: false,
|
|
20
|
+
border: true,
|
|
21
|
+
disabled: false,
|
|
22
|
+
icon: false,
|
|
23
|
+
icon_with_label: false,
|
|
24
|
+
id: nil,
|
|
25
|
+
label: 'Default',
|
|
26
|
+
pill: false,
|
|
27
|
+
size: 'medium',
|
|
28
|
+
variant: 'default',
|
|
29
|
+
url: nil
|
|
30
|
+
)
|
|
31
|
+
component 'optics/button', active:, border:, disabled:, icon:, icon_with_label:, id:, label:, pill:, size:,
|
|
32
|
+
variant:, url:
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
# @param active toggle
|
|
36
|
+
# @param border toggle
|
|
37
|
+
# @param disabled toggle
|
|
38
|
+
# @param icon toggle
|
|
39
|
+
# @param icon_with_label toggle
|
|
40
|
+
# @param id text
|
|
41
|
+
# @param pill toggle
|
|
42
|
+
# @param size select {{ Optics::Button::Component::SIZES }}
|
|
43
|
+
# @param variant select {{ Optics::Button::Component::STYLES }}
|
|
44
|
+
# @param url text
|
|
45
|
+
def with_icon( # rubocop:disable Metrics/ParameterLists
|
|
46
|
+
active: false,
|
|
47
|
+
border: true,
|
|
48
|
+
disabled: false,
|
|
49
|
+
icon: false,
|
|
50
|
+
icon_with_label: false,
|
|
51
|
+
id: nil,
|
|
52
|
+
pill: false,
|
|
53
|
+
size: 'medium',
|
|
54
|
+
variant: 'default',
|
|
55
|
+
url: nil
|
|
56
|
+
)
|
|
57
|
+
render_with_template(locals: { active:, border:, disabled:, icon:, icon_with_label:, id:, pill:, size:, url: })
|
|
30
58
|
end
|
|
31
59
|
end
|
|
32
60
|
end
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
module Optics
|
|
4
4
|
class IconPreview < ViewComponent::Preview
|
|
5
|
+
include ComponentHelper
|
|
6
|
+
|
|
5
7
|
# @param emphasis select {{ Optics::Icon::Component::EMPHASES }}
|
|
6
8
|
# @param filled toggle
|
|
7
9
|
# @param name
|
|
@@ -9,23 +11,14 @@ module Optics
|
|
|
9
11
|
# @param title
|
|
10
12
|
# @param weight select {{ Optics::Icon::Component::WEIGHTS }}
|
|
11
13
|
def default( # rubocop:disable Metrics/ParameterLists
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
Optics::Icon::Component.new(
|
|
21
|
-
emphasis:,
|
|
22
|
-
filled:,
|
|
23
|
-
name:,
|
|
24
|
-
size:,
|
|
25
|
-
title:,
|
|
26
|
-
weight:
|
|
27
|
-
)
|
|
28
|
-
)
|
|
14
|
+
emphasis: 'normal',
|
|
15
|
+
filled: false,
|
|
16
|
+
name: 'settings',
|
|
17
|
+
size: 'normal',
|
|
18
|
+
title: nil,
|
|
19
|
+
weight: 'normal'
|
|
20
|
+
)
|
|
21
|
+
component('optics/icon', emphasis:, filled:, name:, size:, title:, weight:)
|
|
29
22
|
end
|
|
30
23
|
end
|
|
31
24
|
end
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Optics
|
|
4
|
+
class SidebarPreview < ViewComponent::Preview
|
|
5
|
+
include ComponentHelper
|
|
6
|
+
|
|
7
|
+
# @param responsive toggle
|
|
8
|
+
# @param variant select {{ Optics::Sidebar::Component::VARIANTS }}
|
|
9
|
+
def default(
|
|
10
|
+
responsive: true,
|
|
11
|
+
variant: 'drawer'
|
|
12
|
+
)
|
|
13
|
+
component('optics/sidebar', responsive:, variant:) do |sidebar|
|
|
14
|
+
sidebar.with_brand(name: 'Optics', url: 'https://www.example.com')
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: optics_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.8
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Reed Law
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-07-
|
|
11
|
+
date: 2023-07-19 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: view_component
|
|
@@ -178,8 +178,11 @@ files:
|
|
|
178
178
|
- lib/optics/view_components.rb
|
|
179
179
|
- lib/optics/view_components/engine.rb
|
|
180
180
|
- lib/optics/view_components/version.rb
|
|
181
|
+
- previews/component_helper.rb
|
|
181
182
|
- previews/optics/button_preview.rb
|
|
183
|
+
- previews/optics/button_preview/with_icon.html.erb
|
|
182
184
|
- previews/optics/icon_preview.rb
|
|
185
|
+
- previews/optics/sidebar_preview.rb
|
|
183
186
|
- sig/optics_view_components.rbs
|
|
184
187
|
homepage: https://github.com/RoleModel/optics_view_components
|
|
185
188
|
licenses:
|