@elvia/elvis-accordion - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

CHANGELOG.json

@@ -5,2 +5,16 @@ {
     {
+      "date": "14.12.23",
+      "version": "3.0.1",
+      "changelog": [
+        {
+          "type": "bug_fix",
+          "changes": [
+            "Fixed svg icons in the open and close label rotating when they weren't supposed to.",
+            "The <code>openLabel</code> and <code>closeLabel</code> will now properly take up 100% width when <code>isFullWidth</code> is set. This only applies when not using <code>openDetailText/closeDetailText</code> due to technical limitations."
+          ]
+        },
+        { "type": "patch", "changes": ["Updated internal dependencies."] }
+      ]
+    },
+    {
       "date": "10.11.23",
@@ -7,0 +21,0 @@ "version": "3.0.0",

dist/react/elvia-accordion.js

 // components/elvis-accordion/src/react/elvia-accordion.tsx
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { outlineListener, useSlot, IconWrapper } from "@elvia/elvis-toolbox";
+import { outlineListener, useSlot } from "@elvia/elvis-toolbox";
 
@@ -9,2 +9,3 @@ // components/elvis-accordion/src/react/styledComponents.tsx
 import { getTypographyCss } from "@elvia/elvis-typography";
+import { IconWrapper } from "@elvia/elvis-toolbox";
 var bezierCurve = "cubic-bezier(0.71, 0, 0.31, 1)";
@@ -33,5 +34,9 @@ var AccordionArea = styled.div.withConfig({
 }) => decideLabelPosition(labelPosition)};flex-direction:row;width:100%;`;
+var StyledIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "StyledIconWrapper",
+  componentId: "sc-nszrkq-2"
+})``;
 var AccordionButton = styled.button.withConfig({
   displayName: "AccordionButton",
-  componentId: "sc-nszrkq-2"
+  componentId: "sc-nszrkq-3"
 })`border:none;background:transparent;display:flex;padding:0;text-align:left;cursor:pointer;color:${getThemeColor("text-1")};width:${({
@@ -43,3 +48,3 @@ isFullWidth,
   currType
-}) => isFullWidth && currType === "normal" ? "space-between" : "inherit"};align-items:center;svg{transform:rotate(0deg);transition:transform 0.2s ease-out;${({
+}) => isFullWidth && currType === "normal" ? "space-between" : "inherit"};align-items:center;${StyledIconWrapper}{transform:rotate(0deg);transition:transform 0.2s ease-out;${({
   isOpenState
@@ -49,3 +54,3 @@ }) => isOpenState && css`transform:rotate(180deg);`};}`;
   displayName: "AccordionLabel",
-  componentId: "sc-nszrkq-3"
+  componentId: "sc-nszrkq-4"
 })`display:${({
@@ -59,3 +64,5 @@ hasLabel
   isFullWidth
-}) => isStartAligned && !isFullWidth ? "0" : "8px"};`;
+}) => isStartAligned && !isFullWidth ? "0" : "8px"};${({
+  isFullWidth
+}) => isFullWidth && "flex-grow: 1;"}`;
 var decideTypography = (size) => {
@@ -74,7 +81,10 @@ switch (size) {
   displayName: "AccordionLabelText",
-  componentId: "sc-nszrkq-4"
+  componentId: "sc-nszrkq-5"
 })`display:flex;${({
   typography,
   size
-}) => typography ? getTypographyCss(typography) : decideTypography(size)}`;
+}) => typography ? getTypographyCss(typography) : decideTypography(size)} ${({
+  isFullWidth,
+  hasDetailText
+}) => isFullWidth && !hasDetailText && "flex-grow: 1;"}`;
 var decideDetailTextSize = (size) => {
@@ -91,3 +101,3 @@ if (size === "small") {
   displayName: "AccordionDetailText",
-  componentId: "sc-nszrkq-5"
+  componentId: "sc-nszrkq-6"
 })`${({
@@ -129,3 +139,3 @@ size
   displayName: "AccordionContent",
-  componentId: "sc-nszrkq-6"
+  componentId: "sc-nszrkq-7"
 })`display:${({
@@ -286,3 +296,3 @@ hasContent
   };
-  return /* @__PURE__ */ React.createElement(AccordionArea, { className, style: inlineStyle, "data-testid": "accordion-area", ref: accordionRef, ...rest }, type === "overflow" ? /* @__PURE__ */ React.createElement(AccordionContent, { type, spacingAboveContent, spacingBelowContent, isOpenState, overflowHeight, contentHeight, hasContent, ref: accordionContentRef, "data-testid": "accordion-content-overflow" }, content) : null, /* @__PURE__ */ React.createElement(AccordionButtonArea, { labelPosition, type }, /* @__PURE__ */ React.createElement(AccordionButton, { "aria-expanded": isOpenState, currType: type, isFullWidth, isOpenState, onClick: () => handleOnClick(), onMouseEnter: () => setIsHoveringButton(true), onMouseLeave: () => setIsHoveringButton(false), "data-testid": "accordion-button-label", "aria-label": decideButtonAriaLabel() }, shouldShowLeftIcon() && /* @__PURE__ */ React.createElement(IconWrapper, { icon: isHoveringButton || isHovering ? expandCircleFilledColor : expandCircleColor, size: getIconSize(size) }), /* @__PURE__ */ React.createElement(AccordionLabel, { hasLabel: type !== "single", isStartAligned, isFullWidth }, isOpenState ? /* @__PURE__ */ React.createElement(AccordionLabelText, { size, typography, ref: closeLabelRef }, closeLabel) : /* @__PURE__ */ React.createElement(AccordionLabelText, { size, typography, ref: openLabelRef }, openLabel), /* @__PURE__ */ React.createElement(AccordionDetailText, { size, openDetailText }, !isOpenState ? openDetailText : closeDetailText)), shouldShowRightIcon() && /* @__PURE__ */ React.createElement(IconWrapper, { icon: isHoveringButton || isHovering ? expandCircleFilledColor : expandCircleColor, size: getIconSize(size) }))), type === "normal" ? /* @__PURE__ */ React.createElement(AccordionContent, { type, spacingAboveContent, spacingBelowContent, isOpenState, hasContent, contentHeight, overflowHeight, "data-testid": "accordion-content-normal", ref: accordionContentRef }, content) : null);
+  return /* @__PURE__ */ React.createElement(AccordionArea, { className, style: inlineStyle, "data-testid": "accordion-area", ref: accordionRef, ...rest }, type === "overflow" ? /* @__PURE__ */ React.createElement(AccordionContent, { type, spacingAboveContent, spacingBelowContent, isOpenState, overflowHeight, contentHeight, hasContent, ref: accordionContentRef, "data-testid": "accordion-content-overflow" }, content) : null, /* @__PURE__ */ React.createElement(AccordionButtonArea, { labelPosition, type }, /* @__PURE__ */ React.createElement(AccordionButton, { "aria-expanded": isOpenState, currType: type, isFullWidth, isOpenState, onClick: () => handleOnClick(), onMouseEnter: () => setIsHoveringButton(true), onMouseLeave: () => setIsHoveringButton(false), "data-testid": "accordion-button-label", "aria-label": decideButtonAriaLabel() }, shouldShowLeftIcon() && /* @__PURE__ */ React.createElement(StyledIconWrapper, { icon: isHoveringButton || isHovering ? expandCircleFilledColor : expandCircleColor, size: getIconSize(size) }), /* @__PURE__ */ React.createElement(AccordionLabel, { hasLabel: type !== "single", isStartAligned, isFullWidth }, isOpenState ? /* @__PURE__ */ React.createElement(AccordionLabelText, { size, typography, isFullWidth, hasDetailText: !!openDetailText || !!closeDetailText, ref: closeLabelRef }, closeLabel) : /* @__PURE__ */ React.createElement(AccordionLabelText, { size, typography, isFullWidth, hasDetailText: !!openDetailText || !!closeDetailText, ref: openLabelRef }, openLabel), /* @__PURE__ */ React.createElement(AccordionDetailText, { size, openDetailText }, !isOpenState ? openDetailText : closeDetailText)), shouldShowRightIcon() && /* @__PURE__ */ React.createElement(StyledIconWrapper, { icon: isHoveringButton || isHovering ? expandCircleFilledColor : expandCircleColor, size: getIconSize(size) }))), type === "normal" ? /* @__PURE__ */ React.createElement(AccordionContent, { type, spacingAboveContent, spacingBelowContent, isOpenState, hasContent, contentHeight, overflowHeight, "data-testid": "accordion-content-normal", ref: accordionContentRef }, content) : null);
 };
@@ -289,0 +299,0 @@ export {

dist/react/elvia-accordion.types.d.ts

@@ -19,3 +19,2 @@ import { BaseProps } from '@elvia/elvis-toolbox';
     closeAriaLabel?: string;
-    hasBoldLabel?: boolean;
     isStartAligned?: boolean;
@@ -32,3 +31,3 @@ labelPosition?: AccordionLabelPosition;
 }
-export interface AccordionProps extends BaseAccordionProps, ComponentPropsWithoutRef<'div'> {
+export interface AccordionProps extends BaseAccordionProps, Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
 }

dist/react/styledComponents.d.ts

@@ -14,2 +14,3 @@ import { AccordionLabelPosition, AccordionSize, AccordionSpacingContent, AccordionType } from './elvia-accordion.types';
 }
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<any, any, any, any>;
 export declare const AccordionButton: import("styled-components").StyledComponent<"button", any, AccordionButtonProps, never>;
@@ -25,2 +26,4 @@ interface AccordionLabelProps {
     typography?: TypographyName;
+    isFullWidth: boolean;
+    hasDetailText: boolean;
 }
@@ -27,0 +30,0 @@ export declare const AccordionLabelText: import("styled-components").StyledComponent<"div", any, AccordionTextProps, never>;

package.json

 {
   "name": "@elvia/elvis-accordion",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
@@ -14,6 +14,6 @@ "homepage": "https://design.elvia.io/components/accordion",
   "dependencies": {
-    "@elvia/elvis-assets-icons": "^3.3.1",
+    "@elvia/elvis-assets-icons": "^3.9.0",
     "@elvia/elvis-colors": "^4.1.0",
-    "@elvia/elvis-component-wrapper": "^4.1.2",
-    "@elvia/elvis-toolbox": "^11.0.0",
+    "@elvia/elvis-component-wrapper": "^4.2.0",
+    "@elvia/elvis-toolbox": "^11.1.0",
     "@elvia/elvis-typography": "^2.7.0",
@@ -20,0 +20,0 @@ "styled-components": "^5.3.3"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39105

increased by3.25%

Lines of code

1227

increased by2.25%

Dependency changes

• Updated@elvia/elvis-assets-icons@^3.9.0

• Updated@elvia/elvis-component-wrapper@^4.2.0

• Updated@elvia/elvis-toolbox@^11.1.0