Feat(web-react): Improve Docs components - add StyleProps, remove def…

…aultProps and other minor fixes

packages/web-react/docs/DocsBox.tsx

@@ -1,27 +1,27 @@
+import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-import { useStyleProps } from '../src/hooks';
-import { SizesDictionaryType, StyleProps } from '../src/types';
+import { SizesDictionaryType, StyleProps, useStyleProps } from '../src';
 
 interface DocsBoxProps extends StyleProps {
   children: ReactNode;
   size?: SizesDictionaryType;
 }
 
-const defaultProps = {
+const defaultProps: Partial<DocsBoxProps> = {
   size: 'medium',
 };
 
-const DocsBox = ({ children, size, ...restProps }: DocsBoxProps) => {
+const DocsBox = (props: DocsBoxProps) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, size, ...restProps } = propsWithDefaults;
   const { styleProps, props: transferProps } = useStyleProps(restProps);
   const sizeClass = size ? `docs-Box--${size}` : '';
 
   return (
-    <div {...styleProps} {...transferProps} className={`docs-Box ${sizeClass} ${styleProps.className}`}>
+    <div {...styleProps} {...transferProps} className={classNames('docs-Box', sizeClass, styleProps.className)}>
       {children}
     </div>
   );
 };
 
-DocsBox.defaultProps = defaultProps;
-
 export default DocsBox;

packages/web-react/docs/DocsSections.tsx

@@ -1,33 +1,39 @@
 import React, { ReactNode } from 'react';
-import { Tag } from '../src/components';
+import { StyleProps, Tag, useStyleProps } from '../src';
 import DocsStack from './DocsStack';
 
-interface DocsSectionProps {
+interface DocsSectionProps extends StyleProps {
   children: ReactNode;
   hasStack?: boolean;
   stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
   title: string;
 }
 
-const DocsSection = ({ children, hasStack = true, stackAlignment = 'start', title, tag }: DocsSectionProps) => (
-  <section className="UNSTABLE_Section">
-    <h2 className="docs-Heading">
-      {title}
-      {tag && (
-        <Tag color="warning" isSubtle>
-          {tag}
-        </Tag>
-      )}
-    </h2>
-    {hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
-  </section>
-);
-
-DocsSection.defaultProps = {
+const defaultProps: Partial<DocsSectionProps> = {
   hasStack: true,
   stackAlignment: 'start',
   tag: '',
 };
 
+const DocsSection = (props: DocsSectionProps) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, hasStack = true, stackAlignment = 'start', title, tag, ...restProps } = propsWithDefaults;
+  const { styleProps, props: transferProps } = useStyleProps(restProps);
+
+  return (
+    <section {...styleProps} {...transferProps} className="UNSTABLE_Section">
+      <h2 className="docs-Heading">
+        {title}
+        {tag && (
+          <Tag color="warning" isSubtle>
+            {tag}
+          </Tag>
+        )}
+      </h2>
+      {hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
+    </section>
+  );
+};
+
 export default DocsSection;

packages/web-react/docs/DocsStack.tsx

@@ -1,18 +1,27 @@
+import classNames from 'classnames';
 import React, { ReactNode } from 'react';
+import { StyleProps, useStyleProps } from '../src';
 
-interface DocsStackProps {
+interface DocsStackProps extends StyleProps {
   children: ReactNode;
   stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
-const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {
-  const alignmentClass = stackAlignment ? `docs-Stack--${stackAlignment}` : '';
-
-  return <div className={`docs-Stack ${alignmentClass}`}>{children}</div>;
+const defaultProps: Partial<DocsStackProps> = {
+  stackAlignment: undefined,
 };
 
-DocsStack.defaultProps = {
-  stackAlignment: '',
+const DocsStack = (props: DocsStackProps) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, stackAlignment, ...restProps } = propsWithDefaults;
+  const { styleProps, props: transferProps } = useStyleProps(restProps);
+  const alignmentClass = stackAlignment ? `docs-Stack--${stackAlignment}` : '';
+
+  return (
+    <div {...styleProps} {...transferProps} className={classNames('docs-Stack', alignmentClass)}>
+      {children}
+    </div>
+  );
 };
 
 export default DocsStack;