@spaced-out/ui-design-system 0.1.67 → 0.1.69

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.1.69](https://github.com/spaced-out/ui-design-system/compare/v0.1.68...v0.1.69) (2023-12-06)
+
+
+### Features
+
+* 🆕 icon with background component ([3ed7a90](https://github.com/spaced-out/ui-design-system/commit/3ed7a90f471feef036a055d17a1af314db52a437))
+
+### [0.1.68](https://github.com/spaced-out/ui-design-system/compare/v0.1.67...v0.1.68) (2023-12-04)
+
+
+### Features
+
+* bulk action buttons and table inline edit ([#155](https://github.com/spaced-out/ui-design-system/issues/155)) ([7ae82fc](https://github.com/spaced-out/ui-design-system/commit/7ae82fc6f3fba77f53d7a2269d7a4df675c6d69f))
+
+
+### Bug Fixes
+
+* circular loader extra space ([#154](https://github.com/spaced-out/ui-design-system/issues/154)) ([a6ce232](https://github.com/spaced-out/ui-design-system/commit/a6ce2326edc4ce7779471f171d70ba2f33203cfc))
+
 ### [0.1.67](https://github.com/spaced-out/ui-design-system/compare/v0.1.66...v0.1.67) (2023-11-10)
 
 

package/design-tokens/color/app-color.json

@@ -105,6 +105,20 @@
       "value": "{baseColor.indigo.940.70.value}"
     },
     "button-fill": {
+      "tableAction": {
+        "enabled": {
+          "value": "{baseColor.purple.600.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.purple.700.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.purple.700.value}"
+        },
+        "border": {
+          "value": "{baseColor.purple.400.value}"
+        }
+      },
       "primary": {
         "enabled": {
           "value": "{baseColor.purple.500.value}"

package/design-tokens/size/base-size.json

@@ -129,6 +129,9 @@
     "960": {
       "value": "960px"
     },
+    "1280": {
+      "value": "1280px"
+    },
     "fluid": {
       "value": "100%"
     },

package/lib/components/CircularLoader/CircularLoader.module.css

@@ -15,27 +15,29 @@
 @value spinnerSize: size60;
 @value spinnerThickness: size5;
 
-@value innerCircleSize: calc(spinnerSize - 2 * spinnerThickness);
-
-@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - spinnerThickness), colorFillPrimary calc(100% - spinnerThickness));
+@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - var(--spinner-thickness)), colorFillPrimary calc(100% - var(--spinner-thickness)));
 
 .container {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  --spinner-size: spinnerSize;
+  --spinner-thickness: spinnerThickness;
 }
 
 .mediumContainer {
-  transform: scale(0.5);
+  --spinner-size: calc(0.5 * spinnerSize);
+  --spinner-thickness: calc(0.5 * spinnerThickness);
 }
 
 .smallContainer {
-  transform: scale(0.36);
+  --spinner-size: calc(0.36 * spinnerSize);
+  --spinner-thickness: calc(0.36 * spinnerThickness);
 }
 
 .spinLoader {
-  height: spinnerSize;
-  width: spinnerSize;
+  height: var(--spinner-size);
+  width: var(--spinner-size);
   display: block;
   position: relative;
   animation: spin motionDurationSlowest linear 0s infinite normal;
@@ -46,9 +48,9 @@
   --color: colorFillPrimary;
   display: block;
   position: absolute;
-  border-radius: calc(spinnerSize/2);
-  height: spinnerSize;
-  width: spinnerSize;
+  border-radius: calc(var(--spinner-size) / 2);
+  height: var(--spinner-size);
+  width: var(--spinner-size);
   top: spaceNone;
   right: spaceNone;
   background: conic-gradient(
@@ -63,18 +65,20 @@
 .ellipse {
   --color: colorFillPrimary;
   position: absolute;
-  left: calc(spinnerSize - spinnerThickness);
   right: spaceNone;
   top: spaceNone;
   bottom: spaceNone;
-  border-radius: calc(spinnerThickness/2);
-  height: spinnerThickness;
-  width: spinnerThickness;
+  border-radius: calc(var(--spinner-thickness) / 2);
+  height: var(--spinner-thickness);
+  width: var(--spinner-thickness);
   margin: auto;
   background: var(--color);
 }
 
 @keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
   to {
     transform: rotate(360deg);
   }

package/lib/components/Icon/Icon.docs.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_DOCS = void 0;
+var _typography = require("../../types/typography");
+var _Icon = require("./Icon");
+
+const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
+const iconSize = [...Object.values(_Icon.ICON_SIZE)];
+const ICON_DOCS = {
+  argTypes: {
+    type: {
+      description: 'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'regular'
+        }
+      }
+    },
+    name: {
+      description: 'Icon Name represents name of icon as supported by fontawesome',
+      type: {
+        required: true
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'face-party'
+        }
+      }
+    },
+    color: {
+      description: 'Same set of colors as supported in text',
+      options: colorOptions,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'primary'
+        }
+      }
+    },
+    size: {
+      description: 'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
+      options: iconSize,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    swapOpacity: {
+      name: 'swapOpacity',
+      description: `Swap the default opacity of each layer in a duotone icon.`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    className: {
+      description: 'External className to be applied on container',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onClick: {
+      description: 'onClick handler',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    ariaLabel: {
+      control: {
+        type: 'text'
+      },
+      description: '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Generates a Icon component',
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import {
+  Icon,
+  ClickableIcon,
+  CloseIcon,
+  SemanticIcon
+} from "@spaced-out/ui-design-system/lib/components/Icon";
+\`\`\`
+Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
+The name prop has be to consistent with one used in fontawesome.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Icon/Icon.js'
+    }
+  }
+};
+exports.ICON_DOCS = ICON_DOCS;

package/lib/components/Icon/Icon.docs.js.flow

@@ -0,0 +1,110 @@
+// @flow strict
+
+import {TEXT_COLORS} from '../../types/typography';
+
+import {ICON_SIZE} from './Icon';
+
+
+const colorOptions: Array<mixed> = [...Object.values(TEXT_COLORS)];
+const iconSize: Array<mixed> = [...Object.values(ICON_SIZE)];
+
+export const ICON_DOCS = {
+  argTypes: {
+    type: {
+      description:
+        'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'regular'},
+      },
+    },
+    name: {
+      description:
+        'Icon Name represents name of icon as supported by fontawesome',
+      type: {required: true},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'face-party'},
+      },
+    },
+    color: {
+      description: 'Same set of colors as supported in text',
+      options: colorOptions,
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'primary'},
+      },
+    },
+    size: {
+      description:
+        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
+      options: iconSize,
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'medium'},
+      },
+    },
+    swapOpacity: {
+      name: 'swapOpacity',
+      description: `Swap the default opacity of each layer in a duotone icon.`,
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    className: {
+      description: 'External className to be applied on container',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    onClick: {
+      description: 'onClick handler',
+      action: 'clicked',
+      table: {
+        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+      },
+    },
+    ariaLabel: {
+      control: {
+        type: 'text',
+      },
+      description:
+        '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'Generates a Icon component',
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import {
+  Icon,
+  ClickableIcon,
+  CloseIcon,
+  SemanticIcon
+} from "@spaced-out/ui-design-system/lib/components/Icon";
+\`\`\`
+Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
+The name prop has be to consistent with one used in fontawesome.
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Icon/Icon.js',
+    },
+  },
+};

package/lib/components/Icon/SemanticIcon.js

@@ -16,15 +16,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const SemanticIcon = _ref => {
   let {
     semantic = 'neutral',
-    type = 'solid',
     classNames,
+    size = 'medium',
     ...iconProps
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!iconProps.name && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], classNames?.wrapper)
+    className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], _SemanticIconModule.default[size], classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, iconProps, {
+    className: (0, _classify.default)(iconProps.className, classNames?.icon),
     color: _typography.TEXT_COLORS[semantic],
-    type: type
+    size: size === 'large' ? 'medium' : size
   }))));
 };
 exports.SemanticIcon = SemanticIcon;

package/lib/components/Icon/SemanticIcon.js.flow

@@ -22,8 +22,8 @@ export type SemanticIconProps = {
 
 export const SemanticIcon = ({
   semantic = 'neutral',
-  type = 'solid',
   classNames,
+  size = 'medium',
   ...iconProps
 }: SemanticIconProps): React.Node => (
   <>
@@ -32,10 +32,16 @@ export const SemanticIcon = ({
         className={classify(
           css.iconContainer,
           css[semantic],
+          css[size],
           classNames?.wrapper,
         )}
       >
-        <Icon {...iconProps} color={TEXT_COLORS[semantic]} type={type} />
+        <Icon
+          {...iconProps}
+          className={classify(iconProps.className, classNames?.icon)}
+          color={TEXT_COLORS[semantic]}
+          size={size === 'large' ? 'medium' : size}
+        />
       </div>
     )}
   </>

package/lib/components/Icon/SemanticIcon.module.css

@@ -7,8 +7,9 @@
 ) from '../../styles/variables/_color.css';
 
 @value (
-  size60,
-  size24
+  size42,
+  size34,
+  size60
 ) from '../../styles/variables/_size.css';
 
 @value (
@@ -18,14 +19,29 @@
 .iconContainer {
   display: flex;
   width: fit-content;
-  min-width: size60;
-  min-height: size60;
+  min-width: size34;
+  min-height: size34;
   justify-content: center;
   align-items: center;
   border-radius: borderRadiusMedium;
   background-color: colorNeutralLightest;
 }
 
+.medium {
+  width: size42;
+  height: size42;
+}
+
+.small {
+  width: size34;
+  height: size34;
+}
+
+.large {
+  width: size60;
+  height: size60;
+}
+
 .neutral {
   background-color: colorNeutralLightest;
 }

package/lib/components/KPIBox/KPIBox.js

@@ -20,7 +20,7 @@ const KPIBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     middleContent,
     bottomContent,
     iconName,
-    iconSize,
+    iconSize = 'large',
     iconType = 'solid',
     ...props
   } = _ref;

package/lib/components/KPIBox/KPIBox.js.flow

@@ -39,7 +39,7 @@ export const KPIBox: React$AbstractComponent<KPIBoxProps, HTMLDivElement> =
         middleContent,
         bottomContent,
         iconName,
-        iconSize,
+        iconSize = 'large',
         iconType = 'solid',
         ...props
       }: KPIBoxProps,