Components: Simplify prop forwarding.

.changeset/fast-carrots-bathe.md

@@ -0,0 +1,5 @@
+---
+'@nordcom/nordstar-system': patch
+---
+
+Remove unused css module.

packages/components/card/src/card.tsx

@@ -8,14 +8,11 @@ export type CardProps = {
     as?: As;
 };
 
-const Card = forwardRef<'section', CardProps>((props, ref) => {
-    const { as, className } = props;
-
+const Card = forwardRef<'section', CardProps>(({ as, className, ...props }, ref) => {
     const Tag = as || 'section';
     const classes = `${styles.container}${className ? ` ${className}` : ''}`;
 
-    // TODO: Figure out a better way to exclude props from being passed to the DOM element.
-    return <Tag ref={ref} {...{ ...props, as: undefined, className: undefined }} className={classes} />;
+    return <Tag ref={ref} {...props} className={classes} />;
 });
 
 Card.displayName = 'Nordstar.Card';

packages/components/heading/src/heading.tsx

@@ -7,16 +7,11 @@ export type HeadingProps = {
     as?: As;
 };
 
-const Heading = forwardRef<'h1', HeadingProps>((props, ref) => {
-    const { as, level = 'h1', className } = props;
-
+const Heading = forwardRef<'h1', HeadingProps>(({ as, level = 'h1', className, ...props }, ref) => {
     const Tag = as || level;
     const classes = `${styles.container} ${styles[level]}${className ? ` ${className}` : ''}`;
 
-    // TODO: Figure out a better way to exclude props from being passed to the DOM element.
-    return (
-        <Tag ref={ref} {...{ ...props, level: undefined, as: undefined, className: undefined }} className={classes} />
-    );
+    return <Tag ref={ref} {...props} className={classes} />;
 });
 
 Heading.displayName = 'Nordstar.Typography.Heading';

packages/components/view/src/view.tsx

@@ -6,14 +6,12 @@ export type ViewProps = {
     children?: ReactNode;
 };
 
-const View = forwardRef<'main', ViewProps>((props, ref) => {
-    const { className } = props;
+const View = forwardRef<'main', ViewProps>(({ className, ...props }, ref) => {
     const classes = `${styles.content}${className ? ` ${className}` : ''}`;
 
-    // TODO: Figure out a better way to exclude props from being passed to the DOM element.
     return (
         <div className={styles.container}>
-            <main ref={ref} {...{ ...props, className: undefined }} className={classes} />
+            <main ref={ref} {...props} className={classes} />
         </div>
     );
 });

packages/core/system/src/nordstar-provider.tsx

@@ -1,11 +1,10 @@
 import type { ReactNode } from 'react';
-import styles from './nordstar-provider.module.scss';
 import './styling.scss';
 
 export type NordstarProviderProps = {
     children: ReactNode;
 };
 
 export const NordstarProvider = ({ children }: NordstarProviderProps) => {
-    return <div className={styles.container}>{children}</div>;
+    return <>{children}</>;
 };

packages/storybook/.storybook/preview.tsx

@@ -52,9 +52,13 @@ const parameters: Preview['parameters'] = {
         dark: {
             ...brand,
             appBg: '#262626',
-            barBg: '#262626',
-            background: '#262626',
             appContentBg: '#262626',
+            background: '#262626',
+            barBg: '#262626',
+            barSelectedColor: '#ed1e79',
+            colorPrimary: '#ed1e79',
+            inputBorderRadius: 0,
+            textColor: '#fefefe',
             brandImage: 'https://nordcom.io/logo-light.svg'
         }
     }