essence 0.2.1 → 0.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/essence/components/avatar.rb +15 -29
- data/lib/essence/components/badge.rb +21 -11
- data/lib/essence/components/button.rb +21 -14
- data/lib/essence/version.rb +1 -1
- data/lib/essence.rb +7 -6
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f9be2e0f4b7e7288c5cf845c54d67988f472a967ebdd04b6d01ac790c1d1c7a4
|
4
|
+
data.tar.gz: f1ebff9a5f1f108042f48f3241edc2cd5d8998d9605b20d6e52bed3b338219dc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 067d0df4723dd420b5100d7c21c417f37e959e62e325154fcd3671a22b3b919d51720e6b6a911233a8791065d0a3a93a9b931c0111b5e4b90454aa6c8648b80c
|
7
|
+
data.tar.gz: 06d8732651332803411614ae867fd3e78ae226853992fd3d0367bc441054925d6647d4c2151d0c3e0af4b24990b8a24891c8042f816789cd454cda9f5197e03d
|
@@ -1,49 +1,35 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
class Essence::
|
4
|
-
BASE = "
|
3
|
+
class Essence::Avatar < Essence::Essence
|
4
|
+
BASE = "border border-transparent rounded-full bg-gray-100 aspect-square inline-flex items-center justify-center font-medium text-gray-700 overflow-hidden"
|
5
|
+
|
5
6
|
SIZES = {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
md: "text-sm px-4 py-2 gap-2",
|
10
|
-
lg: "text-base px-6 py-2.5 gap-2.5",
|
11
|
-
xl: "text-base px-8 py-3 gap-3"
|
12
|
-
}
|
13
|
-
KINDS = {
|
14
|
-
primary: "text-white bg-indigo-500 hover:bg-indigo-500",
|
15
|
-
secondary: "text-gray-700 bg-gray-100 hover:bg-gray-200",
|
16
|
-
critical: "text-white bg-rose-500 hover:bg-rose-400",
|
17
|
-
warning: "text-white bg-amber-500 hover:bg-amber-400",
|
18
|
-
success: "text-white bg-emerald-500 hover:bg-emerald-400",
|
19
|
-
info: "text-white bg-blue-500 hover:bg-blue-400",
|
20
|
-
dark: "text-white bg-gray-900 hover:bg-gray-800",
|
21
|
-
white: "text-gray-900 bg-white hover:bg-gray-200",
|
22
|
-
ghost: "text-gray-900 bg-white hover:bg-gray-200 hover:text-gray-800"
|
7
|
+
sm: "size-6 text-[0.5rem]",
|
8
|
+
md: "size-8 text-xs",
|
9
|
+
lg: "size-12 text-sm"
|
23
10
|
}
|
24
11
|
|
25
|
-
attr_reader :size
|
26
|
-
attr_reader :kind
|
27
12
|
attr_reader :attributes
|
13
|
+
attr_reader :size
|
28
14
|
|
29
|
-
def initialize(size: :md,
|
15
|
+
def initialize(size: :md, **attributes)
|
30
16
|
@size = size
|
31
|
-
@kind = kind
|
32
17
|
@attributes = attributes
|
33
18
|
@attributes[:class] = construct_classes(@attributes[:class])
|
34
19
|
end
|
35
20
|
|
36
21
|
def view_template(&)
|
37
|
-
|
22
|
+
div(**attributes) do
|
23
|
+
img(src: attributes[:src], alt: attributes[:alt]) if attributes[:src]
|
24
|
+
yield if block_given?
|
25
|
+
end
|
38
26
|
end
|
39
27
|
|
40
|
-
|
41
|
-
|
42
|
-
def element_tag(...)
|
43
|
-
attributes[:href] ? a(...) : button(...)
|
28
|
+
def fallback(**attrs, &)
|
29
|
+
div(**attrs, &)
|
44
30
|
end
|
45
31
|
|
46
32
|
def construct_classes(classes)
|
47
|
-
TAILWIND_MERGER.merge([ BASE, SIZES[size],
|
33
|
+
TAILWIND_MERGER.merge([ BASE, SIZES[size], classes ].compact)
|
48
34
|
end
|
49
35
|
end
|
@@ -1,18 +1,30 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
class Essence::
|
4
|
-
BASE = "
|
3
|
+
class Essence::Badge < Essence::Essence
|
4
|
+
BASE = "inline-flex items-center justify-center w-fit rounded-full border border-transparent font-medium transition duration-150 hover:opacity-90"
|
5
5
|
SIZES = {
|
6
|
-
|
7
|
-
|
8
|
-
|
6
|
+
none: "",
|
7
|
+
sm: "text-[0.65rem] px-2 py-0.5 gap-1 min-w-8",
|
8
|
+
md: "text-xs px-2.5 py-1 gap-2 min-w-12",
|
9
|
+
lg: "text-sm px-4 py-1 gap-2 min-w-16"
|
10
|
+
}
|
11
|
+
KINDS = {
|
12
|
+
primary: "text-gray-900 border-gray-200",
|
13
|
+
success: "text-white bg-emerald-500",
|
14
|
+
critical: "text-white bg-rose-500",
|
15
|
+
warning: "text-white bg-amber-500",
|
16
|
+
info: "text-white bg-blue-500",
|
17
|
+
dark: "text-white bg-gray-900",
|
18
|
+
white: "text-gray-900 bg-white"
|
9
19
|
}
|
10
20
|
|
11
|
-
attr_reader :attributes
|
12
21
|
attr_reader :size
|
22
|
+
attr_reader :kind
|
23
|
+
attr_reader :attributes
|
13
24
|
|
14
|
-
def initialize(size: :md, **attributes)
|
25
|
+
def initialize(size: :md, kind: :primary, **attributes)
|
15
26
|
@size = size
|
27
|
+
@kind = kind
|
16
28
|
@attributes = attributes
|
17
29
|
@attributes[:class] = construct_classes(@attributes[:class])
|
18
30
|
end
|
@@ -21,11 +33,9 @@ class Essence::Avatar < Essence::Essence
|
|
21
33
|
div(**attributes, &)
|
22
34
|
end
|
23
35
|
|
24
|
-
|
25
|
-
span(**attrs, &)
|
26
|
-
end
|
36
|
+
private
|
27
37
|
|
28
38
|
def construct_classes(classes)
|
29
|
-
TAILWIND_MERGER.merge([ BASE, SIZES[size], classes ].compact)
|
39
|
+
TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
|
30
40
|
end
|
31
41
|
end
|
@@ -1,21 +1,25 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
class Essence::
|
4
|
-
BASE = "inline-flex items-center justify-center w-fit rounded-
|
3
|
+
class Essence::Button < Essence::Essence
|
4
|
+
BASE = "inline-flex items-center justify-center w-fit rounded-xs border border-transparent font-medium transition duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
|
5
5
|
SIZES = {
|
6
6
|
none: "",
|
7
|
-
|
8
|
-
|
9
|
-
|
7
|
+
xs: "text-[0.6rem] px-2 py-1.5 gap-1",
|
8
|
+
sm: "text-xs px-3 py-2 gap-1.5",
|
9
|
+
md: "text-sm px-4 py-2 gap-2",
|
10
|
+
lg: "text-base px-6 py-2.5 gap-2.5",
|
11
|
+
xl: "text-base px-8 py-3 gap-3"
|
10
12
|
}
|
11
13
|
KINDS = {
|
12
|
-
primary: "text-
|
13
|
-
|
14
|
-
critical: "text-white bg-rose-500",
|
15
|
-
warning: "text-white bg-amber-500",
|
16
|
-
|
17
|
-
|
18
|
-
|
14
|
+
primary: "text-white bg-indigo-500 hover:bg-indigo-500",
|
15
|
+
secondary: "text-gray-700 bg-gray-100 hover:bg-gray-200",
|
16
|
+
critical: "text-white bg-rose-500 hover:bg-rose-400",
|
17
|
+
warning: "text-white bg-amber-500 hover:bg-amber-400",
|
18
|
+
success: "text-white bg-emerald-500 hover:bg-emerald-400",
|
19
|
+
info: "text-white bg-blue-500 hover:bg-blue-400",
|
20
|
+
dark: "text-white bg-gray-900 hover:bg-gray-800",
|
21
|
+
white: "text-gray-900 bg-white hover:bg-gray-200",
|
22
|
+
ghost: "text-gray-900 bg-white hover:bg-gray-200 hover:text-gray-800"
|
19
23
|
}
|
20
24
|
|
21
25
|
attr_reader :size
|
@@ -30,13 +34,16 @@ class Essence::Badge < Essence::Essence
|
|
30
34
|
end
|
31
35
|
|
32
36
|
def view_template(&)
|
33
|
-
|
37
|
+
element_tag(**attributes, &)
|
34
38
|
end
|
35
39
|
|
36
40
|
private
|
37
41
|
|
42
|
+
def element_tag(...)
|
43
|
+
attributes[:href] ? a(...) : button(...)
|
44
|
+
end
|
45
|
+
|
38
46
|
def construct_classes(classes)
|
39
47
|
TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
|
40
48
|
end
|
41
|
-
|
42
49
|
end
|
data/lib/essence/version.rb
CHANGED
data/lib/essence.rb
CHANGED
@@ -4,12 +4,13 @@ require "tailwind_merge"
|
|
4
4
|
|
5
5
|
module Essence
|
6
6
|
# Autoloading
|
7
|
-
autoload :
|
8
|
-
|
7
|
+
autoload :Avatar, "essence/components/avatar"
|
8
|
+
autoload :Badge, "essence/components/badge"
|
9
9
|
autoload :Button, "essence/components/button"
|
10
|
+
# autoload :Essence, "essence/components/essence" # Base component
|
10
11
|
autoload :Link, "essence/components/link"
|
11
|
-
autoload :Skeleton, "essence/components/skeleton"
|
12
12
|
autoload :Row, "essence/components/row"
|
13
|
+
autoload :Skeleton, "essence/components/skeleton"
|
13
14
|
|
14
15
|
autoload :CLI, "essence/cli"
|
15
16
|
|
@@ -19,12 +20,12 @@ module Essence
|
|
19
20
|
def self.component_class_names
|
20
21
|
@component_class_names ||= {
|
21
22
|
essence: "Essence::Essence",
|
22
|
-
|
23
|
+
avatar: "Essence::Avatar",
|
23
24
|
badge: "Essence::Badge",
|
24
25
|
button: "Essence::Button",
|
25
26
|
link: "Essence::Link",
|
26
|
-
skeleton: "Essence::Skeleton",
|
27
27
|
row: "Essence::Row",
|
28
|
+
skeleton: "Essence::Skeleton",
|
28
29
|
}
|
29
30
|
end
|
30
31
|
|
@@ -35,8 +36,8 @@ module Essence
|
|
35
36
|
badge: ::Essence::Badge,
|
36
37
|
button: ::Essence::Button,
|
37
38
|
link: ::Essence::Link,
|
38
|
-
skeleton: ::Essence::Skeleton,
|
39
39
|
row: ::Essence::Row,
|
40
|
+
skeleton: ::Essence::Skeleton,
|
40
41
|
}
|
41
42
|
end
|
42
43
|
|