@spaced-out/ui-design-system 0.0.38 → 0.0.40

package/.cspell/custom-words.txt

@@ -5,6 +5,7 @@ CODEOWNERS
 commitlint
 contributorsrc
 Crespo
+datetime
 DEFAULTTEXT
 dismissable
 eqeqeq
@@ -15,6 +16,8 @@ Gaurav
 Lipsey
 Neue
 Nishant
+nonbreaking
+nonstrict
 OPACITYS
 partialformat
 premajor

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.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)
+
+
+### Features
+
+* (GDS-145) table component ([#70](https://github.com/spaced-out/ui-design-system/issues/70)) ([5d4ccf8](https://github.com/spaced-out/ui-design-system/commit/5d4ccf8c8097cdb545ad9b1086569146b072d761))
+
 ### [0.0.38](https://github.com/spaced-out/ui-design-system/compare/v0.0.37...v0.0.38) (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

@@ -51,12 +51,18 @@
     "42": {
       "value": "42px"
     },
+    "48": {
+      "value": "48px"
+    },
     "58": {
       "value": "58px"
     },
     "60": {
       "value": "60px"
     },
+    "90": {
+      "value": "90px"
+    },
     "100": {
       "value": "100px"
     },
@@ -110,6 +116,9 @@
     },
     "fullViewportHeight": {
       "value": "100vh"
+    },
+    "fullViewportWidth": {
+      "value": "100vw"
     }
   }
 }

package/lib/components/Checkbox/Checkbox.js.flow

@@ -12,6 +12,11 @@ import css from './Checkbox.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
 
+/*
+  Note: An indeterminate state has a higher priority.
+  If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
+*/
+
 export type CheckboxProps = {
   name?: string,
   value?: string,

package/lib/components/Checkbox/Checkbox.module.css

@@ -66,6 +66,7 @@
 
 .checkboxSquare .disabled {
   cursor: not-allowed;
+  border: borderWidthTertiary solid colorFillDisabled;
 }
 
 .inputCheckbox {
@@ -124,7 +125,6 @@ input[type='checkbox']:disabled {
 }
 
 .disabled {
-  border: borderWidthTertiary solid colorFillDisabled;
   pointer-events: none;
   cursor: not-allowed;
 }

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/Table/Cell.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleCell = exports.Row = exports.PaddedDoubleContentCell = exports.PaddedContentCell = exports.MonogramCell = exports.Monogram = exports.DoubleCell = exports.DateCell = exports.Cells = exports.Cell = exports.BasicSingleCell = exports.BasicDoubleCell = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _formatDistance = _interopRequireDefault(require("date-fns/formatDistance"));
+var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
+var _classify = require("../../utils/classify");
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Avatar = require("../Avatar");
+var _Text = require("../Text");
+var _TableModule = _interopRequireDefault(require("./Table.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; }
+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 Cells = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.classify)(_TableModule.default.row, className)
+  }, rest), children);
+};
+exports.Cells = Cells;
+const Row = Cells;
+exports.Row = Row;
+const Cell = _ref2 => {
+  let {
+    children,
+    className
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TableModule.default.cell, className)
+  }, children);
+};
+exports.Cell = Cell;
+const BasicSingleCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultSingleCell, 'td');
+exports.BasicSingleCell = BasicSingleCell;
+const BasicDoubleCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultDoubleCell, 'td');
+exports.BasicDoubleCell = BasicDoubleCell;
+const PaddedContentCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.singleContentCell, 'td');
+exports.PaddedContentCell = PaddedContentCell;
+const PaddedDoubleContentCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.doubleContentCell, 'td');
+exports.PaddedDoubleContentCell = PaddedDoubleContentCell;
+const SingleCell = _ref3 => {
+  let {
+    title,
+    className
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(PaddedContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _TableModule.default.paddedTitleBlock
+  }, title));
+};
+exports.SingleCell = SingleCell;
+const DoubleCell = _ref4 => {
+  let {
+    title,
+    subtitle,
+    className
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(PaddedDoubleContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.paddedTitleBlock
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _TableModule.default.doubleTitle
+  }, title), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    color: _Text.TEXT_COLORS.tertiary,
+    className: _TableModule.default.doubleSubtitle
+  }, subtitle ?? '')));
+};
+exports.DoubleCell = DoubleCell;
+const DateCell = _ref5 => {
+  let {
+    date,
+    className
+  } = _ref5;
+  const parsedDate = typeof date === 'object' ? date : (0, _parseISO.default)(date);
+  return /*#__PURE__*/React.createElement(DoubleCell, {
+    title: `${parsedDate.getMonth() + 1} / ${parsedDate.getDate() + 1} / ${parsedDate.getFullYear()}`,
+    subtitle: `${(0, _formatDistance.default)(parsedDate, new Date())} ago`,
+    className: className
+  });
+};
+exports.DateCell = DateCell;
+const Monogram = _ref6 => {
+  let {
+    initials
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    size: "small",
+    text: initials
+  });
+};
+exports.Monogram = Monogram;
+const MonogramCell = _ref7 => {
+  let {
+    initials,
+    className
+  } = _ref7;
+  return /*#__PURE__*/React.createElement(PaddedContentCell, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Monogram, {
+    initials: initials
+  }));
+};
+exports.MonogramCell = MonogramCell;