@sproutsocial/seeds-react-content-header 0.2.19 → 0.2.21
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 +34 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
- package/src/TitleArea.tsx +1 -5
- package/src/__tests__/tailwind.test.tsx +6 -6
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
|
-
[32mCJS[39m [1mdist/index.js [22m[32m6.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m7.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m4.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m6.36 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.61 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 90ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m4.02 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.56 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 90ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4301ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.84 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.84 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 6.00s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-content-header
|
|
2
2
|
|
|
3
|
+
## 0.2.21
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 65b5879: Complete the Tailwind migration of `Text` by converting the seven typographic
|
|
8
|
+
sub-components (`Text.Headline`, `Text.SubHeadline`, `Text.SmallSubHeadline`,
|
|
9
|
+
`Text.Byline`, `Text.SmallByline`, `Text.BodyCopy`, `Text.SmallBodyCopy`) from
|
|
10
|
+
`styled(Container)` styled-components to the Tailwind path.
|
|
11
|
+
|
|
12
|
+
Each sub-component now renders the base hybrid `Text` with a Seeds variant class
|
|
13
|
+
that maps the original color, weight, and typography size to CSS custom
|
|
14
|
+
properties. The variant classes are also usable directly on any element, e.g.:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
<p className="seeds-text seeds-text-body">Some body text</p>
|
|
18
|
+
<h2 className="seeds-text seeds-text-headline">Some headline text</h2>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
New classes: `seeds-text-headline`, `seeds-text-subheadline`,
|
|
22
|
+
`seeds-text-small-subheadline`, `seeds-text-byline`, `seeds-text-small-byline`,
|
|
23
|
+
`seeds-text-body`, `seeds-text-small-body`. The public `Text.*` API and the
|
|
24
|
+
`TypeTextComponent` interface are unchanged.
|
|
25
|
+
|
|
26
|
+
- Updated dependencies [65b5879]
|
|
27
|
+
- @sproutsocial/seeds-react-text@1.5.0
|
|
28
|
+
|
|
29
|
+
## 0.2.20
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- @sproutsocial/seeds-react-box@1.1.22
|
|
34
|
+
- @sproutsocial/seeds-react-icon@2.4.1
|
|
35
|
+
- @sproutsocial/seeds-react-mixins@4.3.8
|
|
36
|
+
|
|
3
37
|
## 0.2.19
|
|
4
38
|
|
|
5
39
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -66,7 +66,7 @@ var TitleArea = ({
|
|
|
66
66
|
leftSlot,
|
|
67
67
|
/* @__PURE__ */ jsxs(Box, { flex: 1, children: [
|
|
68
68
|
/* @__PURE__ */ jsx2(Text.Headline, { as: headingLevel, children: title }),
|
|
69
|
-
subtitle && /* @__PURE__ */ jsx2(Text.Byline, { as: subtitleAs,
|
|
69
|
+
subtitle && /* @__PURE__ */ jsx2(Text.Byline, { as: subtitleAs, children: subtitle })
|
|
70
70
|
] }),
|
|
71
71
|
rightSlot
|
|
72
72
|
] });
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ContentHeader.tsx","../../src/ContentHeaderTailwind.tsx","../../src/TitleArea.tsx","../../src/CollapsibleContentHeader.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n bordered = true,\n}: TypeContentHeaderProps) => {\n return (\n <HeaderContainer bordered={bordered}>\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {headerActions && <Box>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default ContentHeader;\n","/**\n * Tailwind CSS implementation of ContentHeader primitives\n * Uses Seeds content-header CSS classes from content-header.css\n */\n\nimport React from \"react\";\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\ninterface TypeHeaderContainerProps\n extends React.HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\n\nexport const HeaderContainer = ({\n bordered = false,\n className,\n children,\n ...rest\n}: TypeHeaderContainerProps) => (\n <div\n className={cn(\n \"seeds-content-header\",\n { \"seeds-content-header-bordered\": bordered },\n className\n )}\n {...rest}\n >\n {children}\n </div>\n);\n\nexport const TriggerButton = React.forwardRef<\n HTMLButtonElement,\n React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, type = \"button\", ...rest }, ref) => (\n <button\n ref={ref}\n type={type}\n className={cn(\"seeds-content-header-trigger\", className)}\n {...rest}\n >\n {children}\n </button>\n));\n\nTriggerButton.displayName = \"TriggerButton\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n title: string;\n subtitle?: string;\n headingLevel?: TypeHeadingLevel;\n subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n leftSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n}: TypeTitleAreaProps) => (\n <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n {leftSlot}\n <Box flex={1}>\n <Text.Headline as={headingLevel}>{title}</Text.Headline>\n {subtitle &&
|
|
1
|
+
{"version":3,"sources":["../../src/ContentHeader.tsx","../../src/ContentHeaderTailwind.tsx","../../src/TitleArea.tsx","../../src/CollapsibleContentHeader.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n bordered = true,\n}: TypeContentHeaderProps) => {\n return (\n <HeaderContainer bordered={bordered}>\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {headerActions && <Box>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default ContentHeader;\n","/**\n * Tailwind CSS implementation of ContentHeader primitives\n * Uses Seeds content-header CSS classes from content-header.css\n */\n\nimport React from \"react\";\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\ninterface TypeHeaderContainerProps\n extends React.HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\n\nexport const HeaderContainer = ({\n bordered = false,\n className,\n children,\n ...rest\n}: TypeHeaderContainerProps) => (\n <div\n className={cn(\n \"seeds-content-header\",\n { \"seeds-content-header-bordered\": bordered },\n className\n )}\n {...rest}\n >\n {children}\n </div>\n);\n\nexport const TriggerButton = React.forwardRef<\n HTMLButtonElement,\n React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, type = \"button\", ...rest }, ref) => (\n <button\n ref={ref}\n type={type}\n className={cn(\"seeds-content-header-trigger\", className)}\n {...rest}\n >\n {children}\n </button>\n));\n\nTriggerButton.displayName = \"TriggerButton\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n title: string;\n subtitle?: string;\n headingLevel?: TypeHeadingLevel;\n subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n leftSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n}: TypeTitleAreaProps) => (\n <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n {leftSlot}\n <Box flex={1}>\n <Text.Headline as={headingLevel}>{title}</Text.Headline>\n {subtitle && <Text.Byline as={subtitleAs}>{subtitle}</Text.Byline>}\n </Box>\n {rightSlot}\n </Box>\n);\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeCollapsibleContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer, TriggerButton } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const CollapsibleContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n trigger: TriggerWrapper,\n triggerPosition = \"right\",\n triggerIcon,\n bordered = true,\n}: TypeCollapsibleContentHeaderProps) => {\n const defaultIcon = (\n <Icon\n name=\"chevron-down-outline\"\n className=\"triggerIcon\"\n aria-hidden=\"true\"\n />\n );\n\n const resolvedIcon = triggerIcon !== undefined ? triggerIcon : defaultIcon;\n\n return (\n <HeaderContainer bordered={bordered}>\n <TriggerWrapper>\n <TriggerButton type=\"button\">\n {triggerPosition === \"left\" && <Box mr={400}>{resolvedIcon}</Box>}\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {triggerPosition === \"right\" && resolvedIcon}\n </TriggerButton>\n </TriggerWrapper>\n {headerActions && <Box ml={300}>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default CollapsibleContentHeader;\n","import ContentHeader from \"./ContentHeader\";\nimport CollapsibleContentHeader from \"./CollapsibleContentHeader\";\n\nexport default ContentHeader;\nexport { ContentHeader };\nexport { CollapsibleContentHeader };\nexport * from \"./ContentHeaderTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,OAAAA,YAAW;;;ACIpB,OAAO,WAAW;AAoChB;AAjCF,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAOO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,EAAE,iCAAiC,SAAS;AAAA,MAC5C;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA;AACH;AAGK,IAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,OAAO,UAAU,GAAG,KAAK,GAAG,QACpD;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACtD,GAAG;AAAA,IAEH;AAAA;AACH,CACD;AAED,cAAc,cAAc;;;ACnE5B,OAAkB;AAClB,SAAS,WAAW;AACpB,SAAS,YAAY;AAsBjB,SACE,OAAAC,MADF;AAVG,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,MAAM,GAAG,OAAM,QAAO,UAAU,GACrE;AAAA;AAAA,EACD,qBAAC,OAAI,MAAM,GACT;AAAA,oBAAAA,KAAC,KAAK,UAAL,EAAc,IAAI,cAAe,iBAAM;AAAA,IACvC,YAAY,gBAAAA,KAAC,KAAK,QAAL,EAAY,IAAI,YAAa,oBAAS;AAAA,KACtD;AAAA,EACC;AAAA,GACH;;;AFZE,SACE,OAAAC,MADF,QAAAC,aAAA;AAXG,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAA8B;AAC5B,SACE,gBAAAA,MAAC,mBAAgB,UACf;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,iBAAiB,gBAAAA,KAACE,MAAA,EAAK,yBAAc;AAAA,KACxC;AAEJ;AAEA,IAAO,wBAAQ;;;AG/Bf,OAAkB;AAClB,SAAS,OAAAC,YAAW;AACpB,SAAS,YAAY;AAmBjB,gBAAAC,MAYI,QAAAC,aAZJ;AAdG,IAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB;AAAA,EACA,WAAW;AACb,MAAyC;AACvC,QAAM,cACJ,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA;AAAA,EACd;AAGF,QAAM,eAAe,gBAAgB,SAAY,cAAc;AAE/D,SACE,gBAAAC,MAAC,mBAAgB,UACf;AAAA,oBAAAD,KAAC,kBACC,0BAAAC,MAAC,iBAAc,MAAK,UACjB;AAAA,0BAAoB,UAAU,gBAAAD,KAACE,MAAA,EAAI,IAAI,KAAM,wBAAa;AAAA,MAC3D,gBAAAF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,oBAAoB,WAAW;AAAA,OAClC,GACF;AAAA,IACC,iBAAiB,gBAAAA,KAACE,MAAA,EAAI,IAAI,KAAM,yBAAc;AAAA,KACjD;AAEJ;AAEA,IAAO,mCAAQ;;;AChDf,IAAO,gBAAQ;","names":["Box","jsx","jsx","jsxs","Box","Box","jsx","jsxs","Box"]}
|
package/dist/index.js
CHANGED
|
@@ -104,7 +104,7 @@ var TitleArea = ({
|
|
|
104
104
|
leftSlot,
|
|
105
105
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box.Box, { flex: 1, children: [
|
|
106
106
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.Headline, { as: headingLevel, children: title }),
|
|
107
|
-
subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.Byline, { as: subtitleAs,
|
|
107
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.Byline, { as: subtitleAs, children: subtitle })
|
|
108
108
|
] }),
|
|
109
109
|
rightSlot
|
|
110
110
|
] });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/ContentHeader.tsx","../src/ContentHeaderTailwind.tsx","../src/TitleArea.tsx","../src/CollapsibleContentHeader.tsx"],"sourcesContent":["import ContentHeader from \"./ContentHeader\";\nimport CollapsibleContentHeader from \"./CollapsibleContentHeader\";\n\nexport default ContentHeader;\nexport { ContentHeader };\nexport { CollapsibleContentHeader };\nexport * from \"./ContentHeaderTypes\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n bordered = true,\n}: TypeContentHeaderProps) => {\n return (\n <HeaderContainer bordered={bordered}>\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {headerActions && <Box>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default ContentHeader;\n","/**\n * Tailwind CSS implementation of ContentHeader primitives\n * Uses Seeds content-header CSS classes from content-header.css\n */\n\nimport React from \"react\";\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\ninterface TypeHeaderContainerProps\n extends React.HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\n\nexport const HeaderContainer = ({\n bordered = false,\n className,\n children,\n ...rest\n}: TypeHeaderContainerProps) => (\n <div\n className={cn(\n \"seeds-content-header\",\n { \"seeds-content-header-bordered\": bordered },\n className\n )}\n {...rest}\n >\n {children}\n </div>\n);\n\nexport const TriggerButton = React.forwardRef<\n HTMLButtonElement,\n React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, type = \"button\", ...rest }, ref) => (\n <button\n ref={ref}\n type={type}\n className={cn(\"seeds-content-header-trigger\", className)}\n {...rest}\n >\n {children}\n </button>\n));\n\nTriggerButton.displayName = \"TriggerButton\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n title: string;\n subtitle?: string;\n headingLevel?: TypeHeadingLevel;\n subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n leftSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n}: TypeTitleAreaProps) => (\n <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n {leftSlot}\n <Box flex={1}>\n <Text.Headline as={headingLevel}>{title}</Text.Headline>\n {subtitle &&
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/ContentHeader.tsx","../src/ContentHeaderTailwind.tsx","../src/TitleArea.tsx","../src/CollapsibleContentHeader.tsx"],"sourcesContent":["import ContentHeader from \"./ContentHeader\";\nimport CollapsibleContentHeader from \"./CollapsibleContentHeader\";\n\nexport default ContentHeader;\nexport { ContentHeader };\nexport { CollapsibleContentHeader };\nexport * from \"./ContentHeaderTypes\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n bordered = true,\n}: TypeContentHeaderProps) => {\n return (\n <HeaderContainer bordered={bordered}>\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {headerActions && <Box>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default ContentHeader;\n","/**\n * Tailwind CSS implementation of ContentHeader primitives\n * Uses Seeds content-header CSS classes from content-header.css\n */\n\nimport React from \"react\";\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\ninterface TypeHeaderContainerProps\n extends React.HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\n\nexport const HeaderContainer = ({\n bordered = false,\n className,\n children,\n ...rest\n}: TypeHeaderContainerProps) => (\n <div\n className={cn(\n \"seeds-content-header\",\n { \"seeds-content-header-bordered\": bordered },\n className\n )}\n {...rest}\n >\n {children}\n </div>\n);\n\nexport const TriggerButton = React.forwardRef<\n HTMLButtonElement,\n React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, children, type = \"button\", ...rest }, ref) => (\n <button\n ref={ref}\n type={type}\n className={cn(\"seeds-content-header-trigger\", className)}\n {...rest}\n >\n {children}\n </button>\n));\n\nTriggerButton.displayName = \"TriggerButton\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n title: string;\n subtitle?: string;\n headingLevel?: TypeHeadingLevel;\n subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n leftSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n}: TypeTitleAreaProps) => (\n <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n {leftSlot}\n <Box flex={1}>\n <Text.Headline as={headingLevel}>{title}</Text.Headline>\n {subtitle && <Text.Byline as={subtitleAs}>{subtitle}</Text.Byline>}\n </Box>\n {rightSlot}\n </Box>\n);\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeCollapsibleContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer, TriggerButton } from \"./ContentHeaderHybrid\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const CollapsibleContentHeader = ({\n title,\n subtitle,\n headingLevel = \"h4\",\n subtitleAs,\n leftSlot,\n rightSlot,\n headerActions,\n trigger: TriggerWrapper,\n triggerPosition = \"right\",\n triggerIcon,\n bordered = true,\n}: TypeCollapsibleContentHeaderProps) => {\n const defaultIcon = (\n <Icon\n name=\"chevron-down-outline\"\n className=\"triggerIcon\"\n aria-hidden=\"true\"\n />\n );\n\n const resolvedIcon = triggerIcon !== undefined ? triggerIcon : defaultIcon;\n\n return (\n <HeaderContainer bordered={bordered}>\n <TriggerWrapper>\n <TriggerButton type=\"button\">\n {triggerPosition === \"left\" && <Box mr={400}>{resolvedIcon}</Box>}\n <TitleArea\n title={title}\n subtitle={subtitle}\n headingLevel={headingLevel}\n subtitleAs={subtitleAs}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n />\n {triggerPosition === \"right\" && resolvedIcon}\n </TriggerButton>\n </TriggerWrapper>\n {headerActions && <Box ml={300}>{headerActions}</Box>}\n </HeaderContainer>\n );\n};\n\nexport default CollapsibleContentHeader;\n"],"mappings":"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","names":["import_react","import_seeds_react_box","React","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_seeds_react_box","import_jsx_runtime"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-content-header",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.21",
|
|
4
4
|
"description": "Seeds React ContentHeader",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
22
|
-
"@sproutsocial/seeds-react-icon": "^2.4.
|
|
23
|
-
"@sproutsocial/seeds-react-mixins": "^4.3.
|
|
24
|
-
"@sproutsocial/seeds-react-text": "^1.
|
|
21
|
+
"@sproutsocial/seeds-react-box": "^1.1.22",
|
|
22
|
+
"@sproutsocial/seeds-react-icon": "^2.4.1",
|
|
23
|
+
"@sproutsocial/seeds-react-mixins": "^4.3.8",
|
|
24
|
+
"@sproutsocial/seeds-react-text": "^1.5.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "^18.0.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
35
35
|
"@sproutsocial/seeds-testing": "*",
|
|
36
36
|
"@sproutsocial/seeds-react-testing-library": "*",
|
|
37
|
-
"@sproutsocial/seeds-react-collapsible": "^2.0.
|
|
37
|
+
"@sproutsocial/seeds-react-collapsible": "^2.0.1"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"styled-components": "^5.2.3"
|
package/src/TitleArea.tsx
CHANGED
|
@@ -24,11 +24,7 @@ export const TitleArea = ({
|
|
|
24
24
|
{leftSlot}
|
|
25
25
|
<Box flex={1}>
|
|
26
26
|
<Text.Headline as={headingLevel}>{title}</Text.Headline>
|
|
27
|
-
{subtitle &&
|
|
28
|
-
<Text.Byline as={subtitleAs} fontWeight="normal">
|
|
29
|
-
{subtitle}
|
|
30
|
-
</Text.Byline>
|
|
31
|
-
)}
|
|
27
|
+
{subtitle && <Text.Byline as={subtitleAs}>{subtitle}</Text.Byline>}
|
|
32
28
|
</Box>
|
|
33
29
|
{rightSlot}
|
|
34
30
|
</Box>
|
|
@@ -17,18 +17,18 @@ describe("ContentHeader Tailwind path", () => {
|
|
|
17
17
|
|
|
18
18
|
it("applies the bordered class by default", () => {
|
|
19
19
|
const { container } = render(<ContentHeader title="Title" />);
|
|
20
|
-
expect(
|
|
21
|
-
|
|
22
|
-
)
|
|
20
|
+
expect(container.querySelector(".seeds-content-header")).toHaveClass(
|
|
21
|
+
"seeds-content-header-bordered"
|
|
22
|
+
);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
it("omits the bordered class when bordered is false", () => {
|
|
26
26
|
const { container } = render(
|
|
27
27
|
<ContentHeader title="Title" bordered={false} />
|
|
28
28
|
);
|
|
29
|
-
expect(
|
|
30
|
-
|
|
31
|
-
)
|
|
29
|
+
expect(container.querySelector(".seeds-content-header")).not.toHaveClass(
|
|
30
|
+
"seeds-content-header-bordered"
|
|
31
|
+
);
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
it("renders the collapsible trigger with the trigger class and toggles", () => {
|