Docs(web-react): Introduce DocsBox component

packages/web-react/docs/DocsBox.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { SizesDictionaryType } from '../src/types';
+
+interface DocsBoxProps {
+  children: ReactNode;
+  size?: SizesDictionaryType;
+}
+
+const defaultProps = {
+  size: 'medium',
+};
+
+const DocsBox = ({ children, size }: DocsBoxProps) => {
+  const sizeClass = size ? `docs-Box--${size}` : '';
+
+  return <div className={`docs-Box ${sizeClass}`}>{children}</div>;
+};
+
+DocsBox.defaultProps = defaultProps;
+
+export default DocsBox;

packages/web-react/src/components/Container/demo/ContainerDefault.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
 
-const ContainerDefault = () => {
-  return <div className="docs-Box">Container</div>;
-};
+const ContainerDefault = () => <DocsBox>Container</DocsBox>;
 
 export default ContainerDefault;