('post-tab-header'),
+ ).filter(tab => tab.closest('post-tabs') === this.host);
+ }
@Element() host: HTMLPostTabsElement;
@@ -35,7 +35,7 @@ export class PostTabs {
*
* **Changing this value after initialization has no effect.**
*/
- @Prop() readonly activePanel: HTMLPostTabPanelElement['name'];
+ @Prop() readonly activePanel?: HTMLPostTabPanelElement['name'];
/**
* An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
diff --git a/packages/components/src/components/post-tag/post-tag.tsx b/packages/components/src/components/post-tag/post-tag.tsx
index 0deb0216f0..80f36ba364 100644
--- a/packages/components/src/components/post-tag/post-tag.tsx
+++ b/packages/components/src/components/post-tag/post-tag.tsx
@@ -1,6 +1,6 @@
import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
import { version } from '@root/package.json';
-
+import { checkEmptyOrOneOf, checkEmptyOrType } from '@/utils';
/**
* @slot default - Content to place in the `default` slot.Markup accepted: inline content.
*/
@@ -17,19 +17,19 @@ export class PostTag {
/**
* Defines the color variant of the component.
*/
- @Prop() readonly variant: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+ @Prop() readonly variant?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
/**
* Defines the size of the component.
*/
- @Prop() readonly size: null | 'sm' = null;
+ @Prop() readonly size?: 'sm';
/**
* Defines the icon `name` inside of the component.
* If not set the icon will not show up.
* To learn which icons are available, please visit our icon library.
*/
- @Prop() readonly icon: null | string = null;
+ @Prop() readonly icon: string;
constructor() {
this.setClasses = this.setClasses.bind(this);
@@ -37,14 +37,21 @@ export class PostTag {
@Watch('variant')
variantChanged() {
+ checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
this.setClasses();
}
@Watch('size')
sizeChanged() {
+ checkEmptyOrOneOf(this, 'size', ['sm']);
this.setClasses();
}
+ @Watch('icon')
+ validateName() {
+ checkEmptyOrType(this, 'icon', 'string');
+ }
+
private setClasses() {
this.classes = [
'tag',
@@ -59,6 +66,12 @@ export class PostTag {
this.setClasses();
}
+ componentWillLoad() {
+ this.validateName();
+ this.variantChanged();
+ this.sizeChanged();
+ }
+
render() {
return (
diff --git a/packages/components/src/components/post-tag/readme.md b/packages/components/src/components/post-tag/readme.md
index 7596099d83..fbfb296e16 100644
--- a/packages/components/src/components/post-tag/readme.md
+++ b/packages/components/src/components/post-tag/readme.md
@@ -7,8 +7,8 @@
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------- |
-| `icon` | `icon` | Defines the icon `name` inside of the component. If not set the icon will not show up. To learn which icons are available, please visit our icon library. | `string` | `null` |
-| `size` | `size` | Defines the size of the component. | `"sm"` | `null` |
+| `icon` | `icon` | Defines the icon `name` inside of the component. If not set the icon will not show up. To learn which icons are available, please visit our icon library. | `string` | `undefined` |
+| `size` | `size` | Defines the size of the component. | `"sm"` | `undefined` |
| `variant` | `variant` | Defines the color variant of the component. | `"error" \| "info" \| "success" \| "warning" \| "white" \| "yellow"` | `undefined` |
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
index b310c9f2f3..16029d557b 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -1,6 +1,5 @@
-import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';
+import { Component, Host, h, Prop, Element } from '@stencil/core';
import { version } from '@root/package.json';
-import { checkType } from '@/utils';
/**
* @slot default - Slot for the content of the button.
@@ -19,14 +18,7 @@ export class PostTogglebutton {
*/
@Prop({ mutable: true }) toggled: boolean = false;
- @Watch('toggled')
- validateToggled() {
- checkType(this, 'toggled', 'boolean');
- }
-
componentWillLoad() {
- this.validateToggled();
-
// add event listener to not override listener that might be set on the host
this.host.addEventListener('click', () => this.handleClick());
this.host.addEventListener('keydown', (e: KeyboardEvent) => this.handleKeydown(e));
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx
index 070d280680..6847e966d9 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.tsx
+++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx
@@ -1,7 +1,9 @@
import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';
import { Placement } from '@floating-ui/dom';
+import { PLACEMENT_TYPES } from '@/types';
+import 'long-press-event';
import isFocusable from 'ally.js/is/focusable';
-import { IS_BROWSER, checkEmptyOrType, getAttributeObserver } from '@/utils';
+import { IS_BROWSER, getAttributeObserver, checkEmptyOrOneOf } from '@/utils';
import { version } from '@root/package.json';
if (IS_BROWSER) {
@@ -108,7 +110,7 @@ export class PostTooltip {
@Prop() readonly placement?: Placement = 'top';
/**
- * Wheter or not to display a little pointer arrow
+ * Whether or not to display a little pointer arrow
*/
@Prop() readonly arrow?: boolean = true;
@@ -117,13 +119,13 @@ export class PostTooltip {
*/
@Prop() readonly delayed: boolean = false;
- @Watch('delayed')
- validateDelayed() {
- checkEmptyOrType(this, 'delayed', 'boolean');
+ @Watch('placement')
+ validatePlacement() {
+ checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
}
connectedCallback() {
- this.validateDelayed();
+ this.validatePlacement();
}
componentDidLoad() {
diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index 4fd194c2fa..81e87a815a 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -9,7 +9,7 @@
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `true` |
+| `arrow` | `arrow` | Whether or not to display a little pointer arrow | `boolean` | `true` |
| `delayed` | `delayed` | If `true`, the tooltip is displayed a few milliseconds after it is triggered | `boolean` | `false` |
| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |
diff --git a/packages/components/src/types/index.ts b/packages/components/src/types/index.ts
index d595ecd976..9bc68de2c1 100644
--- a/packages/components/src/types/index.ts
+++ b/packages/components/src/types/index.ts
@@ -1 +1,2 @@
export * from './heading-levels';
+export * from './placement';
diff --git a/packages/components/src/types/placement.ts b/packages/components/src/types/placement.ts
new file mode 100644
index 0000000000..50b33311e4
--- /dev/null
+++ b/packages/components/src/types/placement.ts
@@ -0,0 +1,14 @@
+export const PLACEMENT_TYPES = [
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ 'top-start',
+ 'top-end',
+ 'right-start',
+ 'right-end',
+ 'bottom-start',
+ 'bottom-end',
+ 'left-start',
+ 'left-end',
+] as const;
diff --git a/packages/components/src/utils/property-checkers/check-non-empty.ts b/packages/components/src/utils/property-checkers/check-non-empty.ts
index 9df7af2c01..220e45c19c 100644
--- a/packages/components/src/utils/property-checkers/check-non-empty.ts
+++ b/packages/components/src/utils/property-checkers/check-non-empty.ts
@@ -9,11 +9,12 @@ export function checkNonEmpty(
const value = component[prop];
const defaultMessage = `The prop \`${String(
prop,
- )}\` of the \`${componentName}\` component is required.`;
+ )}\` of the \`${componentName}\` component is not defined.`;
const message = customMessage || defaultMessage;
if (EMPTY_VALUES.some(v => v === value)) {
- throw new Error(message);
+ console.error(message);
}
+ return EMPTY_VALUES.some(v => v === value);
}
diff --git a/packages/components/src/utils/property-checkers/check-one-of.ts b/packages/components/src/utils/property-checkers/check-one-of.ts
index c71073eea4..d62c1dd25f 100644
--- a/packages/components/src/utils/property-checkers/check-one-of.ts
+++ b/packages/components/src/utils/property-checkers/check-one-of.ts
@@ -14,6 +14,6 @@ export function checkOneOf(
const message = customMessage || defaultMessage;
if (!possibleValues.includes(value)) {
- throw new Error(message);
+ console.error(message);
}
}
diff --git a/packages/components/src/utils/property-checkers/check-pattern.ts b/packages/components/src/utils/property-checkers/check-pattern.ts
index a556717628..de7fe7359e 100644
--- a/packages/components/src/utils/property-checkers/check-pattern.ts
+++ b/packages/components/src/utils/property-checkers/check-pattern.ts
@@ -2,7 +2,7 @@ export function checkPattern(
component: T,
prop: keyof T,
pattern: RegExp,
- customMessage: string,
+ customMessage?: string,
) {
const componentName = component.host.localName;
const value = component[prop];
@@ -13,6 +13,6 @@ export function checkPattern(
const message = customMessage || defaultMessage;
if (typeof value !== 'string' || !pattern.test(value)) {
- throw new Error(message);
+ console.error(message);
}
}
diff --git a/packages/components/src/utils/property-checkers/check-type.ts b/packages/components/src/utils/property-checkers/check-type.ts
index bf9180578d..7712ba11db 100644
--- a/packages/components/src/utils/property-checkers/check-type.ts
+++ b/packages/components/src/utils/property-checkers/check-type.ts
@@ -20,9 +20,9 @@ export function checkType(
if (typeIsArray || valueIsArray) {
if (valueIsArray !== typeIsArray) {
- throw new Error(message);
+ console.error(message);
}
- } else if (typeof value !== type) {
- throw new Error(message);
+ } else if (typeof value !== type || (typeof value == 'number' && isNaN(value))) {
+ console.error(message);
}
}
diff --git a/packages/components/src/utils/property-checkers/check-url.ts b/packages/components/src/utils/property-checkers/check-url.ts
index 2dad3e435c..76664448ba 100644
--- a/packages/components/src/utils/property-checkers/check-url.ts
+++ b/packages/components/src/utils/property-checkers/check-url.ts
@@ -5,19 +5,19 @@ export function checkUrl(
) {
const componentName = component.host.localName;
const value = component[prop];
-
const defaultMessage = `The prop \`${String(
prop,
)}\` of the \`${componentName}\` component is invalid.`;
const message = customMessage || defaultMessage;
if (typeof value !== 'string' && !(value instanceof URL)) {
- throw new Error(message);
+ console.error(message);
+ return;
}
try {
new URL(value, 'https://www.post.ch');
} catch {
- throw new Error(message);
+ console.error(message);
}
}
diff --git a/packages/components/src/utils/property-checkers/tests/check-non-empty.spec.ts b/packages/components/src/utils/property-checkers/tests/check-non-empty.spec.ts
index a2240ce007..5aca3afe9d 100644
--- a/packages/components/src/utils/property-checkers/tests/check-non-empty.spec.ts
+++ b/packages/components/src/utils/property-checkers/tests/check-non-empty.spec.ts
@@ -27,18 +27,24 @@ describe('checkNonEmpty', () => {
const error = 'Is empty!';
describe('empty value', () => {
- it('should not throw an error if the value is a non-empty value', () => {
+ it('should not log an error if the value is a non-empty value', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
for (const value of NON_EMPTY_VALUES) {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: value };
- expect(() => checkNonEmpty(component, 'prop', error)).not.toThrow();
+ checkNonEmpty(component, 'prop', error);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(error);
}
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is an empty value', () => {
+ it('should log an error if the value is an empty value', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
for (const value of EMPTY_VALUES) {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: value };
- expect(() => checkNonEmpty(component, 'prop', error)).toThrow(error);
+ checkNonEmpty(component, 'prop', error);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(error);
}
+ consoleErrorSpy.mockRestore();
});
});
});
diff --git a/packages/components/src/utils/property-checkers/tests/check-one-of.spec.ts b/packages/components/src/utils/property-checkers/tests/check-one-of.spec.ts
index 1270ea238e..1437e55bf0 100644
--- a/packages/components/src/utils/property-checkers/tests/check-one-of.spec.ts
+++ b/packages/components/src/utils/property-checkers/tests/check-one-of.spec.ts
@@ -4,16 +4,22 @@ describe('checkOneOf', () => {
const possibleValues = ['A', 'B', 'C', 'D'];
const error = 'Is not one of.';
- const runCheckForValue = (value: string) => () => {
+ const runCheckForValue = (value: string) => {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: value };
checkOneOf(component, 'prop', possibleValues, error);
};
- it('should not throw an error if the value is one of the possible values', () => {
- expect(runCheckForValue('A')).not.toThrow();
+ it('should not log an error if the value is one of the possible values', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ runCheckForValue('A');
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
+ consoleErrorSpy.mockRestore();
});
- it('should throw the provided error if the value is not one of the possible values', () => {
- expect(runCheckForValue('E')).toThrow(error);
+ it('should log the provided error if the value is not one of the possible values', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ runCheckForValue('E');
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
+ consoleErrorSpy.mockRestore();
});
});
diff --git a/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts b/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts
index f7ddeb5f7c..07d7a6858b 100644
--- a/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts
+++ b/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts
@@ -4,16 +4,20 @@ describe('checkPattern', () => {
const pattern = /[a-z]{5}/;
const error = 'Does not match pattern.';
- const runCheckForValue = (value: unknown) => () => {
+ const runCheckForValue = (value: unknown) => {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: value };
checkPattern(component, 'prop', pattern, error);
};
- it('should not throw an error if the value matches the provided pattern', () => {
- expect(runCheckForValue('hello')).not.toThrow();
+ it('should not log an error if the value matches the provided pattern', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ runCheckForValue('hello');
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
+ consoleErrorSpy.mockRestore();
});
- it('should throw the provided error if the value is not a string', () => {
+ it('should log the provided error if the value is not a string', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
null,
@@ -26,11 +30,16 @@ describe('checkPattern', () => {
/* empty */
},
].forEach(notString => {
- expect(runCheckForValue(notString)).toThrow(error);
+ runCheckForValue(notString);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw the provided error if the value does not match the provided pattern', () => {
- expect(runCheckForValue('WORLD')).toThrow(error);
+ it('should log the provided error if the value does not match the provided pattern', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ runCheckForValue('WORLD');
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
+ consoleErrorSpy.mockRestore();
});
});
diff --git a/packages/components/src/utils/property-checkers/tests/check-type.spec.ts b/packages/components/src/utils/property-checkers/tests/check-type.spec.ts
index 5d6d8eb955..431b9ff9c5 100644
--- a/packages/components/src/utils/property-checkers/tests/check-type.spec.ts
+++ b/packages/components/src/utils/property-checkers/tests/check-type.spec.ts
@@ -4,7 +4,7 @@ describe('checkType', () => {
let type: PropertyType;
let error: string;
- const runCheckForValue = (value: unknown) => () => {
+ const runCheckForValue = (value: unknown) => {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: value };
checkType(component, 'prop', type, error);
};
@@ -15,13 +15,17 @@ describe('checkType', () => {
error = 'Not a boolean.';
});
- it('should not throw an error if the value is a boolean', () => {
+ it('should not log an error if the value is a boolean', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[true, false].forEach(boolean => {
- expect(runCheckForValue(boolean)).not.toThrow();
+ runCheckForValue(boolean);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not a boolean', () => {
+ it('should log an error if the value is not a boolean', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
null,
@@ -34,8 +38,10 @@ describe('checkType', () => {
/* empty */
},
].forEach(nonBoolean => {
- expect(runCheckForValue(nonBoolean)).toThrow(error);
+ runCheckForValue(nonBoolean);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
@@ -45,13 +51,17 @@ describe('checkType', () => {
error = 'Not a number.';
});
- it('should not throw an error if the value is a number', () => {
- [42, 4.2, 4_200, 2.4434634e9, NaN].forEach(number => {
- expect(runCheckForValue(number)).not.toThrow();
+ it('should not log an error if the value is a number', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ [42, 4.2, 4_200, 2.4434634e9].forEach(number => {
+ runCheckForValue(number);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not a number', () => {
+ it('should log an error if the value is not a number', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
null,
@@ -63,8 +73,10 @@ describe('checkType', () => {
/* empty */
},
].forEach(nonNumber => {
- expect(runCheckForValue(nonNumber)).toThrow(error);
+ runCheckForValue(nonNumber);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
@@ -74,13 +86,17 @@ describe('checkType', () => {
error = 'Not a string.';
});
- it('should not throw an error if the value is a string', () => {
+ it('should not log an error if the value is a string', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
['', 'string', '42', '¡¡Olé 🙌!!'].forEach(string => {
- expect(runCheckForValue(string)).not.toThrow();
+ runCheckForValue(string);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not string', () => {
+ it('should log an error if the value is not a string', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
null,
@@ -93,8 +109,10 @@ describe('checkType', () => {
/* empty */
},
].forEach(nonString => {
- expect(runCheckForValue(nonString)).toThrow(error);
+ runCheckForValue(nonString);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
@@ -104,13 +122,17 @@ describe('checkType', () => {
error = 'Not an array.';
});
- it('should not throw an error if the value is an array', () => {
+ it('should not log an error if the value is an array', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[[], [1, 'a']].forEach(array => {
- expect(runCheckForValue(array)).not.toThrow();
+ runCheckForValue(array);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not an array', () => {
+ it('should log an error if the value is not an array', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
null,
@@ -123,8 +145,10 @@ describe('checkType', () => {
/* empty */
},
].forEach(nonArray => {
- expect(runCheckForValue(nonArray)).toThrow(error);
+ runCheckForValue(nonArray);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
@@ -134,13 +158,17 @@ describe('checkType', () => {
error = 'Not an object.';
});
- it('should not throw an error if the value is an object', () => {
+ it('should not log an error if the value is an object', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[null, {}].forEach(object => {
- expect(runCheckForValue(object)).not.toThrow();
+ runCheckForValue(object);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not an object', () => {
+ it('should log an error if the value is not an object', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
undefined,
true,
@@ -151,8 +179,10 @@ describe('checkType', () => {
/* empty */
},
].forEach(nonObject => {
- expect(runCheckForValue(nonObject)).toThrow(error);
+ runCheckForValue(nonObject);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
@@ -162,7 +192,8 @@ describe('checkType', () => {
error = 'Not a function.';
});
- it('should not throw an error if the value is a function', () => {
+ it('should not log an error if the value is a function', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
function () {
/* empty */
@@ -171,14 +202,19 @@ describe('checkType', () => {
/* empty */
},
].forEach(fn => {
- expect(runCheckForValue(fn)).not.toThrow();
+ runCheckForValue(fn);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
- it('should throw an error if the value is not a function', () => {
+ it('should log an error if the value is not a function', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[undefined, null, true, 42, NaN, 'string', [], {}].forEach(nonFn => {
- expect(runCheckForValue(nonFn)).toThrow(error);
+ runCheckForValue(nonFn);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
});
+ consoleErrorSpy.mockRestore();
});
});
});
diff --git a/packages/components/src/utils/property-checkers/tests/check-url.spec.ts b/packages/components/src/utils/property-checkers/tests/check-url.spec.ts
index 0f5f5cb3ab..cdbe12255c 100644
--- a/packages/components/src/utils/property-checkers/tests/check-url.spec.ts
+++ b/packages/components/src/utils/property-checkers/tests/check-url.spec.ts
@@ -3,7 +3,8 @@ import { checkUrl } from '../check-url';
describe('checkUrl', () => {
const errorMessage = 'Invalid URL';
- test('should not throw an error if the value is an URL string or an URL object', () => {
+ test('should not log an error if the value is an URL string or an URL object', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
'https://www.example.com',
new URL('https://www.example.com'),
@@ -15,11 +16,14 @@ describe('checkUrl', () => {
'localhost:3000',
].forEach(validUrl => {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: validUrl };
- expect(() => checkUrl(component, 'prop', errorMessage)).not.toThrow();
+ checkUrl(component, 'prop', errorMessage);
+ expect(consoleErrorSpy).not.toHaveBeenCalledWith(expect.stringContaining(errorMessage));
});
+ consoleErrorSpy.mockRestore();
});
- test('should throw an error if the value is not an URL string or an URL object', () => {
+ test('should log an error if the value is not an URL string or an URL object', () => {
+ const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
[
123,
true,
@@ -31,7 +35,9 @@ describe('checkUrl', () => {
].forEach(invalidUrl => {
const component = { host: { localName: 'post-component' } as HTMLElement, prop: invalidUrl };
// Type casting because we know that these are not valid arguments, it's just for testing
- expect(() => checkUrl(component, 'prop', errorMessage)).toThrow(errorMessage);
+ checkUrl(component, 'prop', errorMessage);
+ expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(errorMessage));
});
+ consoleErrorSpy.mockRestore();
});
});
diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts
index 931351f537..0e1efccb0f 100644
--- a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts
+++ b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts
@@ -9,7 +9,6 @@ const meta: MetaComponent = {
component: 'post-back-to-top',
tags: ['package:WebComponents'],
parameters: {
- layout: 'fullscreen',
design: {
type: 'figma',
url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-11',
diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
index a612eba497..1ce9b6b2f9 100644
--- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
@@ -146,6 +146,7 @@ export const Default = {
const cardClasses = mapClasses({
'checked': args.checked,
'disabled': args.disabled,
+ 'is-valid': args.validation === 'is-valid',
'is-invalid': args.validation === 'is-invalid',
'checkbox-button-card': args.type === 'checkbox',
'radio-button-card': args.type === 'radio',
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 423cd3f824..cd8fd9c830 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -53,7 +53,7 @@ const meta: MetaComponent = {
'Value can either be in `vw`, `px` or `%`. If no max-width is defined, the popover will extend to the width of its content.',
table: {
category: 'General',
- defaultValue: { summary: '280px' }
+ defaultValue: { summary: '280px' },
},
},
palette: {
@@ -104,6 +104,7 @@ function render(args: Args) {
class="${args.palette}"
id="${args.id}"
placement="${args.placement}"
+ close-button-caption="${args.closeButtonCaption}"
?arrow="${args.arrow}"
style="${args.maxWidth ? '--post-popover-max-width: ' + args.maxWidth : ''}"
>
diff --git a/packages/styles/src/variables/components/_tag.scss b/packages/styles/src/variables/components/_tag.scss
index 5bef1bf8c8..e9684772ab 100644
--- a/packages/styles/src/variables/components/_tag.scss
+++ b/packages/styles/src/variables/components/_tag.scss
@@ -21,9 +21,9 @@ $tag-sm-icon-size: $tag-font-size;
$tag-default-background: color.$gray-10;
$tag-backgrounds: (
'white': color.$white,
- 'yellow': color.$yellow,
+ 'info': color.$info,
'success': color.$success,
+ 'error': color.$error,
'warning': color.$warning,
- 'danger': color.$error,
- 'info': color.$info,
+ 'yellow': color.$yellow,
);