@spaced-out/ui-design-system 0.3.43 → 0.3.45

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.45](https://github.com/spaced-out/ui-design-system/compare/v0.3.44...v0.3.45) (2025-06-16)
+
+### [0.3.44](https://github.com/spaced-out/ui-design-system/compare/v0.3.43...v0.3.44) (2025-06-16)
+
+
+### Features
+
+* (GDS-526) ai icon ([#357](https://github.com/spaced-out/ui-design-system/issues/357)) ([4be6e07](https://github.com/spaced-out/ui-design-system/commit/4be6e07a9163906306250c8b35f5f335d3a0ee88))
+
 ### [0.3.43](https://github.com/spaced-out/ui-design-system/compare/v0.3.42...v0.3.43) (2025-06-16)
 
 

package/lib/components/BadgedIcon/BadgedIcon.d.ts

@@ -0,0 +1,70 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import typographyStyle from '../../styles/typography.module.css';
+import css from './BadgedIcon.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  icon?: string;
+  badgeIcon?: string;
+}>;
+export type BadgedIconProps = {
+  type?: IconType;
+  name: string;
+  size?: IconSize;
+  ariaLabel?: string;
+  showBadge?: boolean;
+  classNames?: ClassNames;
+};
+export const BadgedIcon = ({
+  name,
+  showBadge = true,
+  classNames,
+  size = 'medium',
+  type = 'solid',
+  ariaLabel,
+}: BadgedIconProps): React.ReactNode => (
+  <>
+    {!!name && (
+      <div
+        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
+      >
+        <Icon
+          ariaLabel={ariaLabel}
+          name={name}
+          className={classNames?.icon}
+          name={name}
+          size={size === 'large' ? 'medium' : size}
+          type={type}
+          color={TEXT_COLORS.clickable}
+        />
+        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
+      </div>
+    )}
+  </>
+);
+
+const BadgeIcon = ({
+  className,
+}: {
+  className: string | null | undefined;
+}): React.ReactNode => (
+  <svg
+    className={classify(
+      css.badgeIcon,
+      typographyStyle[TEXT_COLORS['clickable']],
+      className,
+    )}
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/lib/components/BadgedIcon/BadgedIcon.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgedIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _BadgedIconModule = _interopRequireDefault(require("./BadgedIcon.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 BadgedIcon = _ref => {
+  let {
+    name,
+    showBadge = true,
+    classNames,
+    size = 'medium',
+    type = 'solid',
+    ariaLabel
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_BadgedIconModule.default.iconContainer, _BadgedIconModule.default[size], classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    ariaLabel: ariaLabel,
+    name: name,
+    className: classNames?.icon,
+    name: name,
+    size: size === 'large' ? 'medium' : size,
+    type: type,
+    color: _typography.TEXT_COLORS.clickable
+  }), showBadge && /*#__PURE__*/React.createElement(BadgeIcon, {
+    className: classNames?.badgeIcon
+  })));
+};
+exports.BadgedIcon = BadgedIcon;
+const BadgeIcon = _ref2 => {
+  let {
+    className
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: (0, _classify.default)(_BadgedIconModule.default.badgeIcon, _typographyModule.default[_typography.TEXT_COLORS['clickable']], className),
+    viewBox: "0 0 12 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z",
+    fill: "currentColor"
+  }));
+};

package/lib/components/BadgedIcon/BadgedIcon.js.flow

@@ -0,0 +1,73 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import typographyStyle from '../../styles/typography.module.css';
+import css from './BadgedIcon.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  icon?: string,
+  badgeIcon?: string,
+}>;
+
+export type BadgedIconProps = {
+  type?: IconType,
+  name: string,
+  size?: IconSize,
+  ariaLabel?: string,
+  showBadge?: boolean,
+  classNames?: ClassNames,
+};
+
+export const BadgedIcon = ({
+  name,
+  showBadge = true,
+  classNames,
+  size = 'medium',
+  type = 'solid',
+  ariaLabel,
+}: BadgedIconProps): React.Node => (
+  <>
+    {!!name && (
+      <div
+        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
+      >
+        <Icon
+          ariaLabel={ariaLabel}
+          name={name}
+          className={classNames?.icon}
+          name={name}
+          size={size === 'large' ? 'medium' : size}
+          type={type}
+          color={TEXT_COLORS.clickable}
+        />
+        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
+      </div>
+    )}
+  </>
+);
+
+const BadgeIcon = ({className}: {className: ?string}): React.Node => (
+  <svg
+    className={classify(
+      css.badgeIcon,
+      typographyStyle[TEXT_COLORS['clickable']],
+      className,
+    )}
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/lib/components/BadgedIcon/BadgedIcon.module.css

@@ -0,0 +1,88 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+
+@value (
+  size42,
+  size34,
+  size60,
+  size8,
+  size12,
+  size2,
+  size4
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderRadiusMedium,
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+@value (
+  motionEaseInEaseOut,
+  motionDurationSlow
+) from '../../styles/variables/_motion.css';
+
+@value (
+  spaceNone,
+  spaceMedium,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.iconContainer {
+  display: flex;
+  width: fit-content;
+  min-width: size34;
+  min-height: size34;
+  justify-content: center;
+  align-items: center;
+  border-radius: borderRadiusMedium;
+  position: relative;
+  background: linear-gradient(
+      91deg,
+      rgba(204, 192, 240, 0.5) 0%,
+      rgba(178, 209, 250, 0.5) 100%
+    ),
+    colorBackgroundTertiary;
+}
+
+.medium {
+  width: size42;
+  height: size42;
+}
+
+.small {
+  width: size34;
+  height: size34;
+}
+
+.large {
+  width: size60;
+  height: size60;
+}
+
+.iconContainer:hover .badgeIcon {
+  transform: rotate(-90deg);
+}
+
+.badgeIcon {
+  position: absolute;
+  border-radius: borderRadiusCircle;
+  top: calc(size2 * -1);
+  right: calc(size4 * -1);
+  transition: transform motionDurationSlow motionEaseInEaseOut;
+}
+
+.small .badgeIcon {
+  width: size8;
+  height: size8;
+  left: calc(spaceMedium + spaceXSmall);
+  top: spaceNone;
+}
+
+.medium .badgeIcon {
+  width: size12;
+  height: size12;
+}
+
+.large .badgeIcon {
+  width: size12;
+  height: size12;
+}

package/lib/components/BadgedIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './BadgedIcon';

package/lib/components/BadgedIcon/index.js

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

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

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

package/lib/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Badge';
+export * from './BadgedIcon';
 export * from './Banner';
 export * from './Breadcrumbs';
 export * from './Button';

package/lib/components/index.js

@@ -36,6 +36,17 @@ Object.keys(_Badge).forEach(function (key) {
     }
   });
 });
+var _BadgedIcon = require("./BadgedIcon");
+Object.keys(_BadgedIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BadgedIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BadgedIcon[key];
+    }
+  });
+});
 var _Banner = require("./Banner");
 Object.keys(_Banner).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -3,6 +3,7 @@
 export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Badge';
+export * from './BadgedIcon';
 export * from './Banner';
 export * from './Breadcrumbs';
 export * from './Button';

package/package.json

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