uistiti 0.1.0 → 0.1.1
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/app/assets/javascript/controllers/uistiti/alpha/button/button_controller.js +8 -0
- data/app/assets/javascript/controllers/uistiti/alpha/container/container_controller.js +8 -0
- data/app/assets/javascript/controllers/uistiti/alpha/form_input_group/form_input_group_controller.js +8 -0
- data/app/assets/javascript/controllers/uistiti/alpha/form_submit/form_submit_controller.js +8 -0
- data/app/assets/stylesheets/uistiti/components/alpha/button.scss +63 -0
- data/app/assets/stylesheets/uistiti/components/alpha/container.scss +9 -0
- data/app/assets/stylesheets/uistiti/components/alpha/form_input_group.scss +5 -0
- data/app/assets/stylesheets/uistiti/components/alpha/form_submit.scss +3 -0
- data/app/assets/stylesheets/uistiti/config/_variables.scss +8 -0
- data/app/assets/stylesheets/uistiti/uistiti.scss +4 -0
- data/app/components/uistiti/alpha/button.html.erb +3 -0
- data/app/components/uistiti/alpha/button.rb +22 -0
- data/app/components/uistiti/alpha/container.html.erb +3 -0
- data/app/components/uistiti/alpha/container.rb +12 -0
- data/app/components/uistiti/alpha/form_input_group.html.erb +4 -0
- data/app/components/uistiti/alpha/form_input_group.rb +18 -0
- data/app/components/uistiti/alpha/form_submit.html.erb +1 -0
- data/app/components/uistiti/alpha/form_submit.rb +23 -0
- data/app/views/layouts/uistiti/component_preview.html.erb +19 -0
- data/lib/uistiti/engine.rb +1 -1
- data/lib/uistiti/version.rb +1 -1
- metadata +18 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d685efb85d3ccbdb9ecab216a9f0ee842596827ea4689a83077dacfcbb3dc0ab
|
|
4
|
+
data.tar.gz: '08d4c0113d6b18ff1d61d1d6e34cb3260563240b55088f43dd2341b7f6aaba07'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d6522fda8d884aae5b8fac5f5baf7240b12635c41e0a60e35cc8c7ddc1b9406a5f2717f2bdcc0a5274ad891a570d99114b79ce782ddc87ed41d4c9a538aa8ba0
|
|
7
|
+
data.tar.gz: e1bade77ab1db46467226c2c81b5db9da6dc8e8ff0feac879e3a0a17b6276c5bc0085e5bdd24f6485d49a78c29e228a7ed9a5ec2a7882e064943be9243df2c36
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
|
|
3
|
+
// this stimulus controller can be registered with identifier : uistiti--alpha--button
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
connect() {
|
|
6
|
+
console.log("Hello, from button stimulus controller !", this.element);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
|
|
3
|
+
// this stimulus controller can be registered with identifier : uistiti--alpha--container
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
connect() {
|
|
6
|
+
console.log("Hello, from container stimulus controller !", this.element);
|
|
7
|
+
}
|
|
8
|
+
}
|
data/app/assets/javascript/controllers/uistiti/alpha/form_input_group/form_input_group_controller.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
|
|
3
|
+
// this stimulus controller can be registered with identifier : uistiti--alpha--form-input-group
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
connect() {
|
|
6
|
+
console.log("Hello, from form_input_group stimulus controller !", this.element);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
|
|
3
|
+
// this stimulus controller can be registered with identifier : uistiti--alpha--form-submit
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
connect() {
|
|
6
|
+
console.log("Hello, from form_submit stimulus controller !", this.element);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* CSS for Button */
|
|
2
|
+
|
|
3
|
+
.Button {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
padding: $size-space-small $size-space-small;
|
|
6
|
+
background-origin: border-box; // Invisible borders with linear gradients
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
border: solid 2px transparent;
|
|
9
|
+
border-radius: $radii-base-sm;
|
|
10
|
+
font-weight: bold;
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
outline: none;
|
|
14
|
+
transition: filter 400ms, color 200ms;
|
|
15
|
+
|
|
16
|
+
&:hover,
|
|
17
|
+
&:focus,
|
|
18
|
+
&:focus-within,
|
|
19
|
+
&:active {
|
|
20
|
+
transition: filter 250ms, color 200ms;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&--primary {
|
|
24
|
+
color: $color-base-white;
|
|
25
|
+
// background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
|
|
26
|
+
background-image: linear-gradient(to right, $color-background-button-primary-base, $color-background-button-primary-base);
|
|
27
|
+
|
|
28
|
+
&:hover,
|
|
29
|
+
&:focus,
|
|
30
|
+
&:focus-within,
|
|
31
|
+
&:active {
|
|
32
|
+
color: $color-base-white;
|
|
33
|
+
filter: saturate(1.4) brightness(115%);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&--secondary {
|
|
37
|
+
color: $color-base-white;
|
|
38
|
+
// background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
|
|
39
|
+
background-image: linear-gradient(to right, $color-background-button-secondary-base, $color-background-button-secondary-base);
|
|
40
|
+
|
|
41
|
+
&:hover,
|
|
42
|
+
&:focus,
|
|
43
|
+
&:focus-within,
|
|
44
|
+
&:active {
|
|
45
|
+
color: $color-base-white;
|
|
46
|
+
filter: saturate(1.4) brightness(115%);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&--danger {
|
|
50
|
+
color: $color-base-white;
|
|
51
|
+
// background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
|
|
52
|
+
background-image: linear-gradient(to right, $color-background-button-error-base, $color-background-button-error-base);
|
|
53
|
+
|
|
54
|
+
&:hover,
|
|
55
|
+
&:focus,
|
|
56
|
+
&:focus-within,
|
|
57
|
+
&:active {
|
|
58
|
+
color: $color-base-white;
|
|
59
|
+
filter: saturate(1.4) brightness(115%);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
}
|
|
@@ -296,6 +296,7 @@ $color-background-button-primary-active: #00796b;
|
|
|
296
296
|
$color-background-button-secondary-base: #3f51b5;
|
|
297
297
|
$color-background-button-secondary-disabled: #7986cb;
|
|
298
298
|
$color-background-button-secondary-active: #303f9f;
|
|
299
|
+
$color-background-button-error-base: $color-background-error;
|
|
299
300
|
//############### BACKGROUND OVERLAY ###############
|
|
300
301
|
$color-background-overlay-light: rgba(255, 255, 255, 0.8);
|
|
301
302
|
$color-background-overlay-dark: rgba(0, 0, 0, 0.27);
|
|
@@ -388,3 +389,10 @@ $size-space-large: 1.5rem;
|
|
|
388
389
|
$size-space-xl: 2rem;
|
|
389
390
|
$size-space-xxl: 3rem;
|
|
390
391
|
$size-space-base: 1rem;
|
|
392
|
+
//##################################################
|
|
393
|
+
//################## BREAKPOINTS ###################
|
|
394
|
+
//##################################################
|
|
395
|
+
$breakpoint-small: 544px;
|
|
396
|
+
$breakpoint-medium: 768px;
|
|
397
|
+
$breakpoint-large: 1012px;
|
|
398
|
+
$breakpoint-xl: 1280px;
|
|
@@ -18,3 +18,7 @@
|
|
|
18
18
|
@import "components/alpha/flex";
|
|
19
19
|
@import "components/alpha/navbar";
|
|
20
20
|
@import "components/alpha/image";
|
|
21
|
+
@import "components/alpha/container";
|
|
22
|
+
@import "components/alpha/button";
|
|
23
|
+
@import "components/alpha/form_submit";
|
|
24
|
+
@import "components/alpha/form_input_group";
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Uistiti
|
|
4
|
+
module Alpha
|
|
5
|
+
class Button < ViewComponent::Base
|
|
6
|
+
def initialize(color:)
|
|
7
|
+
super()
|
|
8
|
+
|
|
9
|
+
@color = color
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
private
|
|
13
|
+
|
|
14
|
+
def classes
|
|
15
|
+
[
|
|
16
|
+
"Button",
|
|
17
|
+
"Button--#{@color}"
|
|
18
|
+
]
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Uistiti
|
|
4
|
+
module Alpha
|
|
5
|
+
class FormInputGroup < ViewComponent::Base
|
|
6
|
+
def initialize(form:, type:, field: ,label: , required: false, direction: :column)
|
|
7
|
+
super()
|
|
8
|
+
|
|
9
|
+
@form = form
|
|
10
|
+
@type = type
|
|
11
|
+
@field = field
|
|
12
|
+
@label= label
|
|
13
|
+
@required = required
|
|
14
|
+
@direction = direction
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= @form.submit @text, class: classes %>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Uistiti
|
|
4
|
+
module Alpha
|
|
5
|
+
class FormSubmit < ViewComponent::Base
|
|
6
|
+
def initialize(form: ,text: ,color:)
|
|
7
|
+
super()
|
|
8
|
+
|
|
9
|
+
@form = form
|
|
10
|
+
@text = text
|
|
11
|
+
@color = color
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def classes
|
|
15
|
+
[
|
|
16
|
+
"FormSubmit",
|
|
17
|
+
"Button",
|
|
18
|
+
"Button--#{@color}"
|
|
19
|
+
]
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
23
|
+
end
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Dummy</title>
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<%= csrf_meta_tags %>
|
|
7
|
+
<%= csp_meta_tag %>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
background: beige;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
<%= stylesheet_link_tag "application" %>
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<%= yield %>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
data/lib/uistiti/engine.rb
CHANGED
|
@@ -7,6 +7,6 @@ module Uistiti
|
|
|
7
7
|
|
|
8
8
|
#Show to lookbook where it can find the previews
|
|
9
9
|
Lookbook.config.preview_paths = [File.join(root, 'test/components/previews')]
|
|
10
|
-
Lookbook.config.preview_layout = "component_preview"
|
|
10
|
+
Lookbook.config.preview_layout = "uistiti/component_preview"
|
|
11
11
|
end
|
|
12
12
|
end
|
data/lib/uistiti/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: uistiti
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tom Ecrepont
|
|
@@ -70,20 +70,36 @@ files:
|
|
|
70
70
|
- README.md
|
|
71
71
|
- Rakefile
|
|
72
72
|
- app/assets/config/uistiti_manifest.js
|
|
73
|
+
- app/assets/javascript/controllers/uistiti/alpha/button/button_controller.js
|
|
74
|
+
- app/assets/javascript/controllers/uistiti/alpha/container/container_controller.js
|
|
73
75
|
- app/assets/javascript/controllers/uistiti/alpha/flex/flex_controller.js
|
|
76
|
+
- app/assets/javascript/controllers/uistiti/alpha/form_input_group/form_input_group_controller.js
|
|
77
|
+
- app/assets/javascript/controllers/uistiti/alpha/form_submit/form_submit_controller.js
|
|
74
78
|
- app/assets/javascript/controllers/uistiti/alpha/image/image_controller.js
|
|
75
79
|
- app/assets/javascript/controllers/uistiti/alpha/link/link_controller.js
|
|
76
80
|
- app/assets/javascript/controllers/uistiti/alpha/main_layout/main_layout_controller.js
|
|
77
81
|
- app/assets/javascript/controllers/uistiti/alpha/navbar/navbar_controller.js
|
|
82
|
+
- app/assets/stylesheets/uistiti/components/alpha/button.scss
|
|
83
|
+
- app/assets/stylesheets/uistiti/components/alpha/container.scss
|
|
78
84
|
- app/assets/stylesheets/uistiti/components/alpha/flex.scss
|
|
85
|
+
- app/assets/stylesheets/uistiti/components/alpha/form_input_group.scss
|
|
86
|
+
- app/assets/stylesheets/uistiti/components/alpha/form_submit.scss
|
|
79
87
|
- app/assets/stylesheets/uistiti/components/alpha/image.scss
|
|
80
88
|
- app/assets/stylesheets/uistiti/components/alpha/link.scss
|
|
81
89
|
- app/assets/stylesheets/uistiti/components/alpha/main_layout.scss
|
|
82
90
|
- app/assets/stylesheets/uistiti/components/alpha/navbar.scss
|
|
83
91
|
- app/assets/stylesheets/uistiti/config/_variables.scss
|
|
84
92
|
- app/assets/stylesheets/uistiti/uistiti.scss
|
|
93
|
+
- app/components/uistiti/alpha/button.html.erb
|
|
94
|
+
- app/components/uistiti/alpha/button.rb
|
|
95
|
+
- app/components/uistiti/alpha/container.html.erb
|
|
96
|
+
- app/components/uistiti/alpha/container.rb
|
|
85
97
|
- app/components/uistiti/alpha/flex.html.erb
|
|
86
98
|
- app/components/uistiti/alpha/flex.rb
|
|
99
|
+
- app/components/uistiti/alpha/form_input_group.html.erb
|
|
100
|
+
- app/components/uistiti/alpha/form_input_group.rb
|
|
101
|
+
- app/components/uistiti/alpha/form_submit.html.erb
|
|
102
|
+
- app/components/uistiti/alpha/form_submit.rb
|
|
87
103
|
- app/components/uistiti/alpha/image.html.erb
|
|
88
104
|
- app/components/uistiti/alpha/image.rb
|
|
89
105
|
- app/components/uistiti/alpha/link.html.erb
|
|
@@ -98,6 +114,7 @@ files:
|
|
|
98
114
|
- app/mailers/uistiti/application_mailer.rb
|
|
99
115
|
- app/models/uistiti/application_record.rb
|
|
100
116
|
- app/views/layouts/uistiti/application.html.erb
|
|
117
|
+
- app/views/layouts/uistiti/component_preview.html.erb
|
|
101
118
|
- config/routes.rb
|
|
102
119
|
- lib/generators/uistiti/component_generator.rb
|
|
103
120
|
- lib/generators/uistiti/templates/component.html.tt
|