@snyk-mktg/brand-ui 2.5.9-canary.2 → 2.5.9

package/dist/js/helpers/caseFormats.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/helpers/caseFormats.test.js

@@ -0,0 +1,59 @@
+import { expect, describe, it } from '@jest/globals';
+import { formatCase } from './';
+describe('formatCase', () => {
+    it('should convert text to kebab case', () => {
+        const text = 'helloWorld';
+        const result = formatCase(text, 'kebab');
+        expect(result).toBe('hello-world');
+    });
+    it('should convert text to snake case', () => {
+        const text = 'helloWorld';
+        const result = formatCase(text, 'snake');
+        expect(result).toBe('hello_world');
+    });
+    it('should convert text to space case', () => {
+        const text = 'helloWorld';
+        const result = formatCase(text, 'space');
+        expect(result).toBe('hello world');
+    });
+    it('should convert text to camel case', () => {
+        const text = 'hello world';
+        const result = formatCase(text, 'camel');
+        expect(result).toBe('helloWorld');
+    });
+    it('should convert text to sentence case', () => {
+        const text = 'hello world';
+        const result = formatCase(text, 'sentence');
+        expect(result).toBe('Hello world');
+    });
+    it('should capitalize the first letter', () => {
+        const text = 'hello world';
+        const result = formatCase(text, 'capitalize');
+        expect(result).toBe('Hello world');
+    });
+    it('should capitalize the first letter of each word', () => {
+        const text = 'hello world';
+        const result = formatCase(text, 'capitalizeSentence');
+        expect(result).toBe('Hello World');
+    });
+    it('should handle empty text', () => {
+        const text = '';
+        const result = formatCase(text, 'kebab');
+        expect(result).toBe('');
+    });
+    it('should handle invalid convertCase', () => {
+        const text = 'hello world';
+        const result = formatCase(text, 'invalid');
+        expect(result).toBe('hello world');
+    });
+    it('should handle text with special characters', () => {
+        const text = 'hello-world123';
+        const result = formatCase(text, 'kebab');
+        expect(result).toBe('hello-world123');
+    });
+    it('should handle text with mixed case', () => {
+        const text = 'HelloWorld';
+        const result = formatCase(text, 'camel');
+        expect(result).toBe('helloWorld');
+    });
+});

package/dist/js/helpers/classnames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/helpers/classnames.test.js

@@ -0,0 +1,13 @@
+import { expect, describe, it } from '@jest/globals';
+import { classNames } from './'; // Replace with the correct import path
+describe('classNames', () => {
+    it('should return an empty string with no classes', () => {
+        expect(classNames()).toBe('');
+    });
+    it('should return a single class', () => {
+        expect(classNames('class1')).toBe('class1');
+    });
+    it('should return multiple classes joined by spaces', () => {
+        expect(classNames('class1', 'class2', 'class3')).toBe('class1 class2 class3');
+    });
+});

package/dist/js/helpers/getInitials.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/helpers/getInitials.test.js

@@ -0,0 +1,29 @@
+import { expect, describe, it } from '@jest/globals';
+import { getInitials } from './';
+describe('getInitials', () => {
+    it('should return the first and last initials for a full name', () => {
+        const fullName = 'John Doe';
+        const initials = getInitials(fullName);
+        expect(initials).toBe('JD');
+    });
+    it('should return the first initial for a single name', () => {
+        const fullName = 'John';
+        const initials = getInitials(fullName);
+        expect(initials).toBe('J');
+    });
+    it('should handle empty string input', () => {
+        const fullName = '';
+        const initials = getInitials(fullName);
+        expect(initials).toBe('');
+    });
+    it('should handle multiple middle names', () => {
+        const fullName = 'John William Doe Smith';
+        const initials = getInitials(fullName);
+        expect(initials).toBe('JS');
+    });
+    it('should handle names with special characters', () => {
+        const fullName = 'John O\'Brien Smith';
+        const initials = getInitials(fullName);
+        expect(initials).toBe('JS');
+    });
+});

package/dist/js/helpers/grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/helpers/grid.test.js

@@ -0,0 +1,44 @@
+import { expect, describe, it } from '@jest/globals';
+import { gridSplit, gridSpacing } from './';
+describe('gridSplit', () => {
+    it('should return the count when count is less than maxCols', () => {
+        expect(gridSplit(3)).toBe(3);
+        expect(gridSplit(4, 10)).toBe(4);
+    });
+    it('should return maxCols when count is greater than or equal to maxCols', () => {
+        expect(gridSplit(6)).toBe(5); // Default maxCols is 5
+        expect(gridSplit(10, 8)).toBe(8);
+    });
+    it('should return 12 when maxCols is greater than or equal to 12 and sount is 0', () => {
+        expect(gridSplit(0, 15)).toBe(12);
+        expect(gridSplit(0, 13)).toBe(12);
+    });
+    it('should return 1 for invalid or zero count', () => {
+        expect(gridSplit(0)).toBe(1);
+        expect(gridSplit(-2)).toBe(1);
+    });
+});
+describe('gridSpacing', () => {
+    it('should return max width for 2 or less columns', () => {
+        const spacing2 = gridSpacing(2);
+        expect(spacing2.hasMaxWidth).toBe(true);
+        const spacing1 = gridSpacing(1);
+        expect(spacing1.hasMaxWidth).toBe(true);
+    });
+    it('should adjust padding and gap for 4 columns', () => {
+        const spacing = gridSpacing(4);
+        expect(spacing).toEqual({
+            hasMaxWidth: false,
+            itemPadding: 'medium',
+            gap: 'medium',
+        });
+    });
+    it('should adjust padding and gap for more than 4 columns', () => {
+        const spacing = gridSpacing(5);
+        expect(spacing).toEqual({
+            hasMaxWidth: false,
+            itemPadding: 'medium',
+            gap: 'small',
+        });
+    });
+});

package/dist/js/helpers/range.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/helpers/range.test.js

@@ -0,0 +1,24 @@
+import { expect, describe, it } from '@jest/globals';
+import { range } from './';
+describe('range', () => {
+    it('should generate a simple range', () => {
+        const result = range(1, 5, 1);
+        expect(result).toEqual([1, 2, 3, 4, 5]);
+    });
+    it('should generate a range with a step of 2', () => {
+        const result = range(1, 10, 2);
+        expect(result).toEqual([1, 3, 5, 7, 9]);
+    });
+    it('should handle negative step', () => {
+        const result = range(5, 1, -1);
+        expect(result).toEqual([5, 4, 3, 2, 1]);
+    });
+    it('should handle zero step', () => {
+        const result = range(1, 5, 0);
+        expect(result).toEqual([]);
+    });
+    it('should handle empty range', () => {
+        const result = range(5, 1, 1);
+        expect(result).toEqual([]);
+    });
+});

package/dist/scss/base/_color.scss

@@ -45,7 +45,18 @@ $label-colors: (
 
 .txt-ui-hero {
 	max-width: max-content;
-	@include colors.color-mode(color, brandui-color-labels(ui-headline), brandui-color-labels(ui-headline-dark));
+	@include colors.gradient-mode(
+		background-image,
+		'linear',
+		140deg,
+		RGBA(brandui-rgb-labels(ui-headline), 1),
+		RGBA(brandui-rgb-labels(ui-headline), 0.5),
+		RGBA(brandui-rgb-labels(ui-headline-dark), 1),
+		RGBA(brandui-rgb-labels(ui-headline-dark), 0.7)
+	) {
+		background-clip: text;
+		color: transparent;
+	}
 }
 
 .txt-theme-solid {
@@ -121,6 +132,10 @@ $label-colors: (
 	@include theme.theme-gradient(background, linear, 140deg, gradient-secondary);
 }
 
+.spotlight {
+	@include theme.theme-color(background-color, spotlight);
+}
+
 .bg-gradient-midnight-overlay {
 	height: 130%;
 	background: linear-gradient(

package/dist/scss/base/_layout.scss

@@ -5,7 +5,6 @@
 @use '../base/variables/effects' as *;
 @use '../base/mixins/breakpoints' as breaks;
 @use '../base/mixins/glass' as glass;
-@use '../base/mixins/color-mode' as color;
 @use '../base/functions' as *;
 
 $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large, extra-large, huge);
@@ -94,12 +93,17 @@ $position-spaces: (none, hairline, thin, slim, extra-small, small, medium, large
 	margin-right: auto;
 }
 
-.bg-boxed {
-	padding: map.get($brandui-padding, extra-large);
-	border-width: 1px;
-	border-radius: map.get($brandui-radius, small);
-	border-style: solid;
-	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-6), 0.3));
+.brandui-container,
+.content-block {
+	&.bg-boxed {
+		padding: map.get($brandui-padding, extra-large);
+		border-width: 0.1875rem;
+		border-style: solid;
+		border-radius: map.get($brandui-radius, large);
+		box-shadow: map.get($brandui-shadow, outline);
+		@include glass.bg-glass;
+		@include glass.border-glass;
+	}
 }
 
 .brandui-backdrop {

package/dist/scss/base/decorations/_markers.scss

@@ -3,8 +3,6 @@
 @use '../../base/mixins/color-mode' as colors;
 @use '../../base/functions' as *;
 
-// TODO, remove once we have confirmed that new brand is real
-
 /**
 * Note >> The markers are all PNGs that use the Cloudinary transformations
 * to add the proper color-mode color and then convert to SVG. This is the
@@ -12,30 +10,30 @@
 * See the Transformation Center in Cloudinary for the custom marker
 * transformations.
 */
-// @each $marker-key, $marker-url in $brandui-marker-highlight-styles {
-// 	.marker-highlight-#{$marker-key} {
-// 		color: inherit;
-// 		background-color: transparent;
-// 		position: relative;
-// 		display: inline;
-// 		// Adds a little space around the text relative to the font size
-// 		padding: 0.1em 0.3em;
-// 		background-position: 100%;
-// 		background-size: 100% 100%;
-// 		background-repeat: no-repeat;
-// 		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
-// 	}
-// }
+@each $marker-key, $marker-url in $brandui-marker-highlight-styles {
+	.marker-highlight-#{$marker-key} {
+		color: inherit;
+		background-color: transparent;
+		position: relative;
+		display: inline;
+		// Adds a little space around the text relative to the font size
+		padding: 0.1em 0.3em;
+		background-position: 100%;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
+	}
+}
 
-// @each $marker-key, $marker-url in $brandui-marker-line-styles {
-// 	.marker-line-#{$marker-key} {
-// 		max-width: brandui-col-spacing(2);
-// 		width: 100%;
-// 		height: 3rem;
-// 		position: relative;
-// 		display: block;
-// 		background-size: 100%;
-// 		background-repeat: no-repeat;
-// 		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
-// 	}
-// }
+@each $marker-key, $marker-url in $brandui-marker-line-styles {
+	.marker-line-#{$marker-key} {
+		max-width: brandui-col-spacing(2);
+		width: 100%;
+		height: 3rem;
+		position: relative;
+		display: block;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		@include colors.color-mode(background-image, url('#{$brandui-marker-light}#{$marker-url}'), url('#{$brandui-marker-dark}#{$marker-url}'));
+	}
+}

package/dist/scss/base/mixins/_accessibility.scss

@@ -3,9 +3,3 @@
 		@content;
 	}
 }
-
-@mixin prefers-dark {
-	@media (prefers-color-scheme: dark) {
-		@content;
-	}
-}

package/dist/scss/base/mixins/_color-mode.scss

@@ -1,4 +1,3 @@
-@use './accessibility' as a11y;
 /* Mixins for light/dark modes */
 @mixin color-mode($property, $light-value, $dark-value) {
 	// Default light mode
@@ -12,12 +11,6 @@
 		#{$property}: $dark-value;
 		@content;
 	}
-
-	// Uncomment this when we are ready to offer dark mode toggle support
-	// @include a11y.prefers-dark {
-	// 	#{$property}: $dark-value;
-	// 	@content;
-	// }
 }
 
 // Because mixins can sometime be invalid when chaining to pseudo-classes, we need to manually do this

package/dist/scss/base/variables/_colors.scss

@@ -31,15 +31,14 @@ $evoui-colors: (
 /* Color variables */
 $brandui-colors: (
 	'dark-purple': #441c99,
-	'purple': #8d1ff4,
+	'purple': #9043c6,
 	'lavender': #c481f3,
 	'black': #000,
 	'space': #01011e,
 	'midnight': #030328,
 	'ocean': #181846,
-	'dark-grey': #202020,
 	'dawn': #383f76,
-	'steel': #c0bce5,
+	'steel': #555463,
 	'smoke': #6d6d9c,
 	'snow': #f6f7fb,
 	'white': #fff,
@@ -74,53 +73,49 @@ $brandui-colors: map.merge($brandui-colors, $custom-theme);
 
 // 2.0 Standardized color labels for theming
 $brandui-color-labels: (
-	'default': map.get($brandui-colors, 'snow'),
-	'default-dark': map.get($brandui-colors, 'black'),
-	'ui-headline': map.get($brandui-colors, 'black'),
-	'ui-headline-dark': map.get($brandui-colors, 'snow'),
-	'ui-body': map.get($brandui-colors, 'black'),
+	'default': map.get($brandui-colors, 'white'),
+	'default-dark': map.get($brandui-colors, 'midnight'),
+	'ui-headline': map.get($brandui-colors, 'midnight'),
+	'ui-headline-dark': map.get($brandui-colors, 'white'),
+	'ui-body': map.get($brandui-colors, 'dawn'),
 	'ui-body-dark': map.get($brandui-colors, 'snow'),
-	'ui-fill': map.get($brandui-colors, 'steel'),
-	'ui-fill-dark': map.get($brandui-colors, 'dark-grey'),
-	'ui-stroke': map.get($brandui-colors, 'snow'),
-	'ui-stroke-dark': map.get($brandui-colors, 'black'),
-	'ui-text': map.get($brandui-colors, 'black'),
+	'ui-fill': map.get($brandui-colors, 'white'),
+	'ui-fill-dark': map.get($brandui-colors, 'midnight'),
+	'ui-stroke': map.get($brandui-colors, 'smoke'),
+	'ui-stroke-dark': map.get($brandui-colors, 'dawn'),
+	'ui-text': map.get($brandui-colors, 'dawn'),
 	'ui-text-dark': map.get($brandui-colors, 'snow'),
-	'action': map.get($brandui-colors, 'black'),
-	'action-dark': map.get($brandui-colors, 'snow'),
-	'action-outline': map.get($brandui-colors, 'snow'),
-	'action-contrast': map.get($brandui-colors, 'snow'),
-	'action-contrast-dark': map.get($brandui-colors, 'black'),
-	'action-secondary': map.get($brandui-colors, 'snow'),
-	'action-secondary-dark': map.get($brandui-colors, 'black'),
-	'action-secondary-contrast': map.get($brandui-colors, 'black'),
-	'action-secondary-contrast-dark': map.get($brandui-colors, 'snow'),
-	'action-tertiary': map.get($brandui-colors, 'purple'),
-	'action-tertiary-dark': map.get($brandui-colors, 'lavender'),
-	'action-tertiary-contrast': map.get($brandui-colors, 'black'),
-	'action-tertiary-contrast-dark': map.get($brandui-colors, 'black'),
+	'action': map.get($brandui-colors, 'electric-blue'),
+	'action-dark': map.get($brandui-colors, 'periwinkle'),
+	'action-outline': map.get($brandui-colors, 'sky'),
+	'action-contrast': map.get($brandui-colors, 'white'),
+	'action-contrast-dark': map.get($brandui-colors, 'midnight'),
+	'action-secondary': map.get($brandui-colors, 'deep-sea'),
+	'action-secondary-dark': map.get($brandui-colors, 'electric-blue-dark'),
+	'action-secondary-contrast': map.get($brandui-colors, 'white'),
+	'action-secondary-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'info': map.get($brandui-colors, 'dark-purple'),
 	'info-dark': map.get($brandui-colors, 'lavender'),
-	'info-contrast': map.get($brandui-colors, 'snow'),
+	'info-contrast': map.get($brandui-colors, 'white'),
 	'info-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'success': map.get($brandui-colors, 'dark-teal'),
 	'success-dark': map.get($brandui-colors, 'vibe'),
-	'success-contrast': map.get($brandui-colors, 'snow'),
+	'success-contrast': map.get($brandui-colors, 'white'),
 	'success-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'warning': map.get($brandui-colors, 'autumn'),
 	'warning-dark': map.get($brandui-colors, 'tiger'),
-	'warning-contrast': map.get($brandui-colors, 'snow'),
+	'warning-contrast': map.get($brandui-colors, 'white'),
 	'warning-contrast-dark': map.get($brandui-colors, 'midnight'),
 	'fail': map.get($brandui-colors, 'rose'),
 	'fail-dark': map.get($brandui-colors, 'salmon'),
-	'fail-contrast': map.get($brandui-colors, 'snow'),
+	'fail-contrast': map.get($brandui-colors, 'white'),
 	'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
-	'neutral-1': map.get($brandui-colors, 'black'),
-	'neutral-2': map.get($brandui-colors, 'black'),
-	'neutral-3': map.get($brandui-colors, 'black'),
+	'neutral-1': map.get($brandui-colors, 'midnight'),
+	'neutral-2': map.get($brandui-colors, 'ocean'),
+	'neutral-3': map.get($brandui-colors, 'dawn'),
 	'neutral-4': map.get($brandui-colors, 'smoke'),
 	'neutral-5': map.get($brandui-colors, 'snow'),
-	'neutral-6': map.get($brandui-colors, 'snow'),
+	'neutral-6': map.get($brandui-colors, 'white'),
 ) !default;
 
 $brandui-tag-colors: (

package/dist/scss/base/variables/_themes.scss

@@ -14,35 +14,35 @@
 $brandui-default-themes: (
 	default: (
 		light: (
-			text-solid: map.get($brandui-colors, 'black'),
+			text-solid: map.get($brandui-colors, 'dark-purple'),
 			// deprecate
 			solid: map.get($brandui-colors, 'dark-purple'),
 			solid-primary: map.get($brandui-colors, 'purple'),
 			solid-secondary: map.get($brandui-colors, 'dark-purple'),
 			solid-tertiary: map.get($brandui-colors, 'dark-purple'),
-			contrast: map.get($brandui-colors, 'snow'),
+			contrast: map.get($brandui-colors, 'white'),
 			base: map.get($brandui-base-colors, 'dark-purple'),
 			spotlight: map.get($brandui-base-colors, 'dark-purple'),
 			highlight: map.get($brandui-colors, 'bubblegum'),
 			text-gradient: (
-				start: map.get($brandui-colors, 'black'),
-				end: map.get($brandui-colors, 'black'),
+				start: map.get($brandui-colors, 'electric-blue'),
+				end: map.get($brandui-colors, 'midnight'),
 			),
 			gradient-primary: (
 				start: map.get($brandui-colors, 'hot-pink'),
 				end: map.get($brandui-colors, 'hot-pink'),
 			),
 			gradient-secondary: (
-				start: map.get($brandui-colors, 'black'),
-				end: map.get($brandui-colors, 'black'),
+				start: map.get($brandui-colors, 'electric-blue'),
+				end: map.get($brandui-colors, 'electric-blue'),
 			),
 			gradient-tertiary: (
-				start: map.get($brandui-colors, 'black'),
-				end: map.get($brandui-colors, 'black'),
+				start: map.get($brandui-colors, 'electric-blue'),
+				end: map.get($brandui-colors, 'electric-blue'),
 			),
 		),
 		dark: (
-			text-solid: map.get($brandui-colors, 'snow'),
+			text-solid: map.get($brandui-colors, 'periwinkle'),
 			// deprecate
 			solid: map.get($brandui-colors, 'sky'),
 			solid-primary: map.get($brandui-colors, 'bubblegum'),
@@ -53,20 +53,20 @@ $brandui-default-themes: (
 			spotlight: map.get($brandui-colors, 'dark-purple'),
 			highlight: map.get($brandui-colors, 'hot-pink'),
 			text-gradient: (
-				start: map.get($brandui-colors, 'snow'),
-				end: map.get($brandui-colors, 'snow'),
+				start: map.get($brandui-colors, 'periwinkle'),
+				end: map.get($brandui-colors, 'white'),
 			),
 			gradient-primary: (
-				start: map.get($brandui-colors, 'snow'),
-				end: map.get($brandui-colors, 'snow'),
+				start: map.get($brandui-colors, 'hot-pink'),
+				end: map.get($brandui-colors, 'dark-purple'),
 			),
 			gradient-secondary: (
-				start: map.get($brandui-colors, 'snow'),
-				end: map.get($brandui-colors, 'snow'),
+				start: map.get($brandui-colors, 'electric-blue'),
+				end: map.get($brandui-colors, 'periwinkle'),
 			),
 			gradient-tertiary: (
-				start: map.get($brandui-colors, 'snow'),
-				end: map.get($brandui-colors, 'snow'),
+				start: map.get($brandui-colors, 'purple'),
+				end: map.get($brandui-colors, 'bubblegum'),
 			),
 		),
 	),