@sproutsocial/seeds-react-empty-state 1.0.31 → 1.0.33
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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +18 -0
- package/dist/esm/index.js +9 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +9 -1
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/EmptyStateTailwind.tsx +9 -1
- package/src/__tests__/EmptyState.test.tsx +3 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts && cp src/empty-state.css dist/empty-state.css
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m7.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m9.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m9.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.46 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m9.63 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 80ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m5.01 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m9.53 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 81ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4468ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m878.00 B[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m878.00 B[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 6.20s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-empty-state
|
|
2
2
|
|
|
3
|
+
## 1.0.33
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [3371484]
|
|
8
|
+
- @sproutsocial/seeds-react-theme@4.4.0
|
|
9
|
+
- @sproutsocial/seeds-react-box@1.1.30
|
|
10
|
+
|
|
11
|
+
## 1.0.32
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [56661b6]
|
|
16
|
+
- @sproutsocial/seeds-react-system-props@3.2.0
|
|
17
|
+
- @sproutsocial/seeds-react-theme@4.3.2
|
|
18
|
+
- @sproutsocial/seeds-react-box@1.1.29
|
|
19
|
+
- @sproutsocial/seeds-react-text@1.5.4
|
|
20
|
+
|
|
3
21
|
## 1.0.31
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -84,7 +84,15 @@ function cn(...inputs) {
|
|
|
84
84
|
return classes.join(" ");
|
|
85
85
|
}
|
|
86
86
|
var EmptyStateTailwind = React2.forwardRef(
|
|
87
|
-
({
|
|
87
|
+
({
|
|
88
|
+
media,
|
|
89
|
+
headline,
|
|
90
|
+
subtext,
|
|
91
|
+
primaryAction,
|
|
92
|
+
secondaryAction,
|
|
93
|
+
className,
|
|
94
|
+
...rest
|
|
95
|
+
}, ref) => {
|
|
88
96
|
const hasAction = Boolean(primaryAction || secondaryAction);
|
|
89
97
|
return /* @__PURE__ */ jsxs2(
|
|
90
98
|
"div",
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/EmptyState.tsx","../../src/EmptyStateHybrid.tsx","../../src/EmptyStateStyled.tsx","../../src/EmptyStateTailwind.tsx","../../src/EmptyStateTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <EmptyStateStyled {...props} ref={ref} />;\n }\n\n // Use Tailwind version (preferred - better performance)\n return <EmptyStateTailwind {...props} ref={ref} />;\n }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (\n { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n ref\n ) => {\n return (\n <Box\n ref={ref}\n maxWidth=\"400px\"\n mx=\"auto\"\n data-qa-emptystate={headline}\n {...rest}\n >\n {media && (\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n justifyContent=\"center\"\n mb={450}\n >\n {media}\n </Box>\n )}\n\n <Text as=\"div\" textAlign=\"center\">\n <Text\n as=\"p\"\n m={0}\n color=\"text.headline\"\n fontWeight=\"semibold\"\n fontSize={400}\n >\n {headline}\n </Text>\n\n {subtext && (\n <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n {subtext}\n </Text>\n )}\n\n <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <Box mt={400}>\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </Box>\n )}\n </Box>\n </Text>\n </Box>\n );\n }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n HTMLDivElement,\n TypeEmptyStateProps\n>(\n (\n {
|
|
1
|
+
{"version":3,"sources":["../../src/EmptyState.tsx","../../src/EmptyStateHybrid.tsx","../../src/EmptyStateStyled.tsx","../../src/EmptyStateTailwind.tsx","../../src/EmptyStateTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <EmptyStateStyled {...props} ref={ref} />;\n }\n\n // Use Tailwind version (preferred - better performance)\n return <EmptyStateTailwind {...props} ref={ref} />;\n }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (\n { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n ref\n ) => {\n return (\n <Box\n ref={ref}\n maxWidth=\"400px\"\n mx=\"auto\"\n data-qa-emptystate={headline}\n {...rest}\n >\n {media && (\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n justifyContent=\"center\"\n mb={450}\n >\n {media}\n </Box>\n )}\n\n <Text as=\"div\" textAlign=\"center\">\n <Text\n as=\"p\"\n m={0}\n color=\"text.headline\"\n fontWeight=\"semibold\"\n fontSize={400}\n >\n {headline}\n </Text>\n\n {subtext && (\n <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n {subtext}\n </Text>\n )}\n\n <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <Box mt={400}>\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </Box>\n )}\n </Box>\n </Text>\n </Box>\n );\n }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n HTMLDivElement,\n TypeEmptyStateProps\n>(\n (\n {\n media,\n headline,\n subtext,\n primaryAction,\n secondaryAction,\n className,\n ...rest\n },\n ref\n ) => {\n const hasAction = Boolean(primaryAction || secondaryAction);\n\n return (\n <div\n data-qa-emptystate={headline}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n ref={ref}\n className={cn(\"seeds-empty-state\", className)}\n >\n {media && <div className=\"seeds-empty-state-media\">{media}</div>}\n\n <div className=\"seeds-empty-state-content\">\n <p className=\"seeds-empty-state-headline\">{headline}</p>\n\n {subtext && <p className=\"seeds-empty-state-subtext\">{subtext}</p>}\n\n <div\n className={cn(\"seeds-empty-state-actions\", {\n \"seeds-empty-state-actions-empty\": !hasAction,\n })}\n >\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <div className=\"seeds-empty-state-secondary-action\">\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n);\n\nEmptyStateTailwind.displayName = \"EmptyStateTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n /** An image in (preferably in SVG format) */\n media?: React.ReactNode;\n\n /** A headline describing the empty state */\n headline: React.ReactNode;\n\n /** Optional description of the empty state */\n subtext?: React.ReactNode;\n\n /** Element for the primary call-to-action */\n primaryAction?: React.ReactElement;\n\n /** Element for any secondary call-to-action */\n secondaryAction?: React.ReactElement;\n}\n","import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n"],"mappings":"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","names":["React","React","React","jsx","jsxs","jsx","React","jsx","React"]}
|
package/dist/index.js
CHANGED
|
@@ -118,7 +118,15 @@ function cn(...inputs) {
|
|
|
118
118
|
return classes.join(" ");
|
|
119
119
|
}
|
|
120
120
|
var EmptyStateTailwind = import_react.default.forwardRef(
|
|
121
|
-
({
|
|
121
|
+
({
|
|
122
|
+
media,
|
|
123
|
+
headline,
|
|
124
|
+
subtext,
|
|
125
|
+
primaryAction,
|
|
126
|
+
secondaryAction,
|
|
127
|
+
className,
|
|
128
|
+
...rest
|
|
129
|
+
}, ref) => {
|
|
122
130
|
const hasAction = Boolean(primaryAction || secondaryAction);
|
|
123
131
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
124
132
|
"div",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/EmptyState.tsx","../src/EmptyStateHybrid.tsx","../src/EmptyStateStyled.tsx","../src/EmptyStateTailwind.tsx","../src/EmptyStateTypes.ts"],"sourcesContent":["import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n","import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <EmptyStateStyled {...props} ref={ref} />;\n }\n\n // Use Tailwind version (preferred - better performance)\n return <EmptyStateTailwind {...props} ref={ref} />;\n }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (\n { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n ref\n ) => {\n return (\n <Box\n ref={ref}\n maxWidth=\"400px\"\n mx=\"auto\"\n data-qa-emptystate={headline}\n {...rest}\n >\n {media && (\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n justifyContent=\"center\"\n mb={450}\n >\n {media}\n </Box>\n )}\n\n <Text as=\"div\" textAlign=\"center\">\n <Text\n as=\"p\"\n m={0}\n color=\"text.headline\"\n fontWeight=\"semibold\"\n fontSize={400}\n >\n {headline}\n </Text>\n\n {subtext && (\n <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n {subtext}\n </Text>\n )}\n\n <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <Box mt={400}>\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </Box>\n )}\n </Box>\n </Text>\n </Box>\n );\n }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n HTMLDivElement,\n TypeEmptyStateProps\n>(\n (\n {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/EmptyState.tsx","../src/EmptyStateHybrid.tsx","../src/EmptyStateStyled.tsx","../src/EmptyStateTailwind.tsx","../src/EmptyStateTypes.ts"],"sourcesContent":["import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n","import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (props, ref) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <EmptyStateStyled {...props} ref={ref} />;\n }\n\n // Use Tailwind version (preferred - better performance)\n return <EmptyStateTailwind {...props} ref={ref} />;\n }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n (\n { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n ref\n ) => {\n return (\n <Box\n ref={ref}\n maxWidth=\"400px\"\n mx=\"auto\"\n data-qa-emptystate={headline}\n {...rest}\n >\n {media && (\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n justifyContent=\"center\"\n mb={450}\n >\n {media}\n </Box>\n )}\n\n <Text as=\"div\" textAlign=\"center\">\n <Text\n as=\"p\"\n m={0}\n color=\"text.headline\"\n fontWeight=\"semibold\"\n fontSize={400}\n >\n {headline}\n </Text>\n\n {subtext && (\n <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n {subtext}\n </Text>\n )}\n\n <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <Box mt={400}>\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </Box>\n )}\n </Box>\n </Text>\n </Box>\n );\n }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n HTMLDivElement,\n TypeEmptyStateProps\n>(\n (\n {\n media,\n headline,\n subtext,\n primaryAction,\n secondaryAction,\n className,\n ...rest\n },\n ref\n ) => {\n const hasAction = Boolean(primaryAction || secondaryAction);\n\n return (\n <div\n data-qa-emptystate={headline}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n ref={ref}\n className={cn(\"seeds-empty-state\", className)}\n >\n {media && <div className=\"seeds-empty-state-media\">{media}</div>}\n\n <div className=\"seeds-empty-state-content\">\n <p className=\"seeds-empty-state-headline\">{headline}</p>\n\n {subtext && <p className=\"seeds-empty-state-subtext\">{subtext}</p>}\n\n <div\n className={cn(\"seeds-empty-state-actions\", {\n \"seeds-empty-state-actions-empty\": !hasAction,\n })}\n >\n {primaryAction &&\n React.cloneElement(primaryAction, {\n appearance: \"primary\",\n })}\n\n {secondaryAction && (\n <div className=\"seeds-empty-state-secondary-action\">\n {React.cloneElement(secondaryAction, {\n appearance: \"unstyled\",\n })}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n);\n\nEmptyStateTailwind.displayName = \"EmptyStateTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n /** An image in (preferably in SVG format) */\n media?: React.ReactNode;\n\n /** A headline describing the empty state */\n headline: React.ReactNode;\n\n /** Optional description of the empty state */\n subtext?: React.ReactNode;\n\n /** Element for the primary call-to-action */\n primaryAction?: React.ReactElement;\n\n /** Element for any secondary call-to-action */\n secondaryAction?: React.ReactElement;\n}\n"],"mappings":"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","names":["import_react","import_react","Box","Text","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-empty-state",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.33",
|
|
4
4
|
"description": "Seeds React EmptyState",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"test:watch": "jest --watch --coverage=false"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@sproutsocial/seeds-react-theme": "^4.
|
|
30
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
31
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
32
|
-
"@sproutsocial/seeds-react-text": "^1.5.
|
|
29
|
+
"@sproutsocial/seeds-react-theme": "^4.4.0",
|
|
30
|
+
"@sproutsocial/seeds-react-system-props": "^3.2.0",
|
|
31
|
+
"@sproutsocial/seeds-react-box": "^1.1.30",
|
|
32
|
+
"@sproutsocial/seeds-react-text": "^1.5.4"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^18.0.0",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
43
43
|
"@sproutsocial/seeds-testing": "*",
|
|
44
44
|
"@sproutsocial/seeds-react-testing-library": "*",
|
|
45
|
-
"@sproutsocial/seeds-react-button": "^2.3.
|
|
46
|
-
"@sproutsocial/seeds-react-image": "^1.0.
|
|
45
|
+
"@sproutsocial/seeds-react-button": "^2.3.6",
|
|
46
|
+
"@sproutsocial/seeds-react-image": "^1.0.31"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"styled-components": "^5.2.3"
|
|
@@ -35,7 +35,15 @@ export const EmptyStateTailwind = React.forwardRef<
|
|
|
35
35
|
TypeEmptyStateProps
|
|
36
36
|
>(
|
|
37
37
|
(
|
|
38
|
-
{
|
|
38
|
+
{
|
|
39
|
+
media,
|
|
40
|
+
headline,
|
|
41
|
+
subtext,
|
|
42
|
+
primaryAction,
|
|
43
|
+
secondaryAction,
|
|
44
|
+
className,
|
|
45
|
+
...rest
|
|
46
|
+
},
|
|
39
47
|
ref
|
|
40
48
|
) => {
|
|
41
49
|
const hasAction = Boolean(primaryAction || secondaryAction);
|
|
@@ -160,7 +160,9 @@ describe("EmptyState", () => {
|
|
|
160
160
|
});
|
|
161
161
|
|
|
162
162
|
it("appends a consumer className on the Tailwind root", () => {
|
|
163
|
-
render(
|
|
163
|
+
render(
|
|
164
|
+
<EmptyState headline="No content found" className="my-custom-class" />
|
|
165
|
+
);
|
|
164
166
|
|
|
165
167
|
const root = screen.getByDataQaLabel({ emptystate: "No content found" });
|
|
166
168
|
expect(root).toHaveClass("seeds-empty-state");
|