@spaced-out/ui-design-system 0.0.18-beta.2 → 0.0.18

package/.github/workflows/publish_to_npm.yml

@@ -12,19 +12,17 @@ on:
           - patch
           - minor
           - major
-          - prepatch
-          - preminor
-          - premajor
           - prerelease
         required: true
 jobs:
   release:
     runs-on: ubuntu-latest
+    # Check access controls on release and tagging
     steps:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover
+          ALLOWED_USERS: superrover, Anant-Raj
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.18](https://github.com/spaced-out/ui-design-system/compare/v0.0.18-beta.3...v0.0.18) (2023-02-06)
+
+
+### Features
+
+* chip component ([#57](https://github.com/spaced-out/ui-design-system/issues/57)) ([aa9dc21](https://github.com/spaced-out/ui-design-system/commit/aa9dc21de4c91f985a28f57c960d9387ac4e8175))
+
+
+### Bug Fixes
+
+* updated release script to only accept prerelease ([0e94dcc](https://github.com/spaced-out/ui-design-system/commit/0e94dcc2e528dc0612eda5eeb58817b4921713d3))
+
+### [0.0.18-beta.3](https://github.com/spaced-out/ui-design-system/compare/v0.0.18-beta.2...v0.0.18-beta.3) (2023-02-06)
+
 ### [0.0.18-beta.2](https://github.com/spaced-out/ui-design-system/compare/v0.0.18-beta.1...v0.0.18-beta.2) (2023-02-06)
 
 

package/lib/components/Chip/Chip.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = exports.CHIP_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _ChipModule = _interopRequireDefault(require("./Chip.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 CHIP_SEMANTIC = Object.freeze({
+  primary: 'primary',
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  secondary: 'secondary'
+});
+exports.CHIP_SEMANTIC = CHIP_SEMANTIC;
+const Chip = _ref => {
+  let {
+    classNames,
+    semantic = 'primary',
+    size = 'medium',
+    children,
+    iconName = '',
+    iconType = 'regular',
+    dismissable = false,
+    onDismiss = () => null,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Chip",
+    className: (0, _classify.classify)(_ChipModule.default.chipWrapper, {
+      [_ChipModule.default.primary]: semantic === CHIP_SEMANTIC.primary,
+      [_ChipModule.default.information]: semantic === CHIP_SEMANTIC.information,
+      [_ChipModule.default.success]: semantic === CHIP_SEMANTIC.success,
+      [_ChipModule.default.warning]: semantic === CHIP_SEMANTIC.warning,
+      [_ChipModule.default.danger]: semantic === CHIP_SEMANTIC.danger,
+      [_ChipModule.default.secondary]: semantic === CHIP_SEMANTIC.secondary,
+      [_ChipModule.default.medium]: size === 'medium',
+      [_ChipModule.default.small]: size === 'small',
+      [_ChipModule.default.dismissable]: dismissable,
+      [_ChipModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    className: _ChipModule.default.chipIcon,
+    name: iconName,
+    type: iconType,
+    size: "small"
+  }), children, dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    className: _ChipModule.default.dismissIcon,
+    name: "xmark",
+    type: iconType,
+    size: "small",
+    onClick: event => !disabled && onDismiss && onDismiss(event)
+  }));
+};
+exports.Chip = Chip;

package/lib/components/Chip/Chip.js.flow

@@ -0,0 +1,96 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './Chip.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const CHIP_SEMANTIC = Object.freeze({
+  primary: 'primary',
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  secondary: 'secondary',
+});
+
+export type ChipSemanticType = $Values<typeof CHIP_SEMANTIC>;
+
+export type BaseChipProps = {
+  classNames?: ClassNames,
+  semantic?: ChipSemanticType,
+  children: React.Node,
+  disabled?: boolean,
+};
+
+export type MediumChipProps = {
+  ...BaseChipProps,
+  size?: 'medium',
+  iconName?: string,
+  iconType?: IconType,
+  dismissable?: boolean,
+  onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type SmallChipProps = {
+  ...BaseChipProps,
+  size?: 'small',
+};
+
+export type ChipProps = MediumChipProps | SmallChipProps;
+export const Chip = ({
+  classNames,
+  semantic = 'primary',
+  size = 'medium',
+  children,
+  iconName = '',
+  iconType = 'regular',
+  dismissable = false,
+  onDismiss = () => null,
+  disabled,
+}: ChipProps): React.Node => (
+  <div
+    data-testid="Chip"
+    className={classify(
+      css.chipWrapper,
+      {
+        [css.primary]: semantic === CHIP_SEMANTIC.primary,
+        [css.information]: semantic === CHIP_SEMANTIC.information,
+        [css.success]: semantic === CHIP_SEMANTIC.success,
+        [css.warning]: semantic === CHIP_SEMANTIC.warning,
+        [css.danger]: semantic === CHIP_SEMANTIC.danger,
+        [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+        [css.medium]: size === 'medium',
+        [css.small]: size === 'small',
+        [css.dismissable]: dismissable,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {iconName && size !== 'small' && (
+      <Icon
+        className={css.chipIcon}
+        name={iconName}
+        type={iconType}
+        size="small"
+      />
+    )}
+    {children}
+    {dismissable && size !== 'small' && (
+      <Icon
+        className={css.dismissIcon}
+        name="xmark"
+        type={iconType}
+        size="small"
+        onClick={(event) => !disabled && onDismiss && onDismiss(event)}
+      />
+    )}
+  </div>
+);

package/lib/components/Chip/Chip.module.css

@@ -0,0 +1,83 @@
+@value (
+  colorNeutralLightest,
+  colorInformationLightest,
+  colorSuccessLightest,
+  colorWarningLightest,
+  colorDangerLightest,
+  colorBackgroundTertiary,
+  colorTextDisabled,
+  colorFillDisabled
+) from '../../styles/variables/_color.css';
+@value (
+  spaceNone,
+  spaceXXSmall,
+  spaceXSmall,
+  spaceSmall
+) from '../../styles/variables/_space.css';
+@value (
+  borderRadiusXSmall
+) from '../../styles/variables/_border.css';
+
+.chipWrapper {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  display: flex;
+  background-color: colorNeutralLightest;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+  padding: spaceXXSmall spaceSmall;
+  gap: spaceXXSmall;
+  border-radius: borderRadiusXSmall;
+}
+
+.primary {
+  background-color: colorNeutralLightest;
+}
+
+.information {
+  background-color: colorInformationLightest;
+}
+
+.success {
+  background-color: colorSuccessLightest;
+}
+
+.warning {
+  background-color: colorWarningLightest;
+}
+
+.danger {
+  background-color: colorDangerLightest;
+}
+
+.secondary {
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+}
+
+.small {
+  padding: spaceNone spaceXSmall;
+}
+
+.dismissIcon {
+  margin-left: spaceXSmall;
+  cursor: pointer;
+}
+
+/* This should be last section for CSS Specificity  */
+
+.disabled {
+  color: colorTextDisabled;
+  background-color: colorFillDisabled;
+  border: initial;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.disabled .dismissIcon {
+  color: colorTextDisabled;
+}
+
+.disabled .chipIcon {
+  color: colorTextDisabled;
+}

package/lib/components/Chip/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CHIP_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Chip.CHIP_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Chip", {
+  enumerable: true,
+  get: function () {
+    return _Chip.Chip;
+  }
+});
+var _Chip = require("./Chip");

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {ChipProps} from './Chip';
+export {Chip, CHIP_SEMANTIC} from './Chip';

package/package.json

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