@sproutsocial/seeds-react-accordion 0.2.13 → 0.2.15
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 +22 -0
- package/dist/esm/index.js +48 -31
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +48 -31
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
- package/src/AccordionTrigger.tsx +17 -9
- package/src/styles.ts +7 -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[
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m24.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m17.14 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m24.92 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 137ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m13.16 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m24.50 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 138ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 9371ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m2.66 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m2.66 KB[39m
|
|
21
|
-
Done in 11.
|
|
21
|
+
Done in 11.63s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-accordion
|
|
2
2
|
|
|
3
|
+
## 0.2.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 96ffeb9: Fix AccordionTrigger icon visibility in dark mode by setting color on the styled Radix trigger button, preventing dark icons on dark backgrounds
|
|
8
|
+
- @sproutsocial/seeds-react-icon@2.2.1
|
|
9
|
+
- @sproutsocial/seeds-react-button@1.3.15
|
|
10
|
+
- @sproutsocial/seeds-react-menu@1.7.15
|
|
11
|
+
|
|
12
|
+
## 0.2.14
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [db6ce39]
|
|
17
|
+
- Updated dependencies [20bb01b]
|
|
18
|
+
- Updated dependencies [c7f2c70]
|
|
19
|
+
- @sproutsocial/seeds-react-theme@3.5.0
|
|
20
|
+
- @sproutsocial/seeds-react-icon@2.2.0
|
|
21
|
+
- @sproutsocial/seeds-react-box@1.1.12
|
|
22
|
+
- @sproutsocial/seeds-react-menu@1.7.14
|
|
23
|
+
- @sproutsocial/seeds-react-button@1.3.14
|
|
24
|
+
|
|
3
25
|
## 0.2.13
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -70,6 +70,7 @@ var Accordion = ({
|
|
|
70
70
|
import "@radix-ui/react-accordion";
|
|
71
71
|
|
|
72
72
|
// src/styles.ts
|
|
73
|
+
import "react";
|
|
73
74
|
import styled, { css as css2 } from "styled-components";
|
|
74
75
|
import * as RadixAccordion2 from "@radix-ui/react-accordion";
|
|
75
76
|
import { fontSize } from "styled-system";
|
|
@@ -152,6 +153,7 @@ var StyledRadixAccordionTrigger = styled(
|
|
|
152
153
|
outline: none;
|
|
153
154
|
border: none;
|
|
154
155
|
background: transparent;
|
|
156
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
155
157
|
${({ theme: theme2 }) => theme2.typography[200]};
|
|
156
158
|
|
|
157
159
|
.triggerIcon {
|
|
@@ -173,6 +175,7 @@ var StyledRadixAccordionTrigger = styled(
|
|
|
173
175
|
}
|
|
174
176
|
|
|
175
177
|
${COMMON}
|
|
178
|
+
${TYPOGRAPHY}
|
|
176
179
|
`;
|
|
177
180
|
var StyledRadixAccordionContent = styled(
|
|
178
181
|
RadixAccordion2.Content
|
|
@@ -237,6 +240,7 @@ var ContentContainer = styled.div`
|
|
|
237
240
|
var TriggerContainer = styled.div`
|
|
238
241
|
display: flex;
|
|
239
242
|
align-items: center;
|
|
243
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
240
244
|
|
|
241
245
|
${({ $styled, theme: theme2 }) => $styled && `
|
|
242
246
|
border-top: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
@@ -391,14 +395,8 @@ var AccordionTrigger = ({
|
|
|
391
395
|
{
|
|
392
396
|
"aria-label": overflowMenu["aria-label"],
|
|
393
397
|
appearance: "unstyled",
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
{
|
|
397
|
-
name: "ellipsis-horizontal-outline",
|
|
398
|
-
"aria-hidden": "true",
|
|
399
|
-
color
|
|
400
|
-
}
|
|
401
|
-
)
|
|
398
|
+
color,
|
|
399
|
+
children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-horizontal-outline", "aria-hidden": "true" })
|
|
402
400
|
}
|
|
403
401
|
),
|
|
404
402
|
children: /* @__PURE__ */ jsx4(MenuContent, { children: /* @__PURE__ */ jsx4(MenuGroup, { id: "overflow-actions", children: overflowMenu.items.map((item, index) => {
|
|
@@ -417,7 +415,7 @@ var AccordionTrigger = ({
|
|
|
417
415
|
gap: "300",
|
|
418
416
|
color,
|
|
419
417
|
children: [
|
|
420
|
-
/* @__PURE__ */ jsx4(Icon2, { name: iconName
|
|
418
|
+
/* @__PURE__ */ jsx4(Icon2, { name: iconName }),
|
|
421
419
|
children2
|
|
422
420
|
]
|
|
423
421
|
}
|
|
@@ -433,31 +431,50 @@ var AccordionTrigger = ({
|
|
|
433
431
|
{
|
|
434
432
|
onClick: action.onClick,
|
|
435
433
|
"aria-label": action["aria-label"],
|
|
436
|
-
|
|
434
|
+
color,
|
|
435
|
+
children: /* @__PURE__ */ jsx4(Icon2, { name: action.iconName, "aria-hidden": "true" })
|
|
437
436
|
},
|
|
438
437
|
`${action.iconName}-${index}`
|
|
439
438
|
)) });
|
|
440
|
-
return /* @__PURE__ */ jsxs(
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
439
|
+
return /* @__PURE__ */ jsxs(
|
|
440
|
+
TriggerContainer,
|
|
441
|
+
{
|
|
442
|
+
"data-styled": styled2,
|
|
443
|
+
$styled: styled2,
|
|
444
|
+
"data-qa-trigger": "HERE",
|
|
445
|
+
color,
|
|
446
|
+
...triggerProps,
|
|
447
|
+
children: [
|
|
448
|
+
/* @__PURE__ */ jsx4(
|
|
449
|
+
StyledRadixAccordionTrigger,
|
|
450
|
+
{
|
|
451
|
+
"data-styled": styled2,
|
|
452
|
+
color,
|
|
453
|
+
...spacingProps,
|
|
454
|
+
children: triggerPosition === "right" ? /* @__PURE__ */ jsxs(StyledAccordionArea, { children: [
|
|
455
|
+
/* @__PURE__ */ jsxs(FlexCenter, { children: [
|
|
456
|
+
leftSlot,
|
|
457
|
+
/* @__PURE__ */ jsx4(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title }),
|
|
458
|
+
rightSlot
|
|
459
|
+
] }),
|
|
460
|
+
triggerIcon
|
|
461
|
+
] }) : /* @__PURE__ */ jsxs(StyledAccordionArea, { children: [
|
|
462
|
+
/* @__PURE__ */ jsxs(FlexCenter, { children: [
|
|
463
|
+
/* @__PURE__ */ jsx4(Box, { mr: 300, children: triggerIcon }),
|
|
464
|
+
leftSlot,
|
|
465
|
+
/* @__PURE__ */ jsx4(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title })
|
|
466
|
+
] }),
|
|
467
|
+
rightSlot
|
|
468
|
+
] })
|
|
469
|
+
}
|
|
470
|
+
),
|
|
471
|
+
shouldRenderActionsBlock && /* @__PURE__ */ jsxs(Box, { mr: 300, display: "flex", children: [
|
|
472
|
+
renderedOverflowMenu,
|
|
473
|
+
renderedRelatedActions
|
|
474
|
+
] })
|
|
475
|
+
]
|
|
476
|
+
}
|
|
477
|
+
);
|
|
461
478
|
};
|
|
462
479
|
export {
|
|
463
480
|
Accordion,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n >\n <Icon\n name=\"ellipsis-horizontal-outline\"\n aria-hidden=\"true\"\n color={color}\n />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} color={color} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n >\n <Icon name={action.iconName} color={color} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} $styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
|
package/dist/index.js
CHANGED
|
@@ -109,6 +109,7 @@ var Accordion = ({
|
|
|
109
109
|
var RadixAccordion3 = require("@radix-ui/react-accordion");
|
|
110
110
|
|
|
111
111
|
// src/styles.ts
|
|
112
|
+
var React3 = require("react");
|
|
112
113
|
var import_styled_components2 = __toESM(require("styled-components"));
|
|
113
114
|
var RadixAccordion2 = __toESM(require("@radix-ui/react-accordion"));
|
|
114
115
|
var import_styled_system = require("styled-system");
|
|
@@ -185,6 +186,7 @@ var StyledRadixAccordionTrigger = (0, import_styled_components2.default)(
|
|
|
185
186
|
outline: none;
|
|
186
187
|
border: none;
|
|
187
188
|
background: transparent;
|
|
189
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
188
190
|
${({ theme: theme2 }) => theme2.typography[200]};
|
|
189
191
|
|
|
190
192
|
.triggerIcon {
|
|
@@ -206,6 +208,7 @@ var StyledRadixAccordionTrigger = (0, import_styled_components2.default)(
|
|
|
206
208
|
}
|
|
207
209
|
|
|
208
210
|
${import_seeds_react_system_props2.COMMON}
|
|
211
|
+
${import_seeds_react_system_props2.TYPOGRAPHY}
|
|
209
212
|
`;
|
|
210
213
|
var StyledRadixAccordionContent = (0, import_styled_components2.default)(
|
|
211
214
|
RadixAccordion2.Content
|
|
@@ -270,6 +273,7 @@ var ContentContainer = import_styled_components2.default.div`
|
|
|
270
273
|
var TriggerContainer = import_styled_components2.default.div`
|
|
271
274
|
display: flex;
|
|
272
275
|
align-items: center;
|
|
276
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
273
277
|
|
|
274
278
|
${({ $styled, theme: theme2 }) => $styled && `
|
|
275
279
|
border-top: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
@@ -418,14 +422,8 @@ var AccordionTrigger = ({
|
|
|
418
422
|
{
|
|
419
423
|
"aria-label": overflowMenu["aria-label"],
|
|
420
424
|
appearance: "unstyled",
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
{
|
|
424
|
-
name: "ellipsis-horizontal-outline",
|
|
425
|
-
"aria-hidden": "true",
|
|
426
|
-
color
|
|
427
|
-
}
|
|
428
|
-
)
|
|
425
|
+
color,
|
|
426
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: "ellipsis-horizontal-outline", "aria-hidden": "true" })
|
|
429
427
|
}
|
|
430
428
|
),
|
|
431
429
|
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_menu2.MenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_menu2.MenuGroup, { id: "overflow-actions", children: overflowMenu.items.map((item, index) => {
|
|
@@ -444,7 +442,7 @@ var AccordionTrigger = ({
|
|
|
444
442
|
gap: "300",
|
|
445
443
|
color,
|
|
446
444
|
children: [
|
|
447
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: iconName
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: iconName }),
|
|
448
446
|
children2
|
|
449
447
|
]
|
|
450
448
|
}
|
|
@@ -460,31 +458,50 @@ var AccordionTrigger = ({
|
|
|
460
458
|
{
|
|
461
459
|
onClick: action.onClick,
|
|
462
460
|
"aria-label": action["aria-label"],
|
|
463
|
-
|
|
461
|
+
color,
|
|
462
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: action.iconName, "aria-hidden": "true" })
|
|
464
463
|
},
|
|
465
464
|
`${action.iconName}-${index}`
|
|
466
465
|
)) });
|
|
467
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
467
|
+
TriggerContainer,
|
|
468
|
+
{
|
|
469
|
+
"data-styled": styled2,
|
|
470
|
+
$styled: styled2,
|
|
471
|
+
"data-qa-trigger": "HERE",
|
|
472
|
+
color,
|
|
473
|
+
...triggerProps,
|
|
474
|
+
children: [
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
476
|
+
StyledRadixAccordionTrigger,
|
|
477
|
+
{
|
|
478
|
+
"data-styled": styled2,
|
|
479
|
+
color,
|
|
480
|
+
...spacingProps,
|
|
481
|
+
children: triggerPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
|
|
483
|
+
leftSlot,
|
|
484
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title }),
|
|
485
|
+
rightSlot
|
|
486
|
+
] }),
|
|
487
|
+
triggerIcon
|
|
488
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box.Box, { mr: 300, children: triggerIcon }),
|
|
491
|
+
leftSlot,
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title })
|
|
493
|
+
] }),
|
|
494
|
+
rightSlot
|
|
495
|
+
] })
|
|
496
|
+
}
|
|
497
|
+
),
|
|
498
|
+
shouldRenderActionsBlock && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
499
|
+
renderedOverflowMenu,
|
|
500
|
+
renderedRelatedActions
|
|
501
|
+
] })
|
|
502
|
+
]
|
|
503
|
+
}
|
|
504
|
+
);
|
|
488
505
|
};
|
|
489
506
|
// Annotate the CommonJS export names for ESM import in node:
|
|
490
507
|
0 && (module.exports = {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n >\n <Icon\n name=\"ellipsis-horizontal-outline\"\n aria-hidden=\"true\"\n color={color}\n />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} color={color} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n >\n <Icon name={action.iconName} color={color} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} $styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-accordion",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.15",
|
|
4
4
|
"description": "Seeds React Accordion",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@radix-ui/react-accordion": "1.2.12",
|
|
22
|
-
"@sproutsocial/seeds-react-theme": "^3.
|
|
22
|
+
"@sproutsocial/seeds-react-theme": "^3.5.0",
|
|
23
23
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
24
|
-
"@sproutsocial/seeds-react-box": "1.1.
|
|
25
|
-
"@sproutsocial/seeds-react-button": "1.3.
|
|
26
|
-
"@sproutsocial/seeds-react-icon": "2.1
|
|
27
|
-
"@sproutsocial/seeds-react-menu": "1.7.
|
|
24
|
+
"@sproutsocial/seeds-react-box": "1.1.12",
|
|
25
|
+
"@sproutsocial/seeds-react-button": "1.3.15",
|
|
26
|
+
"@sproutsocial/seeds-react-icon": "2.2.1",
|
|
27
|
+
"@sproutsocial/seeds-react-menu": "1.7.15",
|
|
28
28
|
"styled-system": "^5.1.5"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
package/src/AccordionTrigger.tsx
CHANGED
|
@@ -108,12 +108,9 @@ export const AccordionTrigger = ({
|
|
|
108
108
|
<MenuToggleButton
|
|
109
109
|
aria-label={overflowMenu["aria-label"]}
|
|
110
110
|
appearance="unstyled"
|
|
111
|
+
color={color}
|
|
111
112
|
>
|
|
112
|
-
<Icon
|
|
113
|
-
name="ellipsis-horizontal-outline"
|
|
114
|
-
aria-hidden="true"
|
|
115
|
-
color={color}
|
|
116
|
-
/>
|
|
113
|
+
<Icon name="ellipsis-horizontal-outline" aria-hidden="true" />
|
|
117
114
|
</MenuToggleButton>
|
|
118
115
|
}
|
|
119
116
|
>
|
|
@@ -135,7 +132,7 @@ export const AccordionTrigger = ({
|
|
|
135
132
|
gap="300"
|
|
136
133
|
color={color}
|
|
137
134
|
>
|
|
138
|
-
<Icon name={iconName}
|
|
135
|
+
<Icon name={iconName} />
|
|
139
136
|
{children}
|
|
140
137
|
</Box>
|
|
141
138
|
) : (
|
|
@@ -158,16 +155,27 @@ export const AccordionTrigger = ({
|
|
|
158
155
|
key={`${action.iconName}-${index}`}
|
|
159
156
|
onClick={action.onClick}
|
|
160
157
|
aria-label={action["aria-label"]}
|
|
158
|
+
color={color}
|
|
161
159
|
>
|
|
162
|
-
<Icon name={action.iconName}
|
|
160
|
+
<Icon name={action.iconName} aria-hidden="true" />
|
|
163
161
|
</Button>
|
|
164
162
|
))}
|
|
165
163
|
</Box>
|
|
166
164
|
);
|
|
167
165
|
|
|
168
166
|
return (
|
|
169
|
-
<TriggerContainer
|
|
170
|
-
|
|
167
|
+
<TriggerContainer
|
|
168
|
+
data-styled={styled}
|
|
169
|
+
$styled={styled}
|
|
170
|
+
data-qa-trigger="HERE"
|
|
171
|
+
color={color}
|
|
172
|
+
{...triggerProps}
|
|
173
|
+
>
|
|
174
|
+
<StyledRadixAccordionTrigger
|
|
175
|
+
data-styled={styled}
|
|
176
|
+
color={color}
|
|
177
|
+
{...spacingProps}
|
|
178
|
+
>
|
|
171
179
|
{triggerPosition === "right" ? (
|
|
172
180
|
<StyledAccordionArea>
|
|
173
181
|
<FlexCenter>
|
package/src/styles.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import styled, { css } from "styled-components";
|
|
2
3
|
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
3
4
|
import { fontSize } from "styled-system";
|
|
@@ -38,7 +39,9 @@ const animations = css`
|
|
|
38
39
|
`;
|
|
39
40
|
|
|
40
41
|
export const StyledRadixAccordionTrigger = styled(
|
|
41
|
-
RadixAccordion.Trigger
|
|
42
|
+
RadixAccordion.Trigger as React.ComponentType<
|
|
43
|
+
Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, "color">
|
|
44
|
+
>
|
|
42
45
|
)<StyledAccordionProps>`
|
|
43
46
|
padding: 0;
|
|
44
47
|
width: 100%;
|
|
@@ -49,6 +52,7 @@ export const StyledRadixAccordionTrigger = styled(
|
|
|
49
52
|
outline: none;
|
|
50
53
|
border: none;
|
|
51
54
|
background: transparent;
|
|
55
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
52
56
|
${({ theme }) => theme.typography[200]};
|
|
53
57
|
|
|
54
58
|
.triggerIcon {
|
|
@@ -70,6 +74,7 @@ export const StyledRadixAccordionTrigger = styled(
|
|
|
70
74
|
}
|
|
71
75
|
|
|
72
76
|
${COMMON}
|
|
77
|
+
${TYPOGRAPHY}
|
|
73
78
|
`;
|
|
74
79
|
|
|
75
80
|
export const StyledRadixAccordionContent = styled(
|
|
@@ -141,6 +146,7 @@ export const ContentContainer = styled.div<StyledAccordionProps>`
|
|
|
141
146
|
export const TriggerContainer = styled.div<StyledAccordionProps>`
|
|
142
147
|
display: flex;
|
|
143
148
|
align-items: center;
|
|
149
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
144
150
|
|
|
145
151
|
${({ $styled, theme }) =>
|
|
146
152
|
$styled &&
|