@spaced-out/ui-design-system 0.0.39 → 0.0.41

package/.cspell/custom-words.txt

@@ -5,6 +5,7 @@ CODEOWNERS
 commitlint
 contributorsrc
 Crespo
+datetime
 DEFAULTTEXT
 dismissable
 eqeqeq

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.41](https://github.com/spaced-out/ui-design-system/compare/v0.0.40...v0.0.41) (2023-03-07)
+
+
+### Features
+
+* text highlighting ([b33fbdd](https://github.com/spaced-out/ui-design-system/commit/b33fbddbb1ac4a5dd00b19061568a6d20105e228))
+
+### [0.0.40](https://github.com/spaced-out/ui-design-system/compare/v0.0.39...v0.0.40) (2023-03-06)
+
+
+### Features
+
+* base color swatches story with tertiary colors ([06ba3ef](https://github.com/spaced-out/ui-design-system/commit/06ba3efb8cb04513ae3e4f996bfca4801a102ef8))
+* navite color and date pickers ([4924edc](https://github.com/spaced-out/ui-design-system/commit/4924edccb91ff0616c3ed644491221d29c0c70a8))
+
+
+### Bug Fixes
+
+* added static images as personas ([a42bbd2](https://github.com/spaced-out/ui-design-system/commit/a42bbd2c9cf1a9390ab839bd8f489d3be63883e8))
+
 ### [0.0.39](https://github.com/spaced-out/ui-design-system/compare/v0.0.38...v0.0.39) (2023-03-03)
 
 

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

@@ -251,6 +251,134 @@
         "value": "#5f0c20"
       }
     },
+    "yellow": {
+      "50": {
+        "value": "#FCF8E7"
+      },
+      "100": {
+        "value": "#F5EBB4"
+      },
+      "200": {
+        "value": "#F0E190"
+      },
+      "300": {
+        "value": "#EAD35D"
+      },
+      "400": {
+        "value": "#E5CA3D"
+      },
+      "500": {
+        "value": "#DFBD0D"
+      },
+      "600": {
+        "value": "#CBAC0C"
+      },
+      "700": {
+        "value": "#9E8609"
+      },
+      "800": {
+        "value": "#7B6807"
+      },
+      "900": {
+        "value": "#5E4F05"
+      }
+    },
+    "teal": {
+      "50": {
+        "value": "#E6FAF6"
+      },
+      "100": {
+        "value": "#B0F0E3"
+      },
+      "200": {
+        "value": "#8AE9D6"
+      },
+      "300": {
+        "value": "#54E0C3"
+      },
+      "400": {
+        "value": "#33D9B8"
+      },
+      "500": {
+        "value": "#00D0A6"
+      },
+      "600": {
+        "value": "#00BD97"
+      },
+      "700": {
+        "value": "#009476"
+      },
+      "800": {
+        "value": "#00725B"
+      },
+      "900": {
+        "value": "#005746"
+      }
+    },
+    "violet": {
+      "50": {
+        "value": "#F7E9FB"
+      },
+      "100": {
+        "value": "#E7BCF2"
+      },
+      "200": {
+        "value": "#DC9CEB"
+      },
+      "300": {
+        "value": "#CC6EE2"
+      },
+      "400": {
+        "value": "#C252DD"
+      },
+      "500": {
+        "value": "#B327D4"
+      },
+      "600": {
+        "value": "#A323C1"
+      },
+      "700": {
+        "value": "#7F1C97"
+      },
+      "800": {
+        "value": "#621575"
+      },
+      "900": {
+        "value": "#4B1059"
+      }
+    },
+    "pink": {
+      "50": {
+        "value": "#FCE8F5"
+      },
+      "100": {
+        "value": "#F5B8E1"
+      },
+      "200": {
+        "value": "#F196D2"
+      },
+      "300": {
+        "value": "#EA66BD"
+      },
+      "400": {
+        "value": "#E648B1"
+      },
+      "500": {
+        "value": "#E01A9D"
+      },
+      "600": {
+        "value": "#CC188F"
+      },
+      "700": {
+        "value": "#9F126F"
+      },
+      "800": {
+        "value": "#7B0E56"
+      },
+      "900": {
+        "value": "#5E0B42"
+      }
+    },
     "white": {
       "100": {
         "value": "#ffffff"

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

@@ -60,6 +60,9 @@
     "60": {
       "value": "60px"
     },
+    "90": {
+      "value": "90px"
+    },
     "100": {
       "value": "100px"
     },

package/lib/components/Input/Input.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = void 0;
+exports.Input = exports.INPUT_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
@@ -13,6 +13,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const INPUT_TYPES = Object.freeze({
+  text: 'text',
+  number: 'number',
+  password: 'password',
+  email: 'email',
+  tel: 'tel',
+  url: 'url',
+  date: 'date',
+  'datetime-local': 'datetime-local',
+  time: 'time',
+  week: 'week',
+  month: 'month',
+  color: 'color',
+  search: 'search'
+});
+exports.INPUT_TYPES = INPUT_TYPES;
 const Input_ = (props, ref) => {
   const {
     value,
@@ -91,7 +107,11 @@ const Input_ = (props, ref) => {
     onBlur: onBlur,
     type: showPassword ? 'text' : type,
     readOnly: readOnly && 'readOnly'
-  }, inputProps)), /*#__PURE__*/React.createElement(RightInputIcon, {
+  }, inputProps)), type === 'color' && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
+      [_InputModule.default.hasValue]: value
+    })
+  }, value ? value : placeholder), /*#__PURE__*/React.createElement(RightInputIcon, {
     isEmail: type === 'email',
     isPassword: type === 'password',
     showPassword: showPassword,

package/lib/components/Input/Input.js.flow

@@ -15,6 +15,24 @@ type ClassNames = $ReadOnly<{
   iconRight?: string,
 }>;
 
+export const INPUT_TYPES = Object.freeze({
+  text: 'text',
+  number: 'number',
+  password: 'password',
+  email: 'email',
+  tel: 'tel',
+  url: 'url',
+  date: 'date',
+  'datetime-local': 'datetime-local',
+  time: 'time',
+  week: 'week',
+  month: 'month',
+  color: 'color',
+  search: 'search',
+});
+
+export type InputType = $Values<typeof INPUT_TYPES>;
+
 export type InputProps = {
   value?: string,
   onChange?: (
@@ -36,7 +54,7 @@ export type InputProps = {
   errorText?: string,
   label?: string | React.Node,
   helperText?: string | React.Node,
-  type?: 'text' | 'number' | 'password' | 'email' | 'tel' | 'url',
+  type?: InputType,
   size?: 'medium' | 'small',
   iconLeftName?: string,
   iconLeftType?: IconType,
@@ -45,6 +63,15 @@ export type InputProps = {
   required?: boolean,
   readOnly?: boolean,
   boxRef?: (?HTMLElement) => mixed,
+  minLength?: string,
+  maxLength?: string,
+  pattern?: string,
+  min?: string,
+  max?: string,
+  /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
+   * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
+   * appropriate default value if neither of those is provided) are valid. */
+  step?: string,
 };
 
 const Input_ = (props: InputProps, ref): React.Node => {
@@ -140,6 +167,15 @@ const Input_ = (props: InputProps, ref): React.Node => {
           readOnly={readOnly && 'readOnly'}
           {...inputProps}
         />
+        {type === 'color' && (
+          <div
+            className={classify(css.colorText, css[size], {
+              [css.hasValue]: value,
+            })}
+          >
+            {value ? value : placeholder}
+          </div>
+        )}
         <RightInputIcon
           isEmail={type === 'email'}
           isPassword={type === 'password'}

package/lib/components/Input/Input.module.css

@@ -1,5 +1,6 @@
 @value (
   size42,
+  size30,
   size34,
   sizeFluid
 ) from '../../styles/variables/_size.css';
@@ -16,7 +17,8 @@
   borderRadiusSmall,
   borderWidthSecondary,
   borderWidthTertiary,
-  borderWidthNone
+  borderWidthNone,
+  borderRadiusXSmall
 ) from '../../styles/variables/_border.css';
 
 @value (
@@ -56,6 +58,15 @@
   border-radius: borderRadiusMedium;
 }
 
+.colorText {
+  composes: formInputMedium from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.hasValue {
+  color: colorTextPrimary;
+}
+
 .small {
   composes: formInputSmall from '../../styles/typography.module.css';
   height: size34;
@@ -120,3 +131,18 @@ input::placeholder {
 .rightClickableIcon.disabled {
   pointer-events: none;
 }
+
+.box > input[type='color'] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  width: fit-content;
+  gap: spaceXSmall;
+}
+
+.box > input[type='color']::-webkit-color-swatch {
+  border: none;
+  min-width: size30;
+  max-width: size30;
+  border-radius: borderRadiusXSmall;
+}

package/lib/components/Input/index.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.Input;
-  }
-});
-var _Input = require("./Input");
+var _Input = require("./Input");
+Object.keys(_Input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Input[key];
+    }
+  });
+});

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

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {InputProps} from './Input';
-export {Input} from './Input';
+export * from './Input';

package/lib/components/Menu/Menu.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Menu = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
-var _MenuOptionButton = require("./MenuOptionButton.js");
+var _MenuOptionButton = require("./MenuOptionButton");
 var _MenuModule = _interopRequireDefault(require("./Menu.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); }

package/lib/components/Menu/Menu.js.flow

@@ -2,9 +2,9 @@
 import * as React from 'react';
 
 import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon/Icon.js';
+import type {IconType} from '../Icon/Icon';
 
-import {MenuOptionButton} from './MenuOptionButton.js';
+import {MenuOptionButton} from './MenuOptionButton';
 
 import css from './Menu.module.css';
 

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -6,7 +6,7 @@ import {UnstyledButton} from '../Button';
 import {Icon} from '../Icon';
 import {Truncate} from '../Truncate';
 
-import type {MenuOption} from './Menu.js';
+import type {MenuOption} from './Menu';
 
 import css from './Menu.module.css';
 

package/lib/components/Menu/index.js

@@ -16,4 +16,4 @@ Object.defineProperty(exports, "MenuOptionButton", {
   }
 });
 var _Menu = require("./Menu");
-var _MenuOptionButton = require("./MenuOptionButton.js");
+var _MenuOptionButton = require("./MenuOptionButton");

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

@@ -2,4 +2,4 @@
 
 export type {MenuOption, MenuProps} from './Menu';
 export {Menu} from './Menu';
-export {MenuOptionButton} from './MenuOptionButton.js';
+export {MenuOptionButton} from './MenuOptionButton';

package/lib/components/Tabs/TabList/TabList.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _size = require("../../../styles/variables/_size");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
-var _TabDropdown = require("./TabDropdown.js");
+var _TabDropdown = require("./TabDropdown");
 var _TabListModule = _interopRequireDefault(require("./TabList.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); }

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -6,7 +6,7 @@ import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
 
-import {TabDropdown} from './TabDropdown.js';
+import {TabDropdown} from './TabDropdown';
 
 import css from './TabList.module.css';