Merge branch 'develop' into master

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

+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+export const Loading = forwardRef(function TabsItem({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
+  return <Box
+    componentClassName='rcx-loading'
+    is='div'
+    ref={ref}
+    {...props}
+  >
+    {Array.from(
+      { length: circleCount || 3 },
+      (_, iteration) => <Box
+        componentClassName='rcx-loading__circle'
+        is='span'
+        mod-disabled={!!disabled}
+        mod-size={size}
+        style={{ animationDuration: `${ circleCount * 0.466 }s`, animationDelay: `${ iteration * 0.16 }s` }}
+        mod-inherit-color={!!inheritColor && !disabled}
+        key={iteration}
+      />,
+    )}
+  </Box>;
+});
+
+Loading.propTypes = {
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['x2', 'x4', 'x8', 'x12', 'x16',
+    'x20', 'x24', 'x28', 'x32', 'x36', 'x40', 'x80', 'x120',
+    'x160', 'x200', 'x240', 'x280', 'x320', 'x360', 'x400',
+    'x440', 'x480', 'x520', 'x560', 'x600', 'x640', 'x680',
+    'x720', 'x760', 'x800', 'x840', 'x880', 'x920', 'x960',
+    'x1000', 'x1040', 'x1080', 'x1120', 'x1160', 'x1200',
+    'x1240', 'x1280', 'x1320', 'x1360', 'x1400', 'x1440',
+    'x1480', 'x1520', 'x1560', 'x1600']),
+  circleCount: PropTypes.integer,
+  inheritColor: PropTypes.bool,
+};

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

+import { action } from '@storybook/addon-actions';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { PropsVariationSection } from '../../../.storybook/helpers';
+import { Loading, Button, Box } from '../..';
+
+<Meta title='Misc|Loading' parameters={{ jest: ['Loading/spec'] }} />
+
+# Loading
+
+Indicates content that has not loaded yet.
+
+<Preview>
+  <Story name='Default'>
+    <Loading/>
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name='Disabled'>
+    <Loading disabled/>
+  </Story>
+</Preview>
+
+### Inside Button
+
+<Preview>
+  <Story name='Inside Button'>
+    <Button style={{minHeight:'40px'}}>
+      <Loading size='x12'/>
+    </Button>
+  </Story>
+</Preview>
+
+### Inside Button, inherit color
+
+<Preview>
+  <Story name='Inside Button, inherit color'>
+    <Box>
+      <Button primary danger style={{minHeight:'40px', marginInlineEnd: '5px'}}>
+        <Loading size='x12' inheritColor/>
+      </Button>
+      <Button primary style={{minHeight:'40px'}}>
+        <Loading size='x12' inheritColor/>
+      </Button>
+    </Box>
+  </Story>
+</Preview>
+
+
+### Variations
+
+<Story name='States'>
+  <PropsVariationSection
+    component={Loading}
+    common={{ onClick: action('click') }}
+    yAxis={{
+      'default': {},
+      '3 circles + x40': { circleCount: 3, size:'x40'},
+      '5 circles + x32': { circleCount: 5, size:'x32'},
+      '7 circles + x24': { circleCount: 7, size:'x24'},
+    }}
+    xAxis={{
+      default: {},
+      disabled: {disabled: true}
+    }}
+  />
+</Story>
+

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

+.rcx-loading {
+  display: flex;
+
+  margin-block: calc(-1 * #{ $spaces-x1 });
+
+  &__circle {
+    margin-inline: $spaces-x1;
+
+    animation: bounce 1.4s infinite ease-in-out both;
+
+    border-radius: 50%;
+
+    background-color: $colors-b500;
+
+    &--disabled {
+      background-color: $colors-n500;
+    }
+
+    &--inherit-color {
+      background-color: currentColor;
+    }
+
+    @each $name, $value in $sizes {
+      &--size-#{$name} {
+        width: $value;
+        height: $value;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

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

@@ -4,6 +4,7 @@ import { Box } from '../Box';
 
 const Container = Box.extend('rcx-tabs');
 const ItemsWrapper = Box.extend('rcx-tabs__wrapper');
+const ScrollBox = Box.extend('rcx-tabs__scroll-box');
 const ItemContainer = Box.extend('rcx-tabs__item', 'button');
 
 export function Tabs({
@@ -11,19 +12,21 @@ export function Tabs({
   ...props
 }) {
   return <Container {...props}>
-    <ItemsWrapper children={children} role='tablist' />
+    <ScrollBox>
+      <ItemsWrapper children={children} role='tablist'/>
+    </ScrollBox>
   </Container>;
 }
 
 Tabs.displayName = 'Tabs';
 
 export const TabsItem = forwardRef(function TabsItem({
-  active,
+  selected,
   ...props
 }, ref) {
   return <ItemContainer
-    aria-selected={active ? 'true' : 'false'}
-    mod-active={active}
+    aria-selected={selected ? 'true' : 'false'}
+    mod-selected={selected}
     ref={ref}
     role='tab'
     {...props}

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

@@ -8,18 +8,19 @@ import { Tabs } from '../..';
 
 <Preview>
   <Story name='Default'>
-    <Tabs>
-      <Tabs.Item active>Tab text 1</Tabs.Item>
-      <Tabs.Item>Tab text 2</Tabs.Item>
-      <Tabs.Item>Tab text 3</Tabs.Item>
-    </Tabs>
+    <>
+    <style>
+      {`body{
+        padding: 0;
+      }`}
+    </style>
+      <Tabs>
+        <Tabs.Item selected>Tab text 1</Tabs.Item>
+        <Tabs.Item>Tab text 2</Tabs.Item>
+        <Tabs.Item>Tab text 3</Tabs.Item>
+        <Tabs.Item>Tab text 4</Tabs.Item>
+        <Tabs.Item>Tab text 5</Tabs.Item>
+      </Tabs>
+    </>
   </Story>
 </Preview>
-
-### Tabs
-
-<Props of={Tabs} />
-
-### Tabs.Item
-
-<Props of={Tabs.Item} />

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

+// TODO: Indication that there are more tab__items left to scroll (some sort of shadow maybe)
 .rcx-tabs {
+  display: flex;
+
+  width: 100%;
+
   margin-block-end: $spaces-x8;
 
-  border-block-end: #{ $borders-width-x1 } solid #{ $colors-n400 };
+  border-block-end: #{ $borders-width-x2 } solid #{ $tabs-delimiter-color };
+}
+
+.rcx-tabs__scroll-box {
+
+  position: relative;
+  bottom: calc(-1 * #{ $spaces-x8 });
+
+  overflow: auto;
+
+  width: 100%;
+
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .rcx-tabs__wrapper {
   display: flex;
-  flex: 1 1 0;
 
-  width: 100%;
-  margin-inline: calc(-1 * #{ $spaces-x8 });
-  margin-block-end: calc(-1 * #{ $borders-width-x1 });
+  margin-block: calc(#{ $spaces-x4 } + #{ $spaces-x2 });
+
+  flex-wrap: nowrap;
 }
 
 .rcx-tabs__item {
+
+  position: relative;
+
   flex: 0 0 auto;
 
-  padding-block: calc(#{ $spaces-x8 } + #{ $spaces-x1 });
-  padding-inline: $spaces-x32;
+  min-height: $spaces-x40;
+
+  padding-block: calc(#{ $spaces-x2 } + #{ $spaces-x4 });
+  padding-inline: $spaces-x16;
+
+  color: $tabs-color;
+  border-width: $spaces-x2;
 
-  color: $colors-n600;
   border-style: solid;
   border-color: transparent;
-
   background-color: transparent;
-  border-block-end-width: $borders-width-x4;
+  align-items: center;
 
   @include clickable;
   @include use-text-style(s2);
 
-  &--active {
-    color: $colors-b500;
-    border-block-end-color: $colors-b500;
+  &--selected {
+
+    padding-block: $spaces-x4;
+    padding-inline: calc(#{ $spaces-x16 } + #{ $spaces-x2 });
+
+    color: $tabs-selected-color;
+    border-block-end-color: $tabs-selected-border-color;
+    border-block-end-width: $borders-width-x4;
+    border-inline-width: 0;
+  }
+
+  &.hover,
+  &:hover {
+    color: $tabs-hover-color;
+  }
+
+  &.active,
+  &:active {
+    color: $tabs-active-color;
+  }
+
+  &--disabled {
+    color: $tabs-disabled-color;
+  }
+
+  &.focus,
+  &:focus {
+
+    padding-inline: $spaces-x16;
+
+    border-color: $tabs-focus-border-color;
+    border-radius: $spaces-x2;
+    border-block-start-width: $spaces-x2;
+    border-inline-width: $spaces-x2;
+
+    @include use-focus-shadow($tabs-focus-shadow-color);
+  }
+}
+
+@include on-breakpoint('md') {
+  .rcx-tabs__wrapper {
+    margin-inline: $spaces-x24;
   }
 }

packages/fuselage/src/components/index.js

@@ -37,3 +37,4 @@ export * from './AutoComplete';
 export * from './Options';
 export * from './Select';
 export * from './Modal';
+export * from './Loading';

packages/fuselage/src/components/index.scss

@@ -29,3 +29,4 @@
 @import './Options/styles.scss';
 @import './Select/styles.scss';
 @import './Modal/styles.scss';
+@import './Loading/styles.scss';