@synerise/ds-list-item 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+---
+id: list-item
+title: ListItem
+---
+
+ListItem UI Component
+
+## Installation
+```
+npm i @synerise/ds-list-item
+or
+yarn add @synerise/ds-list-item
+```
+
+## Usage
+```
+import ListItem from '@synerise/ds-list-item'
+
+<ListItem />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-list-item--default"></iframe>
+
+## API
+
+
+| Property                    | Description               | Type               | Default    |
+|-----------------------------|---------------------------|--------------------|------------|
+| className                   | Extra styles              | string             | -          |
+| children                    | ListItem content          | React.ReactNode    | -          |
+| icon                        | Icon for ListItem         | React.ReactNode    | -          |
+| switch                      | Switch for ListItem       | boolean            | false      |
+| title                       | Text for tooltip          | string             | -          |
+| danger                      | Danger color for ListItem | boolean            | false      |
+| prefixCls                   | Adjust base className     | string             | 'ant-menu' |
+| direction                   | Text direction            | 'ltr' &#124; 'rtl' | 'ltr'      | -       |
+| disableListItemTitleTooltip | Disable tooltip           | boolean            | true       |
+| noHover                     | Disable hover             | boolean &#124; undefined | false      | -       |
+| size                        | ListItem size             | 'default' &#124; 'large' | default    | -       |

package/dist/ListItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type ListItemProps = {
+    className?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    prefixCls?: string;
+    direction?: 'ltr' | 'rtl';
+    switch?: boolean;
+    title?: string;
+    noHover?: boolean;
+    size?: 'default' | 'large';
+    selectable?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const ListItem: (props: ListItemProps) => JSX.Element;
+export default ListItem;

package/dist/ListItem.js

@@ -0,0 +1,56 @@
+var _excluded = ["className", "children", "icon", "danger", "prefixCls", "title", "noHover", "size", "selectable"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState } from 'react';
+import StyledListItem, { StyledIconWrapper } from './ListItem.styles';
+
+var ListItem = function ListItem(props) {
+  var className = props.className,
+      children = props.children,
+      icon = props.icon,
+      danger = props.danger,
+      _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'ant-menu' : _props$prefixCls,
+      title = props.title,
+      noHover = props.noHover,
+      size = props.size,
+      _props$selectable = props.selectable,
+      selectable = _props$selectable === void 0 ? true : _props$selectable,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(false),
+      isSelected = _useState[0],
+      setIsSelected = _useState[1];
+
+  var handleClick = function handleClick() {
+    setIsSelected(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsSelected(false);
+  };
+
+  var renderItemChildren = function renderItemChildren() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: prefixCls + "-title-content"
+    }, children);
+  };
+
+  var listItemNode = /*#__PURE__*/React.createElement(StyledListItem, _extends({
+    className: "ds-search-item " + className + " " + (isSelected ? 'selected' : ''),
+    title: title || (typeof children === 'string' ? children : undefined),
+    onClick: handleClick,
+    onMouseLeave: handleMouseLeave,
+    tabIndex: 0,
+    noHover: noHover,
+    size: size,
+    selectable: selectable,
+    isSelected: isSelected
+  }, rest), icon && /*#__PURE__*/React.createElement(StyledIconWrapper, null, icon), renderItemChildren());
+  return listItemNode;
+};
+
+export default ListItem;

package/dist/ListItem.styles.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+type StyledListItemProps = {
+    disabled?: boolean;
+    selected?: boolean;
+    prefixel?: ReactNode;
+    suffixel?: boolean;
+    description?: ReactNode;
+    ordered?: boolean;
+    active?: boolean;
+    indentLevel?: number;
+    visible?: boolean;
+    highlight?: boolean;
+    danger?: boolean;
+    noHover?: boolean;
+    switch?: boolean;
+    isSelected?: boolean;
+    selectable?: boolean;
+    size?: 'default' | 'large';
+};
+declare const StyledListItem: import("styled-components").StyledComponent<"div", any, StyledListItemProps, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledListItem;

package/dist/ListItem.styles.js

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+var baseStyles = css(["display:flex;align-items:center;min-width:200px;margin:0;padding-left:", ";padding-right:12px;font-size:13px;line-height:1.39;font-weight:500;user-select:none;border-radius:3px;transition:background-color 0.2s ease-out,color 0.2s ease-out;min-height:", ";background:none;border:none;color:", ";cursor:pointer;opacity:1;"], function (props) {
+  return props.prefixel ? '8px' : '12px';
+}, function (props) {
+  return props.size === 'large' ? '50px' : '32px';
+}, function (props) {
+  return props.theme.palette['grey-700'];
+});
+var disabledStyle = css(["cursor:not-allowed;opacity:0.4;"]);
+var selectedStyle = css(["background:", ";color:", ";border:1px solid ", ";"], function (props) {
+  return props.theme.palette['blue-050'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});
+var hoverStyle = css(["&:hover{background:", ";color:", ";}"], function (props) {
+  return props.theme.palette['grey-050'];
+}, function (props) {
+  return props.noHover ? props.theme.palette['grey-700'] : props.theme.palette['blue-600'];
+});
+var focusStyle = css(["&:focus,&.selected{box-shadow:", ";outline:none;}"], function (props) {
+  return props["switch"] ? 'none' : "inset 0 0 0 2px " + props.theme.palette['blue-600'];
+});
+var nonSelectableStyle = css(["pointer-events:none;cursor:default;"]);
+var highlightStyle = css(["font-weight:400;& > .search-highlight{font-weight:600;}"]);
+var orderedStyle = css(["&::before{content:none;}"]);
+var dangerStyle = css(["&:hover{color:", ";background:", ";border-color:", ";}"], function (props) {
+  return props.theme.palette['red-600'];
+}, function (props) {
+  return props.theme.palette['red-050'];
+}, function (props) {
+  return props.theme.palette['red-600'];
+});
+var StyledListItem = styled.div.withConfig({
+  displayName: "ListItemstyles__StyledListItem",
+  componentId: "sc-127s7ku-0"
+})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], baseStyles, function (props) {
+  return props.disabled && disabledStyle;
+}, function (props) {
+  return props.selected && !props["switch"] && selectedStyle;
+}, hoverStyle, focusStyle, function (props) {
+  return !props.selectable && !props.noHover && nonSelectableStyle;
+}, function (props) {
+  return props.highlight && highlightStyle;
+}, function (props) {
+  return !props.ordered && orderedStyle;
+}, function (props) {
+  return props.danger && dangerStyle;
+});
+export var StyledIconWrapper = styled.div.withConfig({
+  displayName: "ListItemstyles__StyledIconWrapper",
+  componentId: "sc-127s7ku-1"
+})(["margin-right:12px;"]);
+export default StyledListItem;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ListItem';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './ListItem';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@synerise/ds-list-item",
+  "version": "0.0.1",
+  "description": "ListItem UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-switch": "^0.4.49"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "antd": "4.7.0",
+    "react": ">=16.9.0 < 17.0.0",
+    "styled-components": "5.0.1"
+  },
+  "devDependencies": {
+    "@synerise/ds-utils": "^0.24.21",
+    "@testing-library/jest-dom": "5.1.1",
+    "@testing-library/react": "10.0.1"
+  },
+  "gitHead": "fb43cead2fb83955fec72f72adf6b27a876f3369"
+}