shimmer 0.0.29 → 0.0.31
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.babelrc +14 -0
- data/Gemfile +2 -0
- data/Gemfile.lock +9 -1
- data/README.md +120 -3
- data/config/rubocop_extensions/rspec.yml +0 -5
- data/gemfiles/Gemfile-rails-7-0 +2 -0
- data/lib/shimmer/controllers/sitemaps_controller.rb +3 -1
- data/lib/shimmer/utils/file_helper.rb +1 -1
- data/lib/shimmer/version.rb +1 -1
- data/package.json +24 -4
- data/rollup.component.config.js +37 -0
- data/src/components/stack.scss +252 -0
- data/src/components/stack.tsx +81 -0
- data/src/modal.ts +5 -1
- data/stack.png +0 -0
- data/tsconfig.json +3 -2
- data/yarn.lock +3091 -372
- metadata +7 -2
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import "./stack.scss";
|
|
4
|
+
|
|
5
|
+
type Justify =
|
|
6
|
+
| "start"
|
|
7
|
+
| "center"
|
|
8
|
+
| "end"
|
|
9
|
+
| "space-between"
|
|
10
|
+
| "space-around"
|
|
11
|
+
| "stretch"
|
|
12
|
+
| "equal-size";
|
|
13
|
+
type Align = "start" | "center" | "end" | "stretch" | "baseline";
|
|
14
|
+
|
|
15
|
+
export interface Props {
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
gap?: number;
|
|
18
|
+
gapTablet?: number;
|
|
19
|
+
gapDesktop?: number;
|
|
20
|
+
gapWidescreen?: number;
|
|
21
|
+
line?: boolean;
|
|
22
|
+
lineTablet?: boolean;
|
|
23
|
+
lineDesktop?: boolean;
|
|
24
|
+
lineWidescreen?: boolean;
|
|
25
|
+
align?: Align;
|
|
26
|
+
alignTablet?: Align;
|
|
27
|
+
alignDesktop?: Align;
|
|
28
|
+
alignWidescreen?: Align;
|
|
29
|
+
justify?: Justify;
|
|
30
|
+
justifyTablet?: Justify;
|
|
31
|
+
justifyDesktop?: Justify;
|
|
32
|
+
justifyWidescreen?: Justify;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export function Stack({
|
|
36
|
+
children,
|
|
37
|
+
gap = 8,
|
|
38
|
+
gapTablet,
|
|
39
|
+
gapDesktop,
|
|
40
|
+
gapWidescreen,
|
|
41
|
+
line,
|
|
42
|
+
lineTablet,
|
|
43
|
+
lineDesktop,
|
|
44
|
+
lineWidescreen,
|
|
45
|
+
align,
|
|
46
|
+
alignTablet,
|
|
47
|
+
alignDesktop,
|
|
48
|
+
alignWidescreen,
|
|
49
|
+
justify,
|
|
50
|
+
justifyTablet,
|
|
51
|
+
justifyDesktop,
|
|
52
|
+
justifyWidescreen,
|
|
53
|
+
}: Props): JSX.Element {
|
|
54
|
+
return (
|
|
55
|
+
<div
|
|
56
|
+
className={classnames(
|
|
57
|
+
"stack",
|
|
58
|
+
gap && `stack--${gap}`,
|
|
59
|
+
gapTablet && `stack--tablet-${gapTablet}`,
|
|
60
|
+
gapDesktop && `stack--desktop-${gapDesktop}`,
|
|
61
|
+
gapWidescreen && `stack--widescreen-${gapWidescreen}`,
|
|
62
|
+
align && `stack--align-${align}`,
|
|
63
|
+
alignTablet && `stack--align-tablet-${alignTablet}`,
|
|
64
|
+
alignDesktop && `stack--align-desktop-${alignDesktop}`,
|
|
65
|
+
alignWidescreen && `stack--align-widescreen-${alignWidescreen}`,
|
|
66
|
+
justify && `stack--justify-${justify}`,
|
|
67
|
+
justifyTablet && `stack--justify-tablet-${justifyTablet}`,
|
|
68
|
+
justifyDesktop && `stack--justify-desktop-${justifyDesktop}`,
|
|
69
|
+
justifyWidescreen && `stack--justify-widescreen-${justifyWidescreen}`,
|
|
70
|
+
{
|
|
71
|
+
"stack--line": line,
|
|
72
|
+
"stack--line-tablet": lineTablet,
|
|
73
|
+
"stack--line-desktop": lineDesktop,
|
|
74
|
+
"stack--line-widescreen": lineWidescreen,
|
|
75
|
+
}
|
|
76
|
+
)}
|
|
77
|
+
>
|
|
78
|
+
{children}
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
}
|
data/src/modal.ts
CHANGED
|
@@ -66,7 +66,11 @@ export class Modal {
|
|
|
66
66
|
closeButton.style.display = close ?? true ? "block" : "none";
|
|
67
67
|
root.classList.add("modal--open");
|
|
68
68
|
root.classList.add("modal--loading");
|
|
69
|
-
|
|
69
|
+
|
|
70
|
+
if (size) {
|
|
71
|
+
root.classList.add(`modal--${size}`);
|
|
72
|
+
}
|
|
73
|
+
|
|
70
74
|
frame.innerHTML = await getHTML(url);
|
|
71
75
|
root.classList.remove("modal--loading");
|
|
72
76
|
}
|
data/stack.png
ADDED
|
Binary file
|
data/tsconfig.json
CHANGED
|
@@ -21,8 +21,9 @@
|
|
|
21
21
|
"suppressImplicitAnyIndexErrors": true,
|
|
22
22
|
"target": "es6",
|
|
23
23
|
"isolatedModules": true,
|
|
24
|
-
"declaration": true
|
|
24
|
+
"declaration": true,
|
|
25
|
+
"jsx": "react"
|
|
25
26
|
},
|
|
26
27
|
"exclude": ["node_modules", "dist"],
|
|
27
|
-
"files": ["src/index.ts"]
|
|
28
|
+
"files": ["src/index.ts", "src/components/stack.tsx"]
|
|
28
29
|
}
|