@elliemae/ds-ribbon 3.0.0-next.9 → 3.0.1

package/dist/cjs/DSRibbon.js

@@ -18,32 +18,27 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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,
   default: () => DSRibbon_default
 });
+module.exports = __toCommonJS(DSRibbon_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_react_desc = require("react-desc");
@@ -270,8 +265,8 @@ const cardprops = {
   solid: import_react_desc.PropTypes.bool.description("solid style")
 };
 RibbonCard.propTypes = cardprops;
+RibbonCard.displayName = "RibbonCard";
 const DSRibbonCardWithSchema = (0, import_react_desc.describe)(RibbonCard);
 DSRibbonCardWithSchema.propTypes = cardprops;
 var DSRibbon_default = DSRibbon;
-module.exports = __toCommonJS(DSRibbon_exports);
 //# sourceMappingURL=DSRibbon.js.map

package/dist/cjs/DSRibbon.js.map

@@ -1,7 +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 from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\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      & > ${RibbonCol} {\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      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = 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  & > ${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: bold;\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\nfunction 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\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\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};\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};\n\nRibbonCard.propTypes = cardprops;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\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      & > ${RibbonCol} {\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      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = 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  & > ${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: bold;\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\nfunction 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\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\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};\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};\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

@@ -4,33 +4,27 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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"));
-module.exports = __toCommonJS(src_exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/esm/DSRibbon.js

@@ -240,10 +240,12 @@ const cardprops = {
   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,
   DSRibbon_default as default
 };

package/dist/esm/DSRibbon.js.map

@@ -1,7 +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 from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\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      & > ${RibbonCol} {\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      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = 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  & > ${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: bold;\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\nfunction 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\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\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};\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};\n\nRibbonCard.propTypes = cardprops;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n"],
-  "mappings": "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",
+  "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 from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\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      & > ${RibbonCol} {\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      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = 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  & > ${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: bold;\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\nfunction 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\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\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};\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};\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

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { default as default2, DSRibbonCardWithSchema } from "./DSRibbon";
+import { default as default2, DSRibbon, DSRibbonCardWithSchema } from "./DSRibbon";
 export {
+  DSRibbon,
   DSRibbonCardWithSchema,
   default2 as default
 };

package/dist/esm/index.js.map

@@ -1,7 +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, DSRibbonCardWithSchema } from './DSRibbon';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSRibbon, DSRibbonCardWithSchema } from './DSRibbon';\n"],
   "mappings": "AAAA;ACAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-ribbon",
-  "version": "3.0.0-next.9",
+  "version": "3.0.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Ribbon",
   "files": [
@@ -38,6 +38,13 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
+  },
   "dependencies": {
     "react-desc": "~4.1.3"
   },
@@ -53,12 +60,5 @@
   "publishConfig": {
     "access": "public",
     "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
-    "lint": "node ../../scripts/lint.mjs",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
-}
+}