@atlaskit/progress-tracker 8.0.3 → 8.2.0

package/dist/es2019/ProgressTrackerStage/index.js

@@ -1,143 +0,0 @@
-import React, { PureComponent } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import * as colors from '@atlaskit/theme/colors';
-import { ProgressTrackerListItem, ProgressTrackerStageBar, ProgressTrackerStageContainer, ProgressTrackerStageMarker, ProgressTrackerStageTitle } from './styled';
-const semibold = '600';
-const regular = '400';
-
-const getMarkerColor = status => {
-  switch (status) {
-    case 'unvisited':
-      return colors.N70;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return colors.B300;
-
-    default:
-      return;
-  }
-};
-
-const getTextColor = status => {
-  switch (status) {
-    case 'unvisited':
-      return colors.N300;
-
-    case 'current':
-      return colors.B300;
-
-    case 'visited':
-      return colors.N800;
-
-    case 'disabled':
-      return colors.N70;
-
-    default:
-      return;
-  }
-};
-
-const getFontWeight = status => {
-  switch (status) {
-    case 'unvisited':
-      return regular;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return semibold;
-
-    default:
-      return;
-  }
-};
-
-export default class ProgressTrackerStage extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      transitioning: false,
-      oldMarkerColor: getMarkerColor(this.props.item.status),
-      oldPercentageComplete: 0
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    this.setState({ ...this.state,
-      transitioning: true
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps() {
-    this.setState({ ...this.state,
-      transitioning: true
-    });
-  }
-
-  shouldShowLink() {
-    return this.props.item.status === 'visited' && !this.props.item.noLink;
-  }
-
-  render() {
-    const {
-      item,
-      render,
-      transitionDelay,
-      transitionSpeed,
-      transitionEasing
-    } = this.props;
-
-    const onEntered = () => {
-      this.setState({
-        transitioning: false,
-        oldMarkerColor: getMarkerColor(item.status),
-        oldPercentageComplete: item.percentageComplete
-      });
-    };
-
-    const ariaCurrent = item.status === 'current' ? 'step' : 'false';
-    return /*#__PURE__*/React.createElement(ProgressTrackerListItem, {
-      "aria-current": ariaCurrent
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageContainer, null, /*#__PURE__*/React.createElement(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageMarker, {
-      oldMarkerColor: this.state.oldMarkerColor,
-      color: getMarkerColor(item.status),
-      transitionSpeed: transitionSpeed,
-      transitionDelay: transitionDelay,
-      transitionEasing: transitionEasing
-    })), /*#__PURE__*/React.createElement(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageBar, {
-      oldPercentageComplete: this.state.oldPercentageComplete,
-      percentageComplete: item.percentageComplete,
-      transitionSpeed: transitionSpeed,
-      transitionDelay: transitionDelay,
-      transitionEasing: transitionEasing
-    })), /*#__PURE__*/React.createElement(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageTitle, {
-      color: getTextColor(item.status),
-      fontweight: getFontWeight(item.status),
-      transitionSpeed: transitionSpeed,
-      transitionDelay: transitionDelay
-    }, this.shouldShowLink() ? render.link({
-      item
-    }) : item.label))));
-  }
-
-}

package/dist/es2019/ProgressTrackerStage/styled.js

@@ -1,140 +0,0 @@
-import styled from 'styled-components';
-import { B300 } from '@atlaskit/theme/colors';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
-import { spacing } from '../constants';
-const halfGridSize = gridSize() / 2;
-const progressBarHeight = gridSize();
-const labelTopSpacing = gridSize() + 20; // Labels sit 20px from bottom of progress bar.
-
-export const ProgressTrackerStageContainer = styled.div`
-  position: relative;
-  width: 100%;
-`;
-export const ProgressTrackerStageMarker = styled.div`
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -${labelTopSpacing}px);
-  background-color: ${props => props.color};
-  height: ${progressBarHeight}px;
-  width: ${progressBarHeight}px;
-  border-radius: ${progressBarHeight}px;
-
-  &.fade-appear {
-    opacity: 0.01;
-  }
-
-  &.fade-appear.fade-appear-active {
-    opacity: 1;
-    transition: opacity ${props => props.transitionSpeed}ms
-      ${props => props.transitionEasing};
-    transition-delay: ${props => props.transitionDelay}ms;
-  }
-
-  &.fade-enter {
-    background-color: ${props => props.oldMarkerColor};
-  }
-
-  &.fade-enter.fade-enter-active {
-    background-color: ${props => props.color};
-    transition: background-color ${props => props.transitionSpeed}ms
-      ${props => props.transitionEasing};
-    transition-delay: ${props => props.transitionDelay}ms;
-  }
-`;
-export const ProgressTrackerStageBar = styled.div`
-  position: absolute;
-  left: 50%;
-  transform: translate(0, -${labelTopSpacing}px);
-  background-color: ${B300};
-  height: ${progressBarHeight}px;
-  width: calc(
-    ${props => props.percentageComplete}% +
-      ${props => props.percentageComplete} / 100 *
-      ${props => halfGridSize + spacing[props.theme.spacing]}px
-  ); /* account for spacing and radius of marker */
-  border-top-right-radius: ${gridSize}px;
-  border-bottom-right-radius: ${gridSize}px;
-
-  &.fade-appear {
-    width: calc(
-      ${props => props.oldPercentageComplete}% +
-        ${props => props.oldPercentageComplete} / 100 *
-        ${props => halfGridSize + spacing[props.theme.spacing]}px
-    ); /* account for spacing and radius of marker */
-  }
-
-  &.fade-appear.fade-appear-active {
-    width: calc(
-      ${props => props.percentageComplete}% +
-        ${props => props.percentageComplete} / 100 *
-        ${props => halfGridSize + spacing[props.theme.spacing]}px
-    ); /* account for spacing and radius of marker */
-    transition: width ${props => props.transitionSpeed}ms
-      ${props => props.transitionEasing};
-    transition-delay: ${props => props.transitionDelay}ms;
-  }
-
-  &.fade-enter {
-    width: calc(
-      ${props => props.oldPercentageComplete}% +
-        ${props => props.oldPercentageComplete} / 100 *
-        ${props => halfGridSize + spacing[props.theme.spacing]}px
-    ); /* account for spacing and radius of marker */
-  }
-
-  &.fade-enter.fade-enter-active {
-    width: calc(
-      ${props => props.percentageComplete}% +
-        ${props => props.percentageComplete} / 100 *
-        ${props => halfGridSize + spacing[props.theme.spacing]}px
-    ); /* account for spacing and radius of marker */
-    transition: width ${props => props.transitionSpeed}ms
-      ${props => props.transitionEasing};
-    transition-delay: ${props => props.transitionDelay}ms;
-  }
-`;
-export const ProgressTrackerStageTitle = styled.div`
-  font-weight: ${props => props.fontweight};
-  line-height: 16px;
-  color: ${props => props.color};
-  text-align: center;
-  font-size: ${fontSize}px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: ${labelTopSpacing}px;
-
-  &.fade-appear {
-    opacity: 0.01;
-  }
-
-  &.fade-appear.fade-appear-active {
-    opacity: 1;
-    transition: opacity ${props => props.transitionSpeed}ms
-      cubic-bezier(0.2, 0, 0, 1);
-  }
-`;
-
-// Copied styles of GridColumn from @atlaskit/page
-const availableColumns = props => props.theme.columns;
-
-const columns = props => Math.min(availableColumns(props), 2);
-
-const gridSpacing = props => spacing[props.theme.spacing];
-
-const getMaxWidthColumnRatio = props => {
-  if (columns(props) >= availableColumns(props)) {
-    return '100%';
-  }
-
-  return `99.9999% / ${availableColumns(props)} * ${columns(props)}`;
-};
-
-export const ProgressTrackerListItem = styled.li`
-  flex-grow: 1;
-  flex-shrink: 0;
-  margin: 0 ${props => spacing[props.theme.spacing] / 2}px;
-  word-wrap: break-word;
-
-  max-width: calc(${getMaxWidthColumnRatio} - ${gridSpacing}px);
-  min-width: calc(99.9999% / ${availableColumns} - ${gridSpacing}px);
-`;

package/dist/esm/ProgressTracker/styled.js

@@ -1,7 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-export var ProgressTrackerContainer = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n\n  && {\n    margin-top: 40px;\n  }\n\n  list-style-type: none;\n  padding: 0px;\n"])));
-export default ProgressTrackerContainer;

package/dist/esm/ProgressTrackerLink/index.js

@@ -1,42 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { PureComponent } from 'react';
-import { Link } from './styled';
-
-var ProgressTrackerLink = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ProgressTrackerLink, _PureComponent);
-
-  var _super = _createSuper(ProgressTrackerLink);
-
-  function ProgressTrackerLink() {
-    _classCallCheck(this, ProgressTrackerLink);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ProgressTrackerLink, [{
-    key: "render",
-    value: function render() {
-      var _this$props$item = this.props.item,
-          href = _this$props$item.href,
-          onClick = _this$props$item.onClick,
-          label = _this$props$item.label;
-      return /*#__PURE__*/React.createElement(Link, {
-        href: href,
-        onClick: onClick
-      }, label);
-    }
-  }]);
-
-  return ProgressTrackerLink;
-}(PureComponent);
-
-export { ProgressTrackerLink as default };

package/dist/esm/ProgressTrackerLink/styled.js

@@ -1,8 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { N800 } from '@atlaskit/theme/colors';
-export var Link = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n"])), N800);
-export default Link;

package/dist/esm/ProgressTrackerStage/styled.js

@@ -1,107 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-import styled from 'styled-components';
-import { B300 } from '@atlaskit/theme/colors';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
-import { spacing } from '../constants';
-var halfGridSize = gridSize() / 2;
-var progressBarHeight = gridSize();
-var labelTopSpacing = gridSize() + 20; // Labels sit 20px from bottom of progress bar.
-
-export var ProgressTrackerStageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n"])));
-export var ProgressTrackerStageMarker = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -", "px);\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  border-radius: ", "px;\n\n  &.fade-appear {\n    opacity: 0.01;\n  }\n\n  &.fade-appear.fade-appear-active {\n    opacity: 1;\n    transition: opacity ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n\n  &.fade-enter {\n    background-color: ", ";\n  }\n\n  &.fade-enter.fade-enter-active {\n    background-color: ", ";\n    transition: background-color ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n"])), labelTopSpacing, function (props) {
-  return props.color;
-}, progressBarHeight, progressBarHeight, progressBarHeight, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-}, function (props) {
-  return props.oldMarkerColor;
-}, function (props) {
-  return props.color;
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-});
-export var ProgressTrackerStageBar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 50%;\n  transform: translate(0, -", "px);\n  background-color: ", ";\n  height: ", "px;\n  width: calc(\n    ", "% +\n      ", " / 100 *\n      ", "px\n  ); /* account for spacing and radius of marker */\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n\n  &.fade-appear {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n  }\n\n  &.fade-appear.fade-appear-active {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n    transition: width ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n\n  &.fade-enter {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n  }\n\n  &.fade-enter.fade-enter-active {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n    transition: width ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n"])), labelTopSpacing, B300, progressBarHeight, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + spacing[props.theme.spacing];
-}, gridSize, gridSize, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return halfGridSize + spacing[props.theme.spacing];
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + spacing[props.theme.spacing];
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return halfGridSize + spacing[props.theme.spacing];
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + spacing[props.theme.spacing];
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-});
-export var ProgressTrackerStageTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  line-height: 16px;\n  color: ", ";\n  text-align: center;\n  font-size: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: ", "px;\n\n  &.fade-appear {\n    opacity: 0.01;\n  }\n\n  &.fade-appear.fade-appear-active {\n    opacity: 1;\n    transition: opacity ", "ms\n      cubic-bezier(0.2, 0, 0, 1);\n  }\n"])), function (props) {
-  return props.fontweight;
-}, function (props) {
-  return props.color;
-}, fontSize, labelTopSpacing, function (props) {
-  return props.transitionSpeed;
-});
-
-// Copied styles of GridColumn from @atlaskit/page
-var availableColumns = function availableColumns(props) {
-  return props.theme.columns;
-};
-
-var columns = function columns(props) {
-  return Math.min(availableColumns(props), 2);
-};
-
-var gridSpacing = function gridSpacing(props) {
-  return spacing[props.theme.spacing];
-};
-
-var getMaxWidthColumnRatio = function getMaxWidthColumnRatio(props) {
-  if (columns(props) >= availableColumns(props)) {
-    return '100%';
-  }
-
-  return "99.9999% / ".concat(availableColumns(props), " * ").concat(columns(props));
-};
-
-export var ProgressTrackerListItem = styled.li(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  margin: 0 ", "px;\n  word-wrap: break-word;\n\n  max-width: calc(", " - ", "px);\n  min-width: calc(99.9999% / ", " - ", "px);\n"])), function (props) {
-  return spacing[props.theme.spacing] / 2;
-}, getMaxWidthColumnRatio, gridSpacing, availableColumns, gridSpacing);

package/dist/types/ProgressTracker/styled.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const ProgressTrackerContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>;
-export default ProgressTrackerContainer;

package/dist/types/ProgressTrackerLink/index.d.ts

@@ -1,10 +0,0 @@
-import { PureComponent } from 'react';
-import { Stage } from '../types';
-interface Props {
-    /** stage data passed to each `ProgressTrackerStage` component */
-    item: Stage;
-}
-export default class ProgressTrackerLink extends PureComponent<Props> {
-    render(): JSX.Element;
-}
-export {};

package/dist/types/ProgressTrackerLink/styled.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Link: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, any, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
-export default Link;

package/dist/types/ProgressTrackerStage/index.d.ts

@@ -1,27 +0,0 @@
-import { PureComponent } from 'react';
-import { ProgressTrackerStageRenderProp, Stage } from '../types';
-export interface ProgressTrackerStageProps {
-    /** stage data passed to each `ProgressTrackerStage` component */
-    item: Stage;
-    /** render prop to specify how to render components */
-    render: ProgressTrackerStageRenderProp;
-    /** delay before transitioning in ms */
-    transitionDelay: number;
-    /** speed at which to transition in ms */
-    transitionSpeed: number;
-    /** interface of easing for transition */
-    transitionEasing: string;
-}
-interface State {
-    transitioning: boolean;
-    oldMarkerColor?: string;
-    oldPercentageComplete: number;
-}
-export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
-    constructor(props: ProgressTrackerStageProps);
-    UNSAFE_componentWillMount(): void;
-    UNSAFE_componentWillReceiveProps(): void;
-    shouldShowLink(): boolean;
-    render(): JSX.Element;
-}
-export {};

package/dist/types/ProgressTrackerStage/styled.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-export declare const ProgressTrackerStageContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-interface BaseStageProps {
-    transitionDelay: number;
-    transitionSpeed: number;
-    transitionEasing?: string;
-}
-interface StageMarkerProps extends BaseStageProps {
-    oldMarkerColor?: string;
-}
-export declare const ProgressTrackerStageMarker: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageMarkerProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageMarkerProps>;
-interface StageBarProps extends BaseStageProps {
-    percentageComplete: number;
-    oldPercentageComplete: number;
-}
-export declare const ProgressTrackerStageBar: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageBarProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageBarProps>;
-interface StageTitleProps extends BaseStageProps {
-    fontweight?: string;
-}
-export declare const ProgressTrackerStageTitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageTitleProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StageTitleProps>;
-interface ListItemProps {
-    theme: {
-        columns: number;
-        spacing: string;
-    };
-}
-export declare const ProgressTrackerListItem: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & Partial<ListItemProps>, any, import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & Partial<ListItemProps>>;
-export {};