@spaced-out/ui-design-system 0.1.42 → 0.1.44-beta.0

package/lib/components/StatusIndicator/StatusIndicator.js.flow

@@ -11,11 +11,13 @@ import css from './StatusIndicator.module.css';
 type ClassNames = $ReadOnly<{wrapper?: string}>;
 
 export const STATUS_SEMANTIC = Object.freeze({
+  primary: 'primary',
   information: 'information',
   success: 'success',
   warning: 'warning',
   danger: 'danger',
   neutral: 'neutral',
+  secondary: 'secondary',
 });
 
 export type StatusSemanticType = $Values<typeof STATUS_SEMANTIC>;
@@ -25,6 +27,7 @@ export type StatusIndicatorProps = {
   status?: StatusSemanticType,
   withBorder?: boolean,
   borderColorToken?: $Keys<typeof COLORS>,
+  disabled?: boolean,
   ...
 };
 
@@ -38,6 +41,7 @@ export const StatusIndicator: React$AbstractComponent<
       status = 'information',
       withBorder,
       borderColorToken = 'colorBackgroundTertiary',
+      disabled,
       ...props
     }: StatusIndicatorProps,
     ref,
@@ -50,6 +54,7 @@ export const StatusIndicator: React$AbstractComponent<
         css[status],
         {
           [css.withBorder]: withBorder,
+          [css.disabled]: disabled,
         },
         classNames?.wrapper,
       )}

package/lib/components/StatusIndicator/StatusIndicator.module.css

@@ -1,4 +1,13 @@
-@value (colorInformation, colorSuccess, colorWarning, colorDanger, colorNeutral, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (
+  colorTextInformation,
+  colorTextSuccess,
+  colorTextWarning,
+  colorTextDanger,
+  colorTextNeutral,
+  colorBackgroundTertiary,
+  colorTextPrimary,
+  colorTextDisabled
+) from '../../styles/variables/_color.css';
 @value (size8) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderWidthTertiary) from '../../styles/variables/_border.css';
 
@@ -9,28 +18,32 @@
   width: size8;
   height: size8;
   border-radius: borderRadiusCircle;
-  background-color: colorInformation;
+  background-color: colorTextPrimary;
   box-sizing: content-box;
 }
 
 .information {
-  background-color: colorInformation;
+  background-color: colorTextInformation;
 }
 
 .success {
-  background-color: colorSuccess;
+  background-color: colorTextSuccess;
 }
 
 .warning {
-  background-color: colorWarning;
+  background-color: colorTextWarning;
 }
 
 .danger {
-  background-color: colorDanger;
+  background-color: colorTextDanger;
 }
 
 .neutral {
-  background-color: colorNeutral;
+  background-color: colorTextNeutral;
+}
+
+.disabled {
+  background-color: colorTextDisabled;
 }
 
 .withBorder {

package/lib/components/Table/TableBar.module.css

@@ -1,5 +1,5 @@
 @value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (size2, size22, size48, size60, size240, size300) from '../../styles/variables/_size.css';
+@value (size2, size22, size48, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusMedium, borderRadiusNone) from '../../styles/variables/_border.css';
 @value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
 @value (elevationMenu) from '../../styles/variables/_elevation.css';

package/lib/components/Text/Text.js

@@ -22,22 +22,22 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     highlightWithBackground
   } = _ref;
   // Split text on highlight term, include term itself into parts, ignore case
-  let highlights = '';
-  if (Array.isArray(highlight)) {
-    highlights = highlight.map(_string.escapeRegExp).join('|');
-  } else {
-    highlights = (0, _string.escapeRegExp)(highlight);
-  }
+  // Convert highlight to an array if it's not already
+  const highlightArray = [].concat(highlight).filter(item => item !== '');
+  const highlights = highlightArray.map(_string.escapeRegExp).join('|');
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
   return /*#__PURE__*/React.createElement("span", {
     ref: ref
-  }, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
-    // eslint-disable-next-line react/no-array-index-key
-    key: idx,
-    className: (0, _classify.default)(_typographyModule.default.highlightText, {
-      [_typographyModule.default.bgHighlighting]: highlightWithBackground
-    }, highlightClassName)
-  }, part) : part));
+  }, parts.map((part, idx) => {
+    const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
+    return isHighlighted ? /*#__PURE__*/React.createElement("span", {
+      // eslint-disable-next-line react/no-array-index-key
+      key: idx,
+      className: (0, _classify.default)(_typographyModule.default.highlightText, {
+        [_typographyModule.default.bgHighlighting]: highlightWithBackground
+      }, highlightClassName)
+    }, part) : part;
+  }));
 });
 const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {

package/lib/components/Text/Text.js.flow

@@ -29,51 +29,64 @@ export type HighlightTextProps = {
   highlightWithBackground?: boolean,
 };
 
-const HighlightText: React$AbstractComponent<HighlightTextProps, HTMLSpanElement> =
-React.forwardRef<HighlightTextProps, HTMLSpanElement>( ({
-  text,
-  highlight,
-  highlightClassName,
-  caseSensitiveHighlighting,
-  highlightWithBackground,
-}: HighlightTextProps, ref) => {
-  // Split text on highlight term, include term itself into parts, ignore case
-  let highlights = '';
-  if (Array.isArray(highlight)) {
-    highlights = highlight.map(escapeRegExp).join('|');
-  } else {
-    highlights = escapeRegExp(highlight);
-  }
+const HighlightText: React$AbstractComponent<
+  HighlightTextProps,
+  HTMLSpanElement,
+> = React.forwardRef<HighlightTextProps, HTMLSpanElement>(
+  (
+    {
+      text,
+      highlight,
+      highlightClassName,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+    }: HighlightTextProps,
+    ref,
+  ) => {
+    // Split text on highlight term, include term itself into parts, ignore case
+    // Convert highlight to an array if it's not already
+    const highlightArray = [].concat(highlight).filter((item) => item !== '');
+    const highlights = highlightArray.map(escapeRegExp).join('|');
 
-  const parts = text
-    .split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'))
-    .filter((part) => part !== '');
+    const parts = text
+      .split(
+        new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
+      )
+      .filter((part) => part !== '');
 
-  return (
-    <span ref={ref}>
-      {parts.map((part, idx) =>
-        highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
-          <span
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            className={classify(
-              css.highlightText,
-              {
-                [css.bgHighlighting]: highlightWithBackground,
-              },
-              highlightClassName,
-            )}
-          >
-            {part}
-          </span>
-        ) : (
-          part
-        ),
-      )}
-    </span>
-  );
-}
-)
+    return (
+      <span ref={ref}>
+        {parts.map((part, idx) => {
+          const isHighlighted = highlightArray.some((highlightTerm) =>
+            caseSensitiveHighlighting
+              ? escapeRegExp(part).includes(escapeRegExp(highlightTerm))
+              : escapeRegExp(part)
+                .toLowerCase()
+                .includes(escapeRegExp(highlightTerm).toLowerCase()),
+          );
+
+          return isHighlighted ? (
+            <span
+              // eslint-disable-next-line react/no-array-index-key
+              key={idx}
+              className={classify(
+                css.highlightText,
+                {
+                  [css.bgHighlighting]: highlightWithBackground,
+                },
+                highlightClassName,
+              )}
+            >
+              {part}
+            </span>
+          ) : (
+            part
+          );
+        })}
+      </span>
+    );
+  },
+);
 
 export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
   React.forwardRef<TextProps, HTMLSpanElement>(

package/lib/styles/index.css

@@ -44,7 +44,7 @@
 
 @value colorTextInversePrimary: #ffffff;
 
-@value colorTextInverseSecondary: #d1d1d1;
+@value colorTextInverseSecondary: #9F9FBC;
 
 @value colorBorderPrimary: #e1e1e1;
 

package/lib/styles/index.js

@@ -53,7 +53,7 @@ const colorTextDanger = '#cf1945';
 exports.colorTextDanger = colorTextDanger;
 const colorTextInversePrimary = '#ffffff';
 exports.colorTextInversePrimary = colorTextInversePrimary;
-const colorTextInverseSecondary = '#d1d1d1';
+const colorTextInverseSecondary = '#9F9FBC';
 exports.colorTextInverseSecondary = colorTextInverseSecondary;
 const colorBorderPrimary = '#e1e1e1';
 exports.colorBorderPrimary = colorBorderPrimary;

package/lib/styles/index.js.flow

@@ -46,7 +46,7 @@ export const colorTextDanger = '#cf1945';
 
 export const colorTextInversePrimary = '#ffffff';
 
-export const colorTextInverseSecondary = '#d1d1d1';
+export const colorTextInverseSecondary = '#9F9FBC';
 
 export const colorBorderPrimary = '#e1e1e1';
 

package/lib/styles/variables/_color.css

@@ -20,7 +20,7 @@
 
 @value colorTextInversePrimary: #ffffff;
 
-@value colorTextInverseSecondary: #d1d1d1;
+@value colorTextInverseSecondary: #9F9FBC;
 
 @value colorBorderPrimary: #e1e1e1;
 

package/lib/styles/variables/_color.js

@@ -27,7 +27,7 @@ const colorTextDanger = '#cf1945';
 exports.colorTextDanger = colorTextDanger;
 const colorTextInversePrimary = '#ffffff';
 exports.colorTextInversePrimary = colorTextInversePrimary;
-const colorTextInverseSecondary = '#d1d1d1';
+const colorTextInverseSecondary = '#9F9FBC';
 exports.colorTextInverseSecondary = colorTextInverseSecondary;
 const colorBorderPrimary = '#e1e1e1';
 exports.colorBorderPrimary = colorBorderPrimary;

package/lib/styles/variables/_color.js.flow

@@ -22,7 +22,7 @@ export const colorTextDanger = '#cf1945';
 
 export const colorTextInversePrimary = '#ffffff';
 
-export const colorTextInverseSecondary = '#d1d1d1';
+export const colorTextInverseSecondary = '#9F9FBC';
 
 export const colorBorderPrimary = '#e1e1e1';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.42",
+  "version": "0.1.44-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -10,7 +10,7 @@
   "scripts": {
     "build": "rimraf lib && yarn build:style-variables && gulp build",
     "build:style-variables": "rimraf src/styles/variables && style-dictionary build --config ./config.js",
-    "storybook": "yarn build:style-variables && storybook dev -p 6006",
+    "storybook": "yarn build:style-variables && storybook dev --host genesis.proxysense.co --port 6006",
     "storybook:export": "yarn build:style-variables && rimraf storybook-static && storybook build",
     "build-storybook": "yarn build:style-variables && rimraf storybook-static && storybook build",
     "generate": "node ./scripts/create-component",

package/lib/assets/fontawesome/LICENSE.txt

@@ -1,18 +0,0 @@
-Font Awesome Pro License
-------------------------
-
-Font Awesome Pro is commercial software that requires a paid license. Full
-Font Awesome Pro license: https://fontawesome.com/license.
-
-# Commercial License
-The Font Awesome Pro commercial license allows you to pay for FA Pro once, own
-it, and use it just about everywhere you'd like.
-
-# Attribution
-Attribution is not required by the Font Awesome Pro commercial license.
-
-# Brand Icons
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**