From 26f68a890eea5a386f56bdef110d1c9c880112f7 Mon Sep 17 00:00:00 2001
From: jamesjulich <51384945+jamesjulich@users.noreply.github.com>
Date: Mon, 20 Sep 2021 11:02:15 -0500
Subject: [PATCH 1/2] Added chip component.

---
 src/app/atoms/chip/Chip.jsx  | 34 ++++++++++++++++++++++++++++++++++
 src/app/atoms/chip/Chip.scss | 23 +++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/app/atoms/chip/Chip.jsx
 create mode 100644 src/app/atoms/chip/Chip.scss

diff --git a/src/app/atoms/chip/Chip.jsx b/src/app/atoms/chip/Chip.jsx
new file mode 100644
index 0000000..3cededf
--- /dev/null
+++ b/src/app/atoms/chip/Chip.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Chip.scss';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+function Chip({
+  iconSrc, iconColor, text, children,
+}) {
+  return (
+    <div className="chip">
+      {iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="small" />}
+      {(text != null && text !== '') && <Text variant="b2">{text}</Text>}
+      {children}
+    </div>
+  );
+}
+
+Chip.propTypes = {
+  iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
+  text: PropTypes.string,
+  children: PropTypes.element,
+};
+
+Chip.defaultProps = {
+  iconSrc: null,
+  iconColor: null,
+  text: null,
+  children: null,
+};
+
+export default Chip;
diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss
new file mode 100644
index 0000000..96e91be
--- /dev/null
+++ b/src/app/atoms/chip/Chip.scss
@@ -0,0 +1,23 @@
+.chip {
+  height: 28px;
+  width: fit-content;
+  width: -moz-fit-content;
+  background: var(--bg-surface-low);
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+  box-sizing: border-box;
+  border-radius: var(--bo-radius);
+  border: 1px solid var(--bg-surface-border);
+
+  & .text-b2 {
+    color: var(--tc-surface-high);
+  }
+
+  & .ic-raw-small {
+    margin-right: var(--sp-extra-tight);
+  }
+}
\ No newline at end of file

From c96d5560943d8d8b7793d246ebe255deff00fb9b Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Thu, 23 Sep 2021 16:40:52 +0530
Subject: [PATCH 2/2] Updated Chip.scss property ordering

---
 src/app/atoms/chip/Chip.scss | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss
index 96e91be..c53f5ba 100644
--- a/src/app/atoms/chip/Chip.scss
+++ b/src/app/atoms/chip/Chip.scss
@@ -1,23 +1,19 @@
 .chip {
-  height: 28px;
-  width: fit-content;
-  width: -moz-fit-content;
-  background: var(--bg-surface-low);
-
-  display: flex;
+  padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+  
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
-
-  padding: var(--sp-ultra-tight) var(--sp-extra-tight);
-  box-sizing: border-box;
+  
+  background: var(--bg-surface-low);
   border-radius: var(--bo-radius);
   border: 1px solid var(--bg-surface-border);
 
-  & .text-b2 {
-    color: var(--tc-surface-high);
-  }
-
-  & .ic-raw-small {
+  & > .ic-raw {
     margin-right: var(--sp-extra-tight);
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: var(--sp-extra-tight);
+    }
   }
 }
\ No newline at end of file