roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 01:59:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency

Browse source
This commit is contained in:
41666 2021-03-13 22:49:01 -05:00
parent a931f8c69c
commit 9b71a24e2d
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

110
packages/design-system/atoms/hero/Hero.stories.tsx
View file

@ -2,69 +2,69 @@ import * as React from 'react';
import { Hero as HeroComponent } from './Hero';
export default {
title: 'Atoms/Hero',
component: HeroComponent,
args: {
topSpacing: 75,
bottomSpacing: 25,
},
title: 'Atoms/Hero',
component: HeroComponent,
args: {
topSpacing: 75,
bottomSpacing: 25,
},
};
export const Hero = ({ topSpacing, bottomSpacing }) => {
return (
<StoryWrapper topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
<HeroComponent topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
<h1>This is it.</h1>
</HeroComponent>
</StoryWrapper>
);
return (
<StoryWrapper topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
<HeroComponent topSpacing={topSpacing} bottomSpacing={bottomSpacing}>
<h1>This is it.</h1>
</HeroComponent>
</StoryWrapper>
);
};
type WrapperProps = {
children: React.ReactNode;
topSpacing: number;
bottomSpacing: number;
children: React.ReactNode;
topSpacing: number;
bottomSpacing: number;
};
const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) => (
<div>
<div
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: '100vh',
}}
>
<div
style={{
height: topSpacing,
backgroundColor: 'rgba(255,0,0,0.25)',
top: 0,
left: 0,
right: 0,
position: 'absolute',
overflow: 'hidden',
}}
>
topSpacing
</div>
<div
style={{
height: bottomSpacing,
backgroundColor: 'rgba(0,0,255,0.25)',
bottom: 0,
left: 0,
right: 0,
position: 'absolute',
overflow: 'hidden',
}}
>
bottomSpacing
</div>
</div>
{props.children}
<div>
<div
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: '100vh',
}}
>
<div
style={{
height: topSpacing,
backgroundColor: 'rgba(255,0,0,0.25)',
top: 0,
left: 0,
right: 0,
position: 'absolute',
overflow: 'hidden',
}}
>
topSpacing
</div>
<div
style={{
height: bottomSpacing,
backgroundColor: 'rgba(0,0,255,0.25)',
bottom: 0,
left: 0,
right: 0,
position: 'absolute',
overflow: 'hidden',
}}
>
bottomSpacing
</div>
</div>
{props.children}
</div>
);

32
packages/design-system/atoms/hero/Hero.tsx
View file

@ -2,29 +2,29 @@ import * as React from 'react';
import styled from 'styled-components';
type HeroContainerProps = {
topSpacing: number;
bottomSpacing: number;
topSpacing: number;
bottomSpacing: number;
};
type HeroProps = Partial<HeroContainerProps> & {
children: React.ReactNode;
children: React.ReactNode;
};
const HeroContainer = styled.div<HeroContainerProps>`
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
margin-top: ${(props) => props.topSpacing}px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
margin-top: ${(props) => props.topSpacing}px;
`;
export const Hero = (props: HeroProps) => (
<HeroContainer
topSpacing={props.topSpacing || 0}
bottomSpacing={props.bottomSpacing || 0}
>
{props.children}
</HeroContainer>
<HeroContainer
topSpacing={props.topSpacing || 0}
bottomSpacing={props.bottomSpacing || 0}
>
{props.children}
</HeroContainer>
);