@latte-macchiat-io/latte-vanilla-components 0.0.478 → 0.0.480

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.478",
+  "version": "0.0.480",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/ExpandCollapse/Item/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  collapseExpandContent,
+  collapseExpandContentOpen,
+  collapseExpandItem,
+  collapseExpandItemOpen,
+  collapseExpandItemTitle,
+  collapseExpandTitleIcon,
+} from './styles.css';
+
+import { Heading } from '../../Heading';
+import { Icon } from '../../Icon';
+import icons from '../../Icon/path';
+import { Paragraph } from '../../Paragraph';
+
+export type ExpandCollapseItemsProps = {
+  title: string;
+  text: string;
+};
+
+export const ExpandCollapseItem = ({ title, text }: ExpandCollapseItemsProps): React.ReactElement => {
+  const [isOpen, setOpen] = useState(false);
+  const toggleList = () => setOpen(!isOpen);
+
+  return (
+    <div className={`${collapseExpandItem} ${isOpen ? collapseExpandItemOpen : ''}`}>
+      <div
+        tabIndex={0}
+        role="button"
+        onClick={toggleList}
+        aria-expanded={isOpen}
+        className={collapseExpandItemTitle}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleList()}>
+        <Icon size={15} iconPath={icons.caret} className={collapseExpandTitleIcon} />
+        <Heading as="h3" size="sm">
+          {title}
+        </Heading>
+      </div>
+      <div className={`${collapseExpandContent} ${isOpen ? collapseExpandContentOpen : ''}`}>
+        <div>
+          <Paragraph>{text}</Paragraph>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/ExpandCollapse/Item/styles.css.ts

@@ -0,0 +1,82 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const collapseExpandItem = style({
+  gap: 0,
+  display: 'flex',
+  borderRadius: 20,
+  flexDirection: 'column',
+  transition: 'gap 0.3s ease-out',
+  // backgroundColor: brandColorGreyXXLight,
+
+  // '@media': generateResponsiveMedia({
+  //   padding: breakpointMapper([8, 8, 8, 8, 8, 8]),
+  // }),
+});
+
+export const collapseExpandItemOpen = style({
+  // '@media': generateResponsiveMedia({
+  //   gap: breakpointMapper([10, 10, 10, 15, 15, 15]),
+  // }),
+});
+
+export const collapseExpandItemTitle = style({
+  display: 'flex',
+  cursor: 'pointer',
+
+  // '@media': generateResponsiveMedia({
+  //   gap: breakpointMapper([15, 15, 20, 20, 30, 30]),
+  //   paddingTop: breakpointMapper([10, 10, 10, 10, 15, 15]),
+  //   paddingLeft: breakpointMapper([10, 10, 10, 10, 30, 30]),
+  //   paddingRight: breakpointMapper([10, 10, 10, 10, 30, 30]),
+  //   paddingBottom: breakpointMapper([10, 10, 10, 10, 15, 15]),
+  // }),
+});
+
+export const collapseExpandTitleIcon = style({
+  transition: 'transform 0.3s ease-out',
+
+  // '@media': generateResponsiveMedia({
+  //   marginTop: breakpointMapper([5, 5, 5, 5, 5, 5]),
+  // }),
+});
+
+globalStyle(`${collapseExpandItemOpen} .${collapseExpandTitleIcon}`, {
+  transform: 'rotate(-90deg)',
+});
+
+globalStyle(`${collapseExpandItemTitle} > h3`, {
+  fontWeight: 400,
+  paddingBottom: 0,
+});
+
+export const collapseExpandContent = style({
+  display: 'grid',
+  overflow: 'hidden',
+  gridTemplateRows: '0fr',
+  transition: 'grid-template-rows 0.3s ease-out',
+});
+
+globalStyle(`${collapseExpandContent} > div`, {
+  opacity: 0,
+  padding: 0,
+  minHeight: 0,
+  borderRadius: 20,
+  visibility: 'hidden',
+  // backgroundColor: brandColorWhite,
+  transition: 'visibility 0.2s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out 0.2s',
+});
+
+export const collapseExpandContentOpen = style({
+  gridTemplateRows: '1fr',
+});
+
+globalStyle(`${collapseExpandContentOpen} > div`, {
+  opacity: 1,
+  visibility: 'visible',
+  transition: 'visibility 0.2s ease-out, opacity 0.3s ease-out',
+  transitionDelay: '0.1s',
+
+  // '@media': generateResponsiveMedia({
+  //   padding: breakpointMapper([15, 15, 20, 20, 30, 30]),
+  // }),
+});

package/src/components/ExpandCollapse/export.tsx

@@ -0,0 +1 @@
+export { ExpandCollapse, type ExpandCollapseProps } from './';

package/src/components/ExpandCollapse/index.tsx

@@ -0,0 +1,23 @@
+import { ExpandCollapseItem, ExpandCollapseItemsProps } from './Item';
+
+import { collapseExpand, collapseExpandList } from './styles.css';
+
+import { cn } from '../../utils/styleOverride';
+
+import { Heading } from '../Heading';
+
+export type ExpandCollapseProps = React.HTMLAttributes<HTMLDivElement> & {
+  title?: string;
+  list: ExpandCollapseItemsProps[];
+};
+
+export const ExpandCollapse = ({ title, list, className }: ExpandCollapseProps): React.ReactElement => (
+  <div className={cn(collapseExpand, className)}>
+    {title && <Heading as="h2">{title}</Heading>}
+    <div className={collapseExpandList}>
+      {list.map((expandCollapseItem, index) => (
+        <ExpandCollapseItem {...expandCollapseItem} key={`expandCollapseItem-${index}`} />
+      ))}
+    </div>
+  </div>
+);

package/src/components/ExpandCollapse/styles.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const collapseExpand = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  '@media': generateResponsiveMedia({
+    gap: themeContract.expandCollapse.gap,
+  }),
+});
+
+export const collapseExpandList = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  '@media': generateResponsiveMedia({
+    gap: themeContract.expandCollapse.list.gap,
+  }),
+});

package/src/components/ExpandCollapse/theme.ts

@@ -0,0 +1,35 @@
+const themeExpandCollapseBase = {
+  expandCollapse: {
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+
+    list: {
+      gap: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+    },
+  },
+};
+
+export const themeExpandCollapseLight = {
+  expandCollapse: {
+    ...themeExpandCollapseBase.expandCollapse,
+  },
+};
+
+export const themeExpandCollapseDark = {
+  expandCollapse: {
+    ...themeExpandCollapseBase.expandCollapse,
+  },
+};

package/src/index.ts

@@ -42,6 +42,8 @@ export * from './components/Logo/export';
 
 export * from './components/ConsentCookie/export';
 
+export * from './components/ExpandCollapse/export';
+
 export * from './components/KeyNumber/export';
 
 export * from './components/NavSocial/export';

package/src/theme/baseThemeValues.ts

@@ -5,6 +5,7 @@ import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
 import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
 import { themeConsentCookieDark, themeConsentCookieLight } from '../components/ConsentCookie/theme';
+import { themeExpandCollapseDark, themeExpandCollapseLight } from '../components/ExpandCollapse/theme';
 import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
 import { themeFormRowDark, themeFormRowLight } from '../components/Form/Row/theme';
 import { themeFormTextFieldDark, themeFormTextFieldLight } from '../components/Form/TextField/theme';
@@ -156,6 +157,8 @@ export const baseLightTheme = {
   ...themeBoxLight,
   ...themeBoxAlertLight,
 
+  ...themeExpandCollapseLight,
+
   form: {
     ...themeFormLight.form,
     ...themeFormRowLight,
@@ -297,6 +300,8 @@ export const baseDarkTheme = {
   ...themeBoxDark,
   ...themeBoxAlertDark,
 
+  ...themeExpandCollapseDark,
+
   form: {
     ...themeFormDark.form,
     ...themeFormRowDark,

package/src/theme/contract.css.ts

@@ -1269,4 +1269,25 @@ export const themeContract = createGlobalThemeContract({
       '2xl': 'latte-consentCookie-paddingRight-2xl',
     },
   },
+
+  expandCollapse: {
+    gap: {
+      mobile: 'latte-expandCollapse-gap-mobile',
+      sm: 'latte-expandCollapse-gap-sm',
+      md: 'latte-expandCollapse-gap-md',
+      lg: 'latte-expandCollapse-gap-lg',
+      xl: 'latte-expandCollapse-gap-xl',
+      '2xl': 'latte-expandCollapse-gap-2xl',
+    },
+    list: {
+      gap: {
+        mobile: 'latte-expandCollapse-list-gap-mobile',
+        sm: 'latte-expandCollapse-list-gap-sm',
+        md: 'latte-expandCollapse-list-gap-md',
+        lg: 'latte-expandCollapse-list-gap-lg',
+        xl: 'latte-expandCollapse-list-gap-xl',
+        '2xl': 'latte-expandCollapse-list-gap-2xl',
+      },
+    },
+  },
 });

package/src/theme/createTheme.ts

@@ -37,6 +37,7 @@ export type ThemeOverrides = {
   box?: Partial<typeof baseLightTheme.box>;
   boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
   consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
+  expandCollapse?: Partial<typeof baseLightTheme.expandCollapse>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -75,6 +76,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     box: { ...baseLightTheme.box, ...overrides.box },
     boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
     consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
+    expandCollapse: { ...baseLightTheme.expandCollapse, ...overrides.expandCollapse },
   });
 };
 
@@ -114,6 +116,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     box: { ...baseDarkTheme.box, ...overrides.box },
     boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
     consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
+    expandCollapse: { ...baseLightTheme.expandCollapse, ...overrides.expandCollapse },
   });
 };