fix(AIR-60631): update accordion shadow state for open (#1441)

* update accordion shadow state for open

* added rush change

* removed changes on Accordion.tsx

* modified stories.tsx for testing purposes to show both open and closed view of accordion

* correctly added states for possible scenarios

* fixed red border color and refactored the code

* got rid of small shadow for flatcard

* added default state story and regular story

* CHanged name of the story and readded the original card story

common/changes/pcln-design-system/AIR-60631_2024-01-24-20-07.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "update accordion shadow state for open",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Accordion/Accordion.stories.tsx

@@ -100,8 +100,13 @@ export const Ladder = {
     />
   ),
 }
+
 export const Card = { render: (args) => <Accordion {...args} items={items} variation='card' /> }
 
+export const ItemStatePropCard = {
+  render: (args) => <Accordion {...args} items={items} variation='card' itemsState={['item-1', 'item-2']} />,
+}
+
 export const FlatCard = { render: (args) => <Accordion {...args} items={items} variation='flatCard' /> }
 
 export const Singular = { render: (args) => <Accordion {...args} items={items} type='single' /> }

packages/core/src/Accordion/Accordion.styled.tsx

@@ -127,7 +127,7 @@ export interface IStyledItem {
 }
 
 export const StyledItem = styled(Box)<IStyledItem>`
-  box-shadow: ${(props) => (props.variation === 'card' ? themeGet('shadows.sm') : '')};
+  ${(props) => (['card', 'flatCard'].includes(props.variation) ? 'border: solid 1px transparent;' : '')}
   ${(props) =>
     props.variation === 'default' ? `background-color: ${getPaletteColor('background.light')(props)};` : ''}
   ${(props) =>
@@ -146,16 +146,41 @@ export const StyledItem = styled(Box)<IStyledItem>`
         border-radius: 0px; margin-bottom: 0px;
         `
       : ''}
+
   &[data-state='open'],
   &:hover {
-    box-shadow: ${(props) =>
-      props.variation === 'card' || props.variation === 'flatCard' ? themeGet('shadows.xl') : ''};
+    ${(props) =>
+      ['card', 'flatCard'].includes(props.variation)
+        ? `
+        border-color: ${getPaletteColor('border.base')(props)};
+        box-shadow: none;
+        `
+        : ''}
   }
+
   &[data-state='closed'] {
     ${(props) =>
       props.variation === 'underline'
-        ? `border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;`
+        ? `
+          border-bottom-left-radius: 0px;
+          border-bottom-right-radius: 0px;`
         : ''}
+    ${(props) =>
+      ['card'].includes(props.variation)
+        ? `
+          box-shadow: ${themeGet('shadows.sm')(props)}; 
+          border-color: transparent;
+        `
+        : ''}
+    
+    &:hover {
+      ${(props) =>
+        ['card', 'flatCard'].includes(props.variation)
+          ? `
+            box-shadow: ${themeGet('shadows.xl')(props)};
+            border-color: transparent;
+          `
+          : ''}
+    }
   }
 `