From ec381f767e10210b12879a249b2cdac1c395b5e0 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Fri, 1 Sep 2023 13:48:41 +0200
Subject: [PATCH] Docs(web-react): Introduce DocsBox component

---
 packages/web-react/docs/DocsBox.tsx           | 21 +++++++++++++++++++
 .../Container/demo/ContainerDefault.tsx       |  5 ++---
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-react/docs/DocsBox.tsx

diff --git a/packages/web-react/docs/DocsBox.tsx b/packages/web-react/docs/DocsBox.tsx
new file mode 100644
index 0000000000..2f02a0ed1a
--- /dev/null
+++ b/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;
diff --git a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx b/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
index 1fe6f43065..03a3baffdd 100644
--- a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
+++ b/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;