@luscii-healthtech/web-ui 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,8 +1 @@
-import { FC, HTMLAttributes, ReactChild } from "react";
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-    children?: ReactChild;
-}
-/**
- * A custom Thing component. Neat!
- */
-export declare const Thing: FC<Props>;
+export { default as Text } from "./components/Text/Text";

package/dist/web-ui.cjs.development.css

@@ -0,0 +1,37 @@
+.cweb-text {
+  font-family: "Inter", "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.31em;
+  color: #2d2d2d;
+  margin: 0; }
+  .cweb-text.type-emphasized {
+    font-weight: bold; }
+  .cweb-text.type-error {
+    color: #e55b56;
+    font-size: 0.875rem;
+    line-height: 1.25em; }
+  .cweb-text.type-strong {
+    font-weight: bold;
+    color: #0f3554; }
+  .cweb-text.type-small-dark {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #2d2d2d; }
+  .cweb-text.type-small {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-small-fineprint {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-fineprint {
+    color: #737373; }
+  .cweb-text.level-inline {
+    display: inline; }
+  .cweb-text.level-block {
+    display: block; }
+
+.in-html-link a:hover {
+  text-decoration: underline; }

package/dist/web-ui.cjs.development.js

@@ -4,20 +4,56 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var classNames = _interopDefault(require('classnames'));
 var React = _interopDefault(require('react'));
 
-// see: https://github.com/storybookjs/storybook/issues/9556
-
-/**
- * A custom Thing component. Neat!
- */
-
-var Thing = function Thing(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "mt-10 bg-red-500 p-5 rounded-md"
-  }, children || "this is a test");
+var Text = function Text(props) {
+  var containerProps = {
+    "data-test-id": props["data-test-id"],
+    className: classNames( // apply different style classes
+    // for now we stick with font-size 16px on the body
+    // so I am adjusting our styles accordingly (one step down)
+    {
+      "text-xs font-medium": props.type === "sm",
+      "text-xs font-semibold": props.type === "sm-strong",
+      "text-sm": props.type === "base",
+      "text-sm font-semibold": props.type === "strong",
+      "": props.type === "lg",
+      "font-semibold": props.type === "lg-strong",
+      "text-lg": props.type === "xl",
+      "font-semibold text-lg": props.type === "xl-strong"
+    }, {
+      inline: props.inline,
+      // FIXME: this class doesn't do anything without a max-width
+      truncate: props.truncate
+    }, {
+      "text-slate-700": props.color === "base",
+      "text-slate-500": props.color === "gray-500",
+      "text-slate-200": props.color === "gray-200",
+      "text-red-700": props.color === "red",
+      "text-green-700": props.color === "green",
+      "text-yellow-700": props.color === "amber",
+      "text-blue-700": props.color === "blue",
+      "text-white": props.color === "white",
+      "text-primary-dark": props.color === "blue"
+    }, {
+      "in-html-link": props.containsDangerousHtml
+    }, //can be used to overwrite other classes like the color
+    props.className)
+  };
+  return props.containsDangerousHtml ? React.createElement("p", Object.assign({}, containerProps, {
+    dangerouslySetInnerHTML: {
+      __html: props.text
+    }
+  })) : React.createElement("p", Object.assign({}, containerProps), props.text);
+};
+Text.defaultProps = {
+  type: "base",
+  inline: false,
+  color: "base",
+  containsDangerousHtml: false,
+  truncate: false
 };
 
-exports.Thing = Thing;
+exports.Text = Text;
 //# sourceMappingURL=web-ui.cjs.development.js.map

package/dist/web-ui.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-ui.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { FC, HTMLAttributes, ReactChild } from \"react\";\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactChild;\n}\n\n// Please do not use types off of a default export module or else Storybook Docs will suffer.\n// see: https://github.com/storybookjs/storybook/issues/9556\n/**\n * A custom Thing component. Neat!\n */\nexport const Thing: FC<Props> = ({ children }) => {\n  return <div className={\"mt-10 bg-red-500 p-5 rounded-md\"}>{children || \"this is a test\"}</div>;\n};\n"],"names":["Thing","children","React","className"],"mappings":";;;;;;;;AAOA;;AACA;;;;IAGaA,KAAK,GAAc,SAAnBA,KAAmB;MAAGC,gBAAAA;EACjC,OAAOC,mBAAA,MAAA;IAAKC,SAAS,EAAE;GAAhB,EAAoDF,QAAQ,IAAI,gBAAhE,CAAP;AACD;;;;"}
+{"version":3,"file":"web-ui.cjs.development.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\n\nimport { RestPropped } from \"../../types/general.types\";\n\nimport \"./Text.scss\";\n\nexport type TextStyle = \"sm\" | \"sm-strong\" | \"base\" | \"strong\" | \"lg\" | \"lg-strong\" | \"xl\" | \"xl-strong\" | string;\n\n//Extend with other colors that we want to enable for text\nexport type TextColor = \"base\" | \"gray-500\" | \"gray-200\" | \"white\" | \"blue\" | \"red\" | \"green\" | \"amber\" | \"inherit\";\n\nexport interface TextProps extends RestPropped {\n  text: string;\n  type?: TextStyle; //defaults to \"base\"\n  inline?: boolean; //defaults to false\n  color?: TextColor; //defaults to \"base\"\n  hoverColor?: TextColor; //defaults to \"base\"\n  className?: string;\n  containsDangerousHtml?: boolean; //defaults to false\n  truncate?: boolean; //defaults to false\n  \"data-test-id\"?: string;\n}\n\nexport const Text = (props: TextProps): JSX.Element => {\n  const containerProps = {\n    \"data-test-id\": props[\"data-test-id\"],\n    className: classNames(\n        // apply different style classes\n        // for now we stick with font-size 16px on the body\n        // so I am adjusting our styles accordingly (one step down)\n        {\n          \"text-xs font-medium\": props.type === \"sm\",\n          \"text-xs font-semibold\": props.type === \"sm-strong\",\n          \"text-sm\": props.type === \"base\",\n          \"text-sm font-semibold\": props.type === \"strong\",\n          \"\": props.type === \"lg\",\n          \"font-semibold\": props.type === \"lg-strong\",\n          \"text-lg\": props.type === \"xl\",\n          \"font-semibold text-lg\": props.type === \"xl-strong\",\n        },\n        {\n          inline: props.inline,\n          // FIXME: this class doesn't do anything without a max-width\n          truncate: props.truncate,\n        },\n        {\n          \"text-slate-700\": props.color === \"base\",\n          \"text-slate-500\": props.color === \"gray-500\",\n          \"text-slate-200\": props.color === \"gray-200\",\n          \"text-red-700\": props.color === \"red\",\n          \"text-green-700\": props.color === \"green\",\n          \"text-yellow-700\": props.color === \"amber\",\n          \"text-blue-700\": props.color === \"blue\",\n          \"text-white\": props.color === \"white\",\n          \"text-primary-dark\": props.color === \"blue\",\n        },\n        {\n          \"in-html-link\": props.containsDangerousHtml,\n        },\n        //can be used to overwrite other classes like the color\n        props.className\n    ),\n  };\n\n  return props.containsDangerousHtml ? (\n    <p {...containerProps} dangerouslySetInnerHTML={{ __html: props.text }} />\n  ) : (\n    <p {...containerProps}>{props.text}</p>\n  );\n};\n\nexport default Text;\n\nText.defaultProps = {\n  type: \"base\",\n  inline: false,\n  color: \"base\",\n  containsDangerousHtml: false,\n  truncate: false,\n};\n"],"names":["Text","props","containerProps","className","classNames","type","inline","truncate","color","containsDangerousHtml","React","dangerouslySetInnerHTML","__html","text","defaultProps"],"mappings":";;;;;;;;;AAwBO,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD;EAClB,IAAMC,cAAc,GAAG;IACrB,gBAAgBD,KAAK,CAAC,cAAD,CADA;IAErBE,SAAS,EAAEC,UAAU;;;IAIjB;MACE,uBAAuBH,KAAK,CAACI,IAAN,KAAe,IADxC;MAEE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe,WAF1C;MAGE,WAAWJ,KAAK,CAACI,IAAN,KAAe,MAH5B;MAIE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe,QAJ1C;MAKE,IAAIJ,KAAK,CAACI,IAAN,KAAe,IALrB;MAME,iBAAiBJ,KAAK,CAACI,IAAN,KAAe,WANlC;MAOE,WAAWJ,KAAK,CAACI,IAAN,KAAe,IAP5B;MAQE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe;KAZzB,EAcjB;MACEC,MAAM,EAAEL,KAAK,CAACK,MADhB;;MAGEC,QAAQ,EAAEN,KAAK,CAACM;KAjBD,EAmBjB;MACE,kBAAkBN,KAAK,CAACO,KAAN,KAAgB,MADpC;MAEE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,UAFpC;MAGE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,UAHpC;MAIE,gBAAgBP,KAAK,CAACO,KAAN,KAAgB,KAJlC;MAKE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,OALpC;MAME,mBAAmBP,KAAK,CAACO,KAAN,KAAgB,OANrC;MAOE,iBAAiBP,KAAK,CAACO,KAAN,KAAgB,MAPnC;MAQE,cAAcP,KAAK,CAACO,KAAN,KAAgB,OARhC;MASE,qBAAqBP,KAAK,CAACO,KAAN,KAAgB;KA5BtB,EA8BjB;MACE,gBAAgBP,KAAK,CAACQ;KA/BP;IAkCjBR,KAAK,CAACE,SAlCW;GAFvB;EAwCA,OAAOF,KAAK,CAACQ,qBAAN,GACLC,mBAAA,IAAA,oBAAOR;IAAgBS,uBAAuB,EAAE;MAAEC,MAAM,EAAEX,KAAK,CAACY;;IAAhE,CADK,GAGLH,mBAAA,IAAA,oBAAOR,eAAP,EAAwBD,KAAK,CAACY,IAA9B,CAHF;AAKD,CA9CM;AAkDPb,IAAI,CAACc,YAAL,GAAoB;EAClBT,IAAI,EAAE,MADY;EAElBC,MAAM,EAAE,KAFU;EAGlBE,KAAK,EAAE,MAHW;EAIlBC,qBAAqB,EAAE,KAJL;EAKlBF,QAAQ,EAAE;AALQ,CAApB;;;;"}

package/dist/web-ui.cjs.production.min.css

@@ -0,0 +1,37 @@
+.cweb-text {
+  font-family: "Inter", "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.31em;
+  color: #2d2d2d;
+  margin: 0; }
+  .cweb-text.type-emphasized {
+    font-weight: bold; }
+  .cweb-text.type-error {
+    color: #e55b56;
+    font-size: 0.875rem;
+    line-height: 1.25em; }
+  .cweb-text.type-strong {
+    font-weight: bold;
+    color: #0f3554; }
+  .cweb-text.type-small-dark {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #2d2d2d; }
+  .cweb-text.type-small {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-small-fineprint {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-fineprint {
+    color: #737373; }
+  .cweb-text.level-inline {
+    display: inline; }
+  .cweb-text.level-block {
+    display: block; }
+
+.in-html-link a:hover {
+  text-decoration: underline; }

package/dist/web-ui.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;exports.Thing=function(e){return t.createElement("div",{className:"mt-10 bg-red-500 p-5 rounded-md"},e.children||"this is a test")};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("classnames")),r=e(require("react")),o=function(e){var o={"data-test-id":e["data-test-id"],className:t({"text-xs font-medium":"sm"===e.type,"text-xs font-semibold":"sm-strong"===e.type,"text-sm":"base"===e.type,"text-sm font-semibold":"strong"===e.type,"":"lg"===e.type,"font-semibold":"lg-strong"===e.type,"text-lg":"xl"===e.type,"font-semibold text-lg":"xl-strong"===e.type},{inline:e.inline,truncate:e.truncate},{"text-slate-700":"base"===e.color,"text-slate-500":"gray-500"===e.color,"text-slate-200":"gray-200"===e.color,"text-red-700":"red"===e.color,"text-green-700":"green"===e.color,"text-yellow-700":"amber"===e.color,"text-blue-700":"blue"===e.color,"text-white":"white"===e.color,"text-primary-dark":"blue"===e.color},{"in-html-link":e.containsDangerousHtml},e.className)};return e.containsDangerousHtml?r.createElement("p",Object.assign({},o,{dangerouslySetInnerHTML:{__html:e.text}})):r.createElement("p",Object.assign({},o),e.text)};o.defaultProps={type:"base",inline:!1,color:"base",containsDangerousHtml:!1,truncate:!1},exports.Text=o;
 //# sourceMappingURL=web-ui.cjs.production.min.js.map

package/dist/web-ui.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-ui.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { FC, HTMLAttributes, ReactChild } from \"react\";\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactChild;\n}\n\n// Please do not use types off of a default export module or else Storybook Docs will suffer.\n// see: https://github.com/storybookjs/storybook/issues/9556\n/**\n * A custom Thing component. Neat!\n */\nexport const Thing: FC<Props> = ({ children }) => {\n  return <div className={\"mt-10 bg-red-500 p-5 rounded-md\"}>{children || \"this is a test\"}</div>;\n};\n"],"names":["React","className","children"],"mappings":"8JAWgC,YAC9B,OAAOA,uBAAKC,UAAW,qCADUC,UACsC"}
+{"version":3,"file":"web-ui.cjs.production.min.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\n\nimport { RestPropped } from \"../../types/general.types\";\n\nimport \"./Text.scss\";\n\nexport type TextStyle = \"sm\" | \"sm-strong\" | \"base\" | \"strong\" | \"lg\" | \"lg-strong\" | \"xl\" | \"xl-strong\" | string;\n\n//Extend with other colors that we want to enable for text\nexport type TextColor = \"base\" | \"gray-500\" | \"gray-200\" | \"white\" | \"blue\" | \"red\" | \"green\" | \"amber\" | \"inherit\";\n\nexport interface TextProps extends RestPropped {\n  text: string;\n  type?: TextStyle; //defaults to \"base\"\n  inline?: boolean; //defaults to false\n  color?: TextColor; //defaults to \"base\"\n  hoverColor?: TextColor; //defaults to \"base\"\n  className?: string;\n  containsDangerousHtml?: boolean; //defaults to false\n  truncate?: boolean; //defaults to false\n  \"data-test-id\"?: string;\n}\n\nexport const Text = (props: TextProps): JSX.Element => {\n  const containerProps = {\n    \"data-test-id\": props[\"data-test-id\"],\n    className: classNames(\n        // apply different style classes\n        // for now we stick with font-size 16px on the body\n        // so I am adjusting our styles accordingly (one step down)\n        {\n          \"text-xs font-medium\": props.type === \"sm\",\n          \"text-xs font-semibold\": props.type === \"sm-strong\",\n          \"text-sm\": props.type === \"base\",\n          \"text-sm font-semibold\": props.type === \"strong\",\n          \"\": props.type === \"lg\",\n          \"font-semibold\": props.type === \"lg-strong\",\n          \"text-lg\": props.type === \"xl\",\n          \"font-semibold text-lg\": props.type === \"xl-strong\",\n        },\n        {\n          inline: props.inline,\n          // FIXME: this class doesn't do anything without a max-width\n          truncate: props.truncate,\n        },\n        {\n          \"text-slate-700\": props.color === \"base\",\n          \"text-slate-500\": props.color === \"gray-500\",\n          \"text-slate-200\": props.color === \"gray-200\",\n          \"text-red-700\": props.color === \"red\",\n          \"text-green-700\": props.color === \"green\",\n          \"text-yellow-700\": props.color === \"amber\",\n          \"text-blue-700\": props.color === \"blue\",\n          \"text-white\": props.color === \"white\",\n          \"text-primary-dark\": props.color === \"blue\",\n        },\n        {\n          \"in-html-link\": props.containsDangerousHtml,\n        },\n        //can be used to overwrite other classes like the color\n        props.className\n    ),\n  };\n\n  return props.containsDangerousHtml ? (\n    <p {...containerProps} dangerouslySetInnerHTML={{ __html: props.text }} />\n  ) : (\n    <p {...containerProps}>{props.text}</p>\n  );\n};\n\nexport default Text;\n\nText.defaultProps = {\n  type: \"base\",\n  inline: false,\n  color: \"base\",\n  containsDangerousHtml: false,\n  truncate: false,\n};\n"],"names":["Text","props","containerProps","data-test-id","className","classNames","text-xs font-medium","type","text-xs font-semibold","text-sm","text-sm font-semibold","font-semibold","text-lg","font-semibold text-lg","inline","truncate","text-slate-700","color","text-slate-500","text-slate-200","text-red-700","text-green-700","text-yellow-700","text-blue-700","text-white","text-primary-dark","in-html-link","containsDangerousHtml","React","dangerouslySetInnerHTML","__html","text","defaultProps"],"mappings":"+LAwBaA,EAAO,SAACC,GACnB,IAAMC,EAAiB,CACrBC,eAAgBF,EAAM,gBACtBG,UAAWC,EAIP,CACEC,sBAAsC,OAAfL,EAAMM,KAC7BC,wBAAwC,cAAfP,EAAMM,KAC/BE,UAA0B,SAAfR,EAAMM,KACjBG,wBAAwC,WAAfT,EAAMM,KAC/B,GAAmB,OAAfN,EAAMM,KACVI,gBAAgC,cAAfV,EAAMM,KACvBK,UAA0B,OAAfX,EAAMM,KACjBM,wBAAwC,cAAfZ,EAAMM,MAEjC,CACEO,OAAQb,EAAMa,OAEdC,SAAUd,EAAMc,UAElB,CACEC,iBAAkC,SAAhBf,EAAMgB,MACxBC,iBAAkC,aAAhBjB,EAAMgB,MACxBE,iBAAkC,aAAhBlB,EAAMgB,MACxBG,eAAgC,QAAhBnB,EAAMgB,MACtBI,iBAAkC,UAAhBpB,EAAMgB,MACxBK,kBAAmC,UAAhBrB,EAAMgB,MACzBM,gBAAiC,SAAhBtB,EAAMgB,MACvBO,aAA8B,UAAhBvB,EAAMgB,MACpBQ,oBAAqC,SAAhBxB,EAAMgB,OAE7B,CACES,eAAgBzB,EAAM0B,uBAGxB1B,EAAMG,YAIZ,OAAOH,EAAM0B,sBACXC,qCAAO1B,GAAgB2B,wBAAyB,CAAEC,OAAQ7B,EAAM8B,SAEhEH,qCAAO1B,GAAiBD,EAAM8B,OAMlC/B,EAAKgC,aAAe,CAClBzB,KAAM,OACNO,QAAQ,EACRG,MAAO,OACPU,uBAAuB,EACvBZ,UAAU"}

package/dist/web-ui.esm.css

@@ -0,0 +1,37 @@
+.cweb-text {
+  font-family: "Inter", "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.31em;
+  color: #2d2d2d;
+  margin: 0; }
+  .cweb-text.type-emphasized {
+    font-weight: bold; }
+  .cweb-text.type-error {
+    color: #e55b56;
+    font-size: 0.875rem;
+    line-height: 1.25em; }
+  .cweb-text.type-strong {
+    font-weight: bold;
+    color: #0f3554; }
+  .cweb-text.type-small-dark {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #2d2d2d; }
+  .cweb-text.type-small {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-small-fineprint {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+    color: #737373; }
+  .cweb-text.type-fineprint {
+    color: #737373; }
+  .cweb-text.level-inline {
+    display: inline; }
+  .cweb-text.level-block {
+    display: block; }
+
+.in-html-link a:hover {
+  text-decoration: underline; }

package/dist/web-ui.esm.js

@@ -1,17 +1,53 @@
+import classNames from 'classnames';
 import React from 'react';
 
-// see: https://github.com/storybookjs/storybook/issues/9556
-
-/**
- * A custom Thing component. Neat!
- */
-
-var Thing = function Thing(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "mt-10 bg-red-500 p-5 rounded-md"
-  }, children || "this is a test");
+var Text = function Text(props) {
+  var containerProps = {
+    "data-test-id": props["data-test-id"],
+    className: classNames( // apply different style classes
+    // for now we stick with font-size 16px on the body
+    // so I am adjusting our styles accordingly (one step down)
+    {
+      "text-xs font-medium": props.type === "sm",
+      "text-xs font-semibold": props.type === "sm-strong",
+      "text-sm": props.type === "base",
+      "text-sm font-semibold": props.type === "strong",
+      "": props.type === "lg",
+      "font-semibold": props.type === "lg-strong",
+      "text-lg": props.type === "xl",
+      "font-semibold text-lg": props.type === "xl-strong"
+    }, {
+      inline: props.inline,
+      // FIXME: this class doesn't do anything without a max-width
+      truncate: props.truncate
+    }, {
+      "text-slate-700": props.color === "base",
+      "text-slate-500": props.color === "gray-500",
+      "text-slate-200": props.color === "gray-200",
+      "text-red-700": props.color === "red",
+      "text-green-700": props.color === "green",
+      "text-yellow-700": props.color === "amber",
+      "text-blue-700": props.color === "blue",
+      "text-white": props.color === "white",
+      "text-primary-dark": props.color === "blue"
+    }, {
+      "in-html-link": props.containsDangerousHtml
+    }, //can be used to overwrite other classes like the color
+    props.className)
+  };
+  return props.containsDangerousHtml ? React.createElement("p", Object.assign({}, containerProps, {
+    dangerouslySetInnerHTML: {
+      __html: props.text
+    }
+  })) : React.createElement("p", Object.assign({}, containerProps), props.text);
+};
+Text.defaultProps = {
+  type: "base",
+  inline: false,
+  color: "base",
+  containsDangerousHtml: false,
+  truncate: false
 };
 
-export { Thing };
+export { Text };
 //# sourceMappingURL=web-ui.esm.js.map

package/dist/web-ui.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-ui.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { FC, HTMLAttributes, ReactChild } from \"react\";\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactChild;\n}\n\n// Please do not use types off of a default export module or else Storybook Docs will suffer.\n// see: https://github.com/storybookjs/storybook/issues/9556\n/**\n * A custom Thing component. Neat!\n */\nexport const Thing: FC<Props> = ({ children }) => {\n  return <div className={\"mt-10 bg-red-500 p-5 rounded-md\"}>{children || \"this is a test\"}</div>;\n};\n"],"names":["Thing","children","React","className"],"mappings":";;AAOA;;AACA;;;;IAGaA,KAAK,GAAc,SAAnBA,KAAmB;MAAGC,gBAAAA;EACjC,OAAOC,mBAAA,MAAA;IAAKC,SAAS,EAAE;GAAhB,EAAoDF,QAAQ,IAAI,gBAAhE,CAAP;AACD;;;;"}
+{"version":3,"file":"web-ui.esm.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\n\nimport { RestPropped } from \"../../types/general.types\";\n\nimport \"./Text.scss\";\n\nexport type TextStyle = \"sm\" | \"sm-strong\" | \"base\" | \"strong\" | \"lg\" | \"lg-strong\" | \"xl\" | \"xl-strong\" | string;\n\n//Extend with other colors that we want to enable for text\nexport type TextColor = \"base\" | \"gray-500\" | \"gray-200\" | \"white\" | \"blue\" | \"red\" | \"green\" | \"amber\" | \"inherit\";\n\nexport interface TextProps extends RestPropped {\n  text: string;\n  type?: TextStyle; //defaults to \"base\"\n  inline?: boolean; //defaults to false\n  color?: TextColor; //defaults to \"base\"\n  hoverColor?: TextColor; //defaults to \"base\"\n  className?: string;\n  containsDangerousHtml?: boolean; //defaults to false\n  truncate?: boolean; //defaults to false\n  \"data-test-id\"?: string;\n}\n\nexport const Text = (props: TextProps): JSX.Element => {\n  const containerProps = {\n    \"data-test-id\": props[\"data-test-id\"],\n    className: classNames(\n        // apply different style classes\n        // for now we stick with font-size 16px on the body\n        // so I am adjusting our styles accordingly (one step down)\n        {\n          \"text-xs font-medium\": props.type === \"sm\",\n          \"text-xs font-semibold\": props.type === \"sm-strong\",\n          \"text-sm\": props.type === \"base\",\n          \"text-sm font-semibold\": props.type === \"strong\",\n          \"\": props.type === \"lg\",\n          \"font-semibold\": props.type === \"lg-strong\",\n          \"text-lg\": props.type === \"xl\",\n          \"font-semibold text-lg\": props.type === \"xl-strong\",\n        },\n        {\n          inline: props.inline,\n          // FIXME: this class doesn't do anything without a max-width\n          truncate: props.truncate,\n        },\n        {\n          \"text-slate-700\": props.color === \"base\",\n          \"text-slate-500\": props.color === \"gray-500\",\n          \"text-slate-200\": props.color === \"gray-200\",\n          \"text-red-700\": props.color === \"red\",\n          \"text-green-700\": props.color === \"green\",\n          \"text-yellow-700\": props.color === \"amber\",\n          \"text-blue-700\": props.color === \"blue\",\n          \"text-white\": props.color === \"white\",\n          \"text-primary-dark\": props.color === \"blue\",\n        },\n        {\n          \"in-html-link\": props.containsDangerousHtml,\n        },\n        //can be used to overwrite other classes like the color\n        props.className\n    ),\n  };\n\n  return props.containsDangerousHtml ? (\n    <p {...containerProps} dangerouslySetInnerHTML={{ __html: props.text }} />\n  ) : (\n    <p {...containerProps}>{props.text}</p>\n  );\n};\n\nexport default Text;\n\nText.defaultProps = {\n  type: \"base\",\n  inline: false,\n  color: \"base\",\n  containsDangerousHtml: false,\n  truncate: false,\n};\n"],"names":["Text","props","containerProps","className","classNames","type","inline","truncate","color","containsDangerousHtml","React","dangerouslySetInnerHTML","__html","text","defaultProps"],"mappings":";;;AAwBO,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD;EAClB,IAAMC,cAAc,GAAG;IACrB,gBAAgBD,KAAK,CAAC,cAAD,CADA;IAErBE,SAAS,EAAEC,UAAU;;;IAIjB;MACE,uBAAuBH,KAAK,CAACI,IAAN,KAAe,IADxC;MAEE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe,WAF1C;MAGE,WAAWJ,KAAK,CAACI,IAAN,KAAe,MAH5B;MAIE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe,QAJ1C;MAKE,IAAIJ,KAAK,CAACI,IAAN,KAAe,IALrB;MAME,iBAAiBJ,KAAK,CAACI,IAAN,KAAe,WANlC;MAOE,WAAWJ,KAAK,CAACI,IAAN,KAAe,IAP5B;MAQE,yBAAyBJ,KAAK,CAACI,IAAN,KAAe;KAZzB,EAcjB;MACEC,MAAM,EAAEL,KAAK,CAACK,MADhB;;MAGEC,QAAQ,EAAEN,KAAK,CAACM;KAjBD,EAmBjB;MACE,kBAAkBN,KAAK,CAACO,KAAN,KAAgB,MADpC;MAEE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,UAFpC;MAGE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,UAHpC;MAIE,gBAAgBP,KAAK,CAACO,KAAN,KAAgB,KAJlC;MAKE,kBAAkBP,KAAK,CAACO,KAAN,KAAgB,OALpC;MAME,mBAAmBP,KAAK,CAACO,KAAN,KAAgB,OANrC;MAOE,iBAAiBP,KAAK,CAACO,KAAN,KAAgB,MAPnC;MAQE,cAAcP,KAAK,CAACO,KAAN,KAAgB,OARhC;MASE,qBAAqBP,KAAK,CAACO,KAAN,KAAgB;KA5BtB,EA8BjB;MACE,gBAAgBP,KAAK,CAACQ;KA/BP;IAkCjBR,KAAK,CAACE,SAlCW;GAFvB;EAwCA,OAAOF,KAAK,CAACQ,qBAAN,GACLC,mBAAA,IAAA,oBAAOR;IAAgBS,uBAAuB,EAAE;MAAEC,MAAM,EAAEX,KAAK,CAACY;;IAAhE,CADK,GAGLH,mBAAA,IAAA,oBAAOR,eAAP,EAAwBD,KAAK,CAACY,IAA9B,CAHF;AAKD,CA9CM;AAkDPb,IAAI,CAACc,YAAL,GAAoB;EAClBT,IAAI,EAAE,MADY;EAElBC,MAAM,EAAE,KAFU;EAGlBE,KAAK,EAAE,MAHW;EAIlBC,qBAAqB,EAAE,KAJL;EAKlBF,QAAQ,EAAE;AALQ,CAApB;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -105,7 +105,9 @@
     "react-glider": "^3.1.0",
     "react-modal": "^3.15.1",
     "react-quill": "^1.3.5",
-    "react-select": "^5.3.2"
+    "react-select": "^5.3.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0"
   },
   "description": "Luscii UI components library for web projects",
   "directories": {

package/src/index.tsx

@@ -1,14 +1 @@
-import React, { FC, HTMLAttributes, ReactChild } from "react";
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactChild;
-}
-
-// Please do not use types off of a default export module or else Storybook Docs will suffer.
-// see: https://github.com/storybookjs/storybook/issues/9556
-/**
- * A custom Thing component. Neat!
- */
-export const Thing: FC<Props> = ({ children }) => {
-  return <div className={"mt-10 bg-red-500 p-5 rounded-md"}>{children || "this is a test"}</div>;
-};
+export { default as Text } from "./components/Text/Text";