@elliemae/ds-legacy-ribbon 1.0.0-rc.1

package/dist/cjs/DSRibbon.js

@@ -0,0 +1,275 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSRibbon_exports = {};
+__export(DSRibbon_exports, {
+  DSRibbon: () => DSRibbon,
+  DSRibbonCardWithSchema: () => DSRibbonCardWithSchema,
+  RibbonCol: () => RibbonCol,
+  default: () => DSRibbon_default
+});
+module.exports = __toCommonJS(DSRibbon_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+const RibbonColSimple = import_ds_legacy_system.styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0.5rem;
+  height: 100%;
+  justify-content: center;
+  flex: 1;
+  position: relative;
+  &:after {
+    position: absolute;
+    top: 10%;
+    right: 0;
+    height: 80%;
+    content: '';
+    border-right: dashed 1px #ebedf0;
+  }
+`;
+const RibbonRow = import_ds_legacy_system.styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 4rem;
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: 5rem;
+    overflow-y: hidden;
+  }
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  ${(props) => {
+  if (props.alignLeft) {
+    return `
+      align-items: stretch;
+      & > ${RibbonColSimple} {
+        align-items: flex-start;
+        align-self: stretch;    
+        flex: 0;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          flex: 1;
+        }
+      `;
+  }
+  return `
+        align-items: center;
+    `;
+}};
+  ${(props) => {
+  if (props.solid) {
+    return `
+      & > ${RibbonColSimple} {
+        &:after{
+          top: 0%;
+          height: 100%;
+          border-right: solid 1px #CBCFD7;
+        }
+      `;
+  }
+  return "";
+}};
+`;
+const RibbonCol = (0, import_ds_legacy_system.styled)(RibbonColSimple)`
+  & > ${RibbonRow} {
+    align-items: flex-start;
+  }
+`;
+const RibbonWrapper = import_ds_legacy_system.styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.62rem 1.22rem;
+  border-bottom: solid 1px #cfcfd7;
+  background: #fff;
+  & > ${RibbonRow} {
+    border-bottom: solid 1px #ebedf0;
+    width: auto;
+    &:last-child {
+      border: none;
+    }
+    & > ${RibbonCol} {
+      &:last-child {
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+const RibbonBlockIcon = import_ds_legacy_system.styled.div`
+  padding-right: 0.5rem;
+  padding-top: 0.1rem;
+  svg,
+  svg:not([fill]) {
+    fill: ${(props) => {
+  if (props.info)
+    return "#1e79c2";
+  if (props.error)
+    return "#E34256";
+  if (props.warning)
+    return "#FBB431";
+  if (props.success)
+    return "#32B87C";
+  return "#1e79c2";
+}};
+  }
+`;
+const RibbonBlockLabel = import_ds_legacy_system.styled.div`
+  padding: 0.25rem 0.5rem;
+  color: #697489;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+`;
+const RibbonBlockValue = import_ds_legacy_system.styled.div`
+  flex: 2;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 1.1rem;
+  color: #333333;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+`;
+const RibbonBlockValueLabel = import_ds_legacy_system.styled.div`
+  flex: 2;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 0.9rem;
+  color: #697489;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+`;
+const RibbonBlockCol = import_ds_legacy_system.styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  flex-wrap: nowrap;
+  align-items: ${(props) => {
+  if (props.center)
+    return "center";
+  return "";
+}};
+  height: 100%;
+`;
+const RibbonBlockRow = import_ds_legacy_system.styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex: 1;
+  height: 100%;
+  align-items: ${(props) => {
+  if (props.center)
+    return "center";
+  return "";
+}};
+`;
+const RibbonBlock = import_ds_legacy_system.styled.div`
+  flex: 1;
+  height: 100%;
+`;
+const RibbonCard = ({
+  containerProps = {},
+  icon = null,
+  label = "",
+  value = "",
+  additionalValue = "",
+  additionalLabel = "",
+  info = false,
+  error = false,
+  warning = false,
+  success = false,
+  center = false,
+  solid = false
+}) => {
+  const labelPlace = icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockIcon, { error, info, success, warning, children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockLabel, { children: label });
+  if (additionalValue || additionalLabel) {
+    let additionalInformation;
+    if (additionalValue) {
+      additionalInformation = additionalValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockValue, { children: additionalValue });
+    } else if (additionalLabel) {
+      additionalInformation = additionalLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockValueLabel, { children: additionalLabel });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlock, { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RibbonBlockRow, { className: "ribbon-block-row", solid, style: { alignItems: "flex-start" }, children: [
+      labelPlace,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RibbonBlockCol, { center, className: "ribbon-block-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockValue, { children: value }),
+        additionalInformation
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlock, { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RibbonBlockRow, { center, solid, children: [
+    labelPlace,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonBlockValue, { children: value })
+  ] }) });
+};
+const DSRibbon = {
+  RibbonWrapper,
+  RibbonRow,
+  RibbonCol,
+  RibbonCard
+};
+RibbonWrapper.propTypes = {};
+RibbonRow.propTypes = {
+  /** align left */
+  alignLeft: import_ds_legacy_props_helpers.PropTypes.bool.description("align left")
+};
+RibbonCol.propTypes = {};
+const cardprops = {
+  /** props to inject to wrapper */
+  containerProps: import_ds_legacy_props_helpers.PropTypes.object.description("props to inject to wrapper"),
+  /** icon for ribbon card */
+  icon: import_ds_legacy_props_helpers.PropTypes.element.description("icon for ribbon card"),
+  /** label for ribbon card */
+  label: import_ds_legacy_props_helpers.PropTypes.string.description("label for ribbon card"),
+  /** value for ribbon */
+  value: import_ds_legacy_props_helpers.PropTypes.string.description("value for ribbon"),
+  /** additional value */
+  additionalValue: import_ds_legacy_props_helpers.PropTypes.string.description("additional value"),
+  /** additional label */
+  additionalLabel: import_ds_legacy_props_helpers.PropTypes.string.description("additional label"),
+  /** for main label */
+  info: import_ds_legacy_props_helpers.PropTypes.bool.description("for main label"),
+  /** error state toggle */
+  error: import_ds_legacy_props_helpers.PropTypes.bool.description("error state toggle"),
+  /** warning state toggle */
+  warning: import_ds_legacy_props_helpers.PropTypes.bool.description("warning state toggle"),
+  /** success state toggle */
+  success: import_ds_legacy_props_helpers.PropTypes.bool.description("success state toggle"),
+  /** align center */
+  center: import_ds_legacy_props_helpers.PropTypes.bool.description("align center"),
+  /** solid style */
+  solid: import_ds_legacy_props_helpers.PropTypes.bool.description("solid style")
+};
+RibbonCard.propTypes = cardprops;
+RibbonCard.displayName = "RibbonCard";
+const DSRibbonCardWithSchema = (0, import_ds_legacy_props_helpers.describe)(RibbonCard);
+DSRibbonCardWithSchema.propTypes = cardprops;
+var DSRibbon_default = DSRibbon;
+//# sourceMappingURL=DSRibbon.js.map

package/dist/cjs/DSRibbon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSRibbon.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { styled } from '@elliemae/ds-legacy-system';\n\nconst RibbonColSimple = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem;\n  height: 100%;\n  justify-content: center;\n  flex: 1;\n  position: relative;\n  &:after {\n    position: absolute;\n    top: 10%;\n    right: 0;\n    height: 80%;\n    content: '';\n    border-right: dashed 1px #ebedf0;\n  }\n`;\n\nconst RibbonRow = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.alignLeft) {\n      return `\n      align-items: stretch;\n      & > ${RibbonColSimple} {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonColSimple} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nexport const RibbonCol = styled(RibbonColSimple)`\n  & > ${RibbonRow} {\n    align-items: flex-start;\n  }\n`;\n\nconst RibbonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0.62rem 1.22rem;\n  border-bottom: solid 1px #cfcfd7;\n  background: #fff;\n  & > ${RibbonRow} {\n    border-bottom: solid 1px #ebedf0;\n    width: auto;\n    &:last-child {\n      border: none;\n    }\n    & > ${RibbonCol} {\n      &:last-child {\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n`;\nconst RibbonBlock = styled.div`\n  flex: 1;\n  height: 100%;\n`;\n\nconst RibbonCard = ({\n  containerProps = {},\n  icon = null,\n  label = '',\n  value = '',\n  additionalValue = '',\n  additionalLabel = '',\n  info = false,\n  error = false,\n  warning = false,\n  success = false,\n  center = false,\n  solid = false,\n}) => {\n  const labelPlace = icon ? (\n    <RibbonBlockIcon error={error} info={info} success={success} warning={warning}>\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && <RibbonBlockValue>{additionalValue}</RibbonBlockValue>;\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>;\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow className=\"ribbon-block-row\" solid={solid} style={{ alignItems: 'flex-start' }}>\n          {labelPlace}\n          <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n            <RibbonBlockValue>{value}</RibbonBlockValue>\n            {additionalInformation}\n          </RibbonBlockCol>\n        </RibbonBlockRow>\n      </RibbonBlock>\n    );\n  }\n\n  return (\n    <RibbonBlock {...containerProps}>\n      <RibbonBlockRow center={center} solid={solid}>\n        {labelPlace}\n        <RibbonBlockValue>{value}</RibbonBlockValue>\n      </RibbonBlockRow>\n    </RibbonBlock>\n  );\n};\n\nconst DSRibbon = {\n  RibbonWrapper,\n  RibbonRow,\n  RibbonCol,\n  RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n  /** align left */\n  alignLeft: PropTypes.bool.description('align left'),\n} as WeakValidationMap<unknown>;\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /** icon for ribbon card */\n  icon: PropTypes.element.description('icon for ribbon card'),\n  /** label for ribbon card */\n  label: PropTypes.string.description('label for ribbon card'),\n  /** value for ribbon */\n  value: PropTypes.string.description('value for ribbon'),\n  /** additional value */\n  additionalValue: PropTypes.string.description('additional value'),\n  /** additional label */\n  additionalLabel: PropTypes.string.description('additional label'),\n  /** for main label */\n  info: PropTypes.bool.description('for main label'),\n  /** error state toggle */\n  error: PropTypes.bool.description('error state toggle'),\n  /** warning state toggle */\n  warning: PropTypes.bool.description('warning state toggle'),\n  /** success state toggle */\n  success: PropTypes.bool.description('success state toggle'),\n  /** align center */\n  center: PropTypes.bool.description('align center'),\n  /** solid style */\n  solid: PropTypes.bool.description('solid style'),\n} as WeakValidationMap<unknown>;\n\nRibbonCard.propTypes = cardprops;\nRibbonCard.displayName = 'RibbonCard';\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema, DSRibbon };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  DSRibbon: () => import_DSRibbon.DSRibbon,
+  DSRibbonCardWithSchema: () => import_DSRibbon.DSRibbonCardWithSchema,
+  default: () => import_DSRibbon.default
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_DSRibbon = __toESM(require("./DSRibbon.js"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAA0D;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/DSRibbon.js

@@ -0,0 +1,245 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import { styled } from "@elliemae/ds-legacy-system";
+const RibbonColSimple = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0.5rem;
+  height: 100%;
+  justify-content: center;
+  flex: 1;
+  position: relative;
+  &:after {
+    position: absolute;
+    top: 10%;
+    right: 0;
+    height: 80%;
+    content: '';
+    border-right: dashed 1px #ebedf0;
+  }
+`;
+const RibbonRow = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 4rem;
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: 5rem;
+    overflow-y: hidden;
+  }
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  ${(props) => {
+  if (props.alignLeft) {
+    return `
+      align-items: stretch;
+      & > ${RibbonColSimple} {
+        align-items: flex-start;
+        align-self: stretch;    
+        flex: 0;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          flex: 1;
+        }
+      `;
+  }
+  return `
+        align-items: center;
+    `;
+}};
+  ${(props) => {
+  if (props.solid) {
+    return `
+      & > ${RibbonColSimple} {
+        &:after{
+          top: 0%;
+          height: 100%;
+          border-right: solid 1px #CBCFD7;
+        }
+      `;
+  }
+  return "";
+}};
+`;
+const RibbonCol = styled(RibbonColSimple)`
+  & > ${RibbonRow} {
+    align-items: flex-start;
+  }
+`;
+const RibbonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.62rem 1.22rem;
+  border-bottom: solid 1px #cfcfd7;
+  background: #fff;
+  & > ${RibbonRow} {
+    border-bottom: solid 1px #ebedf0;
+    width: auto;
+    &:last-child {
+      border: none;
+    }
+    & > ${RibbonCol} {
+      &:last-child {
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+const RibbonBlockIcon = styled.div`
+  padding-right: 0.5rem;
+  padding-top: 0.1rem;
+  svg,
+  svg:not([fill]) {
+    fill: ${(props) => {
+  if (props.info)
+    return "#1e79c2";
+  if (props.error)
+    return "#E34256";
+  if (props.warning)
+    return "#FBB431";
+  if (props.success)
+    return "#32B87C";
+  return "#1e79c2";
+}};
+  }
+`;
+const RibbonBlockLabel = styled.div`
+  padding: 0.25rem 0.5rem;
+  color: #697489;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+`;
+const RibbonBlockValue = styled.div`
+  flex: 2;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 1.1rem;
+  color: #333333;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+`;
+const RibbonBlockValueLabel = styled.div`
+  flex: 2;
+  padding: 0.25rem 0.5rem 0.25rem 0rem;
+  font-size: 0.9rem;
+  color: #697489;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+`;
+const RibbonBlockCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  flex-wrap: nowrap;
+  align-items: ${(props) => {
+  if (props.center)
+    return "center";
+  return "";
+}};
+  height: 100%;
+`;
+const RibbonBlockRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex: 1;
+  height: 100%;
+  align-items: ${(props) => {
+  if (props.center)
+    return "center";
+  return "";
+}};
+`;
+const RibbonBlock = styled.div`
+  flex: 1;
+  height: 100%;
+`;
+const RibbonCard = ({
+  containerProps = {},
+  icon = null,
+  label = "",
+  value = "",
+  additionalValue = "",
+  additionalLabel = "",
+  info = false,
+  error = false,
+  warning = false,
+  success = false,
+  center = false,
+  solid = false
+}) => {
+  const labelPlace = icon ? /* @__PURE__ */ jsx(RibbonBlockIcon, { error, info, success, warning, children: icon }) : /* @__PURE__ */ jsx(RibbonBlockLabel, { children: label });
+  if (additionalValue || additionalLabel) {
+    let additionalInformation;
+    if (additionalValue) {
+      additionalInformation = additionalValue && /* @__PURE__ */ jsx(RibbonBlockValue, { children: additionalValue });
+    } else if (additionalLabel) {
+      additionalInformation = additionalLabel && /* @__PURE__ */ jsx(RibbonBlockValueLabel, { children: additionalLabel });
+    }
+    return /* @__PURE__ */ jsx(RibbonBlock, { ...containerProps, children: /* @__PURE__ */ jsxs(RibbonBlockRow, { className: "ribbon-block-row", solid, style: { alignItems: "flex-start" }, children: [
+      labelPlace,
+      /* @__PURE__ */ jsxs(RibbonBlockCol, { center, className: "ribbon-block-col", children: [
+        /* @__PURE__ */ jsx(RibbonBlockValue, { children: value }),
+        additionalInformation
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(RibbonBlock, { ...containerProps, children: /* @__PURE__ */ jsxs(RibbonBlockRow, { center, solid, children: [
+    labelPlace,
+    /* @__PURE__ */ jsx(RibbonBlockValue, { children: value })
+  ] }) });
+};
+const DSRibbon = {
+  RibbonWrapper,
+  RibbonRow,
+  RibbonCol,
+  RibbonCard
+};
+RibbonWrapper.propTypes = {};
+RibbonRow.propTypes = {
+  /** align left */
+  alignLeft: PropTypes.bool.description("align left")
+};
+RibbonCol.propTypes = {};
+const cardprops = {
+  /** props to inject to wrapper */
+  containerProps: PropTypes.object.description("props to inject to wrapper"),
+  /** icon for ribbon card */
+  icon: PropTypes.element.description("icon for ribbon card"),
+  /** label for ribbon card */
+  label: PropTypes.string.description("label for ribbon card"),
+  /** value for ribbon */
+  value: PropTypes.string.description("value for ribbon"),
+  /** additional value */
+  additionalValue: PropTypes.string.description("additional value"),
+  /** additional label */
+  additionalLabel: PropTypes.string.description("additional label"),
+  /** for main label */
+  info: PropTypes.bool.description("for main label"),
+  /** error state toggle */
+  error: PropTypes.bool.description("error state toggle"),
+  /** warning state toggle */
+  warning: PropTypes.bool.description("warning state toggle"),
+  /** success state toggle */
+  success: PropTypes.bool.description("success state toggle"),
+  /** align center */
+  center: PropTypes.bool.description("align center"),
+  /** solid style */
+  solid: PropTypes.bool.description("solid style")
+};
+RibbonCard.propTypes = cardprops;
+RibbonCard.displayName = "RibbonCard";
+const DSRibbonCardWithSchema = describe(RibbonCard);
+DSRibbonCardWithSchema.propTypes = cardprops;
+var DSRibbon_default = DSRibbon;
+export {
+  DSRibbon,
+  DSRibbonCardWithSchema,
+  RibbonCol,
+  DSRibbon_default as default
+};
+//# sourceMappingURL=DSRibbon.js.map

package/dist/esm/DSRibbon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSRibbon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React, { type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { styled } from '@elliemae/ds-legacy-system';\n\nconst RibbonColSimple = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem;\n  height: 100%;\n  justify-content: center;\n  flex: 1;\n  position: relative;\n  &:after {\n    position: absolute;\n    top: 10%;\n    right: 0;\n    height: 80%;\n    content: '';\n    border-right: dashed 1px #ebedf0;\n  }\n`;\n\nconst RibbonRow = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.alignLeft) {\n      return `\n      align-items: stretch;\n      & > ${RibbonColSimple} {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonColSimple} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nexport const RibbonCol = styled(RibbonColSimple)`\n  & > ${RibbonRow} {\n    align-items: flex-start;\n  }\n`;\n\nconst RibbonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0.62rem 1.22rem;\n  border-bottom: solid 1px #cfcfd7;\n  background: #fff;\n  & > ${RibbonRow} {\n    border-bottom: solid 1px #ebedf0;\n    width: auto;\n    &:last-child {\n      border: none;\n    }\n    & > ${RibbonCol} {\n      &:last-child {\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n`;\nconst RibbonBlock = styled.div`\n  flex: 1;\n  height: 100%;\n`;\n\nconst RibbonCard = ({\n  containerProps = {},\n  icon = null,\n  label = '',\n  value = '',\n  additionalValue = '',\n  additionalLabel = '',\n  info = false,\n  error = false,\n  warning = false,\n  success = false,\n  center = false,\n  solid = false,\n}) => {\n  const labelPlace = icon ? (\n    <RibbonBlockIcon error={error} info={info} success={success} warning={warning}>\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && <RibbonBlockValue>{additionalValue}</RibbonBlockValue>;\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>;\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow className=\"ribbon-block-row\" solid={solid} style={{ alignItems: 'flex-start' }}>\n          {labelPlace}\n          <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n            <RibbonBlockValue>{value}</RibbonBlockValue>\n            {additionalInformation}\n          </RibbonBlockCol>\n        </RibbonBlockRow>\n      </RibbonBlock>\n    );\n  }\n\n  return (\n    <RibbonBlock {...containerProps}>\n      <RibbonBlockRow center={center} solid={solid}>\n        {labelPlace}\n        <RibbonBlockValue>{value}</RibbonBlockValue>\n      </RibbonBlockRow>\n    </RibbonBlock>\n  );\n};\n\nconst DSRibbon = {\n  RibbonWrapper,\n  RibbonRow,\n  RibbonCol,\n  RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n  /** align left */\n  alignLeft: PropTypes.bool.description('align left'),\n} as WeakValidationMap<unknown>;\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /** icon for ribbon card */\n  icon: PropTypes.element.description('icon for ribbon card'),\n  /** label for ribbon card */\n  label: PropTypes.string.description('label for ribbon card'),\n  /** value for ribbon */\n  value: PropTypes.string.description('value for ribbon'),\n  /** additional value */\n  additionalValue: PropTypes.string.description('additional value'),\n  /** additional label */\n  additionalLabel: PropTypes.string.description('additional label'),\n  /** for main label */\n  info: PropTypes.bool.description('for main label'),\n  /** error state toggle */\n  error: PropTypes.bool.description('error state toggle'),\n  /** warning state toggle */\n  warning: PropTypes.bool.description('warning state toggle'),\n  /** success state toggle */\n  success: PropTypes.bool.description('success state toggle'),\n  /** align center */\n  center: PropTypes.bool.description('align center'),\n  /** solid style */\n  solid: PropTypes.bool.description('solid style'),\n} as WeakValidationMap<unknown>;\n\nRibbonCard.propTypes = cardprops;\nRibbonCard.displayName = 'RibbonCard';\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema, DSRibbon };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { default as default2, DSRibbon, DSRibbonCardWithSchema } from "./DSRibbon.js";
+export {
+  DSRibbon,
+  DSRibbonCardWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,UAAU,8BAA8B;",
+  "names": ["default"]
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/types/DSRibbon.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+export declare const RibbonCol: import("styled-components").StyledComponent<import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>, import("@elliemae/ds-legacy-system").Theme, {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@elliemae/ds-legacy-system").Theme | undefined;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+} & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+declare const DSRibbon: {
+    RibbonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("@elliemae/ds-legacy-system").Theme | undefined;
+    } & {
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
+    } & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+    RibbonRow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+    RibbonCol: import("styled-components").StyledComponent<import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>, import("@elliemae/ds-legacy-system").Theme, {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("@elliemae/ds-legacy-system").Theme | undefined;
+    } & {
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
+    } & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+    RibbonCard: {
+        ({ containerProps, icon, label, value, additionalValue, additionalLabel, info, error, warning, success, center, solid, }: {
+            containerProps?: {} | undefined;
+            icon?: null | undefined;
+            label?: string | undefined;
+            value?: string | undefined;
+            additionalValue?: string | undefined;
+            additionalLabel?: string | undefined;
+            info?: boolean | undefined;
+            error?: boolean | undefined;
+            warning?: boolean | undefined;
+            success?: boolean | undefined;
+            center?: boolean | undefined;
+            solid?: boolean | undefined;
+        }): import("react/jsx-runtime").JSX.Element;
+        propTypes: React.WeakValidationMap<unknown>;
+        displayName: string;
+    };
+};
+declare const DSRibbonCardWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
+    containerProps?: {} | undefined;
+    icon?: null | undefined;
+    label?: string | undefined;
+    value?: string | undefined;
+    additionalValue?: string | undefined;
+    additionalLabel?: string | undefined;
+    info?: boolean | undefined;
+    error?: boolean | undefined;
+    warning?: boolean | undefined;
+    success?: boolean | undefined;
+    center?: boolean | undefined;
+    solid?: boolean | undefined;
+}>;
+export default DSRibbon;
+export { DSRibbonCardWithSchema, DSRibbon };

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon.js';

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@elliemae/ds-legacy-ribbon",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Ribbon",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./DSRibbon": {
+      "import": "./dist/esm/DSRibbon.js",
+      "require": "./dist/cjs/DSRibbon.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}