@spaced-out/ui-design-system 0.0.33 → 0.0.34

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.0.34](https://github.com/spaced-out/ui-design-system/compare/v0.0.33...v0.0.34) (2023-02-28)
+
+
+### Features
+
+* avatar customisation enable ([#71](https://github.com/spaced-out/ui-design-system/issues/71)) ([0f06119](https://github.com/spaced-out/ui-design-system/commit/0f0611994a1ece78b9bc9232548b1f2634847682))
+
+
+### Bug Fixes
+
+* controlled search input ([#72](https://github.com/spaced-out/ui-design-system/issues/72)) ([c089012](https://github.com/spaced-out/ui-design-system/commit/c089012a83134789e1ef4cc68e6a693a5848685e))
+
 ### [0.0.33](https://github.com/spaced-out/ui-design-system/compare/v0.0.32...v0.0.33) (2023-02-22)
 
 

package/lib/components/Avatar/Avatar.js

@@ -42,15 +42,22 @@ const getAvatarText = function () {
 const AvatarTextDecorator = _ref => {
   let {
     avatarText,
-    size
+    size,
+    className
   } = _ref;
   switch (size) {
     case 'small':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, null, avatarText);
+      return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
+        className: className
+      }, avatarText);
     case 'medium':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleMedium, null, avatarText);
+      return /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
+        className: className
+      }, avatarText);
     case 'large':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, avatarText);
+      return /*#__PURE__*/React.createElement(_Text.SubTitleLarge, {
+        className: className
+      }, avatarText);
   }
 };
 
@@ -69,12 +76,13 @@ const AvatarConditionalContent = _ref2 => {
     iconType,
     color = 'blue',
     status,
-    statusBorderColorToken
+    statusBorderColorToken,
+    classNames
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: _AvatarModule.default.innerContainer,
+    className: (0, _classify.default)(_AvatarModule.default.innerContainer, classNames?.content),
     style: {
-      background: AVATAR_COLOR[color]
+      '--background-color': AVATAR_COLOR[color]
     }
   }, !!status && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size])
@@ -85,14 +93,16 @@ const AvatarConditionalContent = _ref2 => {
   })), imageSrc ? /*#__PURE__*/React.createElement("img", {
     src: imageSrc,
     alt: "Avatar",
-    className: _AvatarModule.default.avatar
+    className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
   }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
     type: iconType,
-    size: iconSize[size]
+    size: iconSize[size],
+    className: classNames?.icon
   }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
     avatarText: getAvatarText(text),
-    size: size
+    size: size,
+    className: classNames?.text
   }) : null);
 };
 const Avatar = _ref3 => {
@@ -117,7 +127,7 @@ const Avatar = _ref3 => {
     }, classNames?.wrapper),
     style: style
   }, ring ? /*#__PURE__*/React.createElement("div", {
-    className: _AvatarModule.default.ring
+    className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring)
   }, /*#__PURE__*/React.createElement("div", {
     className: _AvatarModule.default.whiteCircle
   }, /*#__PURE__*/React.createElement(AvatarConditionalContent, {
@@ -128,7 +138,8 @@ const Avatar = _ref3 => {
     color: color,
     size: size,
     status: status,
-    statusBorderColorToken: statusBorderColorToken
+    statusBorderColorToken: statusBorderColorToken,
+    classNames: classNames
   }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
     imageSrc: imageSrc,
     text: text,
@@ -137,7 +148,8 @@ const Avatar = _ref3 => {
     color: color,
     size: size,
     status: status,
-    statusBorderColorToken: statusBorderColorToken
+    statusBorderColorToken: statusBorderColorToken,
+    classNames: classNames
   }));
 };
 exports.Avatar = Avatar;
@@ -161,7 +173,8 @@ const BaseAvatar = _ref4 => {
     }
   }, /*#__PURE__*/React.createElement(AvatarTextDecorator, {
     avatarText: text,
-    size: size
+    size: size,
+    className: classNames?.text
   }));
 };
 exports.BaseAvatar = BaseAvatar;

package/lib/components/Avatar/Avatar.js.flow

@@ -25,7 +25,14 @@ import {StatusIndicator} from '../StatusIndicator';
 import css from './Avatar.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  ring?: string,
+  content?: string,
+  image?: string,
+  icon?: string,
+  text?: string,
+}>;
 
 export const AVATAR_SIZE = Object.freeze({
   small: 'small',
@@ -72,17 +79,21 @@ const getAvatarText = (text = '') => {
 const AvatarTextDecorator = ({
   avatarText,
   size,
+  className,
 }: {
   avatarText: string,
   size: AvatarSize,
+  className?: string,
 }) => {
   switch (size) {
   case 'small':
-    return <SubTitleSmall>{avatarText}</SubTitleSmall>;
+    return <SubTitleSmall className={className}>{avatarText}</SubTitleSmall>;
   case 'medium':
-    return <SubTitleMedium>{avatarText}</SubTitleMedium>;
+    return (
+      <SubTitleMedium className={className}>{avatarText}</SubTitleMedium>
+    );
   case 'large':
-    return <SubTitleLarge>{avatarText}</SubTitleLarge>;
+    return <SubTitleLarge className={className}>{avatarText}</SubTitleLarge>;
   }
 };
 
@@ -103,6 +114,7 @@ export type AvatarContentProps = {
   ring?: boolean,
   status?: StatusSemanticType,
   statusBorderColorToken?: $Keys<typeof COLORS>,
+  classNames?: ClassNames,
 };
 
 const AvatarConditionalContent = ({
@@ -114,8 +126,14 @@ const AvatarConditionalContent = ({
   color = 'blue',
   status,
   statusBorderColorToken,
+  classNames,
 }: AvatarContentProps) => (
-  <div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
+  <div
+    className={classify(css.innerContainer, classNames?.content)}
+    style={{
+      '--background-color': AVATAR_COLOR[color],
+    }}
+  >
     {!!status && (
       <div className={classify(css.statusIndicatorWrapper, css[size])}>
         <StatusIndicator
@@ -127,11 +145,24 @@ const AvatarConditionalContent = ({
     )}
 
     {imageSrc ? (
-      <img src={imageSrc} alt="Avatar" className={css.avatar}></img>
+      <img
+        src={imageSrc}
+        alt="Avatar"
+        className={classify(css.avatar, classNames?.image)}
+      ></img>
     ) : iconName ? (
-      <Icon name={iconName} type={iconType} size={iconSize[size]} />
+      <Icon
+        name={iconName}
+        type={iconType}
+        size={iconSize[size]}
+        className={classNames?.icon}
+      />
     ) : text ? (
-      <AvatarTextDecorator avatarText={getAvatarText(text)} size={size} />
+      <AvatarTextDecorator
+        avatarText={getAvatarText(text)}
+        size={size}
+        className={classNames?.text}
+      />
     ) : null}
   </div>
 );
@@ -162,7 +193,7 @@ export const Avatar = ({
     style={style}
   >
     {ring ? (
-      <div className={css.ring}>
+      <div className={classify(css.ring, classNames?.ring)}>
         <div className={css.whiteCircle}>
           <AvatarConditionalContent
             imageSrc={imageSrc}
@@ -173,6 +204,7 @@ export const Avatar = ({
             size={size}
             status={status}
             statusBorderColorToken={statusBorderColorToken}
+            classNames={classNames}
           />
         </div>
       </div>
@@ -186,6 +218,7 @@ export const Avatar = ({
         size={size}
         status={status}
         statusBorderColorToken={statusBorderColorToken}
+        classNames={classNames}
       />
     )}
   </div>
@@ -210,6 +243,10 @@ export const BaseAvatar = ({
     )}
     style={{...style, background: AVATAR_COLOR[color]}}
   >
-    <AvatarTextDecorator avatarText={text} size={size} />
+    <AvatarTextDecorator
+      avatarText={text}
+      size={size}
+      className={classNames?.text}
+    />
   </div>
 );

package/lib/components/Avatar/Avatar.module.css

@@ -1,4 +1,4 @@
-@value (colorFillPrimary, colorBackgroundTertiary, colorInformation) from '../../styles/variables/_color.css';
+@value (colorFillPrimary, colorBackgroundTertiary, colorInformation, colorInformationLightest) from '../../styles/variables/_color.css';
 @value ( size34, size42, size60, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';
 @value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
@@ -78,6 +78,7 @@
 }
 
 .innerContainer {
+  --background-color: colorInformationLightest;
   display: flex;
   position: relative;
   border-radius: borderRadiusCircle;
@@ -85,6 +86,7 @@
   height: sizeFluid;
   align-items: center;
   justify-content: center;
+  background: var(--background-color);
 }
 
 .statusIndicatorWrapper {

package/lib/components/SearchInput/SearchInput.js

@@ -18,27 +18,26 @@ const SearchInput = _ref => {
     locked,
     placeholder = 'Search...',
     classNames,
+    onClear,
     ...searchInputProps
   } = _ref;
-  const [searchValue, setSearchValue] = React.useState(value);
-  React.useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
   const handleClearClick = () => {
-    setSearchValue('');
+    onClear?.();
   };
-  return /*#__PURE__*/React.createElement(_Input.Input, _extends({}, searchInputProps, {
+  return /*#__PURE__*/React.createElement(_Input.Input, _extends({
+    type: "text"
+  }, searchInputProps, {
     classNames: {
       ...classNames,
-      iconRight: searchValue && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
-      iconLeft: searchValue && !disabled ? _SearchInputModule.default.primaryText : ''
+      iconRight: value && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
+      iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : ''
     },
     placeholder: placeholder,
-    value: searchValue,
+    value: value,
     disabled: disabled,
     locked: locked,
     iconLeftName: "magnifying-glass",
-    iconRightName: searchValue && !(disabled || locked) ? 'xmark' : 'fw',
+    iconRightName: value && !(disabled || locked) ? 'xmark' : 'fw',
     onIconRightClick: handleClearClick
   }));
 };

package/lib/components/SearchInput/SearchInput.js.flow

@@ -33,6 +33,7 @@ export type SearchInputProps = {
   onPaste?: (e: ClipboardEvent) => mixed,
   onPaste?: (e: ClipboardEvent) => mixed,
   onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onClear?: () => void,
 };
 
 export const SearchInput = ({
@@ -41,32 +42,28 @@ export const SearchInput = ({
   locked,
   placeholder = 'Search...',
   classNames,
+  onClear,
   ...searchInputProps
 }: SearchInputProps): React.Node => {
-  const [searchValue, setSearchValue] = React.useState(value);
-
-  React.useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
   const handleClearClick = () => {
-    setSearchValue('');
+    onClear?.();
   };
 
   return (
     <Input
+      type="text"
       {...searchInputProps}
       classNames={{
         ...classNames,
-        iconRight: searchValue && !(disabled || locked) ? css.clickable : '',
-        iconLeft: searchValue && !disabled ? css.primaryText : '',
+        iconRight: value && !(disabled || locked) ? css.clickable : '',
+        iconLeft: value && !disabled ? css.primaryText : '',
       }}
       placeholder={placeholder}
-      value={searchValue}
+      value={value}
       disabled={disabled}
       locked={locked}
       iconLeftName="magnifying-glass"
-      iconRightName={searchValue && !(disabled || locked) ? 'xmark' : 'fw'}
+      iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
       onIconRightClick={handleClearClick}
     />
   );

package/package.json

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