@simplybusiness/mobius 5.1.2 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/components/Accordion/Accordion.js +6 -5
- package/dist/cjs/components/Accordion/Accordion.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Accordion/Accordion.js +6 -5
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts +4 -0
- package/package.json +22 -21
- package/src/components/Accordion/Accordion.css +9 -0
- package/src/components/Accordion/Accordion.stories.tsx +1 -0
- package/src/components/Accordion/Accordion.test.tsx +36 -1
- package/src/components/Accordion/Accordion.tsx +19 -4
- package/src/components/Segment/Segment.css +1 -1
- package/src/components/Text/Text.css +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 5.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 2973f98: Support Accordion heading element type
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 3f02903: Upgrade dependencies
|
|
12
|
+
- 61d44d8: Add `text-wrap` of `balance` to headings and `pretty` to body text
|
|
13
|
+
- af09896: Update CSS imports to not import from outside their own package directory
|
|
14
|
+
- ffb1bbe: Change Segment subtle bg colour to pale grey
|
|
15
|
+
- Updated dependencies [3f02903]
|
|
16
|
+
- @simplybusiness/icons@4.14.1
|
|
17
|
+
|
|
3
18
|
## 5.1.2
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -13,15 +13,15 @@ const _jsxruntime = require("react/jsx-runtime");
|
|
|
13
13
|
const _icons = require("@simplybusiness/icons");
|
|
14
14
|
const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
|
|
15
15
|
const _react = require("react");
|
|
16
|
+
const _usePrefersReducedMotion = require("../../hooks/usePrefersReducedMotion");
|
|
16
17
|
const _Flex = require("../Flex");
|
|
17
18
|
const _Icon = require("../Icon");
|
|
18
|
-
const _usePrefersReducedMotion = require("../../hooks/usePrefersReducedMotion");
|
|
19
19
|
function _interop_require_default(obj) {
|
|
20
20
|
return obj && obj.__esModule ? obj : {
|
|
21
21
|
default: obj
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=>{
|
|
24
|
+
const AccordionLink = ({ text, elementType: LinkElement = "span", toggle, onClick, headerChildren, ariaExpanded })=>{
|
|
25
25
|
const linkClasses = (0, _dedupe.default)("mobius-accordion__link", {
|
|
26
26
|
"--is-open": ariaExpanded
|
|
27
27
|
});
|
|
@@ -53,7 +53,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
|
|
|
53
53
|
tabIndex: 0,
|
|
54
54
|
"aria-expanded": !!ariaExpanded,
|
|
55
55
|
children: [
|
|
56
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
56
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkElement, {
|
|
57
57
|
className: "mobius-accordion__link-text",
|
|
58
58
|
children: text
|
|
59
59
|
}),
|
|
@@ -75,7 +75,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
|
|
|
75
75
|
tabIndex: 0,
|
|
76
76
|
"aria-expanded": !!ariaExpanded,
|
|
77
77
|
children: [
|
|
78
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
78
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkElement, {
|
|
79
79
|
className: "mobius-accordion__link-text",
|
|
80
80
|
children: text
|
|
81
81
|
}),
|
|
@@ -87,7 +87,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
|
|
|
87
87
|
});
|
|
88
88
|
};
|
|
89
89
|
const Accordion = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
90
|
-
const { showText = "See more", hideText = "See less", headerPosition = "top", startOpen = false, onOpen, onClose, onChange = ()=>{}, headerChildren, ...rest } = props;
|
|
90
|
+
const { showText = "See more", hideText = "See less", headerPosition = "top", startOpen = false, linkElementType, onOpen, onClose, onChange = ()=>{}, headerChildren, ...rest } = props;
|
|
91
91
|
const [accordionState, setAccordionState] = (0, _react.useState)({
|
|
92
92
|
open: true,
|
|
93
93
|
withAnimation: false
|
|
@@ -135,6 +135,7 @@ const Accordion = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
135
135
|
children: [
|
|
136
136
|
headerPosition === "top" && /*#__PURE__*/ (0, _jsxruntime.jsx)(AccordionLink, {
|
|
137
137
|
text: linkText,
|
|
138
|
+
elementType: linkElementType,
|
|
138
139
|
toggle: handleChange,
|
|
139
140
|
ariaExpanded: accordionState.open,
|
|
140
141
|
headerChildren: headerChildren
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n KeyboardEvent,\n ReactNode,\n Ref,\n RefAttributes,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n KeyboardEvent,\n ReactNode,\n Ref,\n RefAttributes,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\n\nexport type AccordionLinkElementType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"span\";\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n /** Link text to show accordion content */\n text?: string;\n elementType?: AccordionLinkElementType;\n onClick?: () => void;\n toggle: () => void;\n headerChildren?: ReactNode;\n ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n text,\n elementType: LinkElement = \"span\",\n toggle,\n onClick,\n headerChildren,\n ariaExpanded,\n}: AccordionLinkProps) => {\n const linkClasses = classNames(\"mobius-accordion__link\", {\n \"--is-open\": ariaExpanded,\n });\n const iconClasses = classNames(\"mobius-accordion__link-icon\", {\n \"--is-open\": ariaExpanded,\n });\n const handleOnClick = (): void => {\n if (onClick) {\n onClick();\n }\n toggle();\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \" \" || e.key === \"Enter\") {\n toggle();\n }\n };\n\n if (headerChildren) {\n return (\n <Flex\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className=\"mobius-accordion__header\"\n >\n <div\n className={linkClasses}\n onClick={handleOnClick}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-expanded={!!ariaExpanded}\n >\n <LinkElement className=\"mobius-accordion__link-text\">\n {text}\n </LinkElement>\n <Icon icon={chevronDown} className={iconClasses} />\n </div>\n {headerChildren}\n </Flex>\n );\n }\n\n return (\n <div\n className={linkClasses}\n onClick={handleOnClick}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-expanded={!!ariaExpanded}\n >\n <LinkElement className=\"mobius-accordion__link-text\">{text}</LinkElement>\n <Icon icon={chevronDown} className={iconClasses} />\n </div>\n );\n};\n\nexport interface AccordionProps\n extends DOMProps,\n RefAttributes<AccordionElementType> {\n /** Custom class name for setting specific CSS */\n className?: string;\n /** Link text to show accordion content */\n showText?: string;\n /** Link text to hide accordion content */\n hideText?: string;\n /** Whether header is above or below content */\n headerPosition?: \"top\" | \"bottom\";\n /** Whether to expand the accordion initially */\n startOpen?: boolean | undefined;\n /** Semantic heading for title link (default is span) */\n linkElementType?: AccordionLinkElementType;\n /** Callback that fires each time the accordion is opened */\n onOpen?: () => void;\n /** Callback that fires each time the accordion is closed */\n onClose?: () => void;\n /** Callback that fires each time the accordion state changes */\n onChange?: (state: boolean) => void;\n children?: ReactNode;\n headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n AccordionProps,\n AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n const {\n showText = \"See more\",\n hideText = \"See less\",\n headerPosition = \"top\",\n startOpen = false,\n linkElementType,\n onOpen,\n onClose,\n onChange = () => {},\n headerChildren,\n ...rest\n } = props;\n const [accordionState, setAccordionState] = useState({\n open: true,\n withAnimation: false,\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-accordion\",\n props.className,\n {\n \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n \"--is-open\": accordionState.open,\n },\n );\n const contentContainerClasses = classNames(\n \"mobius-accordion__content-container\",\n {\n \"--is-open\": accordionState.open,\n },\n );\n const contentClasses = classNames(\"mobius-accordion__content\", {\n \"--is-open\": accordionState.open,\n });\n const linkText = accordionState.open ? hideText : showText;\n\n const handleChange = () => {\n // Fire events\n if (!accordionState.open && onOpen) {\n onOpen();\n }\n if (accordionState.open && onClose) {\n onClose();\n }\n if (onChange) {\n onChange(!accordionState.open);\n }\n setAccordionState({\n open: !accordionState.open,\n withAnimation: true,\n });\n };\n\n useEffect(() => {\n setAccordionState({\n open: startOpen,\n withAnimation: false,\n });\n }, [startOpen]);\n\n return (\n <div ref={ref} {...rest} className={containerClasses}>\n {headerPosition === \"top\" && (\n <AccordionLink\n text={linkText}\n elementType={linkElementType}\n toggle={handleChange}\n ariaExpanded={accordionState.open}\n headerChildren={headerChildren}\n />\n )}\n <div\n className={contentContainerClasses}\n aria-hidden={!accordionState.open}\n >\n <div className={contentClasses}>{props.children}</div>\n </div>\n {headerPosition === \"bottom\" && (\n <AccordionLink\n text={linkText}\n toggle={handleChange}\n ariaExpanded={accordionState.open}\n headerChildren={headerChildren}\n />\n )}\n </div>\n );\n});\n"],"names":["Accordion","AccordionLink","text","elementType","LinkElement","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","Icon","icon","chevronDown","forwardRef","props","ref","showText","hideText","headerPosition","startOpen","linkElementType","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","usePrefersReducedMotion","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}
|