Unverified Commit c200e8a0 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

Merge branch 'develop' into master

parents e2db1581 056c1809
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,
};
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>
.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);
}
}
......@@ -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}
......
......@@ -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} />
// 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;
}
}
......@@ -37,3 +37,4 @@ export * from './AutoComplete';
export * from './Options';
export * from './Select';
export * from './Modal';
export * from './Loading';
......@@ -29,3 +29,4 @@
@import './Options/styles.scss';
@import './Select/styles.scss';
@import './Modal/styles.scss';
@import './Loading/styles.scss';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment