beem-component 2.1.29 → 2.1.30

package/src/lib/components/BmTabv2/BmTabv2.stories.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import GroupIcon from '@mui/icons-material/Group';
+import BusinessIcon from '@mui/icons-material/Business';
+import BmCustomTab from './BmTabv2';
+
+export const ExampleCustomTabsUsage = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <div style={{ padding: 20 }}>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: 20 }}>
+        <strong>Current Tab:</strong> {activeTab}
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/CustomTabs',
+  component: BmCustomTab,
+};
+
+export const ExampleTabs = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: '20px' }}>
+        <p>
+          You have selected: <strong>{activeTab}</strong>
+        </p>
+      </div>
+    </>
+  );
+};

package/src/lib/components/Card_v2/Card.js

@@ -1,5 +1,5 @@
 /* eslint-disable func-style */
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import styled from 'styled-components';
 
 const hexToRgba = (hex, opacity = 0.6) => {
@@ -12,16 +12,17 @@ const hexToRgba = (hex, opacity = 0.6) => {
     ) {
       throw new Error('Invalid hex');
     }
-
     const r = parseInt(normalizedHex.slice(0, 2), 16);
     const g = parseInt(normalizedHex.slice(2, 4), 16);
     const b = parseInt(normalizedHex.slice(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
+  } catch {
     return `rgba(0, 0, 0, ${opacity})`;
   }
 };
 
+const CardContext = createContext({});
+
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
   color: var(--card-foreground, #000);
@@ -53,14 +54,42 @@ const Description = styled.p`
   margin: 0;
 `;
 
-const Content = styled.div`
+const ContentWrapper = styled.div`
+  min-height: ${({ $contentHeight }) => $contentHeight || '14.2857rem'};
   padding: 0 1.5rem;
+  max-height: calc(100vh - 28.5714rem);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background: ${() => hexToRgba('#33b1ba', 0.3)};
+    border-radius: 0.6429rem;
+    transition: background 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${() => hexToRgba('#33b1ba', 0.4)};
+  }
 
   &:last-child {
     padding-bottom: 1.5rem;
   }
+
+  @media (max-width: 54.8571rem) {
+    max-height: calc(100vh - 17.8572rem);
+  }
 `;
 
+function Content({ children, style }) {
+  const { contentHeight } = useContext(CardContext);
+  return (
+    <ContentWrapper $contentHeight={contentHeight} style={style}>
+      {children}
+    </ContentWrapper>
+  );
+}
+
 const Footer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -71,7 +100,6 @@ const Footer = styled.div`
   @media (max-width: 42.8571rem) {
     flex-direction: column;
     align-items: stretch;
-
     & > * {
       width: 100%;
     }
@@ -83,17 +111,22 @@ function CardComponent({
   children,
   borderColor,
   borderWidth,
+  contentHeight,
   ...props
 }) {
+  const contextValue = { contentHeight };
+
   return (
-    <StyledCard
-      className={className}
-      borderColor={borderColor}
-      borderWidth={borderWidth}
-      {...props}
-    >
-      {children}
-    </StyledCard>
+    <CardContext.Provider value={contextValue}>
+      <StyledCard
+        className={className}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        {...props}
+      >
+        {children}
+      </StyledCard>
+    </CardContext.Provider>
   );
 }