essence 0.2.1 → 0.2.2
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/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
|
|