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

chore: restructure project into yarn workspaces, remove next

Browse source
This commit is contained in:
41666 2021-03-09 23:25:16 -05:00
parent 49e308507e
commit 8d06327c03
266 changed files with 16466 additions and 3350 deletions
Download patch file Download diff file Expand all files Collapse all files

78
packages/design-system/atoms/branding/DynamicBranding.stories.tsx Normal file
View file

@ -0,0 +1,78 @@
import { Text } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { palette } from '../colors';
import { Logomark, Logotype } from './Branding';
import { AllVariants, DynamicLogomark, DynamicLogotype } from './DynamicBranding';
export default {
title: 'Atoms/Branding/Dynamic',
component: DynamicLogotype,
};
const WrapperDiv = styled.div`
background-color: ${palette.taupe100};
padding: 2em;
`;
const Wrapper = (props: { children: React.ReactNode }) => (
<>
<WrapperDiv>{props.children}</WrapperDiv>
<ReactTooltip />
</>
);
export const dynamicLogotype = (args) => {
return (
<Wrapper>
<DynamicLogotype {...args} />
</Wrapper>
);
};
export const dynamicLogomark = (args) => {
return (
<Wrapper>
<DynamicLogomark {...args} />
</Wrapper>
);
};
export const AllCustomizedLogotypes = () => {
return (
<Wrapper>
<div>
<Text>Base Logo</Text>
<br />
<Logotype height={50} />
</div>
{AllVariants.map((variant, idx) => (
<div key={idx} style={{ marginTop: 5 }}>
<Text>{variant.name}</Text>
<br />
<variant.Logotype height={50} />
</div>
))}
</Wrapper>
);
};
export const AllCustomizedLogomarks = () => {
return (
<Wrapper>
<div>
<Text>Base Logo</Text>
<br />
<Logomark height={50} />
</div>
{AllVariants.map((variant, idx) => (
<div key={idx}>
<Text>{variant.name}</Text>
<br />
<variant.Logomark height={50} />
</div>
))}
</Wrapper>
);
};