@sproutsocial/seeds-react-loader 1.0.16 → 1.0.23
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.
- package/dist/esm/index.js +88 -22
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +88 -22
- package/dist/index.js.map +1 -1
- package/dist/loader.css +115 -0
- package/package.json +17 -6
- package/.eslintignore +0 -6
- package/.eslintrc.js +0 -4
- package/.turbo/turbo-build.log +0 -21
- package/CHANGELOG.md +0 -136
- package/jest.config.js +0 -9
- package/src/Loader.stories.tsx +0 -32
- package/src/Loader.tsx +0 -27
- package/src/LoaderTypes.ts +0 -21
- package/src/__tests__/Loader.typetest.tsx +0 -13
- package/src/__tests__/features.test.tsx +0 -30
- package/src/index.ts +0 -5
- package/src/styled.d.ts +0 -7
- package/src/styles.ts +0 -102
- package/tsconfig.json +0 -15
- package/tsup.config.ts +0 -12
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
// src/Loader.tsx
|
|
2
|
-
import "react";
|
|
2
|
+
import React3 from "react";
|
|
3
|
+
|
|
4
|
+
// src/LoaderHybrid.tsx
|
|
5
|
+
import React2 from "react";
|
|
3
6
|
|
|
4
7
|
// src/styles.ts
|
|
5
8
|
import styled, { css, keyframes } from "styled-components";
|
|
@@ -84,29 +87,92 @@ var Text = styled.div`
|
|
|
84
87
|
`;
|
|
85
88
|
var styles_default = Container;
|
|
86
89
|
|
|
87
|
-
// src/
|
|
90
|
+
// src/LoaderTailwind.tsx
|
|
91
|
+
import React from "react";
|
|
88
92
|
import { jsx } from "react/jsx-runtime";
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
dark: color === "dark",
|
|
102
|
-
delay,
|
|
103
|
-
"data-qa-loader": "",
|
|
104
|
-
...qa,
|
|
105
|
-
...rest,
|
|
106
|
-
children: /* @__PURE__ */ jsx(Text, { children: text || "Loading" })
|
|
93
|
+
function cn(...inputs) {
|
|
94
|
+
const classes = [];
|
|
95
|
+
for (const input of inputs) {
|
|
96
|
+
if (!input) continue;
|
|
97
|
+
if (typeof input === "string") {
|
|
98
|
+
classes.push(input);
|
|
99
|
+
} else if (typeof input === "object") {
|
|
100
|
+
for (const [key, value] of Object.entries(input)) {
|
|
101
|
+
if (value) {
|
|
102
|
+
classes.push(key);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
107
105
|
}
|
|
108
|
-
|
|
109
|
-
|
|
106
|
+
}
|
|
107
|
+
return classes.join(" ");
|
|
108
|
+
}
|
|
109
|
+
var LoaderTailwind = React.forwardRef(
|
|
110
|
+
({
|
|
111
|
+
size = "large",
|
|
112
|
+
text = "",
|
|
113
|
+
delay = true,
|
|
114
|
+
// color is accepted but intentionally unused — it is a visual no-op in the
|
|
115
|
+
// styled-components implementation too, so the API stays unchanged.
|
|
116
|
+
color: _color = "dark",
|
|
117
|
+
qa = {},
|
|
118
|
+
className,
|
|
119
|
+
...rest
|
|
120
|
+
}, ref) => {
|
|
121
|
+
const classes = cn(
|
|
122
|
+
"seeds-loader",
|
|
123
|
+
{ "seeds-loader-sm": size === "small" },
|
|
124
|
+
{ "seeds-loader-delay": delay },
|
|
125
|
+
className
|
|
126
|
+
);
|
|
127
|
+
return (
|
|
128
|
+
// QA default precedes {...rest} so a consumer-provided data-qa-loader
|
|
129
|
+
// (via {...rest} or the qa prop) overrides the default.
|
|
130
|
+
/* @__PURE__ */ jsx("div", { "data-qa-loader": "", ...rest, className: classes, ref, ...qa, children: /* @__PURE__ */ jsx("span", { className: "seeds-loader-visually-hidden", children: text || "Loading" }) })
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
LoaderTailwind.displayName = "LoaderTailwind";
|
|
135
|
+
|
|
136
|
+
// src/LoaderHybrid.tsx
|
|
137
|
+
import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
|
|
138
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
139
|
+
var LoaderHybrid = React2.forwardRef(
|
|
140
|
+
(props, ref) => {
|
|
141
|
+
const {
|
|
142
|
+
size = "large",
|
|
143
|
+
text = "",
|
|
144
|
+
delay = true,
|
|
145
|
+
color = "dark",
|
|
146
|
+
qa,
|
|
147
|
+
...rest
|
|
148
|
+
} = props;
|
|
149
|
+
if (hasStyledProps(rest)) {
|
|
150
|
+
return /* @__PURE__ */ jsx2(
|
|
151
|
+
styles_default,
|
|
152
|
+
{
|
|
153
|
+
small: size === "small",
|
|
154
|
+
dark: color === "dark",
|
|
155
|
+
delay,
|
|
156
|
+
"data-qa-loader": "",
|
|
157
|
+
ref,
|
|
158
|
+
...qa,
|
|
159
|
+
...rest,
|
|
160
|
+
children: /* @__PURE__ */ jsx2(Text, { children: text || "Loading" })
|
|
161
|
+
}
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
return /* @__PURE__ */ jsx2(LoaderTailwind, { ...props, ref });
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
LoaderHybrid.displayName = "Loader";
|
|
168
|
+
var LoaderHybrid_default = LoaderHybrid;
|
|
169
|
+
|
|
170
|
+
// src/Loader.tsx
|
|
171
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
172
|
+
var Loader = React3.forwardRef(
|
|
173
|
+
(props, ref) => /* @__PURE__ */ jsx3(LoaderHybrid_default, { ...props, ref })
|
|
174
|
+
);
|
|
175
|
+
Loader.displayName = "Loader";
|
|
110
176
|
var Loader_default = Loader;
|
|
111
177
|
|
|
112
178
|
// src/index.ts
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Loader.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import *
|
|
1
|
+
{"version":3,"sources":["../../src/Loader.tsx","../../src/LoaderHybrid.tsx","../../src/styles.ts","../../src/LoaderTailwind.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport LoaderHybrid from \"./LoaderHybrid\";\n\n/**\n * Loader component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Loader = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => <LoaderHybrid {...props} ref={ref} />\n);\n\nLoader.displayName = \"Loader\";\nexport default Loader;\n","/**\n * Hybrid Loader Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport Container, { Text } from \"./styles\"; // Styled-components version\nimport { LoaderTailwind } from \"./LoaderTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst LoaderHybrid = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => {\n const {\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n ref={ref}\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <LoaderTailwind {...props} ref={ref} />;\n }\n);\n\nLoaderHybrid.displayName = \"Loader\";\nexport default LoaderHybrid;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Loader component\n * Uses Seeds loader CSS classes from loader.css\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const LoaderTailwind = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (\n {\n size = \"large\",\n text = \"\",\n delay = true,\n // color is accepted but intentionally unused — it is a visual no-op in the\n // styled-components implementation too, so the API stays unchanged.\n color: _color = \"dark\",\n qa = {},\n className,\n ...rest\n }: TypeLoaderProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const classes = cn(\n \"seeds-loader\",\n { \"seeds-loader-sm\": size === \"small\" },\n { \"seeds-loader-delay\": delay },\n className\n );\n\n return (\n // QA default precedes {...rest} so a consumer-provided data-qa-loader\n // (via {...rest} or the qa prop) overrides the default.\n <div data-qa-loader=\"\" {...rest} className={classes} ref={ref} {...qa}>\n <span className=\"seeds-loader-visually-hidden\">\n {text || \"Loading\"}\n </span>\n </div>\n );\n }\n);\n\nLoaderTailwind.displayName = \"LoaderTailwind\";\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n"],"mappings":"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","names":["React","React","jsx","React","jsx","React"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React$1 from 'react';
|
|
2
2
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
3
|
|
|
4
4
|
type TypeQaProps = object;
|
|
@@ -12,6 +12,11 @@ interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCom
|
|
|
12
12
|
qa?: TypeQaProps;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Loader component. Automatically routes between the Tailwind implementation
|
|
17
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
18
|
+
* system props or a styled() extension).
|
|
19
|
+
*/
|
|
20
|
+
declare const Loader: React$1.ForwardRefExoticComponent<Omit<TypeLoaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
16
21
|
|
|
17
22
|
export { Loader, type TypeLoaderProps, Loader as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React$1 from 'react';
|
|
2
2
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
3
|
|
|
4
4
|
type TypeQaProps = object;
|
|
@@ -12,6 +12,11 @@ interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCom
|
|
|
12
12
|
qa?: TypeQaProps;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Loader component. Automatically routes between the Tailwind implementation
|
|
17
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
18
|
+
* system props or a styled() extension).
|
|
19
|
+
*/
|
|
20
|
+
declare const Loader: React$1.ForwardRefExoticComponent<Omit<TypeLoaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
16
21
|
|
|
17
22
|
export { Loader, type TypeLoaderProps, Loader as default };
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,10 @@ __export(index_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Loader.tsx
|
|
39
|
-
var
|
|
39
|
+
var import_react3 = __toESM(require("react"));
|
|
40
|
+
|
|
41
|
+
// src/LoaderHybrid.tsx
|
|
42
|
+
var import_react2 = __toESM(require("react"));
|
|
40
43
|
|
|
41
44
|
// src/styles.ts
|
|
42
45
|
var import_styled_components = __toESM(require("styled-components"));
|
|
@@ -121,29 +124,92 @@ var Text = import_styled_components.default.div`
|
|
|
121
124
|
`;
|
|
122
125
|
var styles_default = Container;
|
|
123
126
|
|
|
124
|
-
// src/
|
|
127
|
+
// src/LoaderTailwind.tsx
|
|
128
|
+
var import_react = __toESM(require("react"));
|
|
125
129
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
dark: color === "dark",
|
|
139
|
-
delay,
|
|
140
|
-
"data-qa-loader": "",
|
|
141
|
-
...qa,
|
|
142
|
-
...rest,
|
|
143
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: text || "Loading" })
|
|
130
|
+
function cn(...inputs) {
|
|
131
|
+
const classes = [];
|
|
132
|
+
for (const input of inputs) {
|
|
133
|
+
if (!input) continue;
|
|
134
|
+
if (typeof input === "string") {
|
|
135
|
+
classes.push(input);
|
|
136
|
+
} else if (typeof input === "object") {
|
|
137
|
+
for (const [key, value] of Object.entries(input)) {
|
|
138
|
+
if (value) {
|
|
139
|
+
classes.push(key);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
144
142
|
}
|
|
145
|
-
|
|
146
|
-
|
|
143
|
+
}
|
|
144
|
+
return classes.join(" ");
|
|
145
|
+
}
|
|
146
|
+
var LoaderTailwind = import_react.default.forwardRef(
|
|
147
|
+
({
|
|
148
|
+
size = "large",
|
|
149
|
+
text = "",
|
|
150
|
+
delay = true,
|
|
151
|
+
// color is accepted but intentionally unused — it is a visual no-op in the
|
|
152
|
+
// styled-components implementation too, so the API stays unchanged.
|
|
153
|
+
color: _color = "dark",
|
|
154
|
+
qa = {},
|
|
155
|
+
className,
|
|
156
|
+
...rest
|
|
157
|
+
}, ref) => {
|
|
158
|
+
const classes = cn(
|
|
159
|
+
"seeds-loader",
|
|
160
|
+
{ "seeds-loader-sm": size === "small" },
|
|
161
|
+
{ "seeds-loader-delay": delay },
|
|
162
|
+
className
|
|
163
|
+
);
|
|
164
|
+
return (
|
|
165
|
+
// QA default precedes {...rest} so a consumer-provided data-qa-loader
|
|
166
|
+
// (via {...rest} or the qa prop) overrides the default.
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-qa-loader": "", ...rest, className: classes, ref, ...qa, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "seeds-loader-visually-hidden", children: text || "Loading" }) })
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
LoaderTailwind.displayName = "LoaderTailwind";
|
|
172
|
+
|
|
173
|
+
// src/LoaderHybrid.tsx
|
|
174
|
+
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
175
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
176
|
+
var LoaderHybrid = import_react2.default.forwardRef(
|
|
177
|
+
(props, ref) => {
|
|
178
|
+
const {
|
|
179
|
+
size = "large",
|
|
180
|
+
text = "",
|
|
181
|
+
delay = true,
|
|
182
|
+
color = "dark",
|
|
183
|
+
qa,
|
|
184
|
+
...rest
|
|
185
|
+
} = props;
|
|
186
|
+
if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
|
|
187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
188
|
+
styles_default,
|
|
189
|
+
{
|
|
190
|
+
small: size === "small",
|
|
191
|
+
dark: color === "dark",
|
|
192
|
+
delay,
|
|
193
|
+
"data-qa-loader": "",
|
|
194
|
+
ref,
|
|
195
|
+
...qa,
|
|
196
|
+
...rest,
|
|
197
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { children: text || "Loading" })
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoaderTailwind, { ...props, ref });
|
|
202
|
+
}
|
|
203
|
+
);
|
|
204
|
+
LoaderHybrid.displayName = "Loader";
|
|
205
|
+
var LoaderHybrid_default = LoaderHybrid;
|
|
206
|
+
|
|
207
|
+
// src/Loader.tsx
|
|
208
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
209
|
+
var Loader = import_react3.default.forwardRef(
|
|
210
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderHybrid_default, { ...props, ref })
|
|
211
|
+
);
|
|
212
|
+
Loader.displayName = "Loader";
|
|
147
213
|
var Loader_default = Loader;
|
|
148
214
|
|
|
149
215
|
// src/index.ts
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Loader.tsx","../src/styles.ts"],"sourcesContent":["import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n","import *
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Loader.tsx","../src/LoaderHybrid.tsx","../src/styles.ts","../src/LoaderTailwind.tsx"],"sourcesContent":["import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n","import React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport LoaderHybrid from \"./LoaderHybrid\";\n\n/**\n * Loader component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Loader = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => <LoaderHybrid {...props} ref={ref} />\n);\n\nLoader.displayName = \"Loader\";\nexport default Loader;\n","/**\n * Hybrid Loader Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport Container, { Text } from \"./styles\"; // Styled-components version\nimport { LoaderTailwind } from \"./LoaderTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst LoaderHybrid = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => {\n const {\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n ref={ref}\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <LoaderTailwind {...props} ref={ref} />;\n }\n);\n\nLoaderHybrid.displayName = \"Loader\";\nexport default LoaderHybrid;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Loader component\n * Uses Seeds loader CSS classes from loader.css\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const LoaderTailwind = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (\n {\n size = \"large\",\n text = \"\",\n delay = true,\n // color is accepted but intentionally unused — it is a visual no-op in the\n // styled-components implementation too, so the API stays unchanged.\n color: _color = \"dark\",\n qa = {},\n className,\n ...rest\n }: TypeLoaderProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const classes = cn(\n \"seeds-loader\",\n { \"seeds-loader-sm\": size === \"small\" },\n { \"seeds-loader-delay\": delay },\n className\n );\n\n return (\n // QA default precedes {...rest} so a consumer-provided data-qa-loader\n // (via {...rest} or the qa prop) overrides the default.\n <div data-qa-loader=\"\" {...rest} className={classes} ref={ref} {...qa}>\n <span className=\"seeds-loader-visually-hidden\">\n {text || \"Loading\"}\n </span>\n </div>\n );\n }\n);\n\nLoaderTailwind.displayName = \"LoaderTailwind\";\n"],"mappings":"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","names":["import_react","import_react","styled","React","import_seeds_react_system_props","import_jsx_runtime","React","import_jsx_runtime","React"]}
|
package/dist/loader.css
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Seeds Loader component classes
|
|
3
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
4
|
+
*
|
|
5
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
6
|
+
* CSS variable definitions and dark mode support.
|
|
7
|
+
*
|
|
8
|
+
* Usage:
|
|
9
|
+
* <div class="seeds-loader seeds-loader-delay">
|
|
10
|
+
* <span class="seeds-loader-visually-hidden">Loading</span>
|
|
11
|
+
* </div>
|
|
12
|
+
* <div class="seeds-loader seeds-loader-sm">...</div> (small)
|
|
13
|
+
* <div class="seeds-loader">...</div> (no delay)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
@layer components {
|
|
17
|
+
@keyframes seeds-loader-spin {
|
|
18
|
+
from {
|
|
19
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
20
|
+
}
|
|
21
|
+
to {
|
|
22
|
+
transform: translate(-50%, -50%) rotate(360deg);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@keyframes seeds-loader-delay-anim {
|
|
27
|
+
0% {
|
|
28
|
+
opacity: 0;
|
|
29
|
+
}
|
|
30
|
+
80% {
|
|
31
|
+
opacity: 0;
|
|
32
|
+
}
|
|
33
|
+
100% {
|
|
34
|
+
opacity: 1;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Base (large / 40px) */
|
|
39
|
+
.seeds-loader {
|
|
40
|
+
position: relative;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
border-radius: 100%;
|
|
45
|
+
width: 40px;
|
|
46
|
+
height: 40px;
|
|
47
|
+
box-shadow:
|
|
48
|
+
0 0 0 2px var(--color-neutral-600),
|
|
49
|
+
inset 0 0 0 6px var(--color-neutral-600);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.seeds-loader::after {
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 50%;
|
|
55
|
+
left: 50%;
|
|
56
|
+
width: 40px;
|
|
57
|
+
height: 40px;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
border-width: 4px;
|
|
60
|
+
background: transparent;
|
|
61
|
+
border-style: solid;
|
|
62
|
+
border-radius: 100%;
|
|
63
|
+
content: "";
|
|
64
|
+
transition: opacity 250ms;
|
|
65
|
+
border-color: var(--color-neutral-0) var(--color-neutral-0)
|
|
66
|
+
var(--color-neutral-600) var(--color-neutral-600);
|
|
67
|
+
animation: seeds-loader-spin 2.25s infinite linear;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.no-cssanimations .seeds-loader::after {
|
|
71
|
+
background-size: 40px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Delay variant — adds the delay fade-in to the container and the spinner */
|
|
75
|
+
.seeds-loader-delay {
|
|
76
|
+
animation: seeds-loader-delay-anim 2s 1;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.seeds-loader-delay::after {
|
|
80
|
+
animation:
|
|
81
|
+
seeds-loader-spin 2.25s infinite linear,
|
|
82
|
+
seeds-loader-delay-anim 2s 1;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Small (20px) */
|
|
86
|
+
.seeds-loader-sm {
|
|
87
|
+
width: 20px;
|
|
88
|
+
height: 20px;
|
|
89
|
+
box-shadow:
|
|
90
|
+
0 0 0 2px var(--color-neutral-600),
|
|
91
|
+
inset 0 0 0 4px var(--color-neutral-600);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.seeds-loader-sm::after {
|
|
95
|
+
width: 20px;
|
|
96
|
+
height: 20px;
|
|
97
|
+
border-width: 2px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.no-cssanimations .seeds-loader-sm::after {
|
|
101
|
+
background-size: 20px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Visually-hidden accessibility text */
|
|
105
|
+
.seeds-loader-visually-hidden {
|
|
106
|
+
position: absolute;
|
|
107
|
+
width: 1px;
|
|
108
|
+
height: 1px;
|
|
109
|
+
padding: 0;
|
|
110
|
+
margin: -1px;
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
clip: rect(0 0 0 0);
|
|
113
|
+
border: 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
package/package.json
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-loader",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.23",
|
|
4
4
|
"description": "Seeds React Loader",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/esm/index.js",
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
10
|
+
"files": [
|
|
11
|
+
"dist"
|
|
12
|
+
],
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": "./dist/esm/index.js",
|
|
16
|
+
"require": "./dist/index.js",
|
|
17
|
+
"types": "./dist/index.d.ts"
|
|
18
|
+
},
|
|
19
|
+
"./dist/loader.css": "./dist/loader.css"
|
|
20
|
+
},
|
|
10
21
|
"scripts": {
|
|
11
|
-
"build": "tsup --dts",
|
|
12
|
-
"build:debug": "tsup --dts --metafile",
|
|
22
|
+
"build": "tsup --dts && cp src/loader.css dist/loader.css",
|
|
23
|
+
"build:debug": "tsup --dts --metafile && cp src/loader.css dist/loader.css",
|
|
13
24
|
"dev": "tsup --watch --dts",
|
|
14
25
|
"clean": "rm -rf .turbo dist",
|
|
15
26
|
"clean:modules": "rm -rf node_modules",
|
|
@@ -18,9 +29,9 @@
|
|
|
18
29
|
"test:watch": "jest --watch --coverage=false"
|
|
19
30
|
},
|
|
20
31
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
23
|
-
"@sproutsocial/seeds-react-mixins": "^4.3.
|
|
32
|
+
"@sproutsocial/seeds-react-theme": "^4.1.1",
|
|
33
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.1",
|
|
34
|
+
"@sproutsocial/seeds-react-mixins": "^4.3.8"
|
|
24
35
|
},
|
|
25
36
|
"devDependencies": {
|
|
26
37
|
"@types/react": "^18.0.0",
|
package/.eslintignore
DELETED
package/.eslintrc.js
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
yarn run v1.22.22
|
|
2
|
-
$ tsup --dts
|
|
3
|
-
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
-
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
-
[34mCLI[39m tsup v8.5.0
|
|
6
|
-
[34mCLI[39m Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-loader/tsup.config.ts
|
|
7
|
-
[34mCLI[39m Target: es2022
|
|
8
|
-
[34mCLI[39m Cleaning output folder
|
|
9
|
-
[34mCJS[39m Build start
|
|
10
|
-
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m4.53 KB[39m
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m4.67 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in 33ms
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m2.58 KB[39m
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.62 KB[39m
|
|
16
|
-
[32mESM[39m ⚡️ Build success in 32ms
|
|
17
|
-
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in 3931ms
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m833.00 B[39m
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m833.00 B[39m
|
|
21
|
-
Done in 4.77s.
|
package/CHANGELOG.md
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
# @sproutsocial/seeds-react-loader
|
|
2
|
-
|
|
3
|
-
## 1.0.16
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- Updated dependencies [4ba8720]
|
|
8
|
-
- Updated dependencies [df9d751]
|
|
9
|
-
- @sproutsocial/seeds-react-theme@3.6.2
|
|
10
|
-
- @sproutsocial/seeds-react-mixins@4.3.3
|
|
11
|
-
|
|
12
|
-
## 1.0.15
|
|
13
|
-
|
|
14
|
-
### Patch Changes
|
|
15
|
-
|
|
16
|
-
- Updated dependencies [1f9a473]
|
|
17
|
-
- @sproutsocial/seeds-react-theme@3.6.1
|
|
18
|
-
- @sproutsocial/seeds-react-mixins@4.3.2
|
|
19
|
-
|
|
20
|
-
## 1.0.14
|
|
21
|
-
|
|
22
|
-
### Patch Changes
|
|
23
|
-
|
|
24
|
-
- Updated dependencies [17d4f12]
|
|
25
|
-
- @sproutsocial/seeds-react-theme@3.6.0
|
|
26
|
-
- @sproutsocial/seeds-react-mixins@4.3.1
|
|
27
|
-
|
|
28
|
-
## 1.0.13
|
|
29
|
-
|
|
30
|
-
### Patch Changes
|
|
31
|
-
|
|
32
|
-
- Updated dependencies [5bb63e1]
|
|
33
|
-
- @sproutsocial/seeds-react-mixins@4.3.0
|
|
34
|
-
|
|
35
|
-
## 1.0.12
|
|
36
|
-
|
|
37
|
-
### Patch Changes
|
|
38
|
-
|
|
39
|
-
- Updated dependencies [118e300]
|
|
40
|
-
- @sproutsocial/seeds-react-theme@3.5.1
|
|
41
|
-
- @sproutsocial/seeds-react-mixins@4.2.5
|
|
42
|
-
|
|
43
|
-
## 1.0.11
|
|
44
|
-
|
|
45
|
-
### Patch Changes
|
|
46
|
-
|
|
47
|
-
- Updated dependencies [db6ce39]
|
|
48
|
-
- Updated dependencies [20bb01b]
|
|
49
|
-
- @sproutsocial/seeds-react-theme@3.5.0
|
|
50
|
-
- @sproutsocial/seeds-react-mixins@4.2.4
|
|
51
|
-
|
|
52
|
-
## 1.0.10
|
|
53
|
-
|
|
54
|
-
### Patch Changes
|
|
55
|
-
|
|
56
|
-
- Updated dependencies [7716e16]
|
|
57
|
-
- @sproutsocial/seeds-react-theme@3.4.0
|
|
58
|
-
- @sproutsocial/seeds-react-mixins@4.2.3
|
|
59
|
-
|
|
60
|
-
## 1.0.9
|
|
61
|
-
|
|
62
|
-
### Patch Changes
|
|
63
|
-
|
|
64
|
-
- @sproutsocial/seeds-react-theme@3.3.2
|
|
65
|
-
- @sproutsocial/seeds-react-mixins@4.2.2
|
|
66
|
-
|
|
67
|
-
## 1.0.8
|
|
68
|
-
|
|
69
|
-
### Patch Changes
|
|
70
|
-
|
|
71
|
-
- @sproutsocial/seeds-react-theme@3.3.1
|
|
72
|
-
- @sproutsocial/seeds-react-mixins@4.2.1
|
|
73
|
-
|
|
74
|
-
## 1.0.7
|
|
75
|
-
|
|
76
|
-
### Patch Changes
|
|
77
|
-
|
|
78
|
-
- Updated dependencies [750d1ea]
|
|
79
|
-
- @sproutsocial/seeds-react-mixins@4.2.0
|
|
80
|
-
- @sproutsocial/seeds-react-theme@3.3.0
|
|
81
|
-
|
|
82
|
-
## 1.0.6
|
|
83
|
-
|
|
84
|
-
### Patch Changes
|
|
85
|
-
|
|
86
|
-
- Updated dependencies [fa7579a]
|
|
87
|
-
- @sproutsocial/seeds-react-theme@3.2.1
|
|
88
|
-
- @sproutsocial/seeds-react-mixins@4.1.6
|
|
89
|
-
|
|
90
|
-
## 1.0.5
|
|
91
|
-
|
|
92
|
-
### Patch Changes
|
|
93
|
-
|
|
94
|
-
- Updated dependencies [8f6ba8d]
|
|
95
|
-
- @sproutsocial/seeds-react-theme@3.2.0
|
|
96
|
-
- @sproutsocial/seeds-react-mixins@4.1.5
|
|
97
|
-
|
|
98
|
-
## 1.0.4
|
|
99
|
-
|
|
100
|
-
### Patch Changes
|
|
101
|
-
|
|
102
|
-
- Updated dependencies [b1c3b44]
|
|
103
|
-
- @sproutsocial/seeds-react-theme@3.1.1
|
|
104
|
-
- @sproutsocial/seeds-react-mixins@4.1.4
|
|
105
|
-
|
|
106
|
-
## 1.0.3
|
|
107
|
-
|
|
108
|
-
### Patch Changes
|
|
109
|
-
|
|
110
|
-
- Updated dependencies [47580c4]
|
|
111
|
-
- @sproutsocial/seeds-react-theme@3.1.0
|
|
112
|
-
- @sproutsocial/seeds-react-mixins@4.1.3
|
|
113
|
-
|
|
114
|
-
## 1.0.2
|
|
115
|
-
|
|
116
|
-
### Patch Changes
|
|
117
|
-
|
|
118
|
-
- Updated dependencies [22e1111]
|
|
119
|
-
- @sproutsocial/seeds-react-theme@3.0.1
|
|
120
|
-
- @sproutsocial/seeds-react-mixins@4.1.2
|
|
121
|
-
|
|
122
|
-
## 1.0.1
|
|
123
|
-
|
|
124
|
-
### Patch Changes
|
|
125
|
-
|
|
126
|
-
- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
|
|
127
|
-
- Updated dependencies [9fd8bac]
|
|
128
|
-
- @sproutsocial/seeds-react-system-props@3.0.2
|
|
129
|
-
- @sproutsocial/seeds-react-mixins@4.1.1
|
|
130
|
-
- @sproutsocial/seeds-react-theme@2.2.1
|
|
131
|
-
|
|
132
|
-
## 1.0.0
|
|
133
|
-
|
|
134
|
-
### Major Changes
|
|
135
|
-
|
|
136
|
-
- f985353: Migrated Loader from Racine to seeds-react-loader
|
package/jest.config.js
DELETED
package/src/Loader.stories.tsx
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Loader } from "./";
|
|
3
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
4
|
-
|
|
5
|
-
const meta: Meta<typeof Loader> = {
|
|
6
|
-
title: "Components/Loader",
|
|
7
|
-
component: Loader,
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export default meta;
|
|
11
|
-
|
|
12
|
-
type Story = StoryObj<typeof Loader>;
|
|
13
|
-
|
|
14
|
-
export const Default: Story = {
|
|
15
|
-
args: {
|
|
16
|
-
text: "Content loading",
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export const Small: Story = {
|
|
21
|
-
args: {
|
|
22
|
-
text: "Content loading",
|
|
23
|
-
size: "small",
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export const NoDelay: Story = {
|
|
28
|
-
args: {
|
|
29
|
-
text: "Content loading",
|
|
30
|
-
delay: false,
|
|
31
|
-
},
|
|
32
|
-
};
|
package/src/Loader.tsx
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import Container, { Text } from "./styles";
|
|
3
|
-
import type { TypeLoaderProps } from "./LoaderTypes";
|
|
4
|
-
|
|
5
|
-
const Loader = ({
|
|
6
|
-
size = "large",
|
|
7
|
-
text = "",
|
|
8
|
-
delay = true,
|
|
9
|
-
color = "dark",
|
|
10
|
-
qa,
|
|
11
|
-
...rest
|
|
12
|
-
}: TypeLoaderProps) => {
|
|
13
|
-
return (
|
|
14
|
-
<Container
|
|
15
|
-
small={size === "small"}
|
|
16
|
-
dark={color === "dark"}
|
|
17
|
-
delay={delay}
|
|
18
|
-
data-qa-loader=""
|
|
19
|
-
{...qa}
|
|
20
|
-
{...rest}
|
|
21
|
-
>
|
|
22
|
-
<Text>{text || "Loading"}</Text>
|
|
23
|
-
</Container>
|
|
24
|
-
);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default Loader;
|
package/src/LoaderTypes.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
TypeStyledComponentsCommonProps,
|
|
3
|
-
TypeSystemCommonProps,
|
|
4
|
-
} from "@sproutsocial/seeds-react-system-props";
|
|
5
|
-
|
|
6
|
-
type TypeQaProps = object;
|
|
7
|
-
|
|
8
|
-
export interface TypeLoaderProps
|
|
9
|
-
extends TypeStyledComponentsCommonProps,
|
|
10
|
-
TypeSystemCommonProps,
|
|
11
|
-
Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps> {
|
|
12
|
-
size?: "small" | "large";
|
|
13
|
-
|
|
14
|
-
/** Text for the loader. This text is not visible, but is used for accessibility purposed */
|
|
15
|
-
text?: string;
|
|
16
|
-
|
|
17
|
-
/** Whether the loader should wait 2 seconds before it displays */
|
|
18
|
-
delay?: boolean;
|
|
19
|
-
color?: "light" | "dark";
|
|
20
|
-
qa?: TypeQaProps;
|
|
21
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import Loader from "../Loader";
|
|
3
|
-
|
|
4
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
5
|
-
function LoaderTypes() {
|
|
6
|
-
return (
|
|
7
|
-
<>
|
|
8
|
-
<Loader text="Content loading" delay={false} />
|
|
9
|
-
{/* @ts-expect-error - test that invalid props are rejected */}
|
|
10
|
-
<Loader text={3} delay="invalid" />
|
|
11
|
-
</>
|
|
12
|
-
);
|
|
13
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, screen } from "@sproutsocial/seeds-react-testing-library";
|
|
3
|
-
import Loader from "../Loader";
|
|
4
|
-
|
|
5
|
-
describe("Loader", () => {
|
|
6
|
-
it("should render properly", () => {
|
|
7
|
-
render(<Loader />);
|
|
8
|
-
expect(screen.getByText("Loading")).toBeInTheDocument();
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
it("should render with small size class", () => {
|
|
12
|
-
render(<Loader size="small" />);
|
|
13
|
-
expect(
|
|
14
|
-
screen.getByDataQaLabel({
|
|
15
|
-
loader: "",
|
|
16
|
-
})
|
|
17
|
-
).toHaveStyleRule("width", "20px");
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it("should render with light theme", () => {
|
|
21
|
-
render(<Loader color="light" />);
|
|
22
|
-
expect(
|
|
23
|
-
screen.getByDataQaLabel({
|
|
24
|
-
loader: "",
|
|
25
|
-
})
|
|
26
|
-
).toHaveStyleRule("border-color", "#FFFFFF #FFFFFF #6e797a #6e797a", {
|
|
27
|
-
modifier: ":after",
|
|
28
|
-
});
|
|
29
|
-
});
|
|
30
|
-
});
|
package/src/index.ts
DELETED
package/src/styled.d.ts
DELETED
package/src/styles.ts
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import styled, { css, keyframes } from "styled-components";
|
|
2
|
-
import { COMMON } from "@sproutsocial/seeds-react-system-props";
|
|
3
|
-
import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
|
|
4
|
-
import type { TypeLoaderProps } from "./LoaderTypes";
|
|
5
|
-
|
|
6
|
-
const getSize = (size: number) => {
|
|
7
|
-
const spinnerSize = Math.round(size * 1);
|
|
8
|
-
const borderWidth = Math.round(size * 0.1);
|
|
9
|
-
|
|
10
|
-
return css`
|
|
11
|
-
width: ${size}px;
|
|
12
|
-
height: ${size}px;
|
|
13
|
-
box-shadow: ${({ theme }) =>
|
|
14
|
-
`0 0 0 2px ${theme.colors.neutral[600]},
|
|
15
|
-
inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};
|
|
16
|
-
|
|
17
|
-
&:after {
|
|
18
|
-
width: ${spinnerSize}px;
|
|
19
|
-
height: ${spinnerSize}px;
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
border-width: ${borderWidth}px;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.no-cssanimations &::after {
|
|
25
|
-
background-size: ${spinnerSize}px;
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const spin = keyframes`
|
|
31
|
-
from {
|
|
32
|
-
transform: translate(-50%,-50%) rotate(0deg);
|
|
33
|
-
}
|
|
34
|
-
to {
|
|
35
|
-
transform: translate(-50%,-50%) rotate(360deg);
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
38
|
-
|
|
39
|
-
const delayAnimation = keyframes`
|
|
40
|
-
0% {
|
|
41
|
-
opacity: 0;
|
|
42
|
-
}
|
|
43
|
-
80% {
|
|
44
|
-
opacity: 0;
|
|
45
|
-
}
|
|
46
|
-
100% {
|
|
47
|
-
opacity: 1;
|
|
48
|
-
}
|
|
49
|
-
`;
|
|
50
|
-
|
|
51
|
-
interface TypeLoaderContainer extends Pick<TypeLoaderProps, "delay"> {
|
|
52
|
-
small?: boolean;
|
|
53
|
-
dark?: boolean;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const Container = styled.div.attrs<{ className: string }>({
|
|
57
|
-
className: "Loader",
|
|
58
|
-
})<TypeLoaderContainer>`
|
|
59
|
-
position: relative;
|
|
60
|
-
margin: 0 auto;
|
|
61
|
-
padding: 0;
|
|
62
|
-
overflow: hidden;
|
|
63
|
-
border-radius: 100%;
|
|
64
|
-
|
|
65
|
-
animation: ${(props) =>
|
|
66
|
-
props.delay
|
|
67
|
-
? css`
|
|
68
|
-
${delayAnimation} 2s 1;
|
|
69
|
-
`
|
|
70
|
-
: "none"};
|
|
71
|
-
|
|
72
|
-
&:after {
|
|
73
|
-
position: absolute;
|
|
74
|
-
top: 50%;
|
|
75
|
-
left: 50%;
|
|
76
|
-
background: transparent;
|
|
77
|
-
border-style: solid;
|
|
78
|
-
border-radius: 100%;
|
|
79
|
-
content: "";
|
|
80
|
-
transition: opacity 250ms;
|
|
81
|
-
border-color: ${({ theme }) =>
|
|
82
|
-
`${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};
|
|
83
|
-
|
|
84
|
-
animation: ${(props) =>
|
|
85
|
-
props.delay
|
|
86
|
-
? css`
|
|
87
|
-
${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
|
|
88
|
-
`
|
|
89
|
-
: css`
|
|
90
|
-
${spin} 2.25s infinite linear
|
|
91
|
-
`};
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
${(props) => (props.small ? getSize(20) : getSize(40))}
|
|
95
|
-
${COMMON}
|
|
96
|
-
`;
|
|
97
|
-
|
|
98
|
-
export const Text = styled.div<Pick<TypeLoaderProps, "text">>`
|
|
99
|
-
${visuallyHidden}
|
|
100
|
-
`;
|
|
101
|
-
|
|
102
|
-
export default Container;
|
package/tsconfig.json
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"jsx": "react-jsx",
|
|
5
|
-
"module": "esnext"
|
|
6
|
-
},
|
|
7
|
-
"include": ["src/**/*"],
|
|
8
|
-
"exclude": [
|
|
9
|
-
"node_modules",
|
|
10
|
-
"dist",
|
|
11
|
-
"coverage",
|
|
12
|
-
"**/*.stories.tsx",
|
|
13
|
-
"**/*.stories.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
package/tsup.config.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from "tsup";
|
|
2
|
-
|
|
3
|
-
export default defineConfig((options) => ({
|
|
4
|
-
entry: ["src/index.ts"],
|
|
5
|
-
format: ["cjs", "esm"],
|
|
6
|
-
clean: true,
|
|
7
|
-
legacyOutput: true,
|
|
8
|
-
dts: options.dts,
|
|
9
|
-
external: ["react"],
|
|
10
|
-
sourcemap: true,
|
|
11
|
-
metafile: options.metafile,
|
|
12
|
-
}));
|