plataforma-fundacao-componentes 2.25.3 → 2.25.4

package/dist/components/title/Title.d.ts

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import './Title.scss';
 interface TitleProps {
     children: any;
     showBackButton?: boolean;
     onBackClick?: (event?: any) => void;
-    rightElement?: React.ReactNode;
+    oneLineTitle?: boolean;
+    rightElement?: ReactNode;
+    hideRightElementXS?: boolean;
+    align?: CSSProperties['alignItems'];
+    flexWrap?: CSSProperties['flexWrap'];
 }
 declare function Title(props: TitleProps): React.JSX.Element;
 declare namespace Title {

package/dist/components/title/Title.stories.d.ts

@@ -1,23 +1,45 @@
-declare namespace _default {
-    export const title: string;
-    export { Title as component };
-}
+import React, { ComponentProps } from 'react';
+import Title from './Title';
+declare const _default: {
+    title: string;
+    component: typeof Title;
+    argTypes: {
+        align: {
+            options: string[];
+            type: string;
+        };
+    };
+};
 export default _default;
-export function FirstExample(args: any): React.JSX.Element;
-export namespace FirstExample {
-    export namespace args {
-        export const children: string;
-    }
-}
-export function BackExample(args: any): React.JSX.Element;
-export namespace BackExample {
-    export namespace args_1 {
-        const children_1: string;
-        export { children_1 as children };
-        export const showBackButton: boolean;
-    }
-    export { args_1 as args };
-}
-export function RightElementExample(args: any): React.JSX.Element;
-import Title from "./Title";
-import React from "react";
+export declare const FirstExample: {
+    (args: ComponentProps<typeof Title>): React.JSX.Element;
+    args: {
+        children: string;
+    };
+};
+export declare const BackExample: {
+    (args: ComponentProps<typeof Title>): React.JSX.Element;
+    args: {
+        children: string;
+        showBackButton: boolean;
+    };
+};
+export declare const RightElementExample: {
+    (args: ComponentProps<typeof Title>): React.JSX.Element;
+    args: {
+        showBackButton: boolean;
+        oneLineTitle: boolean;
+        hideRightElementsXS: boolean;
+        children: string;
+    };
+};
+export declare const RightElementExampleTwoElements: {
+    (args: ComponentProps<typeof Title>): React.JSX.Element;
+    args: {
+        showBackButton: boolean;
+        oneLineTitle: boolean;
+        hideRightElementXS: boolean;
+        align: string;
+        children: string;
+    };
+};

package/dist/index.css

@@ -7468,41 +7468,47 @@ nav.component-tabs {
   width: 100%;
   position: relative;
   display: flex;
-  align-items: center;
-  justify-content: space-between; }
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid; }
   .component-title .component-title-wrapper {
     display: flex;
     align-items: center;
-    flex: 1 1 100%;
-    min-width: 0; }
-  .component-title .component-title-icon {
-    display: flex;
-    align-items: center;
-    margin-right: 12px;
-    margin-top: 2px; }
-  .component-title .component-title-text {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    color: #323c32;
-    font-size: 26px;
-    font-weight: 700; }
-    @media screen and (max-width: 767.98px) {
-      .component-title .component-title-text {
-        font-size: 22px; } }
-    @media screen and (max-width: 575.98px) {
-      .component-title .component-title-text {
-        font-size: 20px; } }
-    .component-title .component-title-text.ellipsis {
+    justify-content: flex-start;
+    max-width: 100%;
+    flex: 1 4 auto; }
+    .component-title .component-title-wrapper .component-title-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      margin-top: 2px; }
+    .component-title .component-title-wrapper .component-title-text {
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+      color: #323c32;
+      font-size: 26px;
+      font-weight: 700;
       overflow: hidden;
-      text-overflow: ellipsis;
-      width: calc(100% - 48px);
-      white-space: nowrap; }
+      max-width: 100%;
+      text-overflow: ellipsis; }
+      .component-title .component-title-wrapper .component-title-text.one-line-title {
+        white-space: nowrap; }
       @media screen and (max-width: 767.98px) {
-        .component-title .component-title-text.ellipsis {
-          white-space: pre-wrap; } }
+        .component-title .component-title-wrapper .component-title-text {
+          font-size: 22px; } }
+      @media screen and (max-width: 575.98px) {
+        .component-title .component-title-wrapper .component-title-text {
+          font-size: 20px; } }
+  .component-title .component-title-right-element {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-end; }
   @media screen and (max-width: 575.98px) {
-    .component-title .component-title-right-element {
+    .component-title.hide-right-xs .component-title-right-element {
       display: none;
       visibility: hidden; } }
 

package/dist/index.js

@@ -11612,7 +11612,11 @@ TextEditor.defaultProps = {
 var rootClassName$2F = 'component-title';
 function Title(props) {
   return React$1__default.createElement("div", {
-    className: rootClassName$2F
+    className: getMergedClassNames([rootClassName$2F, props.hideRightElementXS ? 'hide-right-xs' : '']),
+    style: {
+      alignItems: props.align,
+      flexWrap: props.flexWrap
+    }
   }, React$1__default.createElement("div", {
     className: rootClassName$2F + "-wrapper"
   }, props.showBackButton ? React$1__default.createElement("div", {
@@ -11621,7 +11625,7 @@ function Title(props) {
     icon: React$1__default.createElement(ArrowLeftIcon, null),
     onClick: props.onBackClick
   })) : undefined, React$1__default.createElement("div", {
-    className: getMergedClassNames([rootClassName$2F + "-text", props.rightElement ? 'ellipsis' : ''])
+    className: getMergedClassNames([rootClassName$2F + "-text", props.oneLineTitle ? 'one-line-title' : ''])
   }, props.children)), props.rightElement ? React$1__default.createElement("div", {
     className: rootClassName$2F + "-right-element"
   }, props.rightElement) : undefined);