@terraware/web-components 3.9.9 → 3.9.10

package/components/TimelineSlider/TimelineMarker.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import './styles.scss';
+type TimelineMarkerProps = {
+    color: string;
+    labelBottom?: string;
+    labelTop?: string;
+    onClick?: () => void;
+    size: 'small' | 'medium' | 'large';
+    value: number;
+};
+declare const TimelineMarker: ({ color, labelBottom, labelTop, onClick, size, value }: TimelineMarkerProps) => JSX.Element;
+export default TimelineMarker;
+//# sourceMappingURL=TimelineMarker.d.ts.map

package/components/TimelineSlider/TimelineMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineMarker.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSlider/TimelineMarker.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAgBrG,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/TimelineSlider/TimelineMarker.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./styles.scss");
+const TimelineMarker = _ref => {
+  let {
+    color,
+    labelBottom,
+    labelTop,
+    onClick,
+    size,
+    value
+  } = _ref;
+  const clampedValue = Math.min(1, Math.max(0, value));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "timeline-marker timeline-marker--".concat(size, " ").concat(onClick ? 'timeline-marker--clickable' : ''),
+    style: {
+      left: "".concat(clampedValue * 100, "%"),
+      backgroundColor: color
+    },
+    onClick: onClick
+  }, labelTop && /*#__PURE__*/_react.default.createElement("div", {
+    className: "timeline-marker__label timeline-marker__label--top"
+  }, labelTop), labelBottom && /*#__PURE__*/_react.default.createElement("div", {
+    className: "timeline-marker__label timeline-marker__label--bottom"
+  }, labelBottom));
+};
+var _default = exports.default = TimelineMarker;

package/components/TimelineSlider/TimelineRail.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './styles.scss';
+declare const TimelineRail: () => JSX.Element;
+export default TimelineRail;
+//# sourceMappingURL=TimelineRail.d.ts.map

package/components/TimelineSlider/TimelineRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSlider/TimelineRail.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,QAAA,MAAM,YAAY,QAAO,WAExB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/TimelineSlider/TimelineRail.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./styles.scss");
+const TimelineRail = () => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "timeline-rail"
+  });
+};
+var _default = exports.default = TimelineRail;

package/components/TimelineSlider/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import './styles.scss';
+export type TimelineSliderMark = {
+    color: string;
+    labelBottom?: string;
+    labelTop?: string;
+    onClick?: () => void;
+    size: 'small' | 'medium' | 'large';
+    value: number;
+};
+export type TimelineSliderProps = {
+    labelEnd?: string;
+    labelSelected?: string;
+    labelStart?: string;
+    marks: TimelineSliderMark[];
+};
+declare const TimelineSlider: ({ labelEnd, labelSelected, labelStart, marks }: TimelineSliderProps) => JSX.Element;
+export default TimelineSlider;
+//# sourceMappingURL=index.d.ts.map

package/components/TimelineSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSlider/index.tsx"],"names":[],"mappings":";AAMA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,cAAc,mDAAoD,mBAAmB,KAAG,WAkD7F,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/TimelineSlider/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _TimelineMarker = _interopRequireDefault(require("./TimelineMarker"));
+var _TimelineRail = _interopRequireDefault(require("./TimelineRail"));
+require("./styles.scss");
+const TimelineSlider = _ref => {
+  let {
+    labelEnd,
+    labelSelected,
+    labelStart,
+    marks
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const {
+    minValue,
+    maxValue
+  } = (0, _react.useMemo)(() => {
+    const values = marks.map(mark => mark.value);
+    if (values.length > 0) {
+      return {
+        minValue: Math.min(...values),
+        maxValue: Math.max(...values)
+      };
+    } else {
+      return {
+        minValue: 0,
+        maxValue: 1
+      };
+    }
+  }, [marks]);
+  const range = maxValue - minValue;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'timeline'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'timeline-label',
+    style: {
+      marginRight: theme.spacing(2)
+    }
+  }, labelStart), /*#__PURE__*/_react.default.createElement("div", {
+    className: "timeline-container"
+  }, /*#__PURE__*/_react.default.createElement(_TimelineRail.default, null), marks.map((mark, idx) => {
+    const normalizedValue = range === 0 ? 1 : (mark.value - minValue) / range;
+    return /*#__PURE__*/_react.default.createElement(_TimelineMarker.default, {
+      key: idx,
+      color: mark.color,
+      labelBottom: mark.labelBottom,
+      labelTop: mark.labelTop,
+      onClick: mark.onClick,
+      size: mark.size,
+      value: normalizedValue
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'timeline-label',
+    style: {
+      marginLeft: theme.spacing(2)
+    }
+  }, labelEnd), labelSelected && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'timeline-selected-label'
+  }, labelSelected));
+};
+var _default = exports.default = TimelineSlider;

package/components/TimelineSlider/styles.scss

@@ -0,0 +1,97 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.timeline {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.timeline-label {
+  font-family: $tw-fnt-frm-fld-label-font-family;
+  font-size: $tw-fnt-frm-fld-label-font-size;
+  font-weight: $tw-fnt-frm-fld-label-font-weight;
+  line-height: $tw-fnt-frm-fld-label-line-height;
+  color: $tw-clr-txt-secondary;
+}
+
+.timeline-selected-label {
+  border-radius: 8px;
+  background: $tw-clr-bg-secondary;
+  width: 140px;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-left: 12px;
+  font-family: $tw-fnt-btn-label-small-font-family;
+  font-size: $tw-fnt-btn-label-small-font-size;
+  font-weight: $tw-fnt-mssg-title-font-weight;
+  line-height: $tw-fnt-btn-label-small-line-height;
+  color: $tw-clr-base-black;
+}
+
+.timeline-container {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 0;
+  position: relative;
+  height: 40px;
+}
+
+.timeline-marker {
+  position: absolute;
+  top: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+
+  &--small {
+    width: 12px;
+    height: 12px;
+  }
+
+  &--medium {
+    width: 18px;
+    height: 18px;
+  }
+
+  &--large {
+    width: 24px;
+    height: 24px;
+  }
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &__label {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-txt-secondary;
+
+    &--top {
+      bottom: 100%;
+    }
+
+    &--bottom {
+      top: 100%;
+      transform: translateX(-100%) rotate(-45deg);
+      transform-origin: right center;
+    }
+  }
+}
+
+.timeline-rail {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background-color: $tw-clr-base-gray-200;
+  transform: translateY(-50%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "3.9.9",
+  "version": "3.9.10",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/TimelineSlider.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TimelineSliderProps } from '../components/TimelineSlider';
+declare const _default: {
+    title: string;
+    component: ({ labelEnd, labelSelected, labelStart, marks }: TimelineSliderProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineSliderProps>;
+export declare const SingleValueMarks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineSliderProps>;
+//# sourceMappingURL=TimelineSlider.stories.d.ts.map

package/stories/TimelineSlider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineSlider.stories.d.ts","sourceRoot":"","sources":["../../src/stories/TimelineSlider.stories.tsx"],"names":[],"mappings":";AAIA,OAAuB,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;;;;;AAGnF,wBAGE;AAkCF,eAAO,MAAM,OAAO,4GAAoB,CAAC;AASzC,eAAO,MAAM,gBAAgB,4GAAoB,CAAC"}