@synerise/ds-toolbar 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,61 @@
+---
+id: toolbar
+title: Toolbar
+---
+
+Toolbar UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-toolbar
+or
+yarn add @synerise/ds-toolbar
+```
+
+## Usage
+
+```
+import Toolbar from '@synerise/ds-toolbar'
+
+<Toolbar>
+  <ToolbarGroup>
+    <ToolbarButton mode="single-icon">
+      <Icon component={<StepBackM />} />
+    </ToolbarButton>
+    <ToolbarButton mode="single-icon">
+      <Icon component={<StepForwardM />} />
+    </ToolbarButton>
+  </ToolbarGroup>
+</Toolbar>
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-toolbar--default"></iframe>
+
+## API
+
+### Toolbar
+
+| Property | Description             | Type      | Default |
+| -------- | ----------------------- | --------- | ------- |
+| children | contents of the toolbar | ReactNode | -       |
+
+### ToolbarGroup
+
+| Property  | Description                                       | Type      | Default |
+| --------- | ------------------------------------------------- | --------- | ------- |
+| children  | contents of the toolbar                           | ReactNode | -       |
+| isCompact | compact ToolbarGroup has 0px gap between elements | boolean   | -       |
+
+### ToolbarButton
+
+see ds-button for more props
+
+| Property     | Description    | Type                                             | Default |
+| ------------ | -------------- | ------------------------------------------------ | ------- |
+| type         | type of button | 'ghost-primary' / 'ghost' / 'custom-color-ghost' | -       |
+| tooltipProps | Tooltip config | TooltipProps see ds-tooltip                      | -       |
+| badgeProps   | Badge config   | BadgeProps see ds-badge                          | -       |

package/dist/Toolbar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ToolbarProps } from './Toolbar.types';
+declare const Toolbar: ({ children, ...htmlAttributes }: ToolbarProps) => React.JSX.Element;
+export default Toolbar;

package/dist/Toolbar.js

@@ -0,0 +1,10 @@
+var _excluded = ["children"];
+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 './Toolbar.styles';
+var Toolbar = function Toolbar(_ref) {
+  var children = _ref.children,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(S.ToolbarWrapper, htmlAttributes, children);
+};
+export default Toolbar;

package/dist/Toolbar.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const ToolbarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolbarLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolbarGroup: import("styled-components").StyledComponent<"div", any, {
+    isCompact?: boolean | undefined;
+}, never>;

package/dist/Toolbar.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export var ToolbarWrapper = styled.div.withConfig({
+  displayName: "Toolbarstyles__ToolbarWrapper",
+  componentId: "sc-1wn8say-0"
+})(["display:flex;gap:8px;"]);
+export var ToolbarLabel = styled.div.withConfig({
+  displayName: "Toolbarstyles__ToolbarLabel",
+  componentId: "sc-1wn8say-1"
+})(["display:flex;align-items:center;justify-content:center;padding:0 12px;font-weight:500;color:", ";"], function (props) {
+  return props.theme.palette['grey-600'];
+});
+export var ToolbarGroup = styled.div.withConfig({
+  displayName: "Toolbarstyles__ToolbarGroup",
+  componentId: "sc-1wn8say-2"
+})(["display:flex;", ";background:", ";padding:4px;border-radius:3px;align-content:center;box-shadow:0px 4px 12px 0px ", "0A;"], function (props) {
+  return !props.isCompact && "gap: 4px";
+}, function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['grey-900'];
+});

package/dist/Toolbar.types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { ButtonProps } from '@synerise/ds-button';
+import type { TooltipProps } from '@synerise/ds-tooltip';
+import type { BadgeProps } from '@synerise/ds-badge';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type ToolbarProps = WithHTMLAttributes<HTMLDivElement, {
+    children: ReactNode;
+}>;
+export type ToolbarLabelProps = WithHTMLAttributes<HTMLDivElement, {
+    children: ReactNode;
+}>;
+export type ToolbarGroupProps = WithHTMLAttributes<HTMLDivElement, {
+    children: ReactNode;
+    isCompact?: boolean;
+}>;
+export type ToolbarButtonProps = Omit<ButtonProps, 'type'> & {
+    type?: 'ghost-primary' | 'ghost' | 'custom-color-ghost';
+    tooltipProps?: TooltipProps;
+    badgeProps?: BadgeProps;
+};

package/dist/Toolbar.types.js

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

package/dist/components/ToolbarButton/ToolbarButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarButtonProps } from '../../Toolbar.types';
+export declare const ToolbarButton: ({ tooltipProps, badgeProps, ...props }: ToolbarButtonProps) => React.JSX.Element;

package/dist/components/ToolbarButton/ToolbarButton.js

@@ -0,0 +1,17 @@
+var _excluded = ["tooltipProps", "badgeProps"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Button from '@synerise/ds-button';
+import Tooltip from '@synerise/ds-tooltip';
+import Badge from '@synerise/ds-badge';
+export var ToolbarButton = function ToolbarButton(_ref) {
+  var tooltipProps = _ref.tooltipProps,
+    badgeProps = _ref.badgeProps,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var rawButton = /*#__PURE__*/React.createElement(Button, _extends({
+    type: "ghost"
+  }, props));
+  var button = badgeProps ? /*#__PURE__*/React.createElement(Badge, badgeProps, rawButton) : rawButton;
+  return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, button) : button;
+};

package/dist/components/ToolbarGroup/ToolbarGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarGroupProps } from '../../Toolbar.types';
+export declare const ToolbarGroup: ({ children, isCompact, ...htmlAttributes }: ToolbarGroupProps) => React.JSX.Element;

package/dist/components/ToolbarGroup/ToolbarGroup.js

@@ -0,0 +1,13 @@
+var _excluded = ["children", "isCompact"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 '../../Toolbar.styles';
+export var ToolbarGroup = function ToolbarGroup(_ref) {
+  var children = _ref.children,
+    isCompact = _ref.isCompact,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(S.ToolbarGroup, _extends({
+    isCompact: isCompact
+  }, htmlAttributes), children);
+};

package/dist/components/ToolbarLabel/ToolbarLabel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarLabelProps } from '../../Toolbar.types';
+export declare const ToolbarLabel: ({ children, ...htmlAttributes }: ToolbarLabelProps) => React.JSX.Element;

package/dist/components/ToolbarLabel/ToolbarLabel.js

@@ -0,0 +1,9 @@
+var _excluded = ["children"];
+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 '../../Toolbar.styles';
+export var ToolbarLabel = function ToolbarLabel(_ref) {
+  var children = _ref.children,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(S.ToolbarLabel, htmlAttributes, children);
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ToolbarGroup/ToolbarGroup';
+export * from './ToolbarButton/ToolbarButton';
+export * from './ToolbarLabel/ToolbarLabel';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export * from './ToolbarGroup/ToolbarGroup';
+export * from './ToolbarButton/ToolbarButton';
+export * from './ToolbarLabel/ToolbarLabel';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Toolbar';
+export * from './components';
+export type { ToolbarProps } from './Toolbar.types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default } from './Toolbar';
+export * from './components';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@synerise/ds-toolbar",
+  "version": "0.0.1",
+  "description": "Toolbar 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",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-badge": "^0.8.22",
+    "@synerise/ds-button": "^0.22.0",
+    "@synerise/ds-tooltip": "^0.14.52",
+    "@synerise/ds-utils": "^0.31.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 17.0.2",
+    "styled-components": "5.0.1"
+  },
+  "gitHead": "944213811bd19a6e10380cb3b84bb1bda6ce8a10"
+}