feature: Add margin and side props to IconText

src/dataDisplay/IconText/index.stories.tsx

@@ -13,11 +13,98 @@ export default {
 export const Sizes = (): React.ReactElement => {
   return (
     <>
-      <IconText iconSize="sm" textSize="sm" iconType="add" text="Some text" />
-      <IconText iconSize="sm" textSize="xl" iconType="add" text="Some text" />
+      <IconText
+        iconSize="sm"
+        margin="xs"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+      />
+      <IconText
+        iconSize="sm"
+        margin="xs"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+      />
 
-      <IconText iconSize="md" textSize="sm" iconType="add" text="Some text" />
-      <IconText iconSize="md" textSize="xl" iconType="add" text="Some text" />
+      <IconText
+        iconSize="md"
+        margin="xs"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+      />
+      <IconText
+        iconSize="md"
+        margin="xs"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+      />
+    </>
+  );
+};
+
+export const IconPosition = (): React.ReactElement => {
+  return (
+    <>
+      <IconText
+        iconSize="sm"
+        margin="xs"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
+      <IconText
+        iconSize="sm"
+        margin="xs"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
+
+      <IconText
+        iconSize="md"
+        margin="xs"
+        textSize="sm"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
+      <IconText
+        iconSize="md"
+        margin="xs"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
+    </>
+  );
+};
+
+export const IconMargin = (): React.ReactElement => {
+  return (
+    <>
+      <IconText
+        iconSize="md"
+        margin="md"
+        textSize="md"
+        iconType="add"
+        text="Some text"
+        iconSide="left"
+      />
+      <IconText
+        iconSize="md"
+        margin="md"
+        textSize="xl"
+        iconType="add"
+        text="Some text"
+        iconSide="right"
+      />
     </>
   );
 };

src/dataDisplay/IconText/index.tsx

@@ -1,25 +1,39 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ThemeColors, ThemeIconSize, ThemeTextSize } from '../../theme';
+import {
+  ThemeColors,
+  ThemeIconSize,
+  ThemeMargin,
+  ThemeTextSize,
+} from '../../theme';
 import { Icon, IconType } from '../Icon';
 import Text from '../Text';
 
 type Props = {
   iconType: keyof IconType;
   iconSize: ThemeIconSize;
+  margin?: ThemeMargin;
   textSize: ThemeTextSize;
   color?: ThemeColors;
   text: string;
   className?: string;
+  iconSide?: 'left' | 'right';
 };
 
-const StyledIconText = styled.div`
+const LeftIconText = styled.div<{ margin: ThemeMargin }>`
   display: flex;
   align-items: center;
+  svg {
+    margin: 0 ${({ theme, margin }) => theme.margin[margin]} 0 0;
+  }
+`;
 
-  p {
-    margin-left: 6px;
+const RightIconText = styled.div<{ margin: ThemeMargin }>`
+  display: flex;
+  align-items: center;
+  svg {
+    margin: 0 0 0 ${({ theme, margin }) => theme.margin[margin]};
   }
 `;
 
@@ -28,18 +42,29 @@ const StyledIconText = styled.div`
  */
 const IconText = ({
   iconSize,
+  margin = 'xs',
   textSize,
   iconType,
   text,
+  iconSide = 'left',
   color,
   className,
-}: Props): React.ReactElement => (
-  <StyledIconText className={className}>
-    <Icon size={iconSize} type={iconType} color={color} />
-    <Text size={textSize} color={color}>
-      {text}
-    </Text>
-  </StyledIconText>
-);
+}: Props): React.ReactElement => {
+  return iconSide === 'right' ? (
+    <RightIconText className={className} margin={margin}>
+      <Text size={textSize} color={color}>
+        {text}
+      </Text>
+      <Icon size={iconSize} type={iconType} color={color} />
+    </RightIconText>
+  ) : (
+    <LeftIconText className={className} margin={margin}>
+      <Icon size={iconSize} type={iconType} color={color} />
+      <Text size={textSize} color={color}>
+        {text}
+      </Text>
+    </LeftIconText>
+  );
+};
 
 export default IconText;

src/navigation/Tab/index.tsx

@@ -115,6 +115,7 @@ const Tab = ({
       return (
         <IconText
           iconSize="sm"
+          margin="md"
           iconType={item.icon}
           textSize="sm"
           color={selectedTab === item.id ? 'primary' : 'text'}

src/theme.ts

@@ -54,6 +54,15 @@ const theme = {
     fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`,
     fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace`,
   },
+  margin: {
+    xxs: '4px',
+    xs: '6px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '20px',
+    xxl: '24px',
+  },
   icons: {
     size: {
       sm: '16',
@@ -142,6 +151,7 @@ export type ThemeButtonSize = keyof Theme['buttons']['size'];
 export type ThemeColors = keyof Theme['colors'];
 export type ThemeIdenticonSize = keyof Theme['identicon']['size'];
 export type ThemeIconSize = keyof Theme['icons']['size'];
+export type ThemeMargin = keyof Theme['margin'];
 export type ThemeLoaderSize = keyof Theme['loader']['size'];
 export type ThemeStatusDotSize = keyof Theme['statusDot']['size'];
 export type ThemeTextSize = keyof Theme['text']['size'];