@synerise/ds-short-cuts 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-short-cuts@0.2.2...@synerise/ds-short-cuts@0.3.0) (2025-01-21)
+
+
+### Features
+
+* **short-cuts:** adjust to designs changes ([f68f9a6](https://github.com/Synerise/synerise-design/commit/f68f9a6e8ff4b1591631691afc7bc3298b4e1049))
+
+
+
+
+
 ## [0.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-short-cuts@0.2.1...@synerise/ds-short-cuts@0.2.2) (2025-01-15)
 
 **Note:** Version bump only for package @synerise/ds-short-cuts

package/README.md

@@ -27,7 +27,7 @@ import ShortCuts from '@synerise/ds-short-cuts'
 ## API
 
 | Property   | Description              | Type                                                      | Default   |
-| size       | sizes of short cut       | `S` , `L`                                                 | -         |
+| size       | sizes of short cut       | `S` , `L`                                                 | `L`       |
 | children   | content to display       | ReactNode                                                 | -         |
 | color      | type of colors           | string                                                    | -         |
 | icon       | icon to display          | ReactNode                                                 | -         |

package/dist/ShortCuts.js

@@ -2,23 +2,29 @@ var _excluded = ["size", "children", "color", "icon", "autoWidth"];
 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 { theme } from '@synerise/ds-core';
+import Icon from '@synerise/ds-icon';
+import { Text } from '@synerise/ds-typography';
 import * as S from './ShortCuts.style';
 var ShortCuts = function ShortCuts(_ref) {
-  var size = _ref.size,
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'L' : _ref$size,
     children = _ref.children,
     color = _ref.color,
     icon = _ref.icon,
     autoWidth = _ref.autoWidth,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.ShortCutWrapper, _extends({
-    color: color
-  }, htmlAttributes), /*#__PURE__*/React.createElement(S.Wrapper, {
+  return /*#__PURE__*/React.createElement(S.Wrapper, _extends({
     color: color,
     size: size,
-    autoWidth: autoWidth
-  }, icon ? /*#__PURE__*/React.createElement(S.ShortCutIcon, {
-    color: color,
-    component: icon
-  }) : children));
+    autoWidth: autoWidth,
+    isIcon: Boolean(icon)
+  }, htmlAttributes), icon ? /*#__PURE__*/React.createElement(Icon, {
+    color: color === 'dark' ? theme.palette.white : theme.palette['grey-600'],
+    component: icon,
+    size: 12
+  }) : /*#__PURE__*/React.createElement(Text, {
+    size: "xsmall"
+  }, children));
 };
 export default ShortCuts;

package/dist/ShortCuts.style.d.ts

@@ -1,13 +1,6 @@
-/// <reference types="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;
     autoWidth?: boolean | undefined;
-}, never>;
-export declare const ShortCutIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {
-    color?: "dark" | "light" | undefined;
+    isIcon: boolean;
 }, never>;

package/dist/ShortCuts.style.js

@@ -1,51 +1,40 @@
 import styled from 'styled-components';
-import Icon from '@synerise/ds-icon';
 var getPadding = function getPadding(props) {
-  if (props.size === 'L') {
-    return '0 8px';
-  }
   if (props.size === 'S') {
-    return '0 4px';
+    if (props.isIcon) {
+      return '3px 3px 2px';
+    }
+    return '1px 4px 0';
+  }
+  if (props.isIcon) {
+    return '6px 6px 5px';
   }
-  return '0px';
+  return '4px 8px 3px';
 };
 var getWidth = function getWidth(props) {
-  if (props.size && props.autoWidth) {
-    return '100%';
-  }
-  if (props.size === 'L') {
-    return '24px';
-  }
-  if (props.size === 'S') {
-    return '18px';
+  if (!props.autoWidth) {
+    if (props.size === 'L') {
+      return '24px';
+    }
+    if (props.size === 'S') {
+      return '18px';
+    }
   }
-  return '100%';
+  return 'auto';
 };
-export var ShortCutWrapper = styled.div.withConfig({
-  displayName: "ShortCutsstyle__ShortCutWrapper",
-  componentId: "vo5qxe-0"
-})(["display:flex;background-color:", ";border-radius:3px;border-bottom:1px 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;height:", ";width:", ";padding:", ";font-size:11px;color:", ";"], function (props) {
-  return props.size === 'S' ? '17px' : '23px';
+  componentId: "vo5qxe-0"
+})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:", ";width:", ";background-color:", ";border-bottom:1px solid ", ";border-radius:3px;color:", ";padding:", ";font-size:11px;"], function (props) {
+  return props.size === 'S' ? '18px' : '24px';
 }, function (props) {
   return getWidth(props);
 }, function (props) {
-  return getPadding(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.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'];
+}, function (props) {
+  return getPadding(props);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-short-cuts",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "ShortCuts UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,11 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.69.1"
+    "@synerise/ds-icon": "^0.70.0",
+    "@synerise/ds-typography": "^0.16.12"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 17.0.2"
   },
-  "gitHead": "f591d14d24d6a14aab76edcb60f04aaadec8336d"
+  "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
 }