@kaizen/components 1.80.4 → 1.80.5

package/dist/cjs/src/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -132,7 +132,7 @@ var GenericTile = function (_a) {
     className: classnames__default.default(GenericTile_module.root, classNameOverride)
   }, restProps), React__default.default.createElement("div", {
     className: classnames__default.default(GenericTile_module.tile, isFlipped && GenericTile_module.isFlipped)
-  }, React__default.default.createElement(React__default.default.Fragment, null, renderFront(), renderBack())));
+  }, isFlipped ? renderBack() : renderFront()));
 };
 GenericTile.displayName = 'GenericTile';
 exports.GenericTile = GenericTile;

package/dist/esm/src/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -124,7 +124,7 @@ const GenericTile = /*#__PURE__*/function () {
       className: classnames(styles.root, classNameOverride)
     }, restProps), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.tile, isFlipped && styles.isFlipped)
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, renderFront(), renderBack())));
+    }, isFlipped ? renderBack() : renderFront()));
   };
   GenericTile.displayName = 'GenericTile';
   return GenericTile;

package/dist/styles.css

@@ -6,31 +6,6 @@
   }
 }
 
-@layer kz-components {
-  .Popover-module_popover__BjY2S {
-    position: absolute;
-    height: auto;
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    padding: 0;
-    box-shadow: var(--shadow-small-box-shadow);
-    overflow: hidden auto;
-    margin: 0;
-    box-sizing: border-box;
-
-    /* TODO: update width based on design */
-    width: 200px;
-
-    @supports (anchor-name: --anchor) {
-      position-anchor: var(--position-anchor);
-      margin-block: var(--spacing-4);
-      position-area: var(--position-area) center;
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      width: anchor-size(width);
-    }
-  }
-}
-
 @layer kz-components {
   .ListItem-module_listItem__xGr6A {
     font-family: var(--typography-paragraph-body-font-family);
@@ -48,16 +23,6 @@
   }
 }
 
-@layer kz-components {
-  .ListSection-module_listSectionHeader__bptHg {
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    font-size: var(--typography-heading-5-font-size);
-    line-height: var(--typography-heading-5-line-height);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
-}
-
 @layer kz-components {
   .Trigger-module_button__giSqA {
     anchor-name: var(--anchor-name);
@@ -78,6 +43,41 @@
   }
 }
 
+@layer kz-components {
+  .Popover-module_popover__BjY2S {
+    position: absolute;
+    height: auto;
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    padding: 0;
+    box-shadow: var(--shadow-small-box-shadow);
+    overflow: hidden auto;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* TODO: update width based on design */
+    width: 200px;
+
+    @supports (anchor-name: --anchor) {
+      position-anchor: var(--position-anchor);
+      margin-block: var(--spacing-4);
+      position-area: var(--position-area) center;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      width: anchor-size(width);
+    }
+  }
+}
+
+@layer kz-components {
+  .ListSection-module_listSectionHeader__bptHg {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.80.4",
+  "version": "1.80.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -20,12 +20,17 @@ type Story = StoryObj<typeof GenericTile>
 export const Flip: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
+    const buttonWithInfoLabel = await canvas.findByRole('button', {
+      name: 'View more information: Title',
+    })
 
     await step('initial render complete', async () => {
+      expect(buttonWithInfoLabel).toBeInTheDocument()
+    })
+
+    await step('Can focus to button', async () => {
       await waitFor(() => {
-        canvas.getByRole('button', {
-          name: 'View more information: Title',
-        })
+        buttonWithInfoLabel.click()
       })
     })
 

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -159,10 +159,7 @@ export const GenericTile = ({
   return (
     <div className={classnames(styles.root, classNameOverride)} {...restProps}>
       <div className={classnames(styles.tile, isFlipped && styles.isFlipped)}>
-        <>
-          {renderFront()}
-          {renderBack()}
-        </>
+        {isFlipped ? renderBack() : renderFront()}
       </div>
     </div>
   )