@lumx/core 3.20.1-alpha.5 → 3.20.1-alpha.50

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 (156) hide show
  1. package/CONTRIBUTING.md +1 -5
  2. package/{js/utils/className/resolveColorWithVariants.js → _internal/DPnPEC08.js} +1 -5
  3. package/js/constants/_internal/design-tokens.d.ts +5421 -0
  4. package/js/constants/className/index.d.ts +4 -0
  5. package/js/constants/className/index.js +6 -0
  6. package/js/constants/components/index.d.ts +24 -0
  7. package/js/constants/components/index.js +26 -0
  8. package/js/constants/enums/index.d.ts +200 -0
  9. package/js/constants/enums/index.js +155 -0
  10. package/js/constants/index.d.ts +4 -0
  11. package/js/constants/index.js +4 -218
  12. package/js/constants/keycodes/index.d.ts +36 -0
  13. package/js/constants/{keycodes.js → keycodes/index.js} +1 -13
  14. package/js/types/Direction.d.ts +1 -0
  15. package/js/types/{GenericProps.ts → GenericProps.d.ts} +0 -1
  16. package/js/types/HasAriaLabelOrLabelledBy.d.ts +17 -0
  17. package/js/types/{HasTheme.ts → HasTheme.d.ts} +0 -1
  18. package/js/types/KebabCase.d.ts +2 -0
  19. package/js/types/LumxClassName.d.ts +3 -0
  20. package/js/types/Point.d.ts +7 -0
  21. package/js/types/RectSize.d.ts +7 -0
  22. package/js/types/Spacing.d.ts +1 -0
  23. package/js/types/{TextElement.ts → TextElement.d.ts} +0 -1
  24. package/js/types/{index.ts → index.d.ts} +4 -0
  25. package/js/types/index.js +0 -1
  26. package/js/utils/_internal/color/index.d.ts +1 -0
  27. package/js/utils/_internal/color/resolveColorWithVariants.d.ts +3 -0
  28. package/js/utils/classNames/bem/block.d.ts +18 -0
  29. package/js/utils/classNames/bem/block.js +20 -0
  30. package/js/utils/classNames/bem/element.d.ts +19 -0
  31. package/js/utils/classNames/bem/element.js +21 -0
  32. package/js/utils/classNames/bem/generateBEMClass.d.ts +27 -0
  33. package/js/utils/classNames/bem/generateBEMClass.js +48 -0
  34. package/js/utils/classNames/bem/index.d.ts +2 -0
  35. package/js/utils/classNames/bem/index.js +2 -0
  36. package/js/utils/classNames/color/index.d.ts +43 -0
  37. package/js/utils/classNames/color/index.js +50 -0
  38. package/js/utils/classNames/index.d.ts +6 -0
  39. package/js/utils/classNames/index.js +7 -0
  40. package/js/utils/classNames/spacing/index.d.ts +70 -0
  41. package/js/utils/classNames/spacing/index.js +74 -0
  42. package/js/utils/classNames/typography/index.d.ts +6 -0
  43. package/js/utils/classNames/typography/index.js +9 -0
  44. package/js/utils/classNames/visually-hidden/index.d.ts +5 -0
  45. package/js/utils/classNames/visually-hidden/index.js +10 -0
  46. package/js/utils/events/index.d.ts +2 -0
  47. package/js/utils/events/index.js +2 -0
  48. package/js/utils/events/keyboard.d.ts +24 -0
  49. package/js/utils/events/keyboard.js +44 -0
  50. package/js/utils/events/swipe.d.ts +6 -0
  51. package/js/utils/events/swipe.js +79 -0
  52. package/js/utils/index.d.ts +2 -0
  53. package/js/utils/index.js +4 -223
  54. package/lumx.css +18 -17
  55. package/package.json +11 -15
  56. package/scss/components/list/_index.scss +10 -4
  57. package/scss/components/text-field/_index.scss +4 -6
  58. package/js/components/Icon/Stories.js +0 -40
  59. package/js/components/Icon/Tests.tsx +0 -120
  60. package/js/components/Icon/index.tsx +0 -134
  61. package/js/constants/design-tokens.js +0 -2329
  62. package/js/constants/design-tokens.min.js +0 -1
  63. package/js/constants/design-tokens.ts +0 -2324
  64. package/js/constants/index.min.js +0 -1
  65. package/js/constants/index.ts +0 -231
  66. package/js/constants/keycodes.min.js +0 -1
  67. package/js/constants/keycodes.ts +0 -44
  68. package/js/custom-colors.js +0 -48
  69. package/js/custom-colors.min.js +0 -1
  70. package/js/custom-colors.ts +0 -56
  71. package/js/date-picker.js +0 -71
  72. package/js/date-picker.min.js +0 -1
  73. package/js/date-picker.ts +0 -77
  74. package/js/types/Callback.js +0 -2
  75. package/js/types/Callback.min.js +0 -1
  76. package/js/types/Falsy.js +0 -2
  77. package/js/types/Falsy.min.js +0 -1
  78. package/js/types/GenericProps.js +0 -2
  79. package/js/types/GenericProps.min.js +0 -1
  80. package/js/types/HasAriaLabelOrLabelledBy.js +0 -2
  81. package/js/types/HasAriaLabelOrLabelledBy.min.js +0 -1
  82. package/js/types/HasAriaLabelOrLabelledBy.ts +0 -19
  83. package/js/types/HasClassName.js +0 -2
  84. package/js/types/HasClassName.min.js +0 -1
  85. package/js/types/HasCloseMode.js +0 -2
  86. package/js/types/HasCloseMode.min.js +0 -1
  87. package/js/types/HasTheme.js +0 -2
  88. package/js/types/HasTheme.min.js +0 -1
  89. package/js/types/HeadingElement.js +0 -2
  90. package/js/types/HeadingElement.min.js +0 -1
  91. package/js/types/Point.js +0 -2
  92. package/js/types/Point.min.js +0 -1
  93. package/js/types/Point.ts +0 -4
  94. package/js/types/Predicate.js +0 -2
  95. package/js/types/Predicate.min.js +0 -1
  96. package/js/types/RectSize.js +0 -2
  97. package/js/types/RectSize.min.js +0 -1
  98. package/js/types/RectSize.ts +0 -4
  99. package/js/types/TextElement.js +0 -2
  100. package/js/types/TextElement.min.js +0 -1
  101. package/js/types/ValueOf.js +0 -2
  102. package/js/types/ValueOf.min.js +0 -1
  103. package/js/types/index.min.js +0 -1
  104. package/js/utils/className/fontColorClass.js +0 -20
  105. package/js/utils/className/fontColorClass.min.js +0 -1
  106. package/js/utils/className/fontColorClass.test.js +0 -18
  107. package/js/utils/className/fontColorClass.test.min.js +0 -1
  108. package/js/utils/className/fontColorClass.test.ts +0 -15
  109. package/js/utils/className/fontColorClass.ts +0 -12
  110. package/js/utils/className/getBasicClass.js +0 -36
  111. package/js/utils/className/getBasicClass.min.js +0 -1
  112. package/js/utils/className/getBasicClass.test.js +0 -22
  113. package/js/utils/className/getBasicClass.test.min.js +0 -1
  114. package/js/utils/className/getBasicClass.test.ts +0 -20
  115. package/js/utils/className/getBasicClass.ts +0 -36
  116. package/js/utils/className/getRootClassName.js +0 -33
  117. package/js/utils/className/getRootClassName.min.js +0 -1
  118. package/js/utils/className/getRootClassName.test.js +0 -15
  119. package/js/utils/className/getRootClassName.test.min.js +0 -1
  120. package/js/utils/className/getRootClassName.test.ts +0 -11
  121. package/js/utils/className/getRootClassName.ts +0 -25
  122. package/js/utils/className/getTypographyClassName.js +0 -13
  123. package/js/utils/className/getTypographyClassName.min.js +0 -1
  124. package/js/utils/className/getTypographyClassName.test.js +0 -9
  125. package/js/utils/className/getTypographyClassName.test.min.js +0 -1
  126. package/js/utils/className/getTypographyClassName.test.ts +0 -7
  127. package/js/utils/className/getTypographyClassName.ts +0 -9
  128. package/js/utils/className/handleBasicClasses.js +0 -52
  129. package/js/utils/className/handleBasicClasses.min.js +0 -1
  130. package/js/utils/className/handleBasicClasses.test.js +0 -35
  131. package/js/utils/className/handleBasicClasses.test.min.js +0 -1
  132. package/js/utils/className/handleBasicClasses.test.ts +0 -28
  133. package/js/utils/className/handleBasicClasses.ts +0 -44
  134. package/js/utils/className/index.js +0 -25
  135. package/js/utils/className/index.min.js +0 -1
  136. package/js/utils/className/index.ts +0 -6
  137. package/js/utils/className/resolveColorWithVariants.min.js +0 -1
  138. package/js/utils/className/resolveColorWithVariants.test.js +0 -30
  139. package/js/utils/className/resolveColorWithVariants.test.min.js +0 -1
  140. package/js/utils/className/resolveColorWithVariants.test.ts +0 -33
  141. package/js/utils/className/resolveColorWithVariants.ts +0 -11
  142. package/js/utils/index.min.js +0 -1
  143. package/js/utils/index.ts +0 -221
  144. package/lumx.min.css +0 -1
  145. package/stories/controls/color.ts +0 -7
  146. package/stories/controls/icons.ts +0 -126
  147. package/stories/controls/selectArgType.ts +0 -8
  148. package/stories/controls/withUndefined.ts +0 -1
  149. package/testing/utils/queries.ts +0 -19
  150. /package/js/types/{Callback.ts → Callback.d.ts} +0 -0
  151. /package/js/types/{Falsy.ts → Falsy.d.ts} +0 -0
  152. /package/js/types/{HasClassName.ts → HasClassName.d.ts} +0 -0
  153. /package/js/types/{HasCloseMode.ts → HasCloseMode.d.ts} +0 -0
  154. /package/js/types/{HeadingElement.ts → HeadingElement.d.ts} +0 -0
  155. /package/js/types/{Predicate.ts → Predicate.d.ts} +0 -0
  156. /package/js/types/{ValueOf.ts → ValueOf.d.ts} +0 -0
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var js_constants_index = require('../../constants/index.js');
6
- var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
7
- require('../../constants/keycodes.js');
8
-
9
- /**
10
- * Returns the classname associated to the given color and variant.
11
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
12
- */
13
- function fontColorClass(propColor, propColorVariant) {
14
- if (!propColor)
15
- return undefined;
16
- const [color, colorVariant = js_constants_index.ColorVariant.N] = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(propColor, propColorVariant);
17
- return `lumx-color-font-${color}-${colorVariant}`;
18
- }
19
-
20
- exports.fontColorClass = fontColorClass;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../constants/index.min.js"),e=require("./resolveColorWithVariants.min.js");require("../../constants/keycodes.min.js"),exports.fontColorClass=function(o,t){if(!o)return;const[s,n=r.ColorVariant.N]=e.resolveColorWithVariants(o,t);return`lumx-color-font-${s}-${n}`};
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_fontColorClass = require('./fontColorClass.js');
4
- require('../../constants/index.js');
5
- require('../../constants/keycodes.js');
6
- require('./resolveColorWithVariants.js');
7
-
8
- describe(js_utils_className_fontColorClass.fontColorClass, () => {
9
- it('should get lumx class for font color', () => {
10
- expect(js_utils_className_fontColorClass.fontColorClass('dark')).toBe('lumx-color-font-dark-N');
11
- });
12
- it('should get lumx class for font color with variant', () => {
13
- expect(js_utils_className_fontColorClass.fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
14
- });
15
- it('should get lumx class for font color with variant with override', () => {
16
- expect(js_utils_className_fontColorClass.fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
17
- });
18
- });
@@ -1 +0,0 @@
1
- "use strict";var o=require("./fontColorClass.min.js");require("../../constants/index.min.js"),require("../../constants/keycodes.min.js"),require("./resolveColorWithVariants.min.js"),describe(o.fontColorClass,()=>{it("should get lumx class for font color",()=>{expect(o.fontColorClass("dark")).toBe("lumx-color-font-dark-N")}),it("should get lumx class for font color with variant",()=>{expect(o.fontColorClass("red","L2")).toBe("lumx-color-font-red-L2")}),it("should get lumx class for font color with variant with override",()=>{expect(o.fontColorClass("red-N","L2")).toBe("lumx-color-font-red-L2")})});
@@ -1,15 +0,0 @@
1
- import { fontColorClass } from './fontColorClass';
2
-
3
- describe(fontColorClass, () => {
4
- it('should get lumx class for font color', () => {
5
- expect(fontColorClass('dark')).toBe('lumx-color-font-dark-N');
6
- });
7
-
8
- it('should get lumx class for font color with variant', () => {
9
- expect(fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
10
- });
11
-
12
- it('should get lumx class for font color with variant with override', () => {
13
- expect(fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
14
- });
15
- });
@@ -1,12 +0,0 @@
1
- import { ColorVariant, ColorWithVariants } from '../../constants';
2
- import { resolveColorWithVariants } from './resolveColorWithVariants';
3
-
4
- /**
5
- * Returns the classname associated to the given color and variant.
6
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
7
- */
8
- export function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant) {
9
- if (!propColor) return undefined;
10
- const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
11
- return `lumx-color-font-${color}-${colorVariant}`;
12
- }
@@ -1,36 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var isBoolean = require('lodash/isBoolean');
6
- var kebabCase = require('lodash/kebabCase');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
11
- var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
12
-
13
- /**
14
- * Get the basic CSS class for the given type.
15
- *
16
- * @param prefix The class name prefix for the generated CSS class.
17
- * @param type The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
18
- * @param value The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
19
- * @return The basic CSS class.
20
- */
21
- function getBasicClass({ prefix, type, value, }) {
22
- if (isBoolean__default["default"](value)) {
23
- if (!value) {
24
- // False value should not return a class.
25
- return '';
26
- }
27
- const booleanPrefixes = ['has', 'is'];
28
- if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
29
- return `${prefix}--${kebabCase__default["default"](type)}`;
30
- }
31
- return `${prefix}--is-${kebabCase__default["default"](type)}`;
32
- }
33
- return `${prefix}--${kebabCase__default["default"](type)}-${value}`;
34
- }
35
-
36
- exports.getBasicClass = getBasicClass;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/isBoolean"),t=require("lodash/kebabCase");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),s=r(t);exports.getBasicClass=function({prefix:e,type:t,value:r}){if(a.default(r)){if(!r)return"";return["has","is"].some(e=>t.toString().startsWith(e))?`${e}--${s.default(t)}`:`${e}--is-${s.default(t)}`}return`${e}--${s.default(t)}-${r}`};
@@ -1,22 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_getBasicClass = require('./getBasicClass.js');
4
- require('lodash/isBoolean');
5
- require('lodash/kebabCase');
6
-
7
- describe(js_utils_className_getBasicClass.getBasicClass, () => {
8
- it('should return correct basic CSS class for different types and values', () => {
9
- // Test cases with different inputs
10
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
11
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
12
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
13
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
14
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
15
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
16
- // Additional tests for boolean types
17
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
18
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
19
- // Tests for undefined
20
- expect(js_utils_className_getBasicClass.getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
21
- });
22
- });
@@ -1 +0,0 @@
1
- "use strict";var e=require("./getBasicClass.min.js");require("lodash/isBoolean"),require("lodash/kebabCase"),describe(e.getBasicClass,()=>{it("should return correct basic CSS class for different types and values",()=>{expect(e.getBasicClass({prefix:"test",type:"color",value:"primary"})).toBe("test--color-primary"),expect(e.getBasicClass({prefix:"test",type:"variant",value:"button"})).toBe("test--variant-button"),expect(e.getBasicClass({prefix:"test",type:"isDark",value:!0})).toBe("test--is-dark"),expect(e.getBasicClass({prefix:"test",type:"dark",value:!0})).toBe("test--is-dark"),expect(e.getBasicClass({prefix:"test",type:"hasDark",value:!0})).toBe("test--has-dark"),expect(e.getBasicClass({prefix:"test",type:"isActive",value:!1})).toBe(""),expect(e.getBasicClass({prefix:"test",type:"hasBorder",value:!0})).toBe("test--has-border"),expect(e.getBasicClass({prefix:"test",type:"isVisible",value:!1})).toBe(""),expect(e.getBasicClass({prefix:"test",type:"variant",value:void 0})).toBe("test--variant-undefined")})});
@@ -1,20 +0,0 @@
1
- import { getBasicClass } from './getBasicClass';
2
-
3
- describe(getBasicClass, () => {
4
- it('should return correct basic CSS class for different types and values', () => {
5
- // Test cases with different inputs
6
- expect(getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
7
- expect(getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
8
- expect(getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
9
- expect(getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
10
- expect(getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
11
- expect(getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
12
-
13
- // Additional tests for boolean types
14
- expect(getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
15
- expect(getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
16
-
17
- // Tests for undefined
18
- expect(getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
19
- });
20
- });
@@ -1,36 +0,0 @@
1
- import isBoolean from 'lodash/isBoolean';
2
- import kebabCase from 'lodash/kebabCase';
3
-
4
- /**
5
- * Get the basic CSS class for the given type.
6
- *
7
- * @param prefix The class name prefix for the generated CSS class.
8
- * @param type The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
9
- * @param value The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
10
- * @return The basic CSS class.
11
- */
12
- export function getBasicClass({
13
- prefix,
14
- type,
15
- value,
16
- }: {
17
- prefix: string;
18
- type: string;
19
- value: string | number | boolean | undefined;
20
- }): string {
21
- if (isBoolean(value)) {
22
- if (!value) {
23
- // False value should not return a class.
24
- return '';
25
- }
26
- const booleanPrefixes = ['has', 'is'];
27
-
28
- if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
29
- return `${prefix}--${kebabCase(type)}`;
30
- }
31
-
32
- return `${prefix}--is-${kebabCase(type)}`;
33
- }
34
-
35
- return `${prefix}--${kebabCase(type)}-${value}`;
36
- }
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var kebabCase = require('lodash/kebabCase');
6
- var js_constants_index = require('../../constants/index.js');
7
- require('../../constants/keycodes.js');
8
-
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
-
11
- var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
12
-
13
- // See https://regex101.com/r/YjS1uI/3
14
- const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
15
- /**
16
- * Get the name of the root CSS class of a component based on its name.
17
- *
18
- * @param componentName The name of the component. This name should contains the component prefix and be
19
- * written in PascalCase.
20
- * @param subComponent Whether the current component is a sub component, if true, define the class according
21
- * to BEM standards.
22
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
23
- * lower-snake-case.
24
- */
25
- function getRootClassName(componentName, subComponent) {
26
- const formattedClassName = `${js_constants_index.CSS_PREFIX}-${kebabCase__default["default"](componentName)}`;
27
- if (subComponent) {
28
- return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
29
- }
30
- return formattedClassName;
31
- }
32
-
33
- exports.getRootClassName = getRootClassName;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/kebabCase"),t=require("../../constants/index.min.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../constants/keycodes.min.js");var s=r(e);const n=/^(.*)-(.+)$/gi;exports.getRootClassName=function(e,r){const o=`${t.CSS_PREFIX}-${s.default(e)}`;return r?o.replace(n,"$1__$2"):o};
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_getRootClassName = require('./getRootClassName.js');
4
- require('lodash/kebabCase');
5
- require('../../constants/index.js');
6
- require('../../constants/keycodes.js');
7
-
8
- describe(js_utils_className_getRootClassName.getRootClassName, () => {
9
- it('should transform the component name into a lumx class', () => {
10
- expect(js_utils_className_getRootClassName.getRootClassName('Table')).toBe('lumx-table');
11
- });
12
- it('should transform the sub component name into a lumx class', () => {
13
- expect(js_utils_className_getRootClassName.getRootClassName('TableBody', true)).toBe('lumx-table__body');
14
- });
15
- });
@@ -1 +0,0 @@
1
- "use strict";var e=require("./getRootClassName.min.js");require("lodash/kebabCase"),require("../../constants/index.min.js"),require("../../constants/keycodes.min.js"),describe(e.getRootClassName,()=>{it("should transform the component name into a lumx class",()=>{expect(e.getRootClassName("Table")).toBe("lumx-table")}),it("should transform the sub component name into a lumx class",()=>{expect(e.getRootClassName("TableBody",!0)).toBe("lumx-table__body")})});
@@ -1,11 +0,0 @@
1
- import { getRootClassName } from './getRootClassName';
2
-
3
- describe(getRootClassName, () => {
4
- it('should transform the component name into a lumx class', () => {
5
- expect(getRootClassName('Table')).toBe('lumx-table');
6
- });
7
-
8
- it('should transform the sub component name into a lumx class', () => {
9
- expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
10
- });
11
- });
@@ -1,25 +0,0 @@
1
- import kebabCase from 'lodash/kebabCase';
2
-
3
- import { CSS_PREFIX } from '../../constants';
4
-
5
- // See https://regex101.com/r/YjS1uI/3
6
- const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
7
-
8
- /**
9
- * Get the name of the root CSS class of a component based on its name.
10
- *
11
- * @param componentName The name of the component. This name should contains the component prefix and be
12
- * written in PascalCase.
13
- * @param subComponent Whether the current component is a sub component, if true, define the class according
14
- * to BEM standards.
15
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
16
- * lower-snake-case.
17
- */
18
- export function getRootClassName(componentName: string, subComponent?: boolean): string {
19
- const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
20
-
21
- if (subComponent) {
22
- return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
23
- }
24
- return formattedClassName;
25
- }
@@ -1,13 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- /**
6
- * Returns the classname associated to the given typography.
7
- * For example, for `Typography.title` it returns `lumx-typography-title`
8
- */
9
- const getTypographyClassName = (typography) => {
10
- return `lumx-typography-${typography}`;
11
- };
12
-
13
- exports.getTypographyClassName = getTypographyClassName;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getTypographyClassName=e=>`lumx-typography-${e}`;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_getTypographyClassName = require('./getTypographyClassName.js');
4
-
5
- describe(js_utils_className_getTypographyClassName.getTypographyClassName, () => {
6
- it('should generate lumx typography class', () => {
7
- expect(js_utils_className_getTypographyClassName.getTypographyClassName('title')).toBe('lumx-typography-title');
8
- });
9
- });
@@ -1 +0,0 @@
1
- "use strict";var e=require("./getTypographyClassName.min.js");describe(e.getTypographyClassName,()=>{it("should generate lumx typography class",()=>{expect(e.getTypographyClassName("title")).toBe("lumx-typography-title")})});
@@ -1,7 +0,0 @@
1
- import { getTypographyClassName } from './getTypographyClassName';
2
-
3
- describe(getTypographyClassName, () => {
4
- it('should generate lumx typography class', () => {
5
- expect(getTypographyClassName('title')).toBe('lumx-typography-title');
6
- });
7
- });
@@ -1,9 +0,0 @@
1
- import { Typography } from '../../constants';
2
-
3
- /**
4
- * Returns the classname associated to the given typography.
5
- * For example, for `Typography.title` it returns `lumx-typography-title`
6
- */
7
- export const getTypographyClassName = (typography: Typography) => {
8
- return `lumx-typography-${typography}`;
9
- };
@@ -1,52 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var classNames = require('classnames');
6
- var isBoolean = require('lodash/isBoolean');
7
- var isEmpty = require('lodash/isEmpty');
8
- var js_utils_className_getBasicClass = require('./getBasicClass.js');
9
- require('lodash/kebabCase');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
14
- var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
15
- var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
16
-
17
- /**
18
- * Enhance isEmpty method to also works with numbers.
19
- *
20
- * @param value The value to check.
21
- * @return Whether the input value is empty or != 0.
22
- */
23
- const _isEmpty = (value) => {
24
- if (typeof value === 'number') {
25
- return value === 0;
26
- }
27
- return isEmpty__default["default"](value);
28
- };
29
- /**
30
- * Return all basic LumX CSS classes which are available for every components.
31
- *
32
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
33
- *
34
- * @param prefix The class name prefix for the generated CSS class.
35
- * @param props All the other props you want to generate a class.
36
- * The rule of thumb: the key is the name of the prop in the class, the value a string that will
37
- * be used in the classname to represent the value of the given prop.
38
- * @return All LumX basic CSS classes.
39
- */
40
- function handleBasicClasses({ prefix, ...props }) {
41
- const otherClasses = {};
42
- if (!isEmpty__default["default"](props)) {
43
- Object.keys(props).forEach((prop) => {
44
- otherClasses[js_utils_className_getBasicClass.getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean__default["default"](props[prop])
45
- ? props[prop]
46
- : !_isEmpty(props[prop]);
47
- });
48
- }
49
- return classNames__default["default"](prefix, otherClasses);
50
- }
51
-
52
- exports.handleBasicClasses = handleBasicClasses;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("classnames"),a=require("lodash/isBoolean"),s=require("lodash/isEmpty"),r=require("./getBasicClass.min.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("lodash/kebabCase");var u=t(e),i=t(a),l=t(s);exports.handleBasicClasses=function({prefix:e,...a}){const s={};return l.default(a)||Object.keys(a).forEach(t=>{var u;s[r.getBasicClass({prefix:e,type:t,value:a[t]})]=i.default(a[t])?a[t]:!("number"==typeof(u=a[t])?0===u:l.default(u))}),u.default(e,s)};
@@ -1,35 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_handleBasicClasses = require('./handleBasicClasses.js');
4
- require('classnames');
5
- require('lodash/isBoolean');
6
- require('lodash/isEmpty');
7
- require('./getBasicClass.js');
8
- require('lodash/kebabCase');
9
-
10
- describe(js_utils_className_handleBasicClasses.handleBasicClasses, () => {
11
- it('should return correct combined CSS classes based on props', () => {
12
- const className = js_utils_className_handleBasicClasses.handleBasicClasses({
13
- prefix: 'test',
14
- // Undefined
15
- undefined,
16
- // Null
17
- null: null,
18
- // Empty string
19
- emptyString: '',
20
- // Empty array
21
- emptyArray: [],
22
- // Empty object
23
- emptyObject: {},
24
- // String
25
- color: 'red',
26
- // False property
27
- isDisabled: false,
28
- // Boolean without a prefix (is or has)
29
- visible: true,
30
- // Has prefix
31
- hasButton: true,
32
- });
33
- expect(className).toBe('test test--color-red test--is-visible test--has-button');
34
- });
35
- });
@@ -1 +0,0 @@
1
- "use strict";var e=require("./handleBasicClasses.min.js");require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("./getBasicClass.min.js"),require("lodash/kebabCase"),describe(e.handleBasicClasses,()=>{it("should return correct combined CSS classes based on props",()=>{const s=e.handleBasicClasses({prefix:"test",undefined:void 0,null:null,emptyString:"",emptyArray:[],emptyObject:{},color:"red",isDisabled:!1,visible:!0,hasButton:!0});expect(s).toBe("test test--color-red test--is-visible test--has-button")})});
@@ -1,28 +0,0 @@
1
- import { handleBasicClasses } from './handleBasicClasses';
2
-
3
- describe(handleBasicClasses, () => {
4
- it('should return correct combined CSS classes based on props', () => {
5
- const className = handleBasicClasses({
6
- prefix: 'test',
7
- // Undefined
8
- undefined,
9
- // Null
10
- null: null,
11
- // Empty string
12
- emptyString: '',
13
- // Empty array
14
- emptyArray: [],
15
- // Empty object
16
- emptyObject: {},
17
- // String
18
- color: 'red',
19
- // False property
20
- isDisabled: false,
21
- // Boolean without a prefix (is or has)
22
- visible: true,
23
- // Has prefix
24
- hasButton: true,
25
- });
26
- expect(className).toBe('test test--color-red test--is-visible test--has-button');
27
- });
28
- });
@@ -1,44 +0,0 @@
1
- import classNames from 'classnames';
2
-
3
- import isBoolean from 'lodash/isBoolean';
4
- import isEmpty from 'lodash/isEmpty';
5
-
6
- import { getBasicClass } from './getBasicClass';
7
-
8
- /**
9
- * Enhance isEmpty method to also works with numbers.
10
- *
11
- * @param value The value to check.
12
- * @return Whether the input value is empty or != 0.
13
- */
14
- const _isEmpty = (value: any) => {
15
- if (typeof value === 'number') {
16
- return value === 0;
17
- }
18
-
19
- return isEmpty(value);
20
- };
21
-
22
- /**
23
- * Return all basic LumX CSS classes which are available for every components.
24
- *
25
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
26
- *
27
- * @param prefix The class name prefix for the generated CSS class.
28
- * @param props All the other props you want to generate a class.
29
- * The rule of thumb: the key is the name of the prop in the class, the value a string that will
30
- * be used in the classname to represent the value of the given prop.
31
- * @return All LumX basic CSS classes.
32
- */
33
- export function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {
34
- const otherClasses: any = {};
35
- if (!isEmpty(props)) {
36
- Object.keys(props).forEach((prop) => {
37
- otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
38
- ? props[prop]
39
- : !_isEmpty(props[prop]);
40
- });
41
- }
42
-
43
- return classNames(prefix, otherClasses);
44
- }
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var js_utils_className_handleBasicClasses = require('./handleBasicClasses.js');
6
- var js_utils_className_getBasicClass = require('./getBasicClass.js');
7
- var js_utils_className_getRootClassName = require('./getRootClassName.js');
8
- var js_utils_className_getTypographyClassName = require('./getTypographyClassName.js');
9
- var js_utils_className_fontColorClass = require('./fontColorClass.js');
10
- var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
11
- require('classnames');
12
- require('lodash/isBoolean');
13
- require('lodash/isEmpty');
14
- require('lodash/kebabCase');
15
- require('../../constants/index.js');
16
- require('../../constants/keycodes.js');
17
-
18
-
19
-
20
- exports.handleBasicClasses = js_utils_className_handleBasicClasses.handleBasicClasses;
21
- exports.getBasicClass = js_utils_className_getBasicClass.getBasicClass;
22
- exports.getRootClassName = js_utils_className_getRootClassName.getRootClassName;
23
- exports.getTypographyClassName = js_utils_className_getTypographyClassName.getTypographyClassName;
24
- exports.fontColorClass = js_utils_className_fontColorClass.fontColorClass;
25
- exports.resolveColorWithVariants = js_utils_className_resolveColorWithVariants.resolveColorWithVariants;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("./handleBasicClasses.min.js"),e=require("./getBasicClass.min.js"),a=require("./getRootClassName.min.js"),r=require("./getTypographyClassName.min.js"),o=require("./fontColorClass.min.js"),i=require("./resolveColorWithVariants.min.js");require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("lodash/kebabCase"),require("../../constants/index.min.js"),require("../../constants/keycodes.min.js"),exports.handleBasicClasses=s.handleBasicClasses,exports.getBasicClass=e.getBasicClass,exports.getRootClassName=a.getRootClassName,exports.getTypographyClassName=r.getTypographyClassName,exports.fontColorClass=o.fontColorClass,exports.resolveColorWithVariants=i.resolveColorWithVariants;
@@ -1,6 +0,0 @@
1
- export { handleBasicClasses } from './handleBasicClasses';
2
- export { getBasicClass } from './getBasicClass';
3
- export { getRootClassName } from './getRootClassName';
4
- export { getTypographyClassName } from './getTypographyClassName';
5
- export { fontColorClass } from './fontColorClass';
6
- export { resolveColorWithVariants } from './resolveColorWithVariants';
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveColorWithVariants=function(e,t){if(!e)return[void 0,t];const[r,o]=e.split("-");return[r,t||o]};
@@ -1,30 +0,0 @@
1
- 'use strict';
2
-
3
- var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
4
-
5
- describe(js_utils_className_resolveColorWithVariants.resolveColorWithVariants, () => {
6
- it('should handle undefined color', () => {
7
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(undefined);
8
- expect(result).toEqual([undefined, undefined]);
9
- });
10
- it('should handle undefined color with variant', () => {
11
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(undefined, 'L2');
12
- expect(result).toEqual([undefined, 'L2']);
13
- });
14
- it('should handle color with undefined variant', () => {
15
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary');
16
- expect(result).toEqual(['primary', undefined]);
17
- });
18
- it('should handle color & variant separated', () => {
19
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary', 'L2');
20
- expect(result).toEqual(['primary', 'L2']);
21
- });
22
- it('should handle color with variant all in one', () => {
23
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary-L2');
24
- expect(result).toEqual(['primary', 'L2']);
25
- });
26
- it('should override color variant with the given color variant', () => {
27
- const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary-L2', 'D2');
28
- expect(result).toEqual(['primary', 'D2']);
29
- });
30
- });
@@ -1 +0,0 @@
1
- "use strict";var o=require("./resolveColorWithVariants.min.js");describe(o.resolveColorWithVariants,()=>{it("should handle undefined color",()=>{const r=o.resolveColorWithVariants(void 0);expect(r).toEqual([void 0,void 0])}),it("should handle undefined color with variant",()=>{const r=o.resolveColorWithVariants(void 0,"L2");expect(r).toEqual([void 0,"L2"])}),it("should handle color with undefined variant",()=>{const r=o.resolveColorWithVariants("primary");expect(r).toEqual(["primary",void 0])}),it("should handle color & variant separated",()=>{const r=o.resolveColorWithVariants("primary","L2");expect(r).toEqual(["primary","L2"])}),it("should handle color with variant all in one",()=>{const r=o.resolveColorWithVariants("primary-L2");expect(r).toEqual(["primary","L2"])}),it("should override color variant with the given color variant",()=>{const r=o.resolveColorWithVariants("primary-L2","D2");expect(r).toEqual(["primary","D2"])})});