@spaced-out/ui-design-system 0.0.3 → 0.0.5

package/lib/components/Tooltip/Tooltip.js.flow

@@ -33,13 +33,25 @@ import {Truncate} from '../Truncate';
 import css from './Tooltip.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{tooltip?: string}>;
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'right';
 
 export type TooltipProps = {
   classNames?: ClassNames,
-  title?: string,
-  body?: string,
-  placement?: 'top' | 'bottom' | 'left' | 'right',
+  title?: string | React.Node,
+  body?: string | React.Node,
+  placement?: PlacementType,
+  bodyMaxLines?: number,
+  titleMaxLines?: number,
   // TODO(Nishant): Decide on a type to use
   // $FlowFixMe
   children: any,
@@ -51,6 +63,8 @@ export const Tooltip = ({
   title,
   body,
   placement = 'top',
+  bodyMaxLines = 2,
+  titleMaxLines = 1,
 }: TooltipProps): React.Node => {
   const [open, setOpen] = React.useState(false);
 
@@ -79,12 +93,15 @@ export const Tooltip = ({
     <>
       {React.cloneElement(
         children,
-        getReferenceProps({ref, ...children.props}),
+        getReferenceProps({
+          ref,
+          ...children.props,
+        }),
       )}
       {open && (
         <div
           ref={floating}
-          className={classify(css.tooltip, classNames?.wrapper)}
+          className={classify(css.tooltip, classNames?.tooltip)}
           style={{
             position: strategy,
             top: y ?? spaceNone,
@@ -93,15 +110,21 @@ export const Tooltip = ({
           {...getFloatingProps()}
         >
           {!!title && (
-            <SubTitleExtraSmall color="inversePrimary">
-              <Truncate line={1}>{title}</Truncate>
-            </SubTitleExtraSmall>
+            <Truncate line={titleMaxLines}>
+              <SubTitleExtraSmall color="inversePrimary">
+                {title}
+              </SubTitleExtraSmall>
+            </Truncate>
           )}
 
           {!!body && (
-            <BodyMedium color={!title ? 'inversePrimary' : 'inverseSecondary'}>
-              <Truncate line={2}>{body}</Truncate>
-            </BodyMedium>
+            <Truncate line={bodyMaxLines}>
+              <BodyMedium
+                color={!title ? 'inversePrimary' : 'inverseSecondary'}
+              >
+                {body}
+              </BodyMedium>
+            </Truncate>
           )}
         </div>
       )}

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

@@ -1,4 +1,4 @@
 // @flow strict
 
-export type {TooltipProps} from './Tooltip';
+export type {PlacementType, TooltipProps} from './Tooltip';
 export {Tooltip} from './Tooltip';

package/lib/styles/variables/_border.css

@@ -18,4 +18,6 @@
 
 @value borderRadiusLarge: 20px;
 
+@value borderRadiusXLarge: 30px;
+
 @value borderRadiusCircle: 50%;

package/lib/styles/variables/_border.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -25,5 +25,7 @@ const borderRadiusMedium = '12px';
 exports.borderRadiusMedium = borderRadiusMedium;
 const borderRadiusLarge = '20px';
 exports.borderRadiusLarge = borderRadiusLarge;
+const borderRadiusXLarge = '30px';
+exports.borderRadiusXLarge = borderRadiusXLarge;
 const borderRadiusCircle = '50%';
 exports.borderRadiusCircle = borderRadiusCircle;

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

@@ -20,4 +20,6 @@ export const borderRadiusMedium = '12px';
 
 export const borderRadiusLarge = '20px';
 
+export const borderRadiusXLarge = '30px';
+
 export const borderRadiusCircle = '50%';

package/lib/styles/variables/_color.css

@@ -80,6 +80,8 @@
 
 @value colorButtonFillDangerPressed: #cf1945;
 
+@value colorGrayLightest: #EBEBEB;
+
 @value colorNeutral: #706f9b;
 
 @value colorNeutralLightest: #f1f1f5;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -87,6 +87,8 @@ const colorButtonFillDangerHovered = '#cf1945';
 exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
 const colorButtonFillDangerPressed = '#cf1945';
 exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
+const colorGrayLightest = '#EBEBEB';
+exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706f9b';
 exports.colorNeutral = colorNeutral;
 const colorNeutralLightest = '#f1f1f5';

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

@@ -82,6 +82,8 @@ export const colorButtonFillDangerHovered = '#cf1945';
 
 export const colorButtonFillDangerPressed = '#cf1945';
 
+export const colorGrayLightest = '#EBEBEB';
+
 export const colorNeutral = '#706f9b';
 
 export const colorNeutralLightest = '#f1f1f5';

package/lib/styles/variables/_size.css

@@ -14,6 +14,8 @@
 
 @value size20: 20px;
 
+@value size22: 22px;
+
 @value size24: 24px;
 
 @value size30: 30px;
@@ -28,6 +30,8 @@
 
 @value size60: 60px;
 
+@value size100: 100px;
+
 @value size110: 110px;
 
 @value size140: 140px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size10 = void 0;
+exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -21,6 +21,8 @@ const size18 = '18px';
 exports.size18 = size18;
 const size20 = '20px';
 exports.size20 = size20;
+const size22 = '22px';
+exports.size22 = size22;
 const size24 = '24px';
 exports.size24 = size24;
 const size30 = '30px';
@@ -35,6 +37,8 @@ const size42 = '42px';
 exports.size42 = size42;
 const size60 = '60px';
 exports.size60 = size60;
+const size100 = '100px';
+exports.size100 = size100;
 const size110 = '110px';
 exports.size110 = size110;
 const size140 = '140px';

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

@@ -16,6 +16,8 @@ export const size18 = '18px';
 
 export const size20 = '20px';
 
+export const size22 = '22px';
+
 export const size24 = '24px';
 
 export const size30 = '30px';
@@ -30,6 +32,8 @@ export const size42 = '42px';
 
 export const size60 = '60px';
 
+export const size100 = '100px';
+
 export const size110 = '110px';
 
 export const size140 = '140px';

package/lib/utils/click-away.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAway = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
-var _dom = require("./dom.js");
+var _dom = require("./dom");
 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; }

package/lib/utils/click-away.js.flow

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import invariant from 'invariant';
 
-import {pageHeight} from './dom.js';
+import {pageHeight} from './dom';
 
 
 export type ChildProps = {

package/lib/utils/string.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.capitalize = void 0;
+
+const capitalize = word => {
+  if (!word) {
+    return '';
+  }
+  return word.toLowerCase().replace(/\w/, firstLetter => firstLetter.toUpperCase());
+};
+exports.capitalize = capitalize;

package/lib/utils/string.js.flow

@@ -0,0 +1,10 @@
+// @flow strict
+
+export const capitalize = (word: string): string => {
+  if (!word) {
+    return '';
+  }
+  return word
+    .toLowerCase()
+    .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -32,9 +32,10 @@
     "React",
     "Component",
     "Library",
-    "Rollup",
-    "Sass",
-    "Storybook"
+    "Design System",
+    "Genesis",
+    "Spaced Out",
+    "Sense"
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -103,6 +104,14 @@
     "style-dictionary": "^3.7.1",
     "all-contributors-cli": "^6.20.0"
   },
+  "homepage": "https://spaced-out.github.io/ui-design-system",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/spaced-out/ui-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/spaced-out/ui-design-system/issues"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",

package/pull_request_template.md

@@ -1,48 +0,0 @@
-* **Please check if the PR fulfills these requirements**
-- [ ] The commit message follows our guidelines
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been added / updated (for bug fixes / features)
-
-
-* **Other information**:
-
-### All Submissions:
-
-* [ ] Have you followed the guidelines in our Contributing document?
-* [ ] Have you checked to ensure there aren't other open [Pull Requests](../../../pulls) for the same update/change?
-
-<!-- You can erase any parts of this template not applicable to your Pull Request. -->
-
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)
-
-<!--- Provide a general summary of your changes in the Title above -->
-
-## Description
-<!--- Describe your changes in detail -->
-
-## Design Specs
-<!--- Add a link to design specs -->
-
-## Motivation and Context
-<!--- Why is this change required? What problem does it solve? -->
-<!--- If it fixes an open issue, please link to the issue here. -->
-
-## How has this been tested?
-<!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, tests ran to see how -->
-<!--- your change affects other areas of the code, etc. -->
-
-## Screenshots (if appropriate):
-
-
-## Checklist:
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] My code follows the code style of this project.
-- [ ] My change requires a change to the documentation.
-- [ ] I have updated the documentation accordingly.