flipper-ui 0.31.1 → 0.31.4

package/core/surfaces/content/content.stories.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../../types").DefaultProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").DefaultProps>;
 export default _default;
 export declare const Default: any;

package/core/surfaces/content/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-export declare const Content: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
+declare const Content: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
 export default Content;

package/core/surfaces/content/index.js

@@ -4,28 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Content = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("./styles");
 var _excluded = ["children", "padding", "margin", "style"];
-var _templateObject;
-var StyledContent = _styledComponents["default"].main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    transition: all 500ms ease;\n"])));
-var ContainerStyles = {
-  flex: 1,
-  transition: 'all 500ms ease'
-};
-var Content = exports.Content = function Content(_ref) {
+var Content = function Content(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var componentStyle = Object.assign({}, ContainerStyles, padding, margin, style);
-  return /*#__PURE__*/_react["default"].createElement(StyledContent, (0, _extends2["default"])({}, otherProps, {
+  var componentStyle = Object.assign({}, _styles.ContainerStyles, padding, margin, style);
+  return /*#__PURE__*/_react["default"].createElement(_styles.StyledContent, (0, _extends2["default"])({}, otherProps, {
     style: componentStyle
   }), children);
 };

package/core/surfaces/content/styles.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare const StyledContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const ContainerStyles: CSSProperties;

package/core/surfaces/content/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContent = exports.ContainerStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var StyledContent = exports.StyledContent = _styledComponents["default"].main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    transition: all 500ms ease;\n"])));
+var ContainerStyles = exports.ContainerStyles = {
+  flex: 1,
+  transition: 'all 500ms ease'
+};

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

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").ExpansionPanelProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").ExpansionPanelProps>;
 export default _default;
 export declare const Default: any;
 export declare const Disabled: any;

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

@@ -25,5 +25,5 @@ export interface ExpansionPanelProps extends Omit<PaperProps, 'onChange'> {
     onChange?: (event?: ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
-export declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
+declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
 export default ExpansionPanel;

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

@@ -4,24 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ExpansionPanel = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
 var _AccordionActions = _interopRequireDefault(require("@material-ui/core/AccordionActions"));
 var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
 var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _textField = require("../../inputs/text-field");
+var _styles = require("./styles");
 var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "onClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
-var _templateObject;
 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 ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var ExpansionPanel = exports.ExpansionPanel = function ExpansionPanel(_ref) {
+var ExpansionPanel = function ExpansionPanel(_ref) {
   var actions = _ref.actions,
     details = _ref.details,
     expandIcon = _ref.expandIcon,
@@ -95,7 +92,7 @@ var ExpansionPanel = exports.ExpansionPanel = function ExpansionPanel(_ref) {
     expandIcon: expandIcon,
     style: summaryStyle,
     onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
     style: detailsStyle
   }, details), actions && /*#__PURE__*/_react["default"].createElement(_AccordionActions["default"], {
     style: actionsStyle

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ExpansionPanelHeaderWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpansionPanelHeaderWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var ExpansionPanelHeaderWrapper = exports.ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));

package/core/surfaces/header/header.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").HeaderProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").HeaderProps>;
 export default _default;
 export declare const Default: any;
 export declare const Primary: any;

package/core/surfaces/header/index.d.ts

@@ -5,5 +5,5 @@ export interface HeaderProps extends Omit<PaperProps, 'classes'>, AppBarProps {
     position?: 'absolute' | 'fixed' | 'static' | 'sticky';
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
 }
-export declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => React.JSX.Element;
 export default Header;

package/core/surfaces/header/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Header = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -14,7 +14,7 @@ var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
 var _excluded = ["children", "padding", "margin", "style", "elevation"];
 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 Header = exports.Header = function Header(_ref) {
+var Header = function Header(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

package/core/surfaces/paper/paper.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").PaperProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").PaperProps>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Square: any;

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

@@ -1,241 +1,37 @@
 import React from 'react';
 import type { CSSProperties, ChangeEvent, HTMLAttributes } from 'react';
-import type { Typography } from '@/core/data-display/typography';
+import type Typography from '@/core/data-display/typography';
 import type { LinearProgress, AccordionDetails as MuiAccordionDetails } from '@material-ui/core';
-/**
- * Props for the StepCard component
- *
- * @interface IStepCardProps
- */
 export interface IStepCardProps {
-    /**
-     * Whether the step card expansion panel is initially expanded or not
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default undefined
-     */
     expanded?: boolean;
-    /**
-     * Callback fired when the expansion state changes
-     * @type {(event: ChangeEvent<{}>, expanded: boolean) => void}
-     * @memberof IStepCardProps
-     * @default undefined
-     * @example
-     * const handleChange = (event: ChangeEvent<{}>, expanded: boolean) => {
-     *    setExpanded(expanded)
-     * }
-     * <StepCard onChange={handleChange} />
-     * @example
-     * <StepCard onChange={(event, expanded) => setExpanded(expanded)} />
-     */
     onChange?: (event: ChangeEvent<Record<string, unknown>>, expanded: boolean) => void;
-    /**
-     * Whether the step card is full width
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default false
-     */
     fullWidth?: boolean;
-    /**
-     * Whether the step card are loading
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default false
-     */
     loading?: boolean;
-    /**
-     * The percentage of the progress bar
-     * @type {number}
-     * @memberof IStepCardProps
-     */
     percentage: number;
-    /**
-     * Whether to show the percentage on the expansion panel summary
-     * Defaults to true
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default true
-     */
     showBottomPercentage?: boolean;
-    /**
-     * A text to be displayed on the expansion panel summary
-     *
-     * @type {string}
-     * @memberof IStepCardProps
-     * @example using literals
-     * summary: '%i items remaining - %i minute(s)'
-     *
-     * @example using string
-     * summary: 'Your progress'
-     */
     summary: string;
-    /**
-     * The title of the step card
-     *
-     * @type {string}
-     * @memberof IStepCardProps
-     */
     title: string;
-    /**
-     * The subtitle of the step card title
-     *
-     * @type {string}
-     * @memberof IStepCardProps
-     */
     subTitle?: string;
-    /**
-     * The image to be displayed on the expansion panel details
-     * Accepts a string or a JSX.Element
-     *
-     * @type {string | JSX.Element}
-     * @example
-     * <StepCard image={<img src="https://picsum.photos/200" />} />
-     * @example
-     * <StepCard image="https://picsum.photos/200" />
-     * @example
-     * <StepCard image={<Image />} />
-     * @memberof IStepCardProps
-     */
     image?: string | JSX.Element;
-    /**
-     * The number of remaining steps
-     * @type {number}
-     * @memberof IStepCardProps
-     */
     remainingSteps?: number;
-    /**
-     * The time in seconds to be displayed on the expansion panel summary
-     * @type {number}
-     * @memberof IStepCardProps
-     */
     time?: number;
-    /**
-     * An array of steps, each with a title, a done flag and an optional url
-     *
-     * @type [{
-     *         title: string;
-     *         done: boolean;
-     *         url?: string;
-     *     }]
-     * @memberof IStepCardProps
-     */
     steps?: {
         title: string;
         done: boolean;
         url?: string;
     }[];
-    /**
-     * Props to be passed to the root element
-     *
-     * @type {(HTMLAttributes<HTMLDivElement> | undefined)}
-     * @memberof IStepCardProps
-     */
     rootProps?: HTMLAttributes<HTMLDivElement>;
-    /**
-     * Props to be passed to the title typography
-     *
-     * @type {(typeof Typography | undefined)}
-     * @memberof IStepCardProps
-     */
     titleProps?: typeof Typography;
-    /**
-     * Props to be passed to the summary typography
-     *
-     * @type {(typeof Typography | undefined)}
-     * @memberof IStepCardProps
-     */
     summaryProps?: typeof Typography;
-    /**
-     * Props to be passed to the expansion panel details
-     * @type {(typeof MuiExpansionPanel | undefined)}
-     * @memberof IStepCardProps
-     */
     expansionPanelDetailsProps?: typeof MuiAccordionDetails;
-    /**
-     * Props to be passed to the linear progress bar
-     * @type {(typeof LinearProgress | undefined)}
-     * @memberof IStepCardProps
-     */
     linearProgressBarProps?: typeof LinearProgress;
-    /**
-     * Props to be passed to the expansion panel summary linear progress bar
-     * @type {(typeof LinearProgress | undefined)}
-     * @memberof IStepCardProps
-     */
     summaryLinearProgressBarProps?: typeof LinearProgress;
-    /**
-     * Whether the expansion panel is expandable
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default true
-     */
     expandable?: boolean;
-    /**
-     * Whether to show the icon on the expansion panel summary
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default true
-     */
     showIcon?: boolean;
-    /**
-     * Padding applied to the root element
-     * @type {CSSProperties['padding']}
-     * @memberof IStepCardProps
-     */
     padding?: CSSProperties['padding'];
-    /**
-     * Margin applied to the root element
-     * @type {CSSProperties['margin']}
-     * @memberof IStepCardProps
-     */
     margin?: CSSProperties['margin'];
-    /**
-     * Whether to show the sub title skeleton
-     * @type {boolean}
-     * @memberof IStepCardProps
-     * @default false
-     */
     showSubTitleSkeleton?: boolean;
-    /**
-     * Callback to be called when the user clicks on a step url
-     * @memberof IStepCardProps
-     * @default undefined
-     * @type {(url: string) => void}
-     */
     onStepUrlClick?: (url: string) => void;
 }
-/**
- * StepCard is a reusable component that displays a card with a title, a summary,
- * an expandable panel, and a progress bar.
- * The expandable panel displays a list of steps, each with a title, a done flag,
- * and an optional url.
- *
- * @Storybook https://flipper-ui.ngi.com.br/?path=/story/stepcard--default
- *
- * @Source
- * https://github.com/nginformatica/flipper-ui/blob/master/src/core/StepCard
- *
- * @example
- * <StepCard
- *   showBottomPercentage={true}
- *   summary="50% Complete"
- *   title="Step 1"
- *   subTitle="Subtitle for step 1"
- *   image="https://via.placeholder.com/150"
- *   totalSteps={4}
- *   doneSteps={2}
- *   steps={[
- *     { title: "Step 1-1", done: true },
- *     { title: "Step 1-2", done: true, url: "/step-1-2" },
- *     { title: "Step 1-3", done: false },
- *     { title: "Step 1-4", done: false }
- *   ]}
- *   rootProps={{ className: "my-custom-class" }}
- *   titleProps={{ variant: "h3", color: "primary" }}
- *   summaryProps={{ variant: "body2", color: "secondary" }}
- *   expandable={true}
- *   defaultExpanded={false}
- * />
- */
-export 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, 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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.StepCard = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
@@ -12,46 +12,7 @@ var _stepCardDetails = require("./step-card-details");
 var _stepCardPanel = require("./step-card-panel");
 var _stepCardSkeleton = _interopRequireDefault(require("./step-card-skeleton"));
 var _styles = require("./styles");
-/**
- * Props for the StepCard component
- *
- * @interface IStepCardProps
- */
-
-/**
- * StepCard is a reusable component that displays a card with a title, a summary,
- * an expandable panel, and a progress bar.
- * The expandable panel displays a list of steps, each with a title, a done flag,
- * and an optional url.
- *
- * @Storybook https://flipper-ui.ngi.com.br/?path=/story/stepcard--default
- *
- * @Source
- * https://github.com/nginformatica/flipper-ui/blob/master/src/core/StepCard
- *
- * @example
- * <StepCard
- *   showBottomPercentage={true}
- *   summary="50% Complete"
- *   title="Step 1"
- *   subTitle="Subtitle for step 1"
- *   image="https://via.placeholder.com/150"
- *   totalSteps={4}
- *   doneSteps={2}
- *   steps={[
- *     { title: "Step 1-1", done: true },
- *     { title: "Step 1-2", done: true, url: "/step-1-2" },
- *     { title: "Step 1-3", done: false },
- *     { title: "Step 1-4", done: false }
- *   ]}
- *   rootProps={{ className: "my-custom-class" }}
- *   titleProps={{ variant: "h3", color: "primary" }}
- *   summaryProps={{ variant: "body2", color: "secondary" }}
- *   expandable={true}
- *   defaultExpanded={false}
- * />
- */
-var StepCard = exports.StepCard = function StepCard(_ref) {
+var StepCard = function StepCard(_ref) {
   var expanded = _ref.expanded,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,

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

@@ -9,55 +9,54 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
-var _typography = require("../../data-display/typography");
-var _iconButton = require("../../inputs/icon-button");
-var _icons = require("../../../icons");
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _styles = require("./styles");
+var _icons = require("../../../icons");
 var _theme = require("../../../theme");
 var _theme$colors = _theme.theme.colors,
   feedback = _theme$colors.feedback,
   grays = _theme$colors.grays;
-var DONE_COLOR = feedback.success;
-var UNDONE_COLOR = grays.g3;
-var UNDONE_FONT_COLOR = grays.g2;
+var StepsList = function StepsList(_ref) {
+  var steps = _ref.steps,
+    onStepUrlClick = _ref.onStepUrlClick;
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
+    var handleOnClickStepUrl = function handleOnClickStepUrl() {
+      if (onStepUrlClick && step.url) {
+        onStepUrlClick(step.url);
+      }
+    };
+    return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
+      style: {
+        color: step.done ? feedback.success : grays.g3
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "body1",
+      style: {
+        color: grays.g2,
+        fontWeight: 600
+      }
+    }, 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),
+      style: {
+        backgroundColor: 'unset'
+      },
+      onClick: handleOnClickStepUrl
+    }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
+      fontSize: "small",
+      style: {
+        margin: '0px'
+      }
+    }))));
+  }));
+};
 var StepCardDetails = exports.StepCardDetails = function StepCardDetails(props) {
   var steps = props.steps,
     onStepUrlClick = props.onStepUrlClick,
     image = props.image,
     expansionPanelDetailsProps = props.expansionPanelDetailsProps;
-  var StepsList = function StepsList() {
-    return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
-      var handleOnClickStepUrl = function handleOnClickStepUrl() {
-        if (onStepUrlClick && step.url) {
-          onStepUrlClick(step.url);
-        }
-      };
-      return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
-        key: index
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
-        style: {
-          color: step.done ? DONE_COLOR : UNDONE_COLOR
-        }
-      }), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
-        variant: "body1",
-        style: {
-          color: UNDONE_FONT_COLOR,
-          fontWeight: 600
-        }
-      }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
-        "data-testid": "step-card-button-".concat(index),
-        style: {
-          backgroundColor: 'unset'
-        },
-        onClick: handleOnClickStepUrl
-      }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
-        fontSize: "small",
-        style: {
-          margin: '0px'
-        }
-      }))));
-    }));
-  };
   return /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], (0, _extends2["default"])({
     style: {
       display: 'flex',
@@ -65,7 +64,10 @@ var StepCardDetails = exports.StepCardDetails = function StepCardDetails(props)
     }
   }, expansionPanelDetailsProps), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
-  }, /*#__PURE__*/_react["default"].createElement(StepsList, null)), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }, /*#__PURE__*/_react["default"].createElement(StepsList, {
+    steps: steps,
+    onStepUrlClick: onStepUrlClick
+  })), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
   }, typeof image === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
     src: image,