flipper-ui 0.40.4 → 0.41.0

package/core/surfaces/expansion-panel/index.d.ts

@@ -18,6 +18,7 @@ export interface ExpansionPanelProps extends Omit<IPaperProps, 'onChange'> {
     editable?: boolean;
     editing?: boolean;
     role?: string;
+    'data-testid'?: string;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
     onEditClick?: () => void;

package/core/surfaces/expansion-panel/index.js

@@ -76,16 +76,18 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     style: summaryStyle,
     onClick: onClick
   }, /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, editable && /*#__PURE__*/_react["default"].createElement("div", {
-    role: "edit-box"
+    "data-testid": "edit-box"
   }, editing ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    role: "save-button",
+    "aria-label": "Salvar",
+    "data-testid": "save-button",
     padding: "2px",
     margin: "4px",
     onClick: handleSaveClick
   }, /*#__PURE__*/_react["default"].createElement(_mui.IconSave, {
     fontSize: "small"
   })) : /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    role: "save-button",
+    "aria-label": "Editar",
+    "data-testid": "save-button",
     padding: "2px",
     margin: "4px",
     onClick: handleEditClick

package/core/surfaces/step-card/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { CSSProperties, ChangeEvent, HTMLAttributes, SyntheticEvent } from 'react';
-import type Typography from '@/core/data-display/typography';
-import type MuiAccordionDetails from '@mui/material/Accordion';
-import type LinearProgress from '@mui/material/LinearProgress';
+import type { ITypographyProps } from '@/core/data-display/typography';
+import type { AccordionDetailsProps } from '@mui/material/AccordionDetails';
+import type { LinearProgressProps } from '@mui/material/LinearProgress';
 export interface IStepCardProps {
     expanded?: boolean;
     onChange?: (event?: ChangeEvent<Record<string, unknown>> | SyntheticEvent<Element, Event>, expanded?: boolean) => void;
@@ -22,11 +22,21 @@ export interface IStepCardProps {
         url?: string;
     }[];
     rootProps?: HTMLAttributes<HTMLDivElement>;
-    titleProps?: typeof Typography;
-    summaryProps?: typeof Typography;
-    expansionPanelDetailsProps?: typeof MuiAccordionDetails;
-    linearProgressBarProps?: typeof LinearProgress;
-    summaryLinearProgressBarProps?: typeof LinearProgress;
+    /**
+     * Merged over the title defaults — `variant='h5'`, `align='center'`.
+     * `variant` also sets the heading level, so `{ component: 'h2' }` keeps
+     * the `h5` type scale on an `<h2>` tag.
+     */
+    titleProps?: Partial<ITypographyProps>;
+    /**
+     * Merged over the subtitle defaults — `variant='h6'`, `align='center'`.
+     * Same heading-level behaviour as `titleProps`.
+     */
+    subTitleProps?: Partial<ITypographyProps>;
+    summaryProps?: Partial<ITypographyProps>;
+    expansionPanelDetailsProps?: Partial<AccordionDetailsProps>;
+    linearProgressBarProps?: Partial<LinearProgressProps>;
+    summaryLinearProgressBarProps?: Partial<LinearProgressProps>;
     expandable?: boolean;
     showIcon?: boolean;
     padding?: CSSProperties['padding'];
@@ -34,5 +44,5 @@ export interface IStepCardProps {
     showSubTitleSkeleton?: boolean;
     onStepUrlClick?: (url: string) => void;
 }
-declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, showSubTitleSkeleton, onChange }: IStepCardProps) => React.JSX.Element;
+declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, subTitleProps, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, showSubTitleSkeleton, onChange }: IStepCardProps) => React.JSX.Element;
 export default StepCard;

package/core/surfaces/step-card/index.js

@@ -25,6 +25,7 @@ var StepCard = function StepCard(_ref) {
     title = _ref.title,
     titleProps = _ref.titleProps,
     subTitle = _ref.subTitle,
+    subTitleProps = _ref.subTitleProps,
     image = _ref.image,
     _ref$showBottomPercen = _ref.showBottomPercentage,
     showBottomPercentage = _ref$showBottomPercen === void 0 ? true : _ref$showBottomPercen,
@@ -71,6 +72,7 @@ var StepCard = function StepCard(_ref) {
     subTitle: subTitle,
     percentage: percentage,
     titleProps: titleProps,
+    subTitleProps: subTitleProps,
     summaryProps: summaryProps,
     summaryLinearProgressBarProps: summaryLinearProgressBarProps,
     linearProgressBarProps: linearProgressBarProps

package/core/surfaces/step-card/step-card-details.js

@@ -35,6 +35,7 @@ var StepsList = function StepsList(_ref) {
       }
     }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       "data-testid": "step-card-button-".concat(index),
+      "aria-label": "Ajuda sobre ".concat(step.title),
       style: {
         backgroundColor: 'unset'
       },

package/core/surfaces/step-card/step-card-panel.d.ts

@@ -9,6 +9,7 @@ interface IStepCardPanelProps {
     summaryProps: IStepCardProps['summaryProps'];
     summaryLinearProgressBarProps: IStepCardProps['summaryLinearProgressBarProps'];
     titleProps: IStepCardProps['titleProps'];
+    subTitleProps: IStepCardProps['subTitleProps'];
     percentage: number;
     summary: string;
     remainingSteps: number;

package/core/surfaces/step-card/step-card-panel.js

@@ -30,6 +30,7 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     showIcon = props.showIcon,
     subTitle = props.subTitle,
     titleProps = props.titleProps,
+    subTitleProps = props.subTitleProps,
     fullWidth = props.fullWidth,
     padding = props.padding;
   return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
@@ -58,7 +59,7 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     sx: {
       color: gray[600]
     }
-  }, titleProps), subTitle))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }, subTitleProps), subTitle))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
   }, expandable ? /*#__PURE__*/_react["default"].createElement(_AccordionSummary["default"], {
     style: {

package/core/surfaces/step-card/step-card.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.40.4",
+    "version": "0.41.0",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",

package/theme/index.d.ts

@@ -1,2 +1,3 @@
+import './typography';
 export * from './theme';
 export { default as ThemeProviderFlipper } from './ThemeProvider';

package/theme/index.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "ThemeProviderFlipper", {
     return _ThemeProvider["default"];
   }
 });
+require("./typography");
 var _theme = require("./theme");
 Object.keys(_theme).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/theme/theme.d.ts

@@ -63,6 +63,12 @@ export declare const theme: {
             info: string;
         };
     };
+    fontSize: {
+        readonly micro: "0.625rem";
+        readonly footnote: "0.6875rem";
+        readonly dense: "0.8125rem";
+        readonly display: "1.75rem";
+    };
 };
 export declare const muiThemeOptions: {
     palette: {
@@ -82,4 +88,41 @@ export declare const muiThemeOptions: {
             primary: string;
         };
     };
+    typography: {
+        micro: {
+            fontFamily: string;
+            fontSize: "0.625rem";
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        footnote: {
+            fontFamily: string;
+            fontSize: "0.6875rem";
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        dense: {
+            fontFamily: string;
+            fontSize: "0.8125rem";
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        display: {
+            fontFamily: string;
+            fontSize: "1.75rem";
+            lineHeight: number;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        fontFamily: string;
+    };
+    components: {
+        MuiTypography: {
+            defaultProps: {
+                variantMapping: {
+                    readonly display: "p";
+                };
+            };
+        };
+    };
 };

package/theme/theme.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.theme = exports.muiThemeOptions = void 0;
 var _colors = _interopRequireDefault(require("./colors"));
+var _typography = require("./typography");
 var theme = exports.theme = {
-  colors: _colors["default"]
+  colors: _colors["default"],
+  fontSize: _typography.fontSize
 };
 var muiThemeOptions = exports.muiThemeOptions = {
   palette: {
@@ -26,5 +28,13 @@ var muiThemeOptions = exports.muiThemeOptions = {
     text: {
       primary: _colors["default"].gray[900]
     }
+  },
+  typography: _typography.typographyOptions,
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: _typography.variantMapping
+      }
+    }
   }
 };

package/theme/typography.d.ts

@@ -0,0 +1,96 @@
+import type { CSSProperties } from 'react';
+export declare const fontFamily = "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif";
+export declare const fontSize: {
+    readonly micro: "0.625rem";
+    readonly footnote: "0.6875rem";
+    readonly dense: "0.8125rem";
+    readonly display: "1.75rem";
+};
+/**
+ * NG size tokens. They live in the MUI theme, so they only reach the DOM when
+ * the theme is built with `muiThemeOptions` — either through
+ * `<ThemeProviderFlipper options={muiThemeOptions}>` or by merging the options
+ * into the consumer own `ThemeProvider`. The `Typography` component falls back
+ * to these values when the theme does not carry them, so the size is never
+ * lost — but a consumer theme can only override a token that it declares.
+ */
+export declare const typographyVariants: {
+    micro: {
+        fontFamily: string;
+        fontSize: "0.625rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    footnote: {
+        fontFamily: string;
+        fontSize: "0.6875rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    dense: {
+        fontFamily: string;
+        fontSize: "0.8125rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    display: {
+        fontFamily: string;
+        fontSize: "1.75rem";
+        lineHeight: number;
+        letterSpacing: string;
+        fontWeight: number;
+    };
+};
+export declare const variantMapping: {
+    readonly display: "p";
+};
+export declare const typographyOptions: {
+    micro: {
+        fontFamily: string;
+        fontSize: "0.625rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    footnote: {
+        fontFamily: string;
+        fontSize: "0.6875rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    dense: {
+        fontFamily: string;
+        fontSize: "0.8125rem";
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    display: {
+        fontFamily: string;
+        fontSize: "1.75rem";
+        lineHeight: number;
+        letterSpacing: string;
+        fontWeight: number;
+    };
+    fontFamily: string;
+};
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        micro: CSSProperties;
+        footnote: CSSProperties;
+        dense: CSSProperties;
+        display: CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        micro?: CSSProperties;
+        footnote?: CSSProperties;
+        dense?: CSSProperties;
+        display?: CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        micro: true;
+        footnote: true;
+        dense: true;
+        display: true;
+    }
+}

package/theme/typography.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantMapping = exports.typographyVariants = exports.typographyOptions = exports.fontSize = exports.fontFamily = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var fontFamily = exports.fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+var fontSize = exports.fontSize = {
+  micro: '0.625rem',
+  footnote: '0.6875rem',
+  dense: '0.8125rem',
+  display: '1.75rem'
+};
+
+/**
+ * NG size tokens. They live in the MUI theme, so they only reach the DOM when
+ * the theme is built with `muiThemeOptions` — either through
+ * `<ThemeProviderFlipper options={muiThemeOptions}>` or by merging the options
+ * into the consumer own `ThemeProvider`. The `Typography` component falls back
+ * to these values when the theme does not carry them, so the size is never
+ * lost — but a consumer theme can only override a token that it declares.
+ */
+var typographyVariants = exports.typographyVariants = {
+  micro: {
+    fontFamily: fontFamily,
+    fontSize: fontSize.micro,
+    lineHeight: 1.6,
+    letterSpacing: '0.04em'
+  },
+  footnote: {
+    fontFamily: fontFamily,
+    fontSize: fontSize.footnote,
+    lineHeight: 1.55,
+    letterSpacing: '0.03em'
+  },
+  dense: {
+    fontFamily: fontFamily,
+    fontSize: fontSize.dense,
+    lineHeight: 1.45,
+    letterSpacing: '0.01em'
+  },
+  display: {
+    fontFamily: fontFamily,
+    fontSize: fontSize.display,
+    lineHeight: 1.2,
+    letterSpacing: 'normal',
+    fontWeight: 500
+  }
+};
+var variantMapping = exports.variantMapping = {
+  display: 'p'
+};
+var typographyOptions = exports.typographyOptions = _objectSpread({
+  fontFamily: fontFamily
+}, typographyVariants);