roger - no ticket - create statusWrapper component

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,
+    },
+};

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` : ''}
+`}
+`;

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';
+export * from './RatingItem/RatingItem';
+export * from './StatusWrapper/StatusWrapper';