@synerise/ds-typography 0.12.10 → 0.13.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.13.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.10...@synerise/ds-typography@0.13.0) (2023-09-26)
+
+
+### Features
+
+* **typography:** ellipsis with conditional tooltip ([4448c30](https://github.com/synerise/synerise-design/commit/4448c304837bf8a04d5009ffcb47f67421003738))
+
+
+
+
+
 ## [0.12.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.9...@synerise/ds-typography@0.12.10) (2023-09-08)
 
 

package/dist/CommonElements.d.ts

@@ -1,7 +1,6 @@
 export declare const Description: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const EllipsisText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const MediumText: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -31,3 +30,4 @@ export declare const H6: import("styled-components").StyledComponent<"h6", any,
 export declare const H7: import("styled-components").StyledComponent<"h6", any, {
     withoutMargin: boolean;
 }, never>;
+export declare const EllipsisText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CommonElements.js

@@ -8,61 +8,57 @@ export var Description = styled.div.withConfig({
 }, function (props) {
   return props.disabled ? "opacity: 0.4;" : '';
 });
-export var EllipsisText = styled.div.withConfig({
-  displayName: "CommonElements__EllipsisText",
-  componentId: "sc-102d2aw-1"
-})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
 export var ErrorText = styled.div.withConfig({
   displayName: "CommonElements__ErrorText",
-  componentId: "sc-102d2aw-2"
+  componentId: "sc-102d2aw-1"
 })(["color:", ";margin-bottom:4px;"], function (props) {
   return props.theme.palette['red-600'];
 });
 export var Label = styled.label.withConfig({
   displayName: "CommonElements__Label",
-  componentId: "sc-102d2aw-3"
+  componentId: "sc-102d2aw-2"
 })(["color:", ";font-weight:500;display:block;cursor:pointer;"], function (props) {
   return props.theme.palette['grey-800'];
 });
 export var MediumText = styled.span.withConfig({
   displayName: "CommonElements__MediumText",
-  componentId: "sc-102d2aw-4"
+  componentId: "sc-102d2aw-3"
 })(["", ""], function () {
   return css(["", ";"], medium);
 });
 export var SmallText = styled.span.withConfig({
   displayName: "CommonElements__SmallText",
-  componentId: "sc-102d2aw-5"
+  componentId: "sc-102d2aw-4"
 })(["", ""], function () {
   return css(["", ";"], small);
 });
 export var XSmallText = styled.span.withConfig({
   displayName: "CommonElements__XSmallText",
-  componentId: "sc-102d2aw-6"
+  componentId: "sc-102d2aw-5"
 })(["", ""], function () {
   return css(["", ";"], xsmall);
 });
 export var MediumParagraph = styled.span.withConfig({
   displayName: "CommonElements__MediumParagraph",
-  componentId: "sc-102d2aw-7"
+  componentId: "sc-102d2aw-6"
 })(["", ""], function () {
   return css(["", ";"], medium);
 });
 export var SmallParagraph = styled.span.withConfig({
   displayName: "CommonElements__SmallParagraph",
-  componentId: "sc-102d2aw-8"
+  componentId: "sc-102d2aw-7"
 })(["", ""], function () {
   return css(["", ";"], small);
 });
 export var XSmallParagraph = styled.span.withConfig({
   displayName: "CommonElements__XSmallParagraph",
-  componentId: "sc-102d2aw-9"
+  componentId: "sc-102d2aw-8"
 })(["", ""], function () {
   return css(["", ";"], xsmall);
 });
 export var H1 = styled.h1.withConfig({
   displayName: "CommonElements__H1",
-  componentId: "sc-102d2aw-10"
+  componentId: "sc-102d2aw-9"
 })(["", " ", ""], function () {
   return css(["", ";"], h700);
 }, function (props) {
@@ -70,7 +66,7 @@ export var H1 = styled.h1.withConfig({
 });
 export var H2 = styled.h2.withConfig({
   displayName: "CommonElements__H2",
-  componentId: "sc-102d2aw-11"
+  componentId: "sc-102d2aw-10"
 })(["", " ", ""], function () {
   return css(["", ";"], h600);
 }, function (props) {
@@ -78,7 +74,7 @@ export var H2 = styled.h2.withConfig({
 });
 export var H3 = styled.h3.withConfig({
   displayName: "CommonElements__H3",
-  componentId: "sc-102d2aw-12"
+  componentId: "sc-102d2aw-11"
 })(["", " ", ""], function () {
   return css(["", ";"], h500);
 }, function (props) {
@@ -86,7 +82,7 @@ export var H3 = styled.h3.withConfig({
 });
 export var H4 = styled.h4.withConfig({
   displayName: "CommonElements__H4",
-  componentId: "sc-102d2aw-13"
+  componentId: "sc-102d2aw-12"
 })(["", " ", ""], function () {
   return css(["", ";"], h400);
 }, function (props) {
@@ -94,7 +90,7 @@ export var H4 = styled.h4.withConfig({
 });
 export var H5 = styled.h5.withConfig({
   displayName: "CommonElements__H5",
-  componentId: "sc-102d2aw-14"
+  componentId: "sc-102d2aw-13"
 })(["", " ", ""], function () {
   return css(["", ";"], h300);
 }, function (props) {
@@ -102,7 +98,7 @@ export var H5 = styled.h5.withConfig({
 });
 export var H6 = styled.h6.withConfig({
   displayName: "CommonElements__H6",
-  componentId: "sc-102d2aw-15"
+  componentId: "sc-102d2aw-14"
 })(["", " ", ""], function () {
   return css(["", ";"], h200);
 }, function (props) {
@@ -110,9 +106,13 @@ export var H6 = styled.h6.withConfig({
 });
 export var H7 = styled.h6.withConfig({
   displayName: "CommonElements__H7",
-  componentId: "sc-102d2aw-16"
+  componentId: "sc-102d2aw-15"
 })(["", " ", ""], function () {
   return css(["", ";"], h100);
 }, function (props) {
   return props.withoutMargin && css(["margin-bottom:0;"]);
-});
+});
+export var EllipsisText = styled.div.withConfig({
+  displayName: "CommonElements__EllipsisText",
+  componentId: "sc-102d2aw-16"
+})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;", ",", ",", ",", ",", ",", ",", "{display:inline;}"], H1, H2, H3, H4, H5, H6, H7);

package/dist/Title.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { Props } from './Title.types';
-declare const Title: React.FC<Props>;
+declare const Title: ({ level, withoutMargin, children, className, ellipsis }: Props) => JSX.Element;
 export default Title;

package/dist/Title.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { H1, H2, H3, H4, H5, H6, H7 } from './CommonElements';
+import { Ellipsis } from './Ellipsis';
 var StyledElements = {
   1: H1,
   2: H2,
@@ -16,15 +17,20 @@ var Title = function Title(_ref) {
       level = _ref$level === void 0 ? 1 : _ref$level,
       withoutMargin = _ref.withoutMargin,
       children = _ref.children,
-      className = _ref.className;
-  var TitleElement = React.useMemo(function () {
-    return StyledElements[level];
-  }, [level]);
+      className = _ref.className,
+      ellipsis = _ref.ellipsis;
+  var TitleElement = StyledElements[level];
   var elementClassName = classNames('ds-title', className);
-  return /*#__PURE__*/React.createElement(TitleElement, {
+  var content = /*#__PURE__*/React.createElement(TitleElement, {
     className: elementClassName,
     withoutMargin: Boolean(withoutMargin)
   }, children);
+
+  if (ellipsis === undefined) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(Ellipsis, ellipsis, content);
 };
 
 export default Title;

package/dist/Title.types.d.ts

@@ -1,5 +1,7 @@
 import { TitleProps } from 'antd/es/typography/Title';
-export interface Props extends Omit<TitleProps, 'level'> {
+import type { EllipsisProps } from './Ellipsis';
+export interface Props extends Omit<TitleProps, 'level' | 'ellipsis'> {
     level: 1 | 2 | 3 | 4 | 5 | 6 | 7;
     withoutMargin?: boolean;
+    ellipsis?: EllipsisProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-typography",
-  "version": "0.12.10",
+  "version": "0.13.0",
   "description": "Typography UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -44,5 +44,5 @@
   "devDependencies": {
     "enzyme": "3.11.0"
   },
-  "gitHead": "955a885f58b3fca4caa4f879deb147fe5b9dc6d8"
+  "gitHead": "f1f520c4c5ef9f90bacb5d5e0b2e778ceb8fdf79"
 }