feat: Scrollable (#98)

* Add Scrollable

* Use CSS styles on Margins

Author: tassoevan

packages/fuselage/src/components/Margins/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
+import { useClassName } from '@rocket.chat/fuselage-hooks';
 
 import { createStylingComponent } from '../../styles';
-import spaces from '../../styles/variables/spaces';
 
 export const Margins = createStylingComponent(({
   all,
@@ -12,15 +12,15 @@ export const Margins = createStylingComponent(({
   inlineStart,
   inlineEnd,
 }) => ({
-  style: {
-    margin: all && spaces[`x${ all }`],
-    marginBlock: block && spaces[`x${ block }`],
-    marginBlockStart: blockStart && spaces[`x${ blockStart }`],
-    marginBlockEnd: blockEnd && spaces[`x${ blockEnd }`],
-    marginInline: inline && spaces[`x${ inline }`],
-    marginInlineStart: inlineStart && spaces[`x${ inlineStart }`],
-    marginInlineEnd: inlineEnd && spaces[`x${ inlineEnd }`],
-  },
+  className: useClassName('rcx-margins', {
+    all,
+    block,
+    blockStart,
+    blockEnd,
+    inline,
+    inlineStart,
+    inlineEnd,
+  }),
   depth: 1,
 }));
 

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

@@ -0,0 +1,42 @@
+.rcx-margins {
+  $values: (
+    2: $spaces-x2,
+    4: $spaces-x4,
+    8: $spaces-x8,
+    12: $spaces-x12,
+    16: $spaces-x16,
+    24: $spaces-x24,
+    32: $spaces-x32,
+    40: $spaces-x40,
+  );
+
+  @each $value, $spacing in $values {
+    &--all-#{$value} {
+      margin: $spacing !important;
+    }
+
+    &--block-#{$value} {
+      margin-block: $spacing !important;
+    }
+
+    &--block-start-#{$value} {
+      margin-block-start: $spacing !important;
+    }
+
+    &--block-end-#{$value} {
+      margin-block-end: $spacing !important;
+    }
+
+    &--inline-#{$value} {
+      margin-inline: $spacing !important;
+    }
+
+    &--inline-start-#{$value} {
+      margin-inline-start: $spacing !important;
+    }
+
+    &--inline-end-#{$value} {
+      margin-inline-end: $spacing !important;
+    }
+  }
+}

packages/fuselage/src/components/Scrollable/index.js

@@ -0,0 +1,16 @@
+import { useClassName } from '@rocket.chat/fuselage-hooks';
+import PropTypes from 'prop-types';
+
+import { createStylingComponent } from '../../styles';
+
+export const Scrollable = createStylingComponent(({ horizontal, vertical }) => ({
+  className: useClassName('rcx-scrollable', { horizontal, vertical }),
+  depth: 1,
+}));
+
+Scrollable.displayName = 'Scrollable';
+
+Scrollable.propTypes = {
+  horizontal: PropTypes.bool,
+  vertical: PropTypes.bool,
+};

packages/fuselage/src/components/_ScrollableArea/spec.js.disabled packages/fuselage/src/components/Scrollable/spec.js

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

packages/fuselage/src/components/Scrollable/stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Button, ButtonGroup, Scrollable } from '../..';
+
+<Meta title='Misc|Scrollable' parameters={{ jest: ['Scrollable/spec'] }} />
+
+# Scrollable
+
+Add scroll capability to the wrapped component.
+
+<Props of={Scrollable} />

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

@@ -0,0 +1,15 @@
+.rcx-scrollable {
+  @include scrollable;
+
+  overflow: auto;
+
+  &--horizontal {
+    overflow: initial;
+    overflow-x: auto;
+  }
+
+  &--vertical {
+    overflow: initial;
+    overflow-y: auto;
+  }
+}

packages/fuselage/src/components/_ScrollableArea/index.js.disabled

@@ -2,7 +2,7 @@ import centered from '@storybook/addon-centered/react';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 
-import { ScrollableArea } from '../ScrollableArea';
+import { Scrollable } from '../Scrollable';
 import { SideBar, SideBarHeader, SideBarMenu, SideBarMenuItem } from './index';
 
 
@@ -13,7 +13,7 @@ storiesOf('Views|SideBar', module)
     <SideBar>
       <SideBarHeader title='Header title' />
 
-      <ScrollableArea>
+      <Scrollable>
         <SideBarMenu>
           <SideBarMenuItem>Menu item #1</SideBarMenuItem>
           <SideBarMenuItem>Menu item #2</SideBarMenuItem>
@@ -35,6 +35,6 @@ storiesOf('Views|SideBar', module)
           <SideBarMenuItem>Menu item #5</SideBarMenuItem>
           <SideBarMenuItem>Menu item #6</SideBarMenuItem>
         </SideBarMenu>
-      </ScrollableArea>
+      </Scrollable>
     </SideBar>
   ));

packages/fuselage/src/components/_ScrollableArea/stories.js.disabled

@@ -15,6 +15,7 @@ export * from './Margins';
 export * from './Paragraph';
 export * from './PasswordInput';
 export * from './RadioButton';
+export * from './Scrollable';
 export * from './SearchInput';
 export * from './SelectInput';
 export * from './Subtitle';

packages/fuselage/src/components/_ScrollableArea/styles.scss.disabled

@@ -10,9 +10,11 @@
 @import './Icon/styles.scss';
 @import './InputBox/styles.scss';
 @import './Label/styles.scss';
+@import './Margins/styles.scss';
 @import './Paragraph/styles.scss';
 @import './Subtitle/styles.scss';
 @import './RadioButton/styles.scss';
+@import './Scrollable/styles.scss';
 @import './Text/styles.scss';
 @import './Tile/styles.scss';
 @import './ToggleSwitch/styles.scss';