@coorpacademy/components 11.14.16-alpha.0 → 11.14.16

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.
@@ -26,7 +26,8 @@
26
26
  flex-direction: row;
27
27
  justify-content: space-between;
28
28
  align-items: stretch;
29
- z-index: 10;
29
+ /* in order to avoid z-index clashes with other components*/
30
+ z-index: 9000;
30
31
  background-color: white;
31
32
  }
32
33
 
@@ -1,10 +1,11 @@
1
1
  @value breakpoints: "../../variables/breakpoints.css";
2
- @value colors: "../../variables/colors.css";
3
2
  @value mobile from breakpoints;
4
3
  @value tablet from breakpoints;
5
- @value medium from colors;
4
+ @value colors: "../../variables/colors.css";
6
5
  @value light from colors;
7
6
  @value lightMediumGray from colors;
7
+ @value medium from colors;
8
+ @value transparent from colors;
8
9
  @value white from colors;
9
10
 
10
11
  .hidden {
@@ -99,7 +100,6 @@
99
100
  width: fit-content;
100
101
  position: relative;
101
102
  top: -165px;
102
- z-index: 10;
103
103
  float: left;
104
104
  }
105
105
 
@@ -122,6 +122,8 @@
122
122
  cursor: pointer;
123
123
  line-height: 0;
124
124
  margin-left: 5px;
125
+ padding: 0;
126
+ background: transparent;
125
127
  }
126
128
 
127
129
  .arrow {
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AA2DA,kFAoFC"}
1
+ {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AA2DA,kFAqFC"}
@@ -96,11 +96,12 @@ const StarsSummary = (props, legacyContext) => {
96
96
  width: 10,
97
97
  height: 10
98
98
  })) : null;
99
- const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/React.createElement("div", {
99
+ const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/React.createElement("button", {
100
100
  className: style.circle,
101
101
  onClick: handleOnRight,
102
102
  "data-name": "right-arrow",
103
- "data-testid": "stars-summary-right-arrow"
103
+ "data-testid": "stars-summary-right-arrow",
104
+ type: "button"
104
105
  }, /*#__PURE__*/React.createElement(ArrowRight, {
105
106
  style: {
106
107
  color: dark
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.js","names":["React","useCallback","useMemo","useState","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","GetSkinFromContext","EngineStars","style","EngineTab","engine","engineIndex","firstItemIndex","type","state","dataName","hidden","active","propTypes","shape","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","setFirstItemIndex","totalItems","length","dark","primary","scrollTo","page","handleOnLeft","handleOnRight","leftArrowView","circle","color","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","childContextTypes","translate"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n const {type} = engine;\n const state = useMemo(\n () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n [engineIndex, firstItemIndex]\n );\n const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n return (\n <li className={style[state]} key={type} data-name={dataName}>\n <EngineStars\n {...engine}\n key={type}\n className={engineIndex < firstItemIndex ? style.hidden : style.active}\n />\n </li>\n );\n};\nEngineTab.propTypes = {\n engine: PropTypes.shape(EngineStars.propTypes),\n engineIndex: PropTypes.number,\n firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n return useMemo(\n () =>\n map.convert({cap: false})(\n (engine, index) => (\n <EngineTab\n engine={engine}\n key={`engineTab_${index}`}\n firstItemIndex={firstItemIndex}\n engineIndex={index}\n />\n ),\n engines\n ),\n [engines, firstItemIndex]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n const {total, engines} = props;\n const skin = GetSkinFromContext(legacyContext);\n\n const [firstItemIndex, setFirstItemIndex] = useState(0);\n const [totalItems] = useState(engines.length);\n\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n const handleOnLeft = useCallback(() => {\n scrollTo(firstItemIndex - 1);\n }, [firstItemIndex, scrollTo]);\n\n const handleOnRight = useCallback(() => {\n scrollTo(firstItemIndex + 1);\n }, [firstItemIndex, scrollTo]);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const leftArrowView =\n totalItems > 6 && firstItemIndex > 0 ? (\n <button\n className={style.circle}\n onClick={handleOnLeft}\n data-name=\"left-arrow\"\n data-testid=\"stars-summary-left-arrow\"\n type=\"button\"\n >\n <ArrowLeft style={{color: dark}} className={style.left} width={10} height={10} />\n </button>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n <div\n className={style.circle}\n onClick={handleOnRight}\n data-name=\"right-arrow\"\n data-testid=\"stars-summary-right-arrow\"\n >\n <ArrowRight style={{color: dark}} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars} tabIndex={0}>\n <div\n data-name=\"myStars-wrapper\"\n className={style.myStarsWrapper}\n data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n tabIndex={0}\n >\n <ul\n className={style.allStars}\n data-name=\"engineList\"\n data-testid=\"stars-summary-engine-tabs\"\n tabIndex={0}\n >\n <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n </ul>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} style={{color: primary}} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n};\n\nStarsSummary.propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}
1
+ {"version":3,"file":"stars-summary.js","names":["React","useCallback","useMemo","useState","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","GetSkinFromContext","EngineStars","style","EngineTab","engine","engineIndex","firstItemIndex","type","state","dataName","hidden","active","propTypes","shape","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","setFirstItemIndex","totalItems","length","dark","primary","scrollTo","page","handleOnLeft","handleOnRight","leftArrowView","circle","color","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","childContextTypes","translate"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n const {type} = engine;\n const state = useMemo(\n () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n [engineIndex, firstItemIndex]\n );\n const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n return (\n <li className={style[state]} key={type} data-name={dataName}>\n <EngineStars\n {...engine}\n key={type}\n className={engineIndex < firstItemIndex ? style.hidden : style.active}\n />\n </li>\n );\n};\nEngineTab.propTypes = {\n engine: PropTypes.shape(EngineStars.propTypes),\n engineIndex: PropTypes.number,\n firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n return useMemo(\n () =>\n map.convert({cap: false})(\n (engine, index) => (\n <EngineTab\n engine={engine}\n key={`engineTab_${index}`}\n firstItemIndex={firstItemIndex}\n engineIndex={index}\n />\n ),\n engines\n ),\n [engines, firstItemIndex]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n const {total, engines} = props;\n const skin = GetSkinFromContext(legacyContext);\n\n const [firstItemIndex, setFirstItemIndex] = useState(0);\n const [totalItems] = useState(engines.length);\n\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n const handleOnLeft = useCallback(() => {\n scrollTo(firstItemIndex - 1);\n }, [firstItemIndex, scrollTo]);\n\n const handleOnRight = useCallback(() => {\n scrollTo(firstItemIndex + 1);\n }, [firstItemIndex, scrollTo]);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const leftArrowView =\n totalItems > 6 && firstItemIndex > 0 ? (\n <button\n className={style.circle}\n onClick={handleOnLeft}\n data-name=\"left-arrow\"\n data-testid=\"stars-summary-left-arrow\"\n type=\"button\"\n >\n <ArrowLeft style={{color: dark}} className={style.left} width={10} height={10} />\n </button>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n <button\n className={style.circle}\n onClick={handleOnRight}\n data-name=\"right-arrow\"\n data-testid=\"stars-summary-right-arrow\"\n type=\"button\"\n >\n <ArrowRight style={{color: dark}} className={style.right} width={10} height={10} />\n </button>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars} tabIndex={0}>\n <div\n data-name=\"myStars-wrapper\"\n className={style.myStarsWrapper}\n data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n tabIndex={0}\n >\n <ul\n className={style.allStars}\n data-name=\"engineList\"\n data-testid=\"stars-summary-engine-tabs\"\n tabIndex={0}\n >\n <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n </ul>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} style={{color: primary}} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n};\n\nStarsSummary.propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}
@@ -26,7 +26,8 @@
26
26
  flex-direction: row;
27
27
  justify-content: space-between;
28
28
  align-items: stretch;
29
- z-index: 10;
29
+ /* in order to avoid z-index clashes with other components*/
30
+ z-index: 9000;
30
31
  background-color: white;
31
32
  }
32
33
 
@@ -1,10 +1,11 @@
1
1
  @value breakpoints: "../../variables/breakpoints.css";
2
- @value colors: "../../variables/colors.css";
3
2
  @value mobile from breakpoints;
4
3
  @value tablet from breakpoints;
5
- @value medium from colors;
4
+ @value colors: "../../variables/colors.css";
6
5
  @value light from colors;
7
6
  @value lightMediumGray from colors;
7
+ @value medium from colors;
8
+ @value transparent from colors;
8
9
  @value white from colors;
9
10
 
10
11
  .hidden {
@@ -99,7 +100,6 @@
99
100
  width: fit-content;
100
101
  position: relative;
101
102
  top: -165px;
102
- z-index: 10;
103
103
  float: left;
104
104
  }
105
105
 
@@ -122,6 +122,8 @@
122
122
  cursor: pointer;
123
123
  line-height: 0;
124
124
  margin-left: 5px;
125
+ padding: 0;
126
+ background: transparent;
125
127
  }
126
128
 
127
129
  .arrow {
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AA2DA,kFAoFC"}
1
+ {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AA2DA,kFAqFC"}
@@ -112,11 +112,12 @@ const StarsSummary = (props, legacyContext) => {
112
112
  width: 10,
113
113
  height: 10
114
114
  })) : null;
115
- const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/_react.default.createElement("div", {
115
+ const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/_react.default.createElement("button", {
116
116
  className: _starsSummary.default.circle,
117
117
  onClick: handleOnRight,
118
118
  "data-name": "right-arrow",
119
- "data-testid": "stars-summary-right-arrow"
119
+ "data-testid": "stars-summary-right-arrow",
120
+ type: "button"
120
121
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
121
122
  style: {
122
123
  color: dark
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItemIndex","type","state","useMemo","dataName","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","GetSkinFromContext","setFirstItemIndex","useState","totalItems","length","dark","primary","scrollTo","useCallback","page","handleOnLeft","handleOnRight","leftArrowView","circle","color","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","Provider","childContextTypes","translate"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n const {type} = engine;\n const state = useMemo(\n () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n [engineIndex, firstItemIndex]\n );\n const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n return (\n <li className={style[state]} key={type} data-name={dataName}>\n <EngineStars\n {...engine}\n key={type}\n className={engineIndex < firstItemIndex ? style.hidden : style.active}\n />\n </li>\n );\n};\nEngineTab.propTypes = {\n engine: PropTypes.shape(EngineStars.propTypes),\n engineIndex: PropTypes.number,\n firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n return useMemo(\n () =>\n map.convert({cap: false})(\n (engine, index) => (\n <EngineTab\n engine={engine}\n key={`engineTab_${index}`}\n firstItemIndex={firstItemIndex}\n engineIndex={index}\n />\n ),\n engines\n ),\n [engines, firstItemIndex]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n const {total, engines} = props;\n const skin = GetSkinFromContext(legacyContext);\n\n const [firstItemIndex, setFirstItemIndex] = useState(0);\n const [totalItems] = useState(engines.length);\n\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n const handleOnLeft = useCallback(() => {\n scrollTo(firstItemIndex - 1);\n }, [firstItemIndex, scrollTo]);\n\n const handleOnRight = useCallback(() => {\n scrollTo(firstItemIndex + 1);\n }, [firstItemIndex, scrollTo]);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const leftArrowView =\n totalItems > 6 && firstItemIndex > 0 ? (\n <button\n className={style.circle}\n onClick={handleOnLeft}\n data-name=\"left-arrow\"\n data-testid=\"stars-summary-left-arrow\"\n type=\"button\"\n >\n <ArrowLeft style={{color: dark}} className={style.left} width={10} height={10} />\n </button>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n <div\n className={style.circle}\n onClick={handleOnRight}\n data-name=\"right-arrow\"\n data-testid=\"stars-summary-right-arrow\"\n >\n <ArrowRight style={{color: dark}} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars} tabIndex={0}>\n <div\n data-name=\"myStars-wrapper\"\n className={style.myStarsWrapper}\n data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n tabIndex={0}\n >\n <ul\n className={style.allStars}\n data-name=\"engineList\"\n data-testid=\"stars-summary-engine-tabs\"\n tabIndex={0}\n >\n <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n </ul>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} style={{color: primary}} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n};\n\nStarsSummary.propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}
1
+ {"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItemIndex","type","state","useMemo","dataName","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","GetSkinFromContext","setFirstItemIndex","useState","totalItems","length","dark","primary","scrollTo","useCallback","page","handleOnLeft","handleOnRight","leftArrowView","circle","color","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","Provider","childContextTypes","translate"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n const {type} = engine;\n const state = useMemo(\n () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n [engineIndex, firstItemIndex]\n );\n const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n return (\n <li className={style[state]} key={type} data-name={dataName}>\n <EngineStars\n {...engine}\n key={type}\n className={engineIndex < firstItemIndex ? style.hidden : style.active}\n />\n </li>\n );\n};\nEngineTab.propTypes = {\n engine: PropTypes.shape(EngineStars.propTypes),\n engineIndex: PropTypes.number,\n firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n return useMemo(\n () =>\n map.convert({cap: false})(\n (engine, index) => (\n <EngineTab\n engine={engine}\n key={`engineTab_${index}`}\n firstItemIndex={firstItemIndex}\n engineIndex={index}\n />\n ),\n engines\n ),\n [engines, firstItemIndex]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n const {total, engines} = props;\n const skin = GetSkinFromContext(legacyContext);\n\n const [firstItemIndex, setFirstItemIndex] = useState(0);\n const [totalItems] = useState(engines.length);\n\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n const handleOnLeft = useCallback(() => {\n scrollTo(firstItemIndex - 1);\n }, [firstItemIndex, scrollTo]);\n\n const handleOnRight = useCallback(() => {\n scrollTo(firstItemIndex + 1);\n }, [firstItemIndex, scrollTo]);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const leftArrowView =\n totalItems > 6 && firstItemIndex > 0 ? (\n <button\n className={style.circle}\n onClick={handleOnLeft}\n data-name=\"left-arrow\"\n data-testid=\"stars-summary-left-arrow\"\n type=\"button\"\n >\n <ArrowLeft style={{color: dark}} className={style.left} width={10} height={10} />\n </button>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n <button\n className={style.circle}\n onClick={handleOnRight}\n data-name=\"right-arrow\"\n data-testid=\"stars-summary-right-arrow\"\n type=\"button\"\n >\n <ArrowRight style={{color: dark}} className={style.right} width={10} height={10} />\n </button>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars} tabIndex={0}>\n <div\n data-name=\"myStars-wrapper\"\n className={style.myStarsWrapper}\n data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n tabIndex={0}\n >\n <ul\n className={style.allStars}\n data-name=\"engineList\"\n data-testid=\"stars-summary-engine-tabs\"\n tabIndex={0}\n >\n <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n </ul>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} style={{color: primary}} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n};\n\nStarsSummary.propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.14.16-alpha.0+3f9dddefe5",
3
+ "version": "11.14.16",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -168,5 +168,5 @@
168
168
  "last 2 versions",
169
169
  "IE 11"
170
170
  ],
171
- "gitHead": "3f9dddefe5abe92d4acc2431108484691026f0ed"
171
+ "gitHead": "29ca7f1f746bb043363e756a1dccafb2511b7767"
172
172
  }