feat(design-system): add editor skeletons

This commit is contained in:
41666 2021-03-24 00:02:39 -04:00
parent a37d481b18
commit 9e4bcfa79b
9 changed files with 53 additions and 30 deletions

View file

@ -0,0 +1,12 @@
import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
import { EditorCategoriesTab } from './EditorCategoriesTab';
export default {
title: 'Organisms/Editor/Categories Tab',
component: EditorCategoriesTab,
args: {
guild: guildEnum.guilds[0],
},
};
export const categoriesTab = (args) => <EditorCategoriesTab {...args} />;

View file

@ -0,0 +1,8 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
export const CategoryContainer = styled.div`
background-color: ${palette.taupe100};
padding: 10px;
margin: 15px 0;
`;

View file

@ -0,0 +1,18 @@
import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
import { CategoryContainer } from './EditorCategoriesTab.styled';
export const EditorCategoriesTab = (props: EditorShellProps) => (
<div>
{props.guild.data.categories.map((category, idx) => (
<CategoryContainer key={idx}>
<EditorCategory
category={category}
uncategorizedRoles={[]}
guildRoles={props.guild.roles}
onChange={(x) => console.log(x)}
/>
</CategoryContainer>
))}
</div>
);

View file

@ -0,0 +1 @@
export * from './EditorCategoriesTab';