@sproutsocial/seeds-react-content-header 0.2.6 → 0.2.8
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 +12 -0
- package/dist/esm/index.js +3 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/CollapsibleContentHeader.tsx +1 -1
- package/src/styles.ts +2 -1
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[32m6.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m6.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m6.42 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m6.85 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 64ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m4.03 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m6.82 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 64ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 2747ms
|
|
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 4.
|
|
21
|
+
Done in 4.20s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-content-header
|
|
2
2
|
|
|
3
|
+
## 0.2.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- eb6937d: Fix collapsible trigger icon spacing and delay border-bottom hide until close animation completes
|
|
8
|
+
|
|
9
|
+
## 0.2.7
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- @sproutsocial/seeds-react-icon@2.3.4
|
|
14
|
+
|
|
3
15
|
## 0.2.6
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -16,8 +16,9 @@ var HeaderContainer = styled.div`
|
|
|
16
16
|
|
|
17
17
|
${({ $bordered }) => $bordered && divider}
|
|
18
18
|
|
|
19
|
-
/*
|
|
19
|
+
/* Delay hiding the divider until the close animation finishes */
|
|
20
20
|
&:has(button[data-state="closed"]) {
|
|
21
|
+
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
21
22
|
border-bottom-color: transparent;
|
|
22
23
|
}
|
|
23
24
|
`;
|
|
@@ -124,7 +125,7 @@ var CollapsibleContentHeader = ({
|
|
|
124
125
|
const resolvedIcon = triggerIcon !== void 0 ? triggerIcon : defaultIcon;
|
|
125
126
|
return /* @__PURE__ */ jsxs3(HeaderContainer, { $bordered: bordered, children: [
|
|
126
127
|
/* @__PURE__ */ jsx3(TriggerWrapper, { children: /* @__PURE__ */ jsxs3(TriggerButton, { type: "button", children: [
|
|
127
|
-
triggerPosition === "left" && /* @__PURE__ */ jsx3(Box3, { mr:
|
|
128
|
+
triggerPosition === "left" && /* @__PURE__ */ jsx3(Box3, { mr: 400, children: resolvedIcon }),
|
|
128
129
|
/* @__PURE__ */ jsx3(
|
|
129
130
|
TitleArea,
|
|
130
131
|
{
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ContentHeader.tsx","../../src/styles.ts","../../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 \"./styles\";\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","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n\n ${({ $bordered }) => $bordered && divider}\n\n /*
|
|
1
|
+
{"version":3,"sources":["../../src/ContentHeader.tsx","../../src/styles.ts","../../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 \"./styles\";\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","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n\n ${({ $bordered }) => $bordered && divider}\n\n /* Delay hiding the divider until the close animation finishes */\n &:has(button[data-state=\"closed\"]) {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom-color: transparent;\n }\n`;\n\nexport const TriggerButton = styled.button`\n all: unset;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n width: 100%;\n cursor: pointer;\n min-width: 0;\n\n .triggerIcon {\n flex-shrink: 0;\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] .triggerIcon {\n transform: rotate(-180deg);\n }\n\n &:focus-visible {\n ${focusRing}\n }\n`;\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 && (\n <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n {subtitle}\n </Text.Byline>\n )}\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 \"./styles\";\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":"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","names":["Box","jsx","jsxs","Box","Box","jsx","jsxs","Box"]}
|
package/dist/index.js
CHANGED
|
@@ -54,8 +54,9 @@ var HeaderContainer = import_styled_components.default.div`
|
|
|
54
54
|
|
|
55
55
|
${({ $bordered }) => $bordered && import_seeds_react_mixins.divider}
|
|
56
56
|
|
|
57
|
-
/*
|
|
57
|
+
/* Delay hiding the divider until the close animation finishes */
|
|
58
58
|
&:has(button[data-state="closed"]) {
|
|
59
|
+
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
59
60
|
border-bottom-color: transparent;
|
|
60
61
|
}
|
|
61
62
|
`;
|
|
@@ -162,7 +163,7 @@ var CollapsibleContentHeader = ({
|
|
|
162
163
|
const resolvedIcon = triggerIcon !== void 0 ? triggerIcon : defaultIcon;
|
|
163
164
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderContainer, { $bordered: bordered, children: [
|
|
164
165
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TriggerWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TriggerButton, { type: "button", children: [
|
|
165
|
-
triggerPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.Box, { mr:
|
|
166
|
+
triggerPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.Box, { mr: 400, children: resolvedIcon }),
|
|
166
167
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
167
168
|
TitleArea,
|
|
168
169
|
{
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/ContentHeader.tsx","../src/styles.ts","../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 \"./styles\";\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","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n\n ${({ $bordered }) => $bordered && divider}\n\n /*
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/ContentHeader.tsx","../src/styles.ts","../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 \"./styles\";\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","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n color: ${({ theme }) => theme.colors.text.headline};\n padding: ${({ theme }) => theme.space[400]};\n\n ${({ $bordered }) => $bordered && divider}\n\n /* Delay hiding the divider until the close animation finishes */\n &:has(button[data-state=\"closed\"]) {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom-color: transparent;\n }\n`;\n\nexport const TriggerButton = styled.button`\n all: unset;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n width: 100%;\n cursor: pointer;\n min-width: 0;\n\n .triggerIcon {\n flex-shrink: 0;\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] .triggerIcon {\n transform: rotate(-180deg);\n }\n\n &:focus-visible {\n ${focusRing}\n }\n`;\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 && (\n <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n {subtitle}\n </Text.Byline>\n )}\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 \"./styles\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;AAClB,IAAAC,0BAAoB;;;ACDpB,+BAAmB;AACnB,gCAAmC;AAE5B,IAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,IAExC,CAAC,EAAE,UAAU,MAAM,aAAa,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,IAAM,gBAAgB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAoB9B,mCAAS;AAAA;AAAA;;;ACzCf,mBAAkB;AAClB,6BAAoB;AACpB,8BAAqB;AAsBjB;AAVG,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,8BAAI,SAAQ,QAAO,YAAW,UAAS,MAAM,GAAG,OAAM,QAAO,UAAU,GACrE;AAAA;AAAA,EACD,6CAAC,8BAAI,MAAM,GACT;AAAA,gDAAC,6BAAK,UAAL,EAAc,IAAI,cAAe,iBAAM;AAAA,IACvC,YACC,4CAAC,6BAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,KAEJ;AAAA,EACC;AAAA,GACH;;;AFhBE,IAAAC,sBAAA;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,8CAAC,mBAAgB,WAAW,UAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,iBAAiB,6CAAC,+BAAK,yBAAc;AAAA,KACxC;AAEJ;AAEA,IAAO,wBAAQ;;;AG/Bf,IAAAC,gBAAkB;AAClB,IAAAC,0BAAoB;AACpB,8BAAqB;AAmBjB,IAAAC,sBAAA;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;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA;AAAA,EACd;AAGF,QAAM,eAAe,gBAAgB,SAAY,cAAc;AAE/D,SACE,8CAAC,mBAAgB,WAAW,UAC1B;AAAA,iDAAC,kBACC,wDAAC,iBAAc,MAAK,UACjB;AAAA,0BAAoB,UAAU,6CAAC,+BAAI,IAAI,KAAM,wBAAa;AAAA,MAC3D;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,6CAAC,+BAAI,IAAI,KAAM,yBAAc;AAAA,KACjD;AAEJ;AAEA,IAAO,mCAAQ;;;AJhDf,IAAO,gBAAQ;","names":["import_react","import_seeds_react_box","styled","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.8",
|
|
4
4
|
"description": "Seeds React ContentHeader",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@sproutsocial/seeds-react-box": "^1.1.16",
|
|
22
|
-
"@sproutsocial/seeds-react-icon": "^2.3.
|
|
22
|
+
"@sproutsocial/seeds-react-icon": "^2.3.4",
|
|
23
23
|
"@sproutsocial/seeds-react-mixins": "^4.3.3",
|
|
24
24
|
"@sproutsocial/seeds-react-text": "^1.4.0"
|
|
25
25
|
},
|
|
@@ -32,7 +32,7 @@ export const CollapsibleContentHeader = ({
|
|
|
32
32
|
<HeaderContainer $bordered={bordered}>
|
|
33
33
|
<TriggerWrapper>
|
|
34
34
|
<TriggerButton type="button">
|
|
35
|
-
{triggerPosition === "left" && <Box mr={
|
|
35
|
+
{triggerPosition === "left" && <Box mr={400}>{resolvedIcon}</Box>}
|
|
36
36
|
<TitleArea
|
|
37
37
|
title={title}
|
|
38
38
|
subtitle={subtitle}
|
package/src/styles.ts
CHANGED
|
@@ -12,8 +12,9 @@ export const HeaderContainer = styled.div<{ $bordered?: boolean }>`
|
|
|
12
12
|
|
|
13
13
|
${({ $bordered }) => $bordered && divider}
|
|
14
14
|
|
|
15
|
-
/*
|
|
15
|
+
/* Delay hiding the divider until the close animation finishes */
|
|
16
16
|
&:has(button[data-state="closed"]) {
|
|
17
|
+
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
17
18
|
border-bottom-color: transparent;
|
|
18
19
|
}
|
|
19
20
|
`;
|