@shopgate/pwa-ui-material 7.12.6 → 7.12.7-beta.2
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/Accordion/index.js +16 -3
- package/Accordion/style.js +1 -1
- package/package.json +2 -2
package/Accordion/index.js
CHANGED
|
@@ -1,4 +1,17 @@
|
|
|
1
|
-
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import*as React from'react';import classnames from'classnames';import{AccordionContainer,ChevronIcon}from'@shopgate/pwa-ui-shared';import{i18n}from'@shopgate/engage/core';import AccordionContent from"./components/AccordionContent";import*as styles from"./style";/**
|
|
1
|
+
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import noop from'lodash/noop';import{AccordionContainer,ChevronIcon}from'@shopgate/pwa-ui-shared';import{i18n}from'@shopgate/engage/core';import AccordionContent from"./components/AccordionContent";import*as styles from"./style";/**
|
|
2
|
+
* Accordion component
|
|
2
3
|
* @param {Object} props The component props.
|
|
3
|
-
* @
|
|
4
|
-
|
|
4
|
+
* @param {Function} props.renderLabel Function that returns a React component used as header label
|
|
5
|
+
* @param {string} [props.handleLabel] Aria label for the header label
|
|
6
|
+
* @param {string} [props.role] Aria role (default `"button"`)
|
|
7
|
+
* @param {boolean} [props.openWithChevron] Whether to toggle the accordion only with the chevron
|
|
8
|
+
* (default `false`)
|
|
9
|
+
* @param {boolean} [props.startOpened] Whether to render initially open (default `false`)
|
|
10
|
+
* @param {"left"|"right"} [props.chevronPosition] Position of the chevron icon (default `"right"`)
|
|
11
|
+
* @param {string} [props.className] Class name for the header section
|
|
12
|
+
* @param {string} [props.chevronClassName] Class name for the chevron
|
|
13
|
+
* @param {string} [props.contentClassName] Class name for the content wrapper
|
|
14
|
+
* @param {string} [props.testId] Test ID for the component
|
|
15
|
+
* @param {React.ReactNode} props.children Children used for the content section of the accordion
|
|
16
|
+
* @returns {JSX.Element}
|
|
17
|
+
*/function Accordion(props){var renderLabel=props.renderLabel,handleLabel=props.handleLabel,role=props.role,children=props.children,testId=props.testId,className=props.className,contentClassName=props.contentClassName,chevronClassName=props.chevronClassName,openWithChevron=props.openWithChevron,startOpened=props.startOpened,chevronPosition=props.chevronPosition;if(!renderLabel||!children){return null;}var controlsId=testId?"".concat(testId,"-content").replace(/[^\w\s]/gi,'-').replace(' ','-'):'accordion-content';return React.createElement("div",{className:"ui-material__accordion-container"},React.createElement(AccordionContainer,{open:startOpened},function(_ref){var _classnames;var handleOpen=_ref.handleOpen,handleClose=_ref.handleClose,open=_ref.open;var clickHandlers={onClick:open?handleClose:handleOpen,onKeyDown:open?handleClose:handleOpen,role:role,tabIndex:'0'};return React.createElement(React.Fragment,null,React.createElement("div",_extends({},openWithChevron?{}:clickHandlers,{className:classnames('ui-material__accordion-title',className,styles.toggle,(_classnames={},_defineProperty(_classnames,styles.toggleLeftAligned,chevronPosition==='left'),_defineProperty(_classnames,styles.clickable,!openWithChevron),_classnames)),"data-test-id":testId,key:"accordion-toggle","aria-expanded":open,"aria-controls":controlsId,"aria-label":handleLabel}),React.createElement("div",{className:styles.labelContainer},renderLabel({open:open})),React.createElement("div",_extends({className:classnames(styles.chevronContainer,chevronClassName,_defineProperty({},styles.clickable,openWithChevron))},openWithChevron?clickHandlers:{},{"aria-label":i18n.text(open?'favorites.close_list':'favorites.open_list')}),React.createElement(ChevronIcon,{className:open?styles.chevronOpen:styles.chevronClosed}))),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children:null,renderLabel:noop,className:null,contentClassName:null,chevronClassName:null,handleLabel:null,role:'button',testId:null,openWithChevron:false,chevronPosition:'right',startOpened:false};export default Accordion;
|
package/Accordion/style.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var toggle=css({padding:'12px
|
|
1
|
+
function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var toggle=css({padding:'12px 16px',position:'relative',display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',gap:12}).toString();export var clickable=css({cursor:'pointer'}).toString();export var toggleLeftAligned=css({flexDirection:'row-reverse'});export var chevronContainer=css(_defineProperty({display:'flex',flexShrink:0,fontSize:'1.5rem'},responsiveMediaQuery('>sm',{webOnly:true}),{backgroundColor:'rgba(0, 0, 0, 0.04)',borderRadius:32,padding:8})).toString();export var labelContainer=css({marginRight:'auto',display:'flex',flex:1,alignItems:'center'});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronClosed=css(chevron,{transform:'rotateZ(-90deg)'}).toString();export var chevronOpen=css(chevron,{transform:'rotateZ(90deg)'}).toString();
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/pwa-ui-material",
|
|
3
|
-
"version": "7.12.
|
|
3
|
+
"version": "7.12.7-beta.2",
|
|
4
4
|
"description": "Shopgate's material design UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@shopgate/pwa-common": "7.12.
|
|
8
|
+
"@shopgate/pwa-common": "7.12.7-beta.2",
|
|
9
9
|
"react": "~16.12.0",
|
|
10
10
|
"react-dom": "~16.12.0",
|
|
11
11
|
"redux": "^4.0.1"
|