From 31d07fdac80a2a546646b1eb232fa7dd6319ce83 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 19 Nov 2018 17:27:00 +0100 Subject: rename all files and directories to lowercase --- packages/dev-tools-pages/ts/components/list.tsx | 49 +++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 packages/dev-tools-pages/ts/components/list.tsx (limited to 'packages/dev-tools-pages/ts/components/list.tsx') diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx new file mode 100644 index 000000000..12d5d67a9 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/list.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { media } from 'ts/variables'; + +const StyledList = styled.ul` + list-style-type: none; + margin: 0; + padding: 0; + position: relative; +`; + +const StyledItem = styled.li` + position: relative; + padding-left: 1.625rem; + + :before { + content: ''; + border: 1px solid black; + width: 0.625rem; + height: 0.625rem; + display: inline-block; + position: absolute; + margin-top: 2px; + top: 0.3125rem; + left: 0; + transform: rotate(45deg); + } + :not(:last-child) { + margin-bottom: 0.5625rem; + ${media.small` + margin-bottom: 0.375rem; + `}; + } +`; + +interface ListProps { + items?: []; +} + +const List: React.StatelessComponent = props => ( + + {props.children !== undefined + ? props.children + : props.items.map((bullet, index) => {bullet})} + +); + +export { List, StyledItem as ListItem }; -- cgit v1.2.3 From b0c22a222e09ef8008a1ef7cf79e28b73961560a Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 20 Nov 2018 15:15:17 +0100 Subject: use lodash.map insted of array.map --- packages/dev-tools-pages/ts/components/list.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/list.tsx') diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx index 12d5d67a9..6d4839e88 100644 --- a/packages/dev-tools-pages/ts/components/list.tsx +++ b/packages/dev-tools-pages/ts/components/list.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import * as _ from 'lodash'; import { media } from 'ts/variables'; @@ -42,7 +43,7 @@ const List: React.StatelessComponent = props => ( {props.children !== undefined ? props.children - : props.items.map((bullet, index) => {bullet})} + : _.map(props.items, (bullet, index) => {bullet})} ); -- cgit v1.2.3 From f360b2edd671f7f666b3d218c1400b2fb7c75610 Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 20 Nov 2018 15:27:56 +0100 Subject: fix import order --- packages/dev-tools-pages/ts/components/list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/list.tsx') diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx index 6d4839e88..ffa7c1cf3 100644 --- a/packages/dev-tools-pages/ts/components/list.tsx +++ b/packages/dev-tools-pages/ts/components/list.tsx @@ -1,6 +1,6 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import * as _ from 'lodash'; import { media } from 'ts/variables'; -- cgit v1.2.3