@spaced-out/ui-design-system 0.3.12 → 0.3.13

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.13](https://github.com/spaced-out/ui-design-system/compare/v0.3.12...v0.3.13) (2024-12-18)
+
+
+### Bug Fixes
+
+* Removed stories that are not required in Chatbubble ([#308](https://github.com/spaced-out/ui-design-system/issues/308)) ([4b65c32](https://github.com/spaced-out/ui-design-system/commit/4b65c32e544f8c9953de78d375ee4959957670d1))
+
 ### [0.3.12](https://github.com/spaced-out/ui-design-system/compare/v0.3.11...v0.3.12) (2024-12-18)
 
 

package/lib/components/ChatBubble/ChatBubble.js

@@ -14,12 +14,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const getNamedComponent = (childrenArray, comp) => {
+const getNamedComponent = (childrenArray, componentDisplayName) => {
   const nodes = [];
   for (const child of childrenArray) {
     if (
     // $FlowFixMe
-    child?.type?.displayName === comp) {
+    child?.type?.displayName === componentDisplayName) {
       nodes.push(child);
     }
   }
@@ -44,7 +44,6 @@ const ChatBubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     "data-testid": "ChatBubble",
     className: (0, _classify.default)(_ChatBubbleModule.default.chatBubbleWrapper, {
-      [_ChatBubbleModule.default.chatBubbleWrapperLeft]: isLeftAligned,
       [_ChatBubbleModule.default.chatBubbleWrapperRight]: !isLeftAligned
     }, classNames?.wrapper)
   }, anchorComponent, chatComponent);
@@ -65,8 +64,8 @@ const ChatAnchor = _ref2 => {
   }), isAI ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "sparkle",
     color: "information",
-    type: "solid",
-    size: "large"
+    type: _Icon.ICON_TYPE.solid,
+    size: _Icon.ICON_SIZE.large
   }) : /*#__PURE__*/React.createElement(_Avatar.Avatar, avatarProps)));
 };
 exports.ChatAnchor = ChatAnchor;

package/lib/components/ChatBubble/ChatBubble.js.flow

@@ -3,9 +3,9 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {AvatarProps} from '../Avatar';
 import {Avatar} from '../Avatar';
-import type {AvatarProps} from '../Avatar/Avatar.js';
-import {Icon} from '../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
@@ -14,13 +14,13 @@ import css from './ChatBubble.module.css';
 
 const getNamedComponent = (
   childrenArray: Array<React.Node>,
-  comp: string,
-): React.Node | React.Node[] | null => {
+  componentDisplayName: string,
+): ?React.Node | React.Node[] => {
   const nodes: React.Node[] = [];
   for (const child of childrenArray) {
     if (
       // $FlowFixMe
-      child?.type?.displayName === comp
+      child?.type?.displayName === componentDisplayName
     ) {
       nodes.push(child);
     }
@@ -62,7 +62,6 @@ export const ChatBubble: React$AbstractComponent<
         className={classify(
           css.chatBubbleWrapper,
           {
-            [css.chatBubbleWrapperLeft]: isLeftAligned,
             [css.chatBubbleWrapperRight]: !isLeftAligned,
           },
           classNames?.wrapper,
@@ -94,7 +93,12 @@ export const ChatAnchor = ({
   >
     <Tooltip {...tooltip} hidden={!tooltip}>
       {isAI ? (
-        <Icon name="sparkle" color="information" type="solid" size="large" />
+        <Icon
+          name="sparkle"
+          color="information"
+          type={ICON_TYPE.solid}
+          size={ICON_SIZE.large}
+        />
       ) : (
         <Avatar {...avatarProps} />
       )}

package/lib/components/ChatBubble/ChatBubble.module.css

@@ -1,29 +1,41 @@
-@value (spaceNone,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
-@value (colorBorderPrimary,
-colorBackgroundTertiary,
-colorNeutralLightest,
-colorFillPrimary,
-colorInformation) from '../../styles/variables/_color.css';
-@value (borderWidthNone,
-borderWidthPrimary,
-borderRadiusSmall
+@value (
+  spaceNone,
+  spaceXSmall,
+  spaceSmall
+) from '../../styles/variables/_space.css';
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorFillPrimary,
+  colorInformation
+) from '../../styles/variables/_color.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusSmall,
+  borderRadiusCircle
 ) from '../../styles/variables/_border.css';
-@value (size2,size4,size12,size24,size42,size580,sizeFluid) from
-  '../../styles/variables/_size.css';
-@value (opacity100, opacity60,opacity80) from
-  '../../styles/variables/_opacity.css';
+@value (
+  size2,
+  size12,
+  size24,
+  size42,
+  size580
+) from '../../styles/variables/_size.css';
+@value (
+  opacity100, 
+  opacity60,
+  opacity80
+) from '../../styles/variables/_opacity.css';
 
 .chatBubbleWrapper {
   display: flex;
   gap: spaceSmall;
-}
-
-.chatBubbleWrapperLeft {
-  flex-direction: row; /* ChatAnchor comes first */
+  flex-direction: row;
 }
 
 .chatBubbleWrapperRight {
-  flex-direction: row-reverse; /* ChatContent comes first */
+  flex-direction: row-reverse;
 }
 
 .chatAnchorWrapper {
@@ -74,11 +86,7 @@ borderRadiusSmall
 .loadingText {
   composes: buttonTextMedium from '../../styles/typography.module.css';
   display: inline-flex;
-  background: linear-gradient(
-    90deg,
-    colorFillPrimary 0%,
-    colorInformation 100%
-  );
+  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -96,12 +104,8 @@ borderRadiusSmall
 .dot {
   width: calc(size12/4);
   height: calc(size12/4);
-  background: linear-gradient(
-    90deg,
-    colorFillPrimary 0%,
-    colorInformation 100%
-  );
-  border-radius: 50%; /* Makes dots circular */
+  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
+  border-radius: borderRadiusCircle;
   opacity: opacity80;
 
   /* Bounce Animation */

package/package.json

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