(PDS-555) Change props and close icon colour

Author: Lukeaber

packages/react-components/source/react/library/tag/Tag.js

@@ -11,6 +11,8 @@ const propTypes = {
   onClick: func,
   /** Type dictates tag coloring */
   type: oneOf(['primary', 'neutral']),
+  /** Currently only subtle netural supported */
+  emphasis: oneOf(['bold', 'subtle']),
   /** Optional additional classnames */
   className: string,
 };
@@ -19,11 +21,19 @@ const defaultProps = {
   onClick: () => {},
   type: 'primary',
   className: '',
+  emphasis: 'bold',
 };
 
-const Tag = ({ label, onClick, type, className }) => {
+const Tag = ({ label, onClick, type, emphasis, className }) => {
   return (
-    <div className={classNames('rc-tag', `rc-tag-${type}`, className)}>
+    <div
+      className={classNames(
+        'rc-tag',
+        `rc-tag-${type}`,
+        `rc-tag-${emphasis}`,
+        className,
+      )}
+    >
       <div className="rc-tag-label-background">
         <Text className="rc-tag-text">{label}</Text>
       </div>

packages/react-components/source/react/library/tag/Tag.md

@@ -20,7 +20,7 @@ const onTagClick = () => {
 
 ### Neutral
 
-The neutral tag can be selected through the type prop. This type of the tag has been developed to be used for displaying currently active filters within your application.
+The neutral tag can be selected through the type prop. This type of the tag has been developed to be used for displaying currently active filters within your application. Currently we only support a neutral subtle component. This also requires an emphasis="subtle" prop to be added.
 
 ```jsx
 const onTagClick = () => {
@@ -29,7 +29,12 @@ const onTagClick = () => {
 
 <div>
   <div>
-    <Tag label="Tag label" onClick={onTagClick} type="neutral" />
+    <Tag
+      label="Tag label"
+      onClick={onTagClick}
+      type="neutral"
+      emphasis="subtle"
+    />
   </div>
 </div>;
 ```

packages/react-components/source/scss/library/components/_tag.scss

@@ -22,7 +22,7 @@
   }
 }
 
-.rc-tag-neutral {
+.rc-tag-neutral.rc-tag-subtle {
   background-color: $puppet-white;
   border: $puppet-common-border;
 
@@ -37,7 +37,7 @@
   .rc-tag-remove-button {
     background: $puppet-white;
     border: $puppet-white;
-    fill: $puppet-b500;
+    fill: $puppet-n700;
 
     &:hover {
       background-color: $puppet-n200;