@semcore/accordion - npm Package Compare versions

Comparing version 4.2.15 to 4.3.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [4.3.0] - 2023-02-20
+
+### Changed
+
+- Animation duration now might be controlled with design tokens.
+
 ## [4.2.15] - 2023-02-13
@@ -7,0 +13,0 @@

lib/cjs/Accordion.js

@@ -42,2 +42,4 @@ "use strict";
 
+var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -60,12 +62,12 @@
 /*__inner_css_start__*/
-".___SItemToggle_1l3fx_gg_{cursor:pointer;outline:0}.___SItemToggle_1l3fx_gg_.__keyboardFocused_1l3fx_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SItemToggle_1l3fx_gg_.__disabled_1l3fx_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default}.___SItemChevron_1l3fx_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_1l3fx_gg_.__selected_1l3fx_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_1l3fx_gg_{transition:none}}"
+".___SItemToggle_cxvs8_gg_{cursor:pointer;outline:0}.___SItemToggle_cxvs8_gg_.__keyboardFocused_cxvs8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SItemToggle_cxvs8_gg_.__disabled_cxvs8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_cxvs8_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_cxvs8_gg_.__selected_cxvs8_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_cxvs8_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1l3fx_gg_")
+, "cxvs8_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_1l3fx_gg_",
-  "_keyboardFocused": "__keyboardFocused_1l3fx_gg_",
-  "_disabled": "__disabled_1l3fx_gg_",
-  "__SItemChevron": "___SItemChevron_1l3fx_gg_",
-  "_selected": "__selected_1l3fx_gg_"
+  "__SItemToggle": "___SItemToggle_cxvs8_gg_",
+  "_keyboardFocused": "__keyboardFocused_cxvs8_gg_",
+  "_disabled": "__disabled_cxvs8_gg_",
+  "__SItemChevron": "___SItemChevron_cxvs8_gg_",
+  "_selected": "__selected_cxvs8_gg_"
 });
@@ -138,5 +140,10 @@
 (0, _defineProperty2["default"])(RootAccordion, "defaultProps", {
-  defaultValue: [],
-  duration: 350
+  defaultValue: []
 });
+(0, _defineProperty2["default"])(RootAccordion, "enhance", [(0, _useCssVariable.cssVariableEnhance)({
+  variable: '--intergalactic-duration-accordion',
+  fallback: '200',
+  map: Number.parseInt,
+  prop: 'duration'
+})]);
 
@@ -143,0 +150,0 @@ var RootItem = /*#__PURE__*/function (_Component2) {

lib/es6/Accordion.js

@@ -29,2 +29,3 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
 
@@ -36,12 +37,12 @@ /*__reshadow-styles__:"./style/accordion.shadow.css"*/
 /*__inner_css_start__*/
-".___SItemToggle_1l3fx_gg_{cursor:pointer;outline:0}.___SItemToggle_1l3fx_gg_.__keyboardFocused_1l3fx_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SItemToggle_1l3fx_gg_.__disabled_1l3fx_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default}.___SItemChevron_1l3fx_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_1l3fx_gg_.__selected_1l3fx_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_1l3fx_gg_{transition:none}}"
+".___SItemToggle_cxvs8_gg_{cursor:pointer;outline:0}.___SItemToggle_cxvs8_gg_.__keyboardFocused_cxvs8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SItemToggle_cxvs8_gg_.__disabled_cxvs8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_cxvs8_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_cxvs8_gg_.__selected_cxvs8_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_cxvs8_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1l3fx_gg_")
+, "cxvs8_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_1l3fx_gg_",
-  "_keyboardFocused": "__keyboardFocused_1l3fx_gg_",
-  "_disabled": "__disabled_1l3fx_gg_",
-  "__SItemChevron": "___SItemChevron_1l3fx_gg_",
-  "_selected": "__selected_1l3fx_gg_"
+  "__SItemToggle": "___SItemToggle_cxvs8_gg_",
+  "_keyboardFocused": "__keyboardFocused_cxvs8_gg_",
+  "_disabled": "__disabled_cxvs8_gg_",
+  "__SItemChevron": "___SItemChevron_cxvs8_gg_",
+  "_selected": "__selected_cxvs8_gg_"
 });
@@ -121,6 +122,12 @@
 _defineProperty(RootAccordion, "defaultProps", {
-  defaultValue: [],
-  duration: 350
+  defaultValue: []
 });
 
+_defineProperty(RootAccordion, "enhance", [cssVariableEnhance({
+  variable: '--intergalactic-duration-accordion',
+  fallback: '200',
+  map: Number.parseInt,
+  prop: 'duration'
+})]);
+
 export var RootItem = /*#__PURE__*/function (_Component2) {
@@ -127,0 +134,0 @@ _inherits(RootItem, _Component2);

package.json

 {
   "name": "@semcore/accordion",
   "description": "Semrush Accordion Component",
-  "version": "4.2.15",
+  "version": "4.3.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

No alert changes

Improved metrics

Total package byte prevSize

60646

increased by3.06%

Lines of code

625

increased by1.96%

No dependency changes