fix(fuselage): Missing type on system message (#706)

* Add onClick

* add isSelected

* import style

* Fix for real now

Author: gabriellsh

packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx

@@ -118,5 +118,37 @@ export const Default = () => (
         </MessageSystemBlock>
       </MessageSystemContainer>
     </MessageSystem>
+    <MessageSystem isSelected>
+      <MessageSystemLeftContainer>
+        <Avatar
+          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
+                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
+                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
+                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
+                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
+                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
+                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
+                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
+                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
+                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
+                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
+          size='x18'
+        />
+      </MessageSystemLeftContainer>
+      <MessageSystemContainer>
+        <MessageSystemBlock>
+          <MessageSystemName>Haylie George</MessageSystemName>
+          <MessageSystemBody>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam...
+          </MessageSystemBody>
+          <MessageSystemTimestamp>12:00 PM</MessageSystemTimestamp>
+        </MessageSystemBlock>
+      </MessageSystemContainer>
+    </MessageSystem>
   </Box>
 );

packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss

@@ -1,8 +1,14 @@
 @use '../../../styles/lengths.scss';
+@use '../../../styles/functions.scss';
 @use '../../../styles/colors.scss';
 @use '../../../styles/typography.scss';
 @use '../mixins.scss';
 
+$message-system-background-color-selected: functions.theme(
+  'message-system-background-color-selected',
+  colors.foreground(success-light)
+);
+
 .rcx-message-system {
   @include typography.use-font-scale(c1);
   @include typography.use-with-truncated-text();
@@ -13,6 +19,10 @@
   padding-block: lengths.padding(8);
   padding-inline: lengths.padding(20);
 
+  &--selected {
+    background: $message-system-background-color-selected !important;
+  }
+
   &__container {
     @include typography.use-with-truncated-text();
     display: flex;

packages/fuselage/src/components/Message/MessageSystem/MessageSystem.tsx

@@ -1,20 +1,28 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, MouseEvent as ReactMouseEvent } from 'react';
 import React from 'react';
 
 import './MessageSystem.styles.scss';
 
 type MessageSystemProps = {
   children?: ReactNode;
   title?: string;
+  isSelected?: boolean;
+  onClick?: (e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;
 };
 
 export const MessageSystem = ({
   children,
   title,
+  isSelected,
   ...rest
 }: MessageSystemProps) => (
   <div
-    className='rcx-box rcx-box--full rcx-message-system'
+    className={[
+      'rcx-box rcx-box--full rcx-message-system',
+      isSelected && 'rcx-message-system--selected',
+    ]
+      .filter(Boolean)
+      .join(' ')}
     title={title}
     {...rest}
   >