@spaced-out/ui-design-system 0.1.94 → 0.1.96-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/design-tokens/size/base-size.json +3 -0
  3. package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js +5 -1
  4. package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow +6 -0
  5. package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css +44 -15
  6. package/lib/components/ButtonTabs/ButtonTabs.js +18 -3
  7. package/lib/components/ButtonTabs/ButtonTabs.js.flow +23 -2
  8. package/lib/components/ButtonTabs/ButtonTabs.module.css +34 -8
  9. package/lib/components/Dropdown/Dropdown.js +2 -1
  10. package/lib/components/Dropdown/Dropdown.js.flow +2 -1
  11. package/lib/components/SideMenuLink/SideMenuLink.js +2 -1
  12. package/lib/components/SideMenuLink/SideMenuLink.js.flow +1 -0
  13. package/lib/components/SideMenuLink/SideMenuLink.module.css +5 -0
  14. package/lib/styles/index.css +2 -0
  15. package/lib/styles/index.js +4 -2
  16. package/lib/styles/index.js.flow +2 -0
  17. package/lib/styles/variables/_size.css +2 -0
  18. package/lib/styles/variables/_size.js +3 -1
  19. package/lib/styles/variables/_size.js.flow +2 -0
  20. package/lib/utils/string/string.js +9 -2
  21. package/lib/utils/string/string.js.flow +10 -0
  22. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
2
2
 
3
3
  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.
4
4
 
5
+ ### [0.1.96-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.95...v0.1.96-beta.0) (2024-05-28)
6
+
7
+
8
+ ### Features
9
+
10
+ * added keys ([#218](https://github.com/spaced-out/ui-design-system/issues/218)) ([436573a](https://github.com/spaced-out/ui-design-system/commit/436573a8d8c48ec495d818bef4fa550c061eccf0))
11
+
12
+ ### [0.1.95](https://github.com/spaced-out/ui-design-system/compare/v0.1.94...v0.1.95) (2024-05-23)
13
+
14
+
15
+ ### Features
16
+
17
+ * button tabs update ([#217](https://github.com/spaced-out/ui-design-system/issues/217)) ([b670334](https://github.com/spaced-out/ui-design-system/commit/b67033454127b0ca7de9f7a1ec95f7d0aa64a311))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * [GDS-349] dropdown doesn't close on keypress and truncateString utility ([#214](https://github.com/spaced-out/ui-design-system/issues/214)) ([d852102](https://github.com/spaced-out/ui-design-system/commit/d852102c4e9f2404b33b1c6c81b6bf5a08c1382a))
23
+
5
24
  ### [0.1.94](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.8...v0.1.94) (2024-05-22)
6
25
 
7
26
  ### [0.1.94-beta.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.7...v0.1.94-beta.8) (2024-05-22)
package/design-tokens/size/base-size.json CHANGED
@@ -96,6 +96,9 @@
96
96
  "180": {
97
97
  "value": "180px"
98
98
  },
99
+ "200": {
100
+ "value": "200px"
101
+ },
99
102
  "228": {
100
103
  "value": "228px"
101
104
  },
package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js CHANGED
@@ -23,6 +23,8 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
23
23
  id,
24
24
  selectedButtonTabId,
25
25
  disabled,
26
+ isLeftCurved,
27
+ isRightCurved,
26
28
  ...props
27
29
  } = _ref;
28
30
  return /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props, {
@@ -37,7 +39,9 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
37
39
  [_ButtonTabModule.default.onlyIcon]: iconName && !children,
38
40
  [_ButtonTabModule.default.isSelected]: id === selectedButtonTabId,
39
41
  [_ButtonTabModule.default.isUnSelected]: id !== selectedButtonTabId,
40
- [_ButtonTabModule.default.disabled]: disabled
42
+ [_ButtonTabModule.default.disabled]: disabled,
43
+ [_ButtonTabModule.default.leftCurved]: isLeftCurved,
44
+ [_ButtonTabModule.default.rightCurved]: isRightCurved
41
45
  }, classNames?.wrapper),
42
46
  icon: _ButtonTabModule.default.icon
43
47
  },
package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow CHANGED
@@ -24,6 +24,8 @@ export type ButtonTabProps = {
24
24
  id: string,
25
25
  selectedButtonTabId?: string,
26
26
  isLoading?: boolean,
27
+ isLeftCurved?: boolean,
28
+ isRightCurved?: boolean,
27
29
  ...
28
30
  };
29
31
 
@@ -42,6 +44,8 @@ export const ButtonTab: React$AbstractComponent<
42
44
  id,
43
45
  selectedButtonTabId,
44
46
  disabled,
47
+ isLeftCurved,
48
+ isRightCurved,
45
49
  ...props
46
50
  }: ButtonTabProps,
47
51
  ref,
@@ -62,6 +66,8 @@ export const ButtonTab: React$AbstractComponent<
62
66
  [css.isSelected]: id === selectedButtonTabId,
63
67
  [css.isUnSelected]: id !== selectedButtonTabId,
64
68
  [css.disabled]: disabled,
69
+ [css.leftCurved]: isLeftCurved,
70
+ [css.rightCurved]: isRightCurved,
65
71
  },
66
72
  classNames?.wrapper,
67
73
  ),
package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css CHANGED
@@ -1,12 +1,28 @@
1
- @value (colorTextDisabled, colorTextPrimary, colorTextSecondary, colorBackgroundTertiary, colorButtonFillTertiaryEnabled) from '../../../styles/variables/_color.css';
2
- @value (size38, size30) from '../../../styles/variables/_size.css';
3
- @value (spaceSmall) from '../../../styles/variables/_space.css';
4
- @value (borderWidthPrimary) from '../../../styles/variables/_border.css';
1
+ @value (
2
+ colorTextDisabled,
3
+ colorBorderPrimary,
4
+ colorTextPrimary,
5
+ colorTextSecondary,
6
+ colorFillSecondary
7
+ ) from '../../../styles/variables/_color.css';
8
+ @value (
9
+ size42,
10
+ size34
11
+ ) from '../../../styles/variables/_size.css';
12
+ @value (
13
+ spaceSmall
14
+ ) from '../../../styles/variables/_space.css';
15
+ @value (
16
+ borderWidthPrimary,
17
+ borderWidthNone,
18
+ borderRadiusNone,
19
+ borderRadiusMedium
20
+ ) from '../../../styles/variables/_border.css';
5
21
 
6
- button.buttonTabWrapper {
22
+ .buttonTabWrapper {
7
23
  padding-left: spaceSmall;
8
24
  padding-right: spaceSmall;
9
- height: size38;
25
+ height: size42;
10
26
  color: colorTextSecondary;
11
27
  min-width: initial;
12
28
  text-align: left;
@@ -16,21 +32,21 @@ button.buttonTabWrapper {
16
32
  color: colorTextSecondary;
17
33
  }
18
34
 
19
- button.buttonTabWrapper:hover {
35
+ .buttonTabWrapper:hover {
20
36
  color: colorTextPrimary;
21
37
  background-color: initial;
22
38
  }
23
39
 
24
- button.buttonTabWrapper:hover .icon {
40
+ .buttonTabWrapper:hover .icon {
25
41
  color: colorTextPrimary;
26
42
  }
27
43
 
28
44
  .buttonTabWrapper.mediumButtonTab {
29
- height: size38;
45
+ height: size42;
30
46
  }
31
47
 
32
48
  .buttonTabWrapper.smallButtonTab {
33
- height: size30;
49
+ height: size34;
34
50
  }
35
51
 
36
52
  .onlyIcon {
@@ -40,20 +56,34 @@ button.buttonTabWrapper:hover .icon {
40
56
  }
41
57
 
42
58
  .mediumButtonTab.onlyIcon {
43
- max-width: size38;
59
+ max-width: size42;
44
60
  }
45
61
 
46
62
  .smallButtonTab.onlyIcon {
47
- max-width: size30;
63
+ max-width: size34;
48
64
  }
49
65
 
50
66
  .buttonTabWrapper.isSelected {
51
- background-color: colorBackgroundTertiary;
67
+ background-color: colorFillSecondary;
52
68
  color: colorTextPrimary;
69
+ border-width: borderWidthPrimary borderWidthPrimary borderWidthPrimary
70
+ borderWidthNone;
71
+ border-style: solid;
72
+ border-color: colorBorderPrimary;
73
+ }
74
+
75
+ .buttonTabWrapper.leftCurved {
76
+ border-radius: borderRadiusMedium borderRadiusNone borderRadiusNone
77
+ borderRadiusMedium;
78
+ }
79
+
80
+ .buttonTabWrapper.rightCurved {
81
+ border-radius: borderRadiusNone borderRadiusMedium borderRadiusMedium
82
+ borderRadiusNone;
53
83
  }
54
84
 
55
85
  .buttonTabWrapper.isSelected:hover {
56
- background-color: colorBackgroundTertiary;
86
+ background-color: colorFillSecondary;
57
87
  }
58
88
 
59
89
  .buttonTabWrapper.isSelected .icon {
@@ -71,5 +101,4 @@ button.buttonTabWrapper:hover .icon {
71
101
  .buttonTabWrapper.isUnSelected {
72
102
  padding-left: spaceSmall;
73
103
  padding-right: spaceSmall;
74
- border: borderWidthPrimary solid colorButtonFillTertiaryEnabled;
75
104
  }
package/lib/components/ButtonTabs/ButtonTabs.js CHANGED
@@ -21,18 +21,33 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
21
21
  selectedButtonTabId,
22
22
  onButtonTabSelect
23
23
  } = _ref;
24
- const childrenWithProps = React.Children.map(children, child => {
24
+ const childrenArray = React.Children.toArray(children);
25
+ const childrenWithProps = childrenArray.map((child, index) => {
25
26
  if ( /*#__PURE__*/React.isValidElement(child)) {
26
27
  const {
27
- disabled: disabledChild
28
+ disabled: disabledChild,
29
+ classNames: classNamesChild
28
30
  } = child.props;
31
+ const isFirst = index === 0;
32
+ const isLast = index === childrenArray.length - 1;
33
+ const isSingleChild = childrenArray.length === 1;
29
34
  return /*#__PURE__*/React.cloneElement(child, {
30
35
  ...child.props,
31
36
  isFluid,
32
37
  size,
38
+ isLeftCurved: isFirst && !isSingleChild,
39
+ isRightCurved: isLast && !isSingleChild,
33
40
  disabled: disabledChild || disabled,
34
41
  selectedButtonTabId,
35
- onButtonTabSelect
42
+ onButtonTabSelect,
43
+ classNames: {
44
+ wrapper: (0, _classify.default)(_ButtonTabsModule.default.buttonTab, {
45
+ [_ButtonTabsModule.default.firstChild]: isFirst && !isSingleChild,
46
+ [_ButtonTabsModule.default.lastChild]: isLast && !isSingleChild,
47
+ [_ButtonTabsModule.default.children]: !isFirst && !isLast,
48
+ [_ButtonTabsModule.default.singleChild]: isSingleChild
49
+ }, classNamesChild?.wrapper)
50
+ }
36
51
  });
37
52
  }
38
53
  return child;
package/lib/components/ButtonTabs/ButtonTabs.js.flow CHANGED
@@ -35,16 +35,37 @@ export const ButtonTabs: React$AbstractComponent<
35
35
  }: ButtonTabsProps,
36
36
  ref,
37
37
  ): React.Node => {
38
- const childrenWithProps = React.Children.map(children, (child) => {
38
+ const childrenArray = React.Children.toArray(children);
39
+
40
+ const childrenWithProps = childrenArray.map((child, index) => {
39
41
  if (React.isValidElement(child)) {
40
- const {disabled: disabledChild} = child.props;
42
+ const {disabled: disabledChild, classNames: classNamesChild} =
43
+ child.props;
44
+ const isFirst = index === 0;
45
+ const isLast = index === childrenArray.length - 1;
46
+ const isSingleChild = childrenArray.length === 1;
47
+
41
48
  return React.cloneElement(child, {
42
49
  ...child.props,
43
50
  isFluid,
44
51
  size,
52
+ isLeftCurved: isFirst && !isSingleChild,
53
+ isRightCurved: isLast && !isSingleChild,
45
54
  disabled: disabledChild || disabled,
46
55
  selectedButtonTabId,
47
56
  onButtonTabSelect,
57
+ classNames: {
58
+ wrapper: classify(
59
+ css.buttonTab,
60
+ {
61
+ [css.firstChild]: isFirst && !isSingleChild,
62
+ [css.lastChild]: isLast && !isSingleChild,
63
+ [css.children]: !isFirst && !isLast,
64
+ [css.singleChild]: isSingleChild,
65
+ },
66
+ classNamesChild?.wrapper,
67
+ ),
68
+ },
48
69
  });
49
70
  }
50
71
  return child;
package/lib/components/ButtonTabs/ButtonTabs.module.css CHANGED
@@ -1,16 +1,26 @@
1
- @value (colorBackgroundSecondary) from '../../styles/variables/_color.css';
2
- @value (size42, size34, sizeFluid) from '../../styles/variables/_size.css';
3
- @value (spaceXXSmall) from '../../styles/variables/_space.css';
4
- @value (borderRadiusMedium) from '../../styles/variables/_border.css';
1
+ @value (
2
+ colorBackgroundTertiary,
3
+ colorBorderPrimary
4
+ ) from '../../styles/variables/_color.css';
5
+ @value (
6
+ size42,
7
+ size34,
8
+ sizeFluid
9
+ ) from '../../styles/variables/_size.css';
10
+ @value (
11
+ borderWidthNone,
12
+ borderWidthPrimary,
13
+ borderRadiusMedium,
14
+ borderRadiusNone
15
+ ) from '../../styles/variables/_border.css';
5
16
 
6
17
  .buttonTabsWrapper {
7
18
  display: flex;
8
- gap: spaceXXSmall;
9
- background-color: colorBackgroundSecondary;
19
+ background-color: colorBackgroundTertiary;
10
20
  align-items: center;
11
- padding-left: calc(spaceXXSmall / 2);
12
- padding-right: calc(spaceXXSmall / 2);
13
21
  width: fit-content;
22
+ composes: borderTopPrimary from '../../styles/border.module.css';
23
+ composes: borderBottomPrimary from '../../styles/border.module.css';
14
24
  border-radius: borderRadiusMedium;
15
25
  }
16
26
 
@@ -25,3 +35,19 @@
25
35
  .buttonTabsWrapper.isFluid {
26
36
  width: sizeFluid;
27
37
  }
38
+
39
+ .buttonTab {
40
+ border-color: colorBorderPrimary;
41
+ border-width: borderWidthNone borderWidthPrimary;
42
+ border-style: none solid;
43
+ border-radius: borderRadiusNone;
44
+ }
45
+
46
+ .children,
47
+ .lastChild {
48
+ border-left-width: borderWidthNone;
49
+ }
50
+
51
+ .singleChild {
52
+ border-radius: borderRadiusMedium;
53
+ }
package/lib/components/Dropdown/Dropdown.js CHANGED
@@ -69,7 +69,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
69
69
  onKeyDown: e => {
70
70
  if (e.keyCode === 32) {
71
71
  e.preventDefault();
72
- onOpen();
72
+ isOpen ? clickAway() : onOpen();
73
73
  }
74
74
  },
75
75
  boxRef: refs.setReference,
@@ -100,6 +100,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
100
100
  onChange && onChange(option, e);
101
101
  if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
102
102
  clickAway();
103
+ refs.reference.current.querySelector('input').focus();
103
104
  }
104
105
  },
105
106
  size: menu.size || size,
package/lib/components/Dropdown/Dropdown.js.flow CHANGED
@@ -89,7 +89,7 @@ export const Dropdown: React$AbstractComponent<
89
89
  onKeyDown={(e) => {
90
90
  if (e.keyCode === 32) {
91
91
  e.preventDefault();
92
- onOpen();
92
+ isOpen ? clickAway() : onOpen();
93
93
  }
94
94
  }}
95
95
  boxRef={refs.setReference}
@@ -126,6 +126,7 @@ export const Dropdown: React$AbstractComponent<
126
126
  menu.optionsVariant === 'normal'
127
127
  ) {
128
128
  clickAway();
129
+ refs.reference.current.querySelector('input').focus();
129
130
  }
130
131
  }}
131
132
  size={menu.size || size}
package/lib/components/SideMenuLink/SideMenuLink.js CHANGED
@@ -201,7 +201,8 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
201
201
  onClick: onChangeHandler,
202
202
  ref: ref,
203
203
  tabIndex: disabled ? -1 : tabIndex,
204
- disabled: disabled
204
+ disabled: disabled,
205
+ key: pageNameKey
205
206
  }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
206
207
  type: MENU_NAME_LIST[pageNameKey].iconType,
207
208
  name: MENU_NAME_LIST[pageNameKey].iconName,
package/lib/components/SideMenuLink/SideMenuLink.js.flow CHANGED
@@ -231,6 +231,7 @@ export const SideMenuLink: React$AbstractComponent<
231
231
  ref={ref}
232
232
  tabIndex={disabled ? -1 : tabIndex}
233
233
  disabled={disabled}
234
+ key={pageNameKey}
234
235
  >
235
236
  {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
236
237
  <Icon
package/lib/components/SideMenuLink/SideMenuLink.module.css CHANGED
@@ -45,6 +45,8 @@
45
45
 
46
46
  .linkWrapper.closed {
47
47
  width: size32;
48
+ min-width: size32;
49
+ justify-content: center;
48
50
  }
49
51
 
50
52
  .linkWrapper:not(.selected):not(.inActive):hover {
@@ -55,6 +57,8 @@
55
57
  .menuIcon {
56
58
  height: size28;
57
59
  width: size28;
60
+ min-height: size28;
61
+ min-width: size28;
58
62
  color: colorSideMenuIconDefault;
59
63
  }
60
64
 
@@ -74,4 +78,5 @@
74
78
  .menuText {
75
79
  color: inherit;
76
80
  margin-right: spaceSmall;
81
+ white-space: nowrap;
77
82
  }
package/lib/styles/index.css CHANGED
@@ -426,6 +426,8 @@
426
426
 
427
427
  @value size180: 180px;
428
428
 
429
+ @value size200: 200px;
430
+
429
431
  @value size228: 228px;
430
432
 
431
433
  @value size240: 240px;
package/lib/styles/index.js CHANGED
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuAccountBarFill = 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.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = 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;
7
- exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
8
- exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
7
+ exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
8
+ exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = void 0;
9
9
 
10
10
  const borderWidthNone = '0px';
11
11
  exports.borderWidthNone = borderWidthNone;
@@ -435,6 +435,8 @@ const size160 = '160px';
435
435
  exports.size160 = size160;
436
436
  const size180 = '180px';
437
437
  exports.size180 = size180;
438
+ const size200 = '200px';
439
+ exports.size200 = size200;
438
440
  const size228 = '228px';
439
441
  exports.size228 = size228;
440
442
  const size240 = '240px';
package/lib/styles/index.js.flow CHANGED
@@ -428,6 +428,8 @@ export const size160 = '160px';
428
428
 
429
429
  export const size180 = '180px';
430
430
 
431
+ export const size200 = '200px';
432
+
431
433
  export const size228 = '228px';
432
434
 
433
435
  export const size240 = '240px';
package/lib/styles/variables/_size.css CHANGED
@@ -62,6 +62,8 @@
62
62
 
63
63
  @value size180: 180px;
64
64
 
65
+ @value size200: 200px;
66
+
65
67
  @value size228: 228px;
66
68
 
67
69
  @value size240: 240px;
package/lib/styles/variables/_size.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
6
+ exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
7
7
 
8
8
  const size2 = '2px';
9
9
  exports.size2 = size2;
@@ -69,6 +69,8 @@ const size160 = '160px';
69
69
  exports.size160 = size160;
70
70
  const size180 = '180px';
71
71
  exports.size180 = size180;
72
+ const size200 = '200px';
73
+ exports.size200 = size200;
72
74
  const size228 = '228px';
73
75
  exports.size228 = size228;
74
76
  const size240 = '240px';
package/lib/styles/variables/_size.js.flow CHANGED
@@ -64,6 +64,8 @@ export const size160 = '160px';
64
64
 
65
65
  export const size180 = '180px';
66
66
 
67
+ export const size200 = '200px';
68
+
67
69
  export const size228 = '228px';
68
70
 
69
71
  export const size240 = '240px';
package/lib/utils/string/string.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
6
+ exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
7
7
 
8
8
  const capitalize = word => {
9
9
  if (!word) {
@@ -15,4 +15,11 @@ exports.capitalize = capitalize;
15
15
  const escapeRegExp = str => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
16
16
  exports.escapeRegExp = escapeRegExp;
17
17
  const formatWord = (word, count) => count === 1 ? word : word + 's';
18
- exports.formatWord = formatWord;
18
+ exports.formatWord = formatWord;
19
+ const truncateString = (inputString, maxLength) => {
20
+ if (inputString.length > maxLength) {
21
+ return inputString.substring(0, maxLength - 3) + '...';
22
+ }
23
+ return inputString;
24
+ };
25
+ exports.truncateString = truncateString;
package/lib/utils/string/string.js.flow CHANGED
@@ -14,3 +14,13 @@ export const escapeRegExp = (str: string): string =>
14
14
 
15
15
  export const formatWord = (word: string, count: number): string =>
16
16
  count === 1 ? word : word + 's';
17
+
18
+ export const truncateString = (
19
+ inputString: string,
20
+ maxLength: number,
21
+ ): string => {
22
+ if (inputString.length > maxLength) {
23
+ return inputString.substring(0, maxLength - 3) + '...';
24
+ }
25
+ return inputString;
26
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.1.94",
3
+ "version": "0.1.96-beta.0",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {