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

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

36
packages/design-system/molecules/error-banner/ErrorBanner.stories.tsx
View file

@ -2,25 +2,25 @@ import * as React from 'react';
import { ErrorBanner } from './ErrorBanner';
export default {
title: 'Molecules/Error Banner',
argTypes: {
english: { control: 'text' },
japanese: { control: 'text' },
friendlyCode: { control: 'text' },
},
args: {
english: 'Oh no! I lost it!',
japanese: 'ちょっとにんげんだよ',
friendlyCode: '404',
},
title: 'Molecules/Error Banner',
argTypes: {
english: { control: 'text' },
japanese: { control: 'text' },
friendlyCode: { control: 'text' },
},
args: {
english: 'Oh no! I lost it!',
japanese: 'ちょっとにんげんだよ',
friendlyCode: '404',
},
};
export const ErrorBanner_ = ({ english, japanese, friendlyCode }) => (
<ErrorBanner
message={{
english,
japanese,
friendlyCode,
}}
/>
<ErrorBanner
message={{
english,
japanese,
friendlyCode,
}}
/>
);

42
packages/design-system/molecules/error-banner/ErrorBanner.styled.ts
View file

@ -4,38 +4,38 @@ import { text300, text500, text700 } from '@roleypoly/design-system/atoms/typogr
import styled, { css } from 'styled-components';
export const ErrorWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
${onSmallScreen(css`
display: block;
text-align: center;
`)}
display: flex;
align-items: center;
justify-content: center;
${onSmallScreen(css`
display: block;
text-align: center;
`)}
`;
export const ErrorDivider = styled.div`
width: 1px;
height: 3em;
background: ${palette.grey600};
margin: 0 1em;
${onSmallScreen(css`
display: none;
`)}
width: 1px;
height: 3em;
background: ${palette.grey600};
margin: 0 1em;
${onSmallScreen(css`
display: none;
`)}
`;
export const ErrorSideCode = styled.div`
${text700}
${onSmallScreen(css`
margin-bottom: 0.4em;
`)}
${text700}
${onSmallScreen(css`
margin-bottom: 0.4em;
`)}
`;
export const ErrorText = styled.div`
${text500}
${text500}
`;
export const ErrorTextLower = styled.div`
${text300}
${text300}
color: ${palette.taupe500};
color: ${palette.taupe500};
`;

34
packages/design-system/molecules/error-banner/ErrorBanner.tsx
View file

@ -1,29 +1,29 @@
import * as React from 'react';
import {
ErrorDivider,
ErrorSideCode,
ErrorText,
ErrorTextLower,
ErrorWrapper,
ErrorDivider,
ErrorSideCode,
ErrorText,
ErrorTextLower,
ErrorWrapper,
} from './ErrorBanner.styled';
export type ErrorMessage = {
english: string;
japanese?: string;
friendlyCode?: string;
english: string;
japanese?: string;
friendlyCode?: string;
};
type ErrorBannerProps = {
message: Required<ErrorMessage>;
message: Required<ErrorMessage>;
};
export const ErrorBanner = (props: ErrorBannerProps) => (
<ErrorWrapper>
<ErrorSideCode>{props.message.friendlyCode}</ErrorSideCode>
<ErrorDivider />
<div>
<ErrorText>{props.message.english}</ErrorText>
<ErrorTextLower>{props.message.japanese}</ErrorTextLower>
</div>
</ErrorWrapper>
<ErrorWrapper>
<ErrorSideCode>{props.message.friendlyCode}</ErrorSideCode>
<ErrorDivider />
<div>
<ErrorText>{props.message.english}</ErrorText>
<ErrorTextLower>{props.message.japanese}</ErrorTextLower>
</div>
</ErrorWrapper>
);