@beydesign/storybook 0.0.14 → 0.0.15

package/README.md

@@ -16,28 +16,36 @@ npm install @beydesign/storybook
 
 This package depends on `@beydesign/tokens` which provides the design tokens (colors, typography, spacing, etc.) used across the components. Make sure to install and configure it first.
 
+After installing the tokens package, you will need to install the figtree font. Link to the font is provided in the [Links](#links) section.
+
 ## Usage
 
 1. Import the components you need:
 
 ```jsx
-import { MainButton, ButtonHierarchy, ButtonShape, ButtonSize } from '@beydesign/storybook';
+import {
+  MainButton,
+  ButtonHierarchy,
+  ButtonShape,
+  ButtonSize,
+} from '@beydesign/storybook';
 
 function App() {
   return (
     <MainButton
-              size={ButtonSize.lg}
-              shape={ButtonShape.Square}
-              onClick={rejoin}
-              disabled={buttonsDisabled}
-              hierarchy={ButtonHierarchy.Primary}
-              showLeadingIcon={false}
-              showTrailingIcon={false}
-              text="Rejoin"
-            />
+      size={ButtonSize.lg}
+      shape={ButtonShape.Square}
+      onClick={rejoin}
+      disabled={buttonsDisabled}
+      hierarchy={ButtonHierarchy.Primary}
+      showLeadingIcon={false}
+      showTrailingIcon={false}
+      text="Rejoin"
+    />
   );
 }
 ```
+
 ## Development
 
 To run the Storybook development environment locally:
@@ -47,12 +55,13 @@ npm install
 npm run storybook
 ```
 
-
 ## Links
 
 - [Design System (Figma)](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev)
 - [NPM Package](https://www.npmjs.com/package/@beydesign/storybook)
 - [Hosted Storybook](https://beyond-presence.github.io/bey-design-system/)
+- [Design Tokens Package](https://github.com/Beyond-Presence/bey-design-token)
+- [Figtree Font](https://fonts.google.com/specimen/Figtree)
 
 ## Support
 

package/dist/stories/Colors.stories.js

@@ -5,6 +5,10 @@ const meta = {
     component: Colors,
     parameters: {
         layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4307-13259&m=dev',
+        },
     },
 };
 export default meta;

package/dist/stories/Header.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HeaderProps } from './types/header';
+export declare const Header: React.FC<HeaderProps>;

package/dist/stories/Header.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { MainButton } from './Button';
+import { ButtonHierarchy, ButtonSize } from './types/button';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { Avatar } from './Avatar';
+import { AvatarSize } from './types/avatar';
+import styles from './Header.module.css';
+export const Header = ({ title = 'Beyond Presence', email, avatarProps, backButtonText = 'Back', onBackClick, onLogoutClick, className, }) => {
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', border: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tetriary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { text: email, size: TypographySize.TextS, weight: TypographyWeight.SemiBold, className: styles['header-email'] }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tetriary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
+};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const Default: Story;
+export declare const WithBackButton: Story;

package/dist/stories/Header.stories.js

@@ -0,0 +1,87 @@
+import { Header } from './Header';
+import { AvatarStyle } from './types/avatar';
+import styles from './Header.module.css';
+const meta = {
+    title: 'Design System/Components/Header',
+    component: Header,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=5115-3325&t=DxHE3Y7uZLPwM9mQ-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        email: {
+            control: 'text',
+            description: 'Email of the logged in user',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        avatarProps: {
+            control: 'object',
+            description: 'Avatar props',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        backButtonText: {
+            control: 'text',
+            description: 'Text of the back button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Back' },
+            },
+        },
+        onBackClick: {
+            description: 'Callback function to handle back button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onLogoutClick: {
+            description: 'Callback function to handle logout button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Custom class name for the header',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: styles['responsive-width'] },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Beyond Presence',
+        email: 'john.doe@example.com',
+        avatarProps: {
+            avatarStyle: AvatarStyle.Placeholder,
+            text: 'John Doe',
+        },
+        backButtonText: 'Back',
+        onLogoutClick: () => { },
+        className: styles['responsive-width'],
+    },
+};
+export const WithBackButton = {
+    args: {
+        ...Default.args,
+        backButtonText: 'Back',
+        onBackClick: () => { },
+    },
+};

package/dist/stories/Logo.stories.d.ts

@@ -5,6 +5,10 @@ declare const meta: {
     component: import("react").FC<import("./types/logo").LogoProps>;
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
     argTypes: {

package/dist/stories/Logo.stories.js

@@ -5,6 +5,10 @@ const meta = {
     component: Logo,
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=278-2962&m=dev',
+        },
     },
     tags: ['autodocs'],
     argTypes: {

package/dist/stories/Toggle.js

@@ -55,7 +55,7 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
     },
 }));
 export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, }) => {
-    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', style: { lineHeight: '20px' } }), title && (_jsx(Typography, { text: title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467", style: { lineHeight: '20px' } }))] }))] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)' }), title && (_jsx(Typography, { text: title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467" }))] }))] }));
 };
 export const Components = () => {
     return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));

package/dist/stories/Toggle.stories.js

@@ -7,7 +7,7 @@ const meta = {
         layout: 'centered',
         design: {
             type: 'figspec',
-            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4595-5881&t=3PJghL9RdZ71sldb-1',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4595-5881&t=3PJghL9RdZ71sldb-1&m=dev',
         },
     },
     tags: ['autodocs'],

package/dist/stories/ToggleButtonGroup.stories.js

@@ -7,7 +7,7 @@ const meta = {
         layout: 'centered',
         design: {
             type: 'figspec',
-            url: '',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4730-7941&m=dev',
         },
     },
     tags: ['autodocs'],

package/dist/stories/Typography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight, } from './types/typography';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, style, }) => {
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -24,12 +24,29 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
     const fontSize = `var(--global-${sizeToken}-${weightToken}-font-size)`;
     const fontWeight = `var(--global-${sizeToken}-${weightToken}-font-weight)`;
     const fontFamily = `var(--global-${sizeToken}-${weightToken}-font-family)`;
-    return (_jsx("span", { style: {
+    const lineHeight = `var(--global-${sizeToken}-${weightToken}-line-height)`;
+    const letterSpacing = `var(--global-${sizeToken}-${weightToken}-letter-spacing)`;
+    const paragraphIndent = `var(--global-${sizeToken}-${weightToken}-paragraph-indent)`;
+    const paragraphSpacing = `var(--global-${sizeToken}-${weightToken}-paragraph-spacing)`;
+    const textDecoration = `var(--global-${sizeToken}-${weightToken}-text-decoration)`;
+    const getTextTransform = () => {
+        const computedValue = getComputedStyle(document.documentElement)
+            .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
+            .trim();
+        return (computedValue === 'uppercase' ? 'uppercase' : 'none');
+    };
+    return (_jsx("span", { className: className, style: {
+            display: 'block',
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily + ', sans-serif',
+            lineHeight: lineHeight + 'px',
+            letterSpacing: letterSpacing,
+            textIndent: paragraphIndent,
+            marginBottom: paragraphSpacing,
+            textTransform: getTextTransform(),
+            textDecoration: textDecoration,
             color: color || 'var(--global-text-text-title)',
-            ...style,
         }, children: text }));
 };
 export const Components = () => {

package/dist/stories/Typography.stories.js

@@ -44,13 +44,6 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
-        style: {
-            control: 'object',
-            description: 'Style of the typography',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
     },
 };
 export default meta;

package/dist/stories/types/header.d.ts

@@ -0,0 +1,25 @@
+import { AvatarProps } from './avatar';
+/**
+ * Header component props
+ */
+export type HeaderProps = {
+    /** Title of the header */
+    title: string;
+    /** Email of the logged in user */
+    email: string;
+    /** Avatar props */
+    avatarProps: AvatarProps;
+    /** Text of the back button */
+    backButtonText?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Callback function to handle back button click */
+    onBackClick?: () => void;
+    /** Callback function to handle logout button click */
+    onLogoutClick?: () => void;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/header.js

@@ -0,0 +1 @@
+export {};

package/dist/stories/types/typography.d.ts

@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react';
 /**
  * Typography size variants
  */
@@ -36,8 +35,8 @@ export interface TypographyProps {
     weight?: TypographyWeight;
     /** Color variant of the typography */
     color?: string;
-    /** Style variant of the typography */
-    style?: CSSProperties;
+    /** CSS class name for additional styling */
+    className?: string;
 }
 /**
  * Props for the Components wrapper

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@beydesign/tokens": "latest",
+    "@beydesign/tokens": "^0.0.6",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",