@sproutsocial/seeds-react-content-block 0.1.0 → 0.2.0
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 +11 -0
- package/dist/esm/index.js +2 -7
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +2 -7
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
- package/src/ContentBlock.tsx +4 -3
- package/src/styles.ts +0 -7
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
11
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m2.02 KB[39m
|
|
12
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m3.51 KB[39m
|
|
13
|
+
[32mESM[39m ⚡️ Build success in 173ms
|
|
14
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.24 KB[39m
|
|
15
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m3.56 KB[39m
|
|
16
|
+
[32mCJS[39m ⚡️ Build success in 185ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 28031ms
|
|
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 36.10s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-content-block
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- e2f6976: Refactor ContentBlock to use the shared Container component from seeds-react-container instead of custom styles. This improves consistency across components and simplifies the codebase. Also removes unused type exports from seeds-react-container.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [e2f6976]
|
|
12
|
+
- @sproutsocial/seeds-react-container@0.3.0
|
|
13
|
+
|
|
3
14
|
## 0.1.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -7,12 +7,6 @@ import { Loader } from "@sproutsocial/seeds-react-loader";
|
|
|
7
7
|
// src/styles.ts
|
|
8
8
|
import styled from "styled-components";
|
|
9
9
|
import { Box } from "@sproutsocial/seeds-react-box";
|
|
10
|
-
var ContentBlockStyles = styled.section`
|
|
11
|
-
background: ${({ theme }) => theme.colors.container.background.base};
|
|
12
|
-
border: ${({ theme }) => theme.borderWidths[500]} solid
|
|
13
|
-
${({ theme }) => theme.colors.container.border.base};
|
|
14
|
-
border-radius: ${({ theme }) => theme.radii.outer};
|
|
15
|
-
`;
|
|
16
10
|
var ContentBlockHeader = styled(Box)`
|
|
17
11
|
display: flex;
|
|
18
12
|
justify-content: space-between;
|
|
@@ -27,6 +21,7 @@ var ContentBlockContent = styled(Box)`
|
|
|
27
21
|
`;
|
|
28
22
|
|
|
29
23
|
// src/ContentBlock.tsx
|
|
24
|
+
import { Container } from "@sproutsocial/seeds-react-container";
|
|
30
25
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
31
26
|
var ContentBlock = ({
|
|
32
27
|
title,
|
|
@@ -39,7 +34,7 @@ var ContentBlock = ({
|
|
|
39
34
|
contentProps,
|
|
40
35
|
...boxProps
|
|
41
36
|
}) => {
|
|
42
|
-
return /* @__PURE__ */ jsxs(
|
|
37
|
+
return /* @__PURE__ */ jsxs(Container, { as: "section", ...boxProps, children: [
|
|
43
38
|
/* @__PURE__ */ jsxs(ContentBlockHeader, { children: [
|
|
44
39
|
/* @__PURE__ */ jsxs(Box2, { children: [
|
|
45
40
|
/* @__PURE__ */ jsx(Text.Headline, { as: titleAs, children: title }),
|
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
|
|
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 content?: 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 content,\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 content\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.js
CHANGED
|
@@ -44,12 +44,6 @@ var import_seeds_react_loader = require("@sproutsocial/seeds-react-loader");
|
|
|
44
44
|
// src/styles.ts
|
|
45
45
|
var import_styled_components = __toESM(require("styled-components"));
|
|
46
46
|
var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
|
|
47
|
-
var ContentBlockStyles = import_styled_components.default.section`
|
|
48
|
-
background: ${({ theme }) => theme.colors.container.background.base};
|
|
49
|
-
border: ${({ theme }) => theme.borderWidths[500]} solid
|
|
50
|
-
${({ theme }) => theme.colors.container.border.base};
|
|
51
|
-
border-radius: ${({ theme }) => theme.radii.outer};
|
|
52
|
-
`;
|
|
53
47
|
var ContentBlockHeader = (0, import_styled_components.default)(import_seeds_react_box.Box)`
|
|
54
48
|
display: flex;
|
|
55
49
|
justify-content: space-between;
|
|
@@ -64,6 +58,7 @@ var ContentBlockContent = (0, import_styled_components.default)(import_seeds_rea
|
|
|
64
58
|
`;
|
|
65
59
|
|
|
66
60
|
// src/ContentBlock.tsx
|
|
61
|
+
var import_seeds_react_container = require("@sproutsocial/seeds-react-container");
|
|
67
62
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
68
63
|
var ContentBlock = ({
|
|
69
64
|
title,
|
|
@@ -76,7 +71,7 @@ var ContentBlock = ({
|
|
|
76
71
|
contentProps,
|
|
77
72
|
...boxProps
|
|
78
73
|
}) => {
|
|
79
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_container.Container, { as: "section", ...boxProps, children: [
|
|
80
75
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContentBlockHeader, { children: [
|
|
81
76
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box2.Box, { children: [
|
|
82
77
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text.Headline, { as: titleAs, children: title }),
|
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
|
|
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 content?: 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 content,\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 content\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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-content-block",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Seeds React ContentBlock",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@sproutsocial/seeds-react-box": "^1.1.7",
|
|
22
22
|
"@sproutsocial/seeds-react-button": "^1.3.7",
|
|
23
|
+
"@sproutsocial/seeds-react-container": "^0.3.0",
|
|
23
24
|
"@sproutsocial/seeds-react-icon": "^2.0.2",
|
|
24
25
|
"@sproutsocial/seeds-react-loader": "^1.0.6",
|
|
25
26
|
"@sproutsocial/seeds-react-system-props": "^3.0.2",
|
package/src/ContentBlock.tsx
CHANGED
|
@@ -2,7 +2,8 @@ import React from "react";
|
|
|
2
2
|
import { Box } from "@sproutsocial/seeds-react-box";
|
|
3
3
|
import { Text } from "@sproutsocial/seeds-react-text";
|
|
4
4
|
import { Loader } from "@sproutsocial/seeds-react-loader";
|
|
5
|
-
import { ContentBlockHeader
|
|
5
|
+
import { ContentBlockHeader } from "./styles";
|
|
6
|
+
import { Container } from "@sproutsocial/seeds-react-container";
|
|
6
7
|
|
|
7
8
|
export interface ContentBlockProps {
|
|
8
9
|
title: string;
|
|
@@ -27,7 +28,7 @@ const ContentBlock: React.FC<ContentBlockProps> = ({
|
|
|
27
28
|
...boxProps
|
|
28
29
|
}) => {
|
|
29
30
|
return (
|
|
30
|
-
<
|
|
31
|
+
<Container as="section" {...boxProps}>
|
|
31
32
|
<ContentBlockHeader>
|
|
32
33
|
<Box>
|
|
33
34
|
<Text.Headline as={titleAs}>{title}</Text.Headline>
|
|
@@ -51,7 +52,7 @@ const ContentBlock: React.FC<ContentBlockProps> = ({
|
|
|
51
52
|
content
|
|
52
53
|
)}
|
|
53
54
|
</Box>
|
|
54
|
-
</
|
|
55
|
+
</Container>
|
|
55
56
|
);
|
|
56
57
|
};
|
|
57
58
|
|
package/src/styles.ts
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
import { Box } from "@sproutsocial/seeds-react-box";
|
|
3
3
|
|
|
4
|
-
export const ContentBlockStyles = styled.section`
|
|
5
|
-
background: ${({ theme }) => theme.colors.container.background.base};
|
|
6
|
-
border: ${({ theme }) => theme.borderWidths[500]} solid
|
|
7
|
-
${({ theme }) => theme.colors.container.border.base};
|
|
8
|
-
border-radius: ${({ theme }) => theme.radii.outer};
|
|
9
|
-
`;
|
|
10
|
-
|
|
11
4
|
export const ContentBlockHeader = styled(Box)`
|
|
12
5
|
display: flex;
|
|
13
6
|
justify-content: space-between;
|