From 8a1711a40b311200fd411b3e72e6896449af910a Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Tue, 14 Oct 2025 13:00:04 -0500 Subject: [PATCH 1/4] prettier --- src/components/drawer/BNDialogTitle.tsx | 77 +++++++++++++++++++++++ src/components/drawer/BNDrawer.tsx | 16 +++++ src/components/index.ts | 6 ++ src/stories/BNDrawer.stories.tsx | 83 +++++++++++++++++++++++++ 4 files changed, 182 insertions(+) create mode 100644 src/components/drawer/BNDialogTitle.tsx create mode 100644 src/components/drawer/BNDrawer.tsx create mode 100644 src/stories/BNDrawer.stories.tsx diff --git a/src/components/drawer/BNDialogTitle.tsx b/src/components/drawer/BNDialogTitle.tsx new file mode 100644 index 0000000..25ec3a9 --- /dev/null +++ b/src/components/drawer/BNDialogTitle.tsx @@ -0,0 +1,77 @@ +import CloseRounded from '@mui/icons-material/CloseRounded' +import { + DialogTitle, + type DialogTitleProps, + IconButton, + Stack, + Typography, +} from '@mui/material' +import type { SxProps, Theme } from '@mui/material' + +export type BNDialogTitleBgColorVariant = 'background.paper' | 'appBarPrimary.defaultFill' + +export type BNDialogTitleTextColorVariant = + | 'text.primary' + | 'appBarPrimary.defaultContrast' + +export interface BNDialogTitleProps extends Omit { + bgColorVariant?: BNDialogTitleBgColorVariant + textColorVariant?: BNDialogTitleTextColorVariant + variant?: 'default' | 'primary' + onClose?: () => void + closeAriaLabel?: string +} + +export const BNDialogTitle = ({ + bgColorVariant, + textColorVariant, + variant, + onClose, + closeAriaLabel = 'Close dialog', + title, + sx, + ...rest +}: BNDialogTitleProps) => { + const preset = + variant === 'primary' + ? { bg: 'appBarPrimary.defaultFill', text: 'appBarPrimary.defaultContrast' } + : variant === 'default' || !variant + ? { bg: 'background.paper', text: 'text.primary' } + : undefined + + const resolvedBg = (bgColorVariant ?? preset?.bg ?? 'background.paper') as string + const resolvedText = (textColorVariant ?? preset?.text ?? 'text.primary') as string + + const readCssVar = (theme: Theme, path: string): string | undefined => { + return path + .split('.') + .reduce((obj, key) => (obj ? obj[key] : undefined), (theme as any).vars) + } + + const colorRule = (theme: Theme) => ({ + backgroundColor: readCssVar(theme, `palette.${resolvedBg}`), + color: readCssVar(theme, `palette.${resolvedText}`), + }) + + const mergedSx: SxProps = sx + ? [colorRule, ...(Array.isArray(sx) ? sx : [sx])] + : [colorRule] + + return ( + + + {title} + {onClose && ( + + + + )} + + + ) +} diff --git a/src/components/drawer/BNDrawer.tsx b/src/components/drawer/BNDrawer.tsx new file mode 100644 index 0000000..5e2c7f8 --- /dev/null +++ b/src/components/drawer/BNDrawer.tsx @@ -0,0 +1,16 @@ +import { Drawer, type DrawerProps } from '@mui/material' + +import { BNDialogTitle, type BNDialogTitleProps } from './BNDialogTitle' + +export interface BNDrawerProps extends DrawerProps { + titleProps?: BNDialogTitleProps +} + +export const BNDrawer = ({ titleProps, children, ...drawerProps }: BNDrawerProps) => { + return ( + + {titleProps && } + {children} + + ) +} diff --git a/src/components/index.ts b/src/components/index.ts index 7ef9e02..9224772 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -25,6 +25,12 @@ export { default as BNNumberField } from './BNNumberField' export { currencyConfig } from './BNNumberField' export type { BNNumberFieldProps, Currency } from './BNNumberField' +// Drawer Components +export { BNDrawer } from './drawer/BNDrawer' +export type { BNDrawerProps } from './drawer/BNDrawer' +export { BNDialogTitle } from './drawer/BNDialogTitle' +export type { BNDialogTitleProps } from './drawer/BNDialogTitle' + // Filter Search Components export { default as BNFilterSelect } from './filter-search/BNFilterSelect' export type { BNFilterSelectProps, FilterOption } from './filter-search/BNFilterSelect' diff --git a/src/stories/BNDrawer.stories.tsx b/src/stories/BNDrawer.stories.tsx new file mode 100644 index 0000000..391df48 --- /dev/null +++ b/src/stories/BNDrawer.stories.tsx @@ -0,0 +1,83 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import React from 'react' + +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Button, + CardActions, + Typography, +} from '@mui/material' + +import { BNDrawer } from '../components/drawer/BNDrawer' + +const meta = { + title: 'Custom Components/BNDrawer', + parameters: { + layout: 'fullscreen', + controls: { + exclude: ['LinkComponent'], + }, + }, + argTypes: { + color: { + control: 'select', + options: ['default', 'secondary'], + }, + }, + component: BNDrawer, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Primary: Story = { + parameters: { + layout: 'padded', + }, + args: { + variant: 'temporary', + titleProps: { + title: 'Drawer Title', + variant: 'primary', + }, + }, + render: (args) => { + const [open, setOpen] = React.useState(false) + const toggleDrawer = (newOpen: boolean) => () => setOpen(newOpen) + return ( + <> + + + + + Drawer Content accepts any children + + + + Accordion 1 + + + Accordion 1 content + + + + + + + + + + ) + }, +} From 1e243abe073fc29c47d8c98b0ae4d17bd3c1bbd3 Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Tue, 14 Oct 2025 13:01:23 -0500 Subject: [PATCH 2/4] bump version number --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2927e5e..9ba1a82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@rolemodel/betanxt-design-system", - "version": "1.0.0", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@rolemodel/betanxt-design-system", - "version": "1.0.0", + "version": "1.2.0", "license": "UNLICENSED", "devDependencies": { "@chromatic-com/storybook": "^4.1.1", diff --git a/package.json b/package.json index c869240..7313b70 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rolemodel/betanxt-design-system", - "version": "1.0.0", + "version": "1.2.0", "description": "The BetaNXT design system for MUI.", "type": "module", "exports": { From 13693642f7b6030d0c26744938beff947fe50cc9 Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Tue, 14 Oct 2025 13:06:40 -0500 Subject: [PATCH 3/4] Update CHANGELOG for version 1.2.0: Added BNDialogTitle and BNDrawer components with preset color variants and documentation updates. --- src/stories/CHANGELOG.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/stories/CHANGELOG.mdx b/src/stories/CHANGELOG.mdx index 6549078..153edd8 100644 --- a/src/stories/CHANGELOG.mdx +++ b/src/stories/CHANGELOG.mdx @@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.2.0] - 2025-10-14 + +### Added + +- BNDialogTitle: preset-based color variants with close icon; supports `variant="primary"` and explicit bg/text token overrides; integrates with BNDrawer via `titleProps` (bn-dialog-title, 2025-10-14) +- BNDrawer: wrapper component exposing `titleProps` to render BNDialogTitle and forward Drawer props (bn-drawer, 2025-10-14) + +### Documentation + +- Storybook: BNDrawer story demonstrating preset title styling, close handling, and content (bn-drawer-story, 2025-10-14) + +### Build + +- Changelog updated for new components and changes (changelog-update, 2025-10-14) + ## [1.0.0] - 2025-09-24 ### Added From be4a625697f0b54fbbcd5c01462ff563b2a8a7bd Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Tue, 14 Oct 2025 14:01:02 -0500 Subject: [PATCH 4/4] Refactor BNDialogTitle and BNDrawer components to use children prop for title content and add heading prop to BNDrawer. Update stories to reflect changes. --- src/components/drawer/BNDialogTitle.tsx | 6 +++--- src/components/drawer/BNDrawer.tsx | 16 +++++++++++++--- src/stories/BNDrawer.stories.tsx | 14 ++++++-------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/drawer/BNDialogTitle.tsx b/src/components/drawer/BNDialogTitle.tsx index 25ec3a9..c7ff6ab 100644 --- a/src/components/drawer/BNDialogTitle.tsx +++ b/src/components/drawer/BNDialogTitle.tsx @@ -27,8 +27,8 @@ export const BNDialogTitle = ({ textColorVariant, variant, onClose, - closeAriaLabel = 'Close dialog', - title, + closeAriaLabel = 'Close', + children, sx, ...rest }: BNDialogTitleProps) => { @@ -60,7 +60,7 @@ export const BNDialogTitle = ({ return ( - {title} + {children} {onClose && ( { +export const BNDrawer = ({ + titleProps, + children, + heading, + ...drawerProps +}: BNDrawerProps) => { return ( - {titleProps && } + {titleProps && ( + + {heading} + + )} {children} ) diff --git a/src/stories/BNDrawer.stories.tsx b/src/stories/BNDrawer.stories.tsx index 391df48..335af89 100644 --- a/src/stories/BNDrawer.stories.tsx +++ b/src/stories/BNDrawer.stories.tsx @@ -17,15 +17,13 @@ const meta = { title: 'Custom Components/BNDrawer', parameters: { layout: 'fullscreen', - controls: { - exclude: ['LinkComponent'], - }, }, argTypes: { - color: { - control: 'select', - options: ['default', 'secondary'], - }, + open: { control: 'boolean' }, + anchor: { control: 'select', options: ['left', 'right', 'top', 'bottom'] }, + variant: { control: 'select', options: ['temporary', 'persistent', 'permanent'] }, + onClose: { action: 'onClose' }, + titleProps: { control: 'object' }, }, component: BNDrawer, } satisfies Meta @@ -41,9 +39,9 @@ export const Primary: Story = { args: { variant: 'temporary', titleProps: { - title: 'Drawer Title', variant: 'primary', }, + heading: 'Drawer Title', }, render: (args) => { const [open, setOpen] = React.useState(false)