@sproutsocial/seeds-react-content-block 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.
- package/.turbo/turbo-build.log +5 -5
- package/CHANGELOG.md +6 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ContentBlock.stories.tsx +1 -1
- package/src/ContentBlock.tsx +3 -3
- package/src/__tests__/content-block.test.tsx +9 -4
package/.turbo/turbo-build.log
CHANGED
|
@@ -10,12 +10,12 @@ $ tsup --dts
|
|
|
10
10
|
[34mESM[39m Build start
|
|
11
11
|
[32mCJS[39m [1mdist/index.js [22m[32m4.24 KB[39m
|
|
12
12
|
[32mCJS[39m [1mdist/index.js.map [22m[32m3.56 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 215ms
|
|
14
14
|
[32mESM[39m [1mdist/esm/index.js [22m[32m2.02 KB[39m
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m3.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m3.52 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 203ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 31470ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m521.00 B[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m521.00 B[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 39.50s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -28,7 +28,7 @@ var ContentBlock = ({
|
|
|
28
28
|
subtitle,
|
|
29
29
|
titleAs = "h2",
|
|
30
30
|
subtitleAs = "h3",
|
|
31
|
-
|
|
31
|
+
children,
|
|
32
32
|
isLoading,
|
|
33
33
|
headerActions,
|
|
34
34
|
contentProps,
|
|
@@ -49,7 +49,7 @@ var ContentBlock = ({
|
|
|
49
49
|
...contentProps,
|
|
50
50
|
borderBottomLeftRadius: "outer",
|
|
51
51
|
borderBottomRightRadius: "outer",
|
|
52
|
-
children: isLoading ? /* @__PURE__ */ jsx(Box2, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) :
|
|
52
|
+
children: isLoading ? /* @__PURE__ */ jsx(Box2, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : children
|
|
53
53
|
}
|
|
54
54
|
)
|
|
55
55
|
] });
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ContentBlock.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n title: string;\n subtitle: string;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n isLoading?: boolean;\n
|
|
1
|
+
{"version":3,"sources":["../../src/ContentBlock.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n title: string;\n subtitle: string;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n isLoading?: boolean;\n children: React.ReactNode;\n headerActions?: React.ReactNode;\n contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst ContentBlock: React.FC<ContentBlockProps> = ({\n title,\n subtitle,\n titleAs = \"h2\",\n subtitleAs = \"h3\",\n children,\n isLoading,\n headerActions,\n contentProps,\n ...boxProps\n}) => {\n return (\n <Container as=\"section\" {...boxProps}>\n <ContentBlockHeader>\n <Box>\n <Text.Headline as={titleAs}>{title}</Text.Headline>\n <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n {subtitle}\n </Text.Byline>\n </Box>\n {headerActions && <Box>{headerActions}</Box>}\n </ContentBlockHeader>\n <Box\n p={400}\n {...contentProps}\n borderBottomLeftRadius=\"outer\"\n borderBottomRightRadius=\"outer\"\n >\n {isLoading ? (\n <Box my={400}>\n <Loader delay={false} />\n </Box>\n ) : (\n children\n )}\n </Box>\n </Container>\n );\n};\n\nexport default ContentBlock;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContentBlockHeader = styled(Box)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n`;\n\nexport const ContentBlockContent = styled(Box)`\n padding: ${({ theme }) => theme.space[400]};\n`;\n","import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,OAAAA,YAAW;AACpB,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACHvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAEb,IAAM,qBAAqB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,mBAIzB,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,WAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGrC,IAAM,sBAAsB,OAAO,GAAG;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADT5C,SAAS,iBAAiB;AA2BlB,SACE,KADF;AAdR,IAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,aAAU,IAAG,WAAW,GAAG,UAC1B;AAAA,yBAAC,sBACC;AAAA,2BAACC,MAAA,EACC;AAAA,4BAAC,KAAK,UAAL,EAAc,IAAI,SAAU,iBAAM;AAAA,QACnC,oBAAC,KAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,SACF;AAAA,MACC,iBAAiB,oBAACA,MAAA,EAAK,yBAAc;AAAA,OACxC;AAAA,IACA;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,GAAG;AAAA,QACF,GAAG;AAAA,QACJ,wBAAuB;AAAA,QACvB,yBAAwB;AAAA,QAEvB,sBACC,oBAACA,MAAA,EAAI,IAAI,KACP,8BAAC,UAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;;;AEtDf,IAAO,gBAAQ;","names":["Box","Box"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -7,7 +7,7 @@ interface ContentBlockProps {
|
|
|
7
7
|
titleAs: "h1" | "h2" | "h3" | "h4";
|
|
8
8
|
subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
|
|
9
9
|
isLoading?: boolean;
|
|
10
|
-
|
|
10
|
+
children: React.ReactNode;
|
|
11
11
|
headerActions?: React.ReactNode;
|
|
12
12
|
contentProps?: React.ComponentProps<typeof Box>;
|
|
13
13
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ interface ContentBlockProps {
|
|
|
7
7
|
titleAs: "h1" | "h2" | "h3" | "h4";
|
|
8
8
|
subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
|
|
9
9
|
isLoading?: boolean;
|
|
10
|
-
|
|
10
|
+
children: React.ReactNode;
|
|
11
11
|
headerActions?: React.ReactNode;
|
|
12
12
|
contentProps?: React.ComponentProps<typeof Box>;
|
|
13
13
|
}
|
package/dist/index.js
CHANGED
|
@@ -65,7 +65,7 @@ var ContentBlock = ({
|
|
|
65
65
|
subtitle,
|
|
66
66
|
titleAs = "h2",
|
|
67
67
|
subtitleAs = "h3",
|
|
68
|
-
|
|
68
|
+
children,
|
|
69
69
|
isLoading,
|
|
70
70
|
headerActions,
|
|
71
71
|
contentProps,
|
|
@@ -86,7 +86,7 @@ var ContentBlock = ({
|
|
|
86
86
|
...contentProps,
|
|
87
87
|
borderBottomLeftRadius: "outer",
|
|
88
88
|
borderBottomRightRadius: "outer",
|
|
89
|
-
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.Box, { my: 400, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.Loader, { delay: false }) }) :
|
|
89
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.Box, { my: 400, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.Loader, { delay: false }) }) : children
|
|
90
90
|
}
|
|
91
91
|
)
|
|
92
92
|
] });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/ContentBlock.tsx","../src/styles.ts"],"sourcesContent":["import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n title: string;\n subtitle: string;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n isLoading?: boolean;\n
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/ContentBlock.tsx","../src/styles.ts"],"sourcesContent":["import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n title: string;\n subtitle: string;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n isLoading?: boolean;\n children: React.ReactNode;\n headerActions?: React.ReactNode;\n contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst ContentBlock: React.FC<ContentBlockProps> = ({\n title,\n subtitle,\n titleAs = \"h2\",\n subtitleAs = \"h3\",\n children,\n isLoading,\n headerActions,\n contentProps,\n ...boxProps\n}) => {\n return (\n <Container as=\"section\" {...boxProps}>\n <ContentBlockHeader>\n <Box>\n <Text.Headline as={titleAs}>{title}</Text.Headline>\n <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n {subtitle}\n </Text.Byline>\n </Box>\n {headerActions && <Box>{headerActions}</Box>}\n </ContentBlockHeader>\n <Box\n p={400}\n {...contentProps}\n borderBottomLeftRadius=\"outer\"\n borderBottomRightRadius=\"outer\"\n >\n {isLoading ? (\n <Box my={400}>\n <Loader delay={false} />\n </Box>\n ) : (\n children\n )}\n </Box>\n </Container>\n );\n};\n\nexport default ContentBlock;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContentBlockHeader = styled(Box)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n`;\n\nexport const ContentBlockContent = styled(Box)`\n padding: ${({ theme }) => theme.space[400]};\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,0BAAoB;AACpB,8BAAqB;AACrB,gCAAuB;;;ACHvB,+BAAmB;AACnB,6BAAoB;AAEb,IAAM,yBAAqB,yBAAAC,SAAO,0BAAG;AAAA;AAAA;AAAA;AAAA,mBAIzB,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,WAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGrC,IAAM,0BAAsB,yBAAAA,SAAO,0BAAG;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADT5C,mCAA0B;AA2BlB;AAdR,IAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,6CAAC,0CAAU,IAAG,WAAW,GAAG,UAC1B;AAAA,iDAAC,sBACC;AAAA,mDAAC,+BACC;AAAA,oDAAC,6BAAK,UAAL,EAAc,IAAI,SAAU,iBAAM;AAAA,QACnC,4CAAC,6BAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,SACF;AAAA,MACC,iBAAiB,4CAAC,+BAAK,yBAAc;AAAA,OACxC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACF,GAAG;AAAA,QACJ,wBAAuB;AAAA,QACvB,yBAAwB;AAAA,QAEvB,sBACC,4CAAC,+BAAI,IAAI,KACP,sDAAC,oCAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;;;ADtDf,IAAO,gBAAQ;","names":["import_seeds_react_box","styled"]}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ const meta: Meta<typeof ContentBlock> = {
|
|
|
10
10
|
args: {
|
|
11
11
|
title: "Volume Breakdown - Outbound",
|
|
12
12
|
subtitle: "View a breakdown of your outbound volume.",
|
|
13
|
-
|
|
13
|
+
children: (
|
|
14
14
|
<Text.SmallBodyCopy>
|
|
15
15
|
Here is some content inside the content block.
|
|
16
16
|
</Text.SmallBodyCopy>
|
package/src/ContentBlock.tsx
CHANGED
|
@@ -11,7 +11,7 @@ export interface ContentBlockProps {
|
|
|
11
11
|
titleAs: "h1" | "h2" | "h3" | "h4";
|
|
12
12
|
subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
|
|
13
13
|
isLoading?: boolean;
|
|
14
|
-
|
|
14
|
+
children: React.ReactNode;
|
|
15
15
|
headerActions?: React.ReactNode;
|
|
16
16
|
contentProps?: React.ComponentProps<typeof Box>;
|
|
17
17
|
}
|
|
@@ -21,7 +21,7 @@ const ContentBlock: React.FC<ContentBlockProps> = ({
|
|
|
21
21
|
subtitle,
|
|
22
22
|
titleAs = "h2",
|
|
23
23
|
subtitleAs = "h3",
|
|
24
|
-
|
|
24
|
+
children,
|
|
25
25
|
isLoading,
|
|
26
26
|
headerActions,
|
|
27
27
|
contentProps,
|
|
@@ -49,7 +49,7 @@ const ContentBlock: React.FC<ContentBlockProps> = ({
|
|
|
49
49
|
<Loader delay={false} />
|
|
50
50
|
</Box>
|
|
51
51
|
) : (
|
|
52
|
-
|
|
52
|
+
children
|
|
53
53
|
)}
|
|
54
54
|
</Box>
|
|
55
55
|
</Container>
|
|
@@ -9,7 +9,9 @@ describe("ContentBlock Features", () => {
|
|
|
9
9
|
subtitle="Test Subtitle"
|
|
10
10
|
titleAs="h1"
|
|
11
11
|
subtitleAs="h2"
|
|
12
|
-
|
|
12
|
+
>
|
|
13
|
+
Content
|
|
14
|
+
</ContentBlock>
|
|
13
15
|
);
|
|
14
16
|
|
|
15
17
|
const titleElement = screen.getByText("Test Title");
|
|
@@ -27,8 +29,9 @@ describe("ContentBlock Features", () => {
|
|
|
27
29
|
titleAs="h2"
|
|
28
30
|
subtitleAs="h3"
|
|
29
31
|
isLoading={false}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
>
|
|
33
|
+
<div>Loaded Content</div>
|
|
34
|
+
</ContentBlock>
|
|
32
35
|
);
|
|
33
36
|
expect(screen.getByText("Loaded Content")).toBeInTheDocument();
|
|
34
37
|
});
|
|
@@ -41,7 +44,9 @@ describe("ContentBlock Features", () => {
|
|
|
41
44
|
titleAs="h2"
|
|
42
45
|
subtitleAs="h3"
|
|
43
46
|
isLoading={true}
|
|
44
|
-
|
|
47
|
+
>
|
|
48
|
+
<div>Loaded Content</div>
|
|
49
|
+
</ContentBlock>
|
|
45
50
|
);
|
|
46
51
|
|
|
47
52
|
expect(
|