feat(fuselage): Message Template (#458)

packages/fuselage/fuselage

@@ -0,0 +1 @@
+../../../Rocket.Chat.Fuselage/packages/fuselage

packages/fuselage/index.js

@@ -1,5 +1,5 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./dist/fuselage.production.js');
-} else {
-  module.exports = require('./dist/fuselage.development.js');
-}
+module.exports = require('./dist/fuselage.development.js');
+// if (process.env.NODE_ENV === 'production') {
+//   module.exports = require('./dist/fuselage.production.js');
+// } else {
+// }

packages/fuselage/src/components/Button/Button.styles.scss

@@ -1,41 +1,7 @@
 @use 'sass:map';
 @use '../../styles/typography.scss';
-@use '../../styles/variables/buttons.scss';
-
-@mixin -kind-variant($colors) {
-  color: map.get($colors, color);
-  border-width: 2px;
-  border-style: solid;
-  border-color: map.get($colors, border-color);
-  border-radius: 2px;
-  background-color: map.get($colors, background-color);
-
-  appearance: none;
-
-  @include on-focus-visible {
-    border-color: map.get($colors, focus-border-color);
-    background-color: map.get($colors, focus-background-color);
-    @include use-focus-shadow(map.get($colors, focus-shadow-color));
-  }
-
-  @include on-hover {
-    border-color: map.get($colors, hover-border-color);
-    background-color: map.get($colors, hover-background-color);
-    @include use-no-shadow;
-  }
-
-  @include on-active {
-    border-color: map.get($colors, active-border-color);
-    background-color: map.get($colors, active-background-color);
-    @include use-no-shadow;
-  }
-
-  @include on-disabled {
-    color: map.get($colors, disabled-color);
-    border-color: map.get($colors, disabled-border-color);
-    background-color: map.get($colors, disabled-background-color);
-  }
-}
+@use '../../styles/variables/buttons.scss' as colors;
+@use '../../styles/primitives/button.scss';
 
 .rcx-button {
   @mixin with-rectangular-size($height, $padding-x, $line-height) {
@@ -78,7 +44,7 @@
     $line-height: typography.line-height(p1)
   );
 
-  @include -kind-variant(buttons.$secondary);
+  @include button.kind-variant(colors.$secondary);
 
   &--small {
     @include typography.use-font-scale(c2);
@@ -111,98 +77,98 @@
   }
 
   &--info {
-    @include -kind-variant(buttons.$secondary-info);
+    @include button.kind-variant(colors.$secondary-info);
   }
 
   &--success {
-    @include -kind-variant(buttons.$secondary-success);
+    @include button.kind-variant(colors.$secondary-success);
   }
 
   &--warning {
-    @include -kind-variant(buttons.$secondary-warning);
+    @include button.kind-variant(colors.$secondary-warning);
   }
 
   &--danger {
-    @include -kind-variant(buttons.$secondary-danger);
+    @include button.kind-variant(colors.$secondary-danger);
   }
 
   &--primary {
-    @include -kind-variant(buttons.$primary);
+    @include button.kind-variant(colors.$primary);
   }
 
   &--primary-info {
-    @include -kind-variant(buttons.$info);
+    @include button.kind-variant(colors.$info);
   }
 
   &--primary-success {
-    @include -kind-variant(buttons.$success);
+    @include button.kind-variant(colors.$success);
   }
 
   &--primary-warning {
-    @include -kind-variant(buttons.$warning);
+    @include button.kind-variant(colors.$warning);
   }
 
   &--primary-danger {
-    @include -kind-variant(buttons.$danger);
+    @include button.kind-variant(colors.$danger);
   }
 
   &--ghost {
-    @include -kind-variant(buttons.$ghost);
+    @include button.kind-variant(colors.$ghost);
   }
 
   &--ghost-info {
-    @include -kind-variant(buttons.$ghost-info);
+    @include button.kind-variant(colors.$ghost-info);
   }
 
   &--ghost-success {
-    @include -kind-variant(buttons.$ghost-success);
+    @include button.kind-variant(colors.$ghost-success);
   }
 
   &--ghost-warning {
-    @include -kind-variant(buttons.$ghost-warning);
+    @include button.kind-variant(colors.$ghost-warning);
   }
 
   &--ghost-danger {
-    @include -kind-variant(buttons.$ghost-danger);
+    @include button.kind-variant(colors.$ghost-danger);
   }
 
   &--nude {
-    @include -kind-variant(buttons.$nude);
+    @include button.kind-variant(colors.$nude);
   }
 
   &--nude-info {
-    @include -kind-variant(buttons.$nude-info);
+    @include button.kind-variant(colors.$nude-info);
   }
 
   &--nude-success {
-    @include -kind-variant(buttons.$nude-success);
+    @include button.kind-variant(colors.$nude-success);
   }
 
   &--nude-warning {
-    @include -kind-variant(buttons.$nude-warning);
+    @include button.kind-variant(colors.$nude-warning);
   }
 
   &--nude-danger {
-    @include -kind-variant(buttons.$nude-danger);
+    @include button.kind-variant(colors.$nude-danger);
   }
 
   &--ghostish {
-    @include -kind-variant(buttons.$ghostish);
+    @include button.kind-variant(colors.$ghostish);
   }
 
   &--ghostish-info {
-    @include -kind-variant(buttons.$ghostish-info);
+    @include button.kind-variant(colors.$ghostish-info);
   }
 
   &--ghostish-success {
-    @include -kind-variant(buttons.$ghostish-success);
+    @include button.kind-variant(colors.$ghostish-success);
   }
 
   &--ghostish-warning {
-    @include -kind-variant(buttons.$ghostish-warning);
+    @include button.kind-variant(colors.$ghostish-warning);
   }
 
   &--ghostish-danger {
-    @include -kind-variant(buttons.$ghostish-danger);
+    @include button.kind-variant(colors.$ghostish-danger);
   }
 }

packages/fuselage/src/components/Divider/index.tsx

@@ -0,0 +1,10 @@
+import React, { ComponentProps, FC } from 'react';
+
+import { Box } from '../Box';
+
+type DividerProps = ComponentProps<typeof Box>;
+
+const Divider: FC<DividerProps> = (props) => (
+  <Box is='hr' rcx-divider {...props} />
+);
+export { Divider };

packages/fuselage/src/components/Message/Divider/Divider.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
+
+import { Divider } from '.';
+import { Box } from '../..';
+
+<Meta title='Messages/Divider' parameters={{ jest: ['Divider/spec'] }} />
+
+# Divider
+
+<Canvas>
+  <Story name='Default'>
+    <Box>
+      <Divider>Text</Divider>
+      <Divider unreadLabel={'Unread'}>Text</Divider>
+      <Divider unreadLabel={'Unread'} />
+    </Box>
+  </Story>
+</Canvas>
+
+<ArgsTable of={Divider} />

packages/fuselage/src/components/Message/Divider/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+const Divider: FC<{
+  unreadLabel?: string;
+}> = ({ children, unreadLabel, ...props }) => (
+  <div
+    role='separator'
+    className={
+      !unreadLabel
+        ? 'rcx-message-divider'
+        : 'rcx-message-divider rcx-message-divider--unread'
+    }
+    {...props}
+  >
+    {children && (
+      <>
+        <div className='rcx-message-divider__bar' />
+        <div className='rcx-message-divider__wrapper'>{children}</div>{' '}
+      </>
+    )}
+    <div className='rcx-message-divider__bar'>
+      {unreadLabel && (
+        <div className='rcx-message-divider__wrapper--unread'>
+          {unreadLabel}
+        </div>
+      )}
+    </div>
+  </div>
+);
+export { Divider };

packages/fuselage/src/components/Message/Divider/spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Divider } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Divider />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -0,0 +1,95 @@
+@use '../../../styles/colors.scss';
+@use '../../../styles/lengths.scss';
+@use '../../../styles/typography.scss';
+
+$message-background-color: theme(
+  'message-background-color',
+  colors.foreground(alternative)
+);
+
+$message-divider-background-color: theme(
+  'message-divider-background-color',
+  colors.neutral(300)
+);
+$message-divider-color: theme(
+  'message-divider-color',
+  colors.foreground(default)
+);
+
+$message-divider-color-unread: theme(
+  'message-divider-color-unread',
+  colors.danger(500)
+);
+$message-divider-background-color-unread: theme(
+  'message-divider-background-color-unread',
+  colors.danger(300)
+);
+
+$message-divider-size: theme('message-divider-size', lengths.border-width(1));
+
+$message-divider-size-neg: theme(
+  'message-divider-size-neg',
+  lengths.margin(-1)
+);
+
+.rcx-message-divider {
+  @include typography.use-font-scale(c1);
+  position: relative;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+
+  margin-bottom: $message-divider-size-neg;
+  margin-inline: lengths.margin(20);
+
+  color: $message-divider-color;
+
+  &__bar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-grow: 1;
+
+    &::after {
+      flex-grow: 1;
+
+      height: $message-divider-size;
+
+      content: '';
+
+      background: $message-divider-background-color;
+    }
+  }
+
+  &--unread &__bar {
+    &::after {
+      background: $message-divider-background-color-unread;
+    }
+  }
+
+  // &--unread {
+  //   &:after,
+  //   &:before {
+  //   }
+  // }
+
+  &__wrapper {
+    margin-block: lengths.margin(8);
+    padding-inline: lengths.padding(8);
+
+    background-color: $message-background-color;
+
+    &--unread {
+      position: fixed;
+      z-index: 1;
+
+      order: 1;
+
+      padding-inline-start: lengths.padding(8);
+
+      color: $message-divider-color-unread;
+      background-color: $message-background-color;
+    }
+  }
+}