@spaced-out/ui-design-system 0.3.9 → 0.3.11

package/lib/components/TextTile/TextTile.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextTile = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _TextTileModule = _interopRequireDefault(require("./TextTile.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    header,
+    iconName = 'sparkles',
+    classNames,
+    description
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "TextTile",
+    className: (0, _classify.default)(_TextTileModule.default.textTileWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_TextTileModule.default.textTileTitle, classNames?.title)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    size: _Icon.ICON_SIZE.large,
+    name: iconName,
+    type: _Icon.ICON_TYPE.solid,
+    className: _TextTileModule.default.sparkles
+  }), /*#__PURE__*/React.createElement(_Text.JumboMedium, null, header)), /*#__PURE__*/React.createElement(_Text.BodyLarge, null, description));
+});
+exports.TextTile = TextTile;

package/lib/components/TextTile/TextTile.js.flow

@@ -0,0 +1,44 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodyLarge, JumboMedium} from '../Text';
+
+import css from './TextTile.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, title?: string}>;
+
+export type TextTileProps = {
+  header?: string,
+  iconName?: string,
+  classNames?: ClassNames,
+  description?: string,
+};
+
+export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
+  React.forwardRef<TextTileProps, HTMLDivElement>(
+    (
+      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
+      ref,
+    ) => (
+      <div
+        ref={ref}
+        data-testid="TextTile"
+        className={classify(css.textTileWrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.textTileTitle, classNames?.title)}>
+          <Icon
+            size={ICON_SIZE.large}
+            name={iconName}
+            type={ICON_TYPE.solid}
+            className={css.sparkles}
+          />
+          <JumboMedium>{header}</JumboMedium>
+        </div>
+        <BodyLarge>{description}</BodyLarge>
+      </div>
+    ),
+  );

package/lib/components/TextTile/TextTile.module.css

@@ -0,0 +1,27 @@
+@value (
+  spaceSmall,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  colorFillPrimary,
+  colorInformation
+) from '../../styles/variables/_color.css';
+
+.textTileWrapper {
+  display: flex;
+  gap: spaceSmall;
+  flex-direction: column;
+  align-items: center;
+}
+
+.textTileTitle {
+  display: flex;
+  gap: spaceXSmall;
+  justify-content: center;
+}
+
+.sparkles {
+  background: linear-gradient(to right, colorFillPrimary, colorInformation);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/lib/components/TextTile/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TextTile = require("./TextTile");
+Object.keys(_TextTile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextTile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextTile[key];
+    }
+  });
+});

package/lib/components/TextTile/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './TextTile';

package/lib/components/Textarea/Textarea.js

@@ -73,7 +73,8 @@ const Textarea_ = (props, ref) => {
     value: value,
     onChange: onChange,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    className: classNames?.textarea
   }))), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
     className: _TextareaModule.default.info
   }, /*#__PURE__*/React.createElement(_Text.BodySmall, {

package/lib/components/Textarea/Textarea.js.flow

@@ -7,7 +7,7 @@ import {BodySmall, FormLabelSmall} from '../Text';
 import css from './Textarea.module.css';
 
 
-type ClassNames = $ReadOnly<{box?: string}>;
+type ClassNames = $ReadOnly<{box?: string, textarea?: string}>;
 
 export type TextareaProps = {
   value?: string,
@@ -112,6 +112,7 @@ const Textarea_ = (props: TextareaProps, ref): React.Node => {
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
+          className={classNames?.textarea}
         ></textarea>
       </div>
       {(Boolean(helperText) || error) && (

package/lib/components/index.js

@@ -113,6 +113,17 @@ Object.keys(_Charts).forEach(function (key) {
     }
   });
 });
+var _ChatBubble = require("./ChatBubble");
+Object.keys(_ChatBubble).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatBubble[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatBubble[key];
+    }
+  });
+});
 var _Checkbox = require("./Checkbox");
 Object.keys(_Checkbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -190,6 +201,17 @@ Object.keys(_Dialog).forEach(function (key) {
     }
   });
 });
+var _Disclaimer = require("./Disclaimer");
+Object.keys(_Disclaimer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Disclaimer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Disclaimer[key];
+    }
+  });
+});
 var _Dropdown = require("./Dropdown");
 Object.keys(_Dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -443,6 +465,28 @@ Object.keys(_ProgressDonut).forEach(function (key) {
     }
   });
 });
+var _PromptChip = require("./PromptChip");
+Object.keys(_PromptChip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptChip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptChip[key];
+    }
+  });
+});
+var _PromptInput = require("./PromptInput");
+Object.keys(_PromptInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptInput[key];
+    }
+  });
+});
 var _RadioButton = require("./RadioButton");
 Object.keys(_RadioButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -454,6 +498,17 @@ Object.keys(_RadioButton).forEach(function (key) {
     }
   });
 });
+var _RadioTile = require("./RadioTile");
+Object.keys(_RadioTile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadioTile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadioTile[key];
+    }
+  });
+});
 var _RangeSlider = require("./RangeSlider");
 Object.keys(_RangeSlider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -465,6 +520,28 @@ Object.keys(_RangeSlider).forEach(function (key) {
     }
   });
 });
+var _Rating = require("./Rating");
+Object.keys(_Rating).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Rating[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Rating[key];
+    }
+  });
+});
+var _ScoreBar = require("./ScoreBar");
+Object.keys(_ScoreBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScoreBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScoreBar[key];
+    }
+  });
+});
 var _SearchInput = require("./SearchInput");
 Object.keys(_SearchInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -476,6 +553,17 @@ Object.keys(_SearchInput).forEach(function (key) {
     }
   });
 });
+var _Separator = require("./Separator");
+Object.keys(_Separator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Separator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Separator[key];
+    }
+  });
+});
 var _Shimmer = require("./Shimmer");
 Object.keys(_Shimmer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -586,6 +674,17 @@ Object.keys(_Textarea).forEach(function (key) {
     }
   });
 });
+var _TextTile = require("./TextTile");
+Object.keys(_TextTile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextTile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextTile[key];
+    }
+  });
+});
 var _Toast = require("./Toast");
 Object.keys(_Toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -10,6 +10,7 @@ export * from './ButtonDropdown';
 export * from './ButtonTabs';
 export * from './Card';
 export * from './Charts';
+export * from './ChatBubble';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CircularLoader';
@@ -17,6 +18,7 @@ export * from './CollapsibleCard';
 export * from './ConditionalWrapper';
 export * from './DateRangePicker';
 export * from './Dialog';
+export * from './Disclaimer';
 export * from './Dropdown';
 export * from './EmptyState';
 export * from './ErrorMessage';
@@ -40,9 +42,15 @@ export * from './PageTitle';
 export * from './Pagination';
 export * from './Panel';
 export * from './ProgressDonut';
+export * from './PromptChip';
+export * from './PromptInput';
 export * from './RadioButton';
+export * from './RadioTile';
 export * from './RangeSlider';
+export * from './Rating';
+export * from './ScoreBar';
 export * from './SearchInput';
+export * from './Separator';
 export * from './Shimmer';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
@@ -53,6 +61,7 @@ export * from './Table';
 export * from './Tabs';
 export * from './Text';
 export * from './Textarea';
+export * from './TextTile';
 export * from './Toast';
 export * from './Toggle';
 export * from './Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {