ecelis / ecelis/e-react-ui

check if thse are stil used hover and horizontal

Open
#27 0 comments 0 reactions 0 assignees View on GitHub
todo
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

https://github.com/ecelis/e-react-ui/blob/c662cafd78980aaf67deef44482cf1aa7209f22b/src/components/List.tsx#L51

```javascript

import * as React from 'react';
import * as PropTypes from 'prop-types';
import styled, { ThemedStyledFunction } from 'styled-components';

export declare interface IList extends ThemedStyledFunction<"ul", any, {}, never> {
/** List items JSON */
items: {
id: string;
value: string;
}[];
/** Make list items horizontal, if 'y' set `display: flex;`, else `null`. */
axis?: string;
/** CSS value for `border:` */
outerBorder?: boolean;
/** If true, add `bottom-border` to lit items. */
innerBorder?: boolean;
}

const Ul = styled.ul`
${({ axis }: IList) => axis === 'y' ? `display: flex;` : null}
list-style-type: none;
padding: 0;
margin: 0;
${({ outerBorder }: IList) => outerBorder ? `border: thin solid var(--primary);` : null}
${({ innerBorder }: IList) => innerBorder ? `
li {
${({ axis }: IList) => axis === 'y' ? `margin-right: 3px;` : null}
div {
border-bottom: thin solid var(--primary);
};
` : null}

`;

const List = (props: IList): JSX.Element => {
return (


    {props.items.map((item, idx) => {
    return (
  • {item.value}

  • );
    })}

);
}

List.propTypes = {
items: PropTypes.array.isRequired,
outerBorder: PropTypes.bool,
innerBorder: PropTypes.bool,
hover: PropTypes.bool, // TODO check if thse are stil used hover and horizontal
horizontal: PropTypes.bool
}

export default List;

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.