From 81ddaf85e93f9adf2fffd6b1660dd5667a062f66 Mon Sep 17 00:00:00 2001
From: roggc <roggc9@gmail.com>
Date: Tue, 1 Feb 2022 08:51:24 +0100
Subject: [PATCH] create statusWrapper component

---
 .../StatusWrapper/StatusWrapper.stories.tsx   | 21 ++++++++++
 .../StatusWrapper/StatusWrapper.tsx           | 41 +++++++++++++++++++
 src/Containers/index.ts                       |  3 +-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/Containers/StatusWrapper/StatusWrapper.stories.tsx
 create mode 100644 src/Containers/StatusWrapper/StatusWrapper.tsx

diff --git a/src/Containers/StatusWrapper/StatusWrapper.stories.tsx b/src/Containers/StatusWrapper/StatusWrapper.stories.tsx
new file mode 100644
index 00000000..37ccffb8
--- /dev/null
+++ b/src/Containers/StatusWrapper/StatusWrapper.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { StatusWrapper, IStatusWrapperProps } from './StatusWrapper';
+
+export default {
+    title: 'Terminal/Inventory/StatusWrapper',
+    component: StatusWrapper,
+    args: {},
+} as Meta;
+
+export const Basic: Story<IStatusWrapperProps> = (args) => (
+    <StatusWrapper {...args}>Test</StatusWrapper>
+);
+
+export const WithTextBold = Basic.bind({});
+WithTextBold.args = {
+    ...Basic.args,
+    textProps: {
+        bold: true,
+    },
+};
diff --git a/src/Containers/StatusWrapper/StatusWrapper.tsx b/src/Containers/StatusWrapper/StatusWrapper.tsx
new file mode 100644
index 00000000..397cfa56
--- /dev/null
+++ b/src/Containers/StatusWrapper/StatusWrapper.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TextLayout as TL, TextLayoutProps } from '@Layouts/TextLayout';
+import { flex } from '@Utils/Mixins';
+import { Status, StatusProps, StatusColors } from '../Status/Status';
+
+export interface IStatusWrapperProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    statusProps?: StatusProps;
+    textProps?: TextLayoutProps;
+    /** separation in px between two adjacent elements, status and text */
+    separation?: number;
+}
+
+/**
+ * puts a text next to status with a separation capability
+ */
+export const StatusWrapper: React.FC<IStatusWrapperProps> = ({
+    statusProps = { statusColor: StatusColors.green },
+    children,
+    textProps = {},
+    separation,
+    ...props
+}) => (
+    <StatusWrapperBox {...props}>
+        <Status {...statusProps} />
+        <TextLayout {...textProps} separation={separation}>
+            {children}
+        </TextLayout>
+    </StatusWrapperBox>
+);
+
+const StatusWrapperBox = styled.div`
+    ${flex('flex-start', 'center')}
+`;
+
+const TextLayout = styled(TL)<{ separation?: number }>`
+    ${({ separation }) => `
+${separation ? `margin-left:${separation}px` : ''}
+`}
+`;
diff --git a/src/Containers/index.ts b/src/Containers/index.ts
index 1e98cbe0..20fb6867 100644
--- a/src/Containers/index.ts
+++ b/src/Containers/index.ts
@@ -103,4 +103,5 @@ export * from './PanelListWrapper/PanelListWrapper';
 export * from './FileUploadV2/FileUploadV2';
 export * from './RestaurantReviewCard/RestaurantReviewCard';
 export * from './RatingBar/RatingBar';
-export * from './RatingItem/RatingItem';
\ No newline at end of file
+export * from './RatingItem/RatingItem';
+export * from './StatusWrapper/StatusWrapper';
\ No newline at end of file