@synerise/ds-short-cuts 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,33 @@
+---
+id: short-cuts
+title: ShortCuts
+---
+
+ShortCuts UI Component
+
+## Installation
+```
+npm i @synerise/ds-short-cuts
+or
+yarn add @synerise/ds-short-cuts
+```
+
+## Usage
+```
+import ShortCuts from '@synerise/ds-short-cuts'
+
+<ShortCuts />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-short-cuts--default"></iframe>
+
+## API
+
+| Property   | Description            | Type                                                      | Default   |
+| size       | sizes of short cut     | `S` , `L`                                                 | -         |
+| children   | render component       | ReactNode                                                 | -         |
+| color      | type of colors         | string                                                    | -         |
+| icon       | render icon            | ReactNode                                                 | -         |

package/dist/ShortCuts.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ShortCutsProps } from './ShortCuts.types';
+declare const ShortCuts: ({ size, children, color, icon, ...htmlAttributes }: ShortCutsProps) => React.JSX.Element;
+export default ShortCuts;

package/dist/ShortCuts.js

@@ -0,0 +1,29 @@
+var _excluded = ["size", "children", "color", "icon"];
+
+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 from 'react';
+import * as S from './ShortCuts.style';
+
+var ShortCuts = function ShortCuts(_ref) {
+  var size = _ref.size,
+      children = _ref.children,
+      color = _ref.color,
+      icon = _ref.icon,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.ShortCutWrapper, _extends({
+    color: color
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.Wrapper, {
+    icon: icon,
+    color: color,
+    size: size
+  }, icon ? /*#__PURE__*/React.createElement(S.ShortCutIcon, {
+    color: color,
+    component: icon
+  }) : children));
+};
+
+export default ShortCuts;

package/dist/ShortCuts.style.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const ShortCutWrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: "dark" | "light" | undefined;
+    size?: "S" | "L" | undefined;
+}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    size?: "S" | "L" | undefined;
+    color?: "dark" | "light" | undefined;
+    icon?: ReactNode;
+}, never>;
+export declare const ShortCutIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {
+    color?: "dark" | "light" | undefined;
+}, never>;

package/dist/ShortCuts.style.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import Icon from '@synerise/ds-icon';
+
+var getPadding = function getPadding(props) {
+  if (props.size === 'L' && props.icon) {
+    return '8px';
+  }
+
+  if (props.size === 'S' && props.icon) {
+    return '4px';
+  }
+
+  if (props.size === 'L') {
+    return '8px 14px';
+  }
+
+  if (props.size === 'S') {
+    return '4px 10px';
+  }
+
+  return '0px';
+};
+
+export var ShortCutWrapper = styled.div.withConfig({
+  displayName: "ShortCutsstyle__ShortCutWrapper",
+  componentId: "vo5qxe-0"
+})(["display:flex;background-color:", ";border-radius:6px;border-bottom:2px solid ", ";box-shadow:0 0 10px 2px ", ";"], function (props) {
+  return props.color === 'dark' ? props.theme.palette['grey-600'] : props.theme.palette.white;
+}, function (props) {
+  return props.color === 'dark' ? props.theme.palette['grey-500'] : props.theme.palette['grey-300'];
+}, function (props) {
+  return props.color === 'dark' ? props.theme.palette['grey-300'] : props.theme.palette['grey-100'];
+});
+export var Wrapper = styled.div.withConfig({
+  displayName: "ShortCutsstyle__Wrapper",
+  componentId: "vo5qxe-1"
+})(["display:flex;align-items:center;justify-content:center;min-width:", ";padding:", ";font-size:18px;color:", ";"], function (props) {
+  return props.size === 'S' ? '28px' : '36px';
+}, function (props) {
+  return getPadding(props);
+}, function (props) {
+  return props.color === 'dark' ? props.theme.palette.white : props.theme.palette['grey-600'];
+});
+export var ShortCutIcon = styled(Icon).withConfig({
+  displayName: "ShortCutsstyle__ShortCutIcon",
+  componentId: "vo5qxe-2"
+})(["fill:", ";"], function (props) {
+  return props.color === 'dark' ? props.theme.palette.white : props.theme.palette['grey-600'];
+});

package/dist/ShortCuts.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ExactlyOne, WithHTMLAttributes } from '@synerise/ds-utils';
+export type ShortCutsProps = WithHTMLAttributes<HTMLDivElement, {
+    size?: 'S' | 'L';
+    color?: 'light' | 'dark';
+}> & ExactlyOne<{
+    icon?: ReactNode;
+}, {
+    children?: ReactNode;
+}>;

package/dist/ShortCuts.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/modules.d.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@synerise/ds-short-cuts",
+  "version": "0.0.1",
+  "description": "ShortCuts 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 --delete-dir-on-start --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-icon": "^0.66.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 17.0.2"
+  },
+  "gitHead": "a1842a3e25b17cd0f9b3614f4ac2b4a3bc4da1f8"
+}