Skip to content

components: Element #3287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 8, 2020
Merged

components: Element #3287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
42e2841
remove duplicate decorator
siddharthkp Jan 8, 2020
1e65f7a
add parent styles to layout decorator
siddharthkp Jan 8, 2020
df4d850
add min height to layout decorator
siddharthkp Jan 8, 2020
1172b14
add common base element
siddharthkp Jan 8, 2020
9db471a
use base element for other components
siddharthkp Jan 8, 2020
eb8cbf9
add all fontsizes + update example
siddharthkp Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/common/src/design-language/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ export const fontSizes = [
11,
13,
16,
19,
24,
28,
33,
40,
];

export const fontWeights = {
Expand Down
16 changes: 10 additions & 6 deletions packages/components/.storybook/decorators/LayoutDecorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,29 @@ import React from 'react';
import styled from 'styled-components';

const ColoredChildren = styled.div`
& > div > * {
& > * {
background: #343434;
min-height: 4em;
}
& > * > * {
--color: rgb(103, 126, 208);
background: var(--color);
min-height: 4em;
min-width: 4em;
}
& > div > *:nth-child(6n + 2) {
& > * > *:nth-child(6n + 2) {
--color: rgb(217, 103, 219);
}
& > div > *:nth-child(6n + 3) {
& > * > *:nth-child(6n + 3) {
--color: rgb(77, 214, 115);
}
& > div > *:nth-child(6n + 4) {
& > * > *:nth-child(6n + 4) {
--color: rgb(248, 110, 91);
}
& > div > *:nth-child(6n + 5) {
& > * > *:nth-child(6n + 5) {
--color: rgb(94, 204, 211);
}
& > div > *:nth-child(6n + 6) {
& > * > *:nth-child(6n + 6) {
--color: rgb(0, 35, 208);
}
& > div > *:nth-child(6n + 7) {
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/components/Collapsible/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import { Element } from '../Element';

export const Header = styled.div(
css({
Expand Down Expand Up @@ -81,12 +82,12 @@ export const Collapsible: React.FC<ICollapsibleProps> = ({
const toggle = () => setOpen(!open);

return (
<section {...props}>
<Element as="section" {...props}>
Copy link
Contributor

@SaraVieira SaraVieira Jan 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yaaaaasssss

<Header onClick={toggle}>
<ToggleIcon open={open} />
<Title>{title}</Title>
</Header>
{open ? <Body>{children}</Body> : null}
</section>
</Element>
);
};
22 changes: 22 additions & 0 deletions packages/components/src/components/Element/element.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { LayoutDecorator } from '../../../.storybook/decorators';
import { Element } from '.';

export default {
title: 'components/Element',
component: Element,
decorators: [LayoutDecorator],
};

export const Basic = () => <Element>content</Element>;

export const AsProp = () => <Element as="span">content</Element>;

export const Margins = () => (
<>
<Element margin={2}>2 on the space grid is 2*4px = 8px or 0.5em</Element>
<Element marginX={2}>left and right</Element>
<Element marginY={2}>top and bottom</Element>
<Element marginBottom={2}>prefer margin bottom when you can</Element>
</>
);
18 changes: 18 additions & 0 deletions packages/components/src/components/Element/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import styled from 'styled-components';
import css from '@styled-system/css';

export const Element = styled.div<{
margin?: number;
marginX?: number;
marginY?: number;
marginBottom?: number;
marginTop?: number; // prefer margin bottom to top
}>(props =>
css({
margin: props.margin || null,
marginX: props.marginX || null,
marginY: props.marginY || null,
marginBottom: props.marginBottom || null,
marginTop: props.marginTop || null,
})
);
11 changes: 8 additions & 3 deletions packages/components/src/components/Example/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import React from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import { Element } from '../Element';

const H1 = styled.h1`
color: red;
`;
const H1 = styled(Element).attrs({ as: 'h1' })(
css({
color: 'reds.500',
fontSize: 7,
})
);

const ExampleComponent = () => <H1>I am an example component</H1>;

Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/components/Grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import styled from 'styled-components';
import css from '@styled-system/css';
import { Element } from '../Element';

const fontSize = 1; // rem = 16px
const lineHeight = fontSize * 1.5;

export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>(
export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>(
({ columnGap, rowGap }) =>
css({
display: 'grid',
Expand All @@ -19,7 +20,7 @@ export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>(
// valid combinations are
// start | start + end | start + span | span
// span + end is also possible but not implemented here
export const Column = styled.div<{
export const Column = styled(Element)<{
start?: number;
end?: number;
span?: number;
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/components/Stack/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import styled from 'styled-components';
import css from '@styled-system/css';
import { Element } from '../Element';

export const Stack = styled.div<{
export const Stack = styled(Element)<{
gap?: number; // theme.space token
direction?: 'horizontal' | 'vertical';
justify?: string;
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/Stack/stack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,29 @@ export default {

// replace the text inside with Text variants when available
export const Defaults = () => (
<Stack style={{ height: 100, background: '#343434' }}>
<Stack style={{ height: 100 }}>
<div />
<div />
</Stack>
);

export const WithGap = () => (
<Stack gap={4} style={{ height: 100, background: '#343434' }}>
<Stack gap={4} style={{ height: 100 }}>
<div />
<div>spacing token as gap</div>
<div />
</Stack>
);

export const Justify = () => (
<Stack justify="space-around" style={{ height: 100, background: '#343434' }}>
<Stack justify="space-around" style={{ height: 100 }}>
<div />
<div />
</Stack>
);

export const Align = () => (
<Stack align="center" style={{ height: 100, background: '#343434' }}>
<Stack align="center" style={{ height: 100 }}>
<div />
<div />
</Stack>
Expand Down
8 changes: 0 additions & 8 deletions packages/components/src/stories/decorators/ThemeDecorator.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/components/src/stories/decorators/index.ts
View file
Open in desktop

This file was deleted.