@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/src/lib/badge/badge.ts

@@ -1,97 +0,0 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-
-import type {
-	Appearance, Connotation, Shape, Size,
-} from '../enums.js';
-
-/**
- * Types of badge connotation.
- *
- * @public
- */
-type BadgeConnotation = Extract<Connotation,
-| Connotation.Primary
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Warning
-| Connotation.Info>;
-
-/**
- * Types of badge appearance.
- *
- * @public
- */
-type BadgeAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Outlined | Appearance.Subtle>;
-
-/**
- * Types of badge shape.
- *
- * @public
- */
-type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-
-/**
- * Types of badge size.
- *
- * @public
- */
-type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-
-/**
- * Base class for badge
- *
- * @public
- */
-export class Badge extends FoundationElement {
-	/**
-	 * The connotation the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: connotation
-	 */
-	@attr connotation?: BadgeConnotation;
-
-	/**
-	 * The shape the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: shape
-	 */
-	@attr shape?: BadgeShape;
-
-	/**
-	 * The appearance the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: appearance
-	 */
-	@attr appearance?: BadgeAppearance;
-
-	/**
-	 * The size the badge should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: size
-	 */
-	@attr size?: BadgeSize;
-
-	/**
-	 * Indicates the badge's text.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: text
-	 */
-	@attr({ mode: 'fromView' }) text = '';
-}
-
-export interface Badge extends AffixIconWithTrailing {}
-applyMixins(Badge, AffixIconWithTrailing);

package/src/lib/badge/index.ts

@@ -1,23 +0,0 @@
-import '../icon';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Badge } from './badge';
-import styles from './badge.scss';
-import { badgeTemplate as template } from './badge.template';
-
-
-/**
- * Represents a badge custom element.
- * badge is a label that holds small amounts of information.
- * A badge can be used to display unread notifications, or to label a block of text.
- * Badges don’t work for navigation because they can't include a hyperlink.
- */
-
-export const VIVIDBadge = Badge.compose<FoundationElementDefinition>({
-	baseName: 'badge',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDBadge());

package/src/lib/badge/ui.test.ts

@@ -1,28 +0,0 @@
-import * as path from 'path';
-import { expect, test } from '@playwright/test'; 
-import type { Page } from '@playwright/test';
-import {extractHTMLBlocksFromReadme, loadComponents, loadTemplate} from '../../visual-tests/visual-tests-utils.ts';
-
-const components = ['badge'];
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/badge.png',
-		);
-});

package/src/lib/banner/README.md

@@ -1,117 +0,0 @@
-# banner
-
-Banners are meant to be used on top of pages, outside the main content.
-
-
-```js
-<script type="module">import '@vonage/vivid/banner';</script>
-```
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Text
-
-- Type: `string`
-- Default: `''`
-
-Use the `text` attribute to set the banner's text.
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Icon
-
-- Type: `string`
-- Default: `'info'`
-
-The `icon` attribute will override the icon set by connotation.
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!" 
-            connotation="alert"
-            icon="home-line"></vwc-banner>
-```
-
-## Connotation
-
-The `connotation` attribute sets the colors according to the wanted connotation.
-
-- Type: `'info'` | `'announcement'` | `'success'` | `'warning'` | `'alert'`
-- Default: `'info'`
-
-Note that icon, if not specifically set, defaults to a connotation-associated icon.
-
-const infoMessage = "I'm here to give you advice (Like, use the controls for options)";
-const announcementMessage = "I'm here to give you some info (Terms and Conditions changed... jk)";
-const successMessage = "I'm here to give you good news (Thanks for giving us money!)";
-const warningMessage = "I'm here to give you a warning (Your zip is down)";
-const alertMessage = "I'm here to tell you something's wrong (The horror, the horror)";
-
-```html preview
-<style>
-vwc-banner {
-    clear: both;
-}
-</style>
-<vwc-banner text="Here's some information that you may find useful!" connotation="info"></vwc-banner>
-<vwc-banner text="Here's some information that you may find important!" connotation="announcement"></vwc-banner>
-<vwc-banner text="Operation Successful!" connotation="success"></vwc-banner>
-<vwc-banner text="Heads up - this is a warning" connotation="warning"></vwc-banner>
-<vwc-banner text="ALERT! Something went wrong!" connotation="alert"></vwc-banner>
-```
-
-## Removable
-
-- Type: `boolean`
-- Default: `false`
-
-The `removable` attribute sets a remove button. On click it will remove the banner from the DOM.  
-
-```html preview
-<vwc-banner text="Here's some information that you may find important!"
-            removable></vwc-banner>
-```
-
-## Action Items
-
-You can add action items using slotted content in a named slot `actionItems`:
-
-```html preview
-<vwc-banner text="A banner with an action button">
-    <vwc-button slot="actionItems" appearance="filled" connotation="primary" label="Learn More"></vwc-button>
-</vwc-banner>
-```
-
-## Methods
-
-### remove()
-
-- Type: function
-- Returns: void
-
-Removes the banner from the DOM.  Fires the `vwc-banner:removing` event and starts the remove animation.  When the animation finishes, it emits the `vwc-banner:removed` event and removes the banner from the DOM completely.  If you have a variable that refers to the banner element make sure to clear it otherwise it might cause a memory leak.
-
-## Accessibility
-
-The banner defaults its role to ‘status’ with a redundant aria-live attribute set to polite (to maximize compatibility when using this role). This indicates that the screen reader should wait until the user is idle before presenting updates to the user.
-However, consumers can modify the above attributes (role and aria-live) to fit contextually. If the information is critical, by altering the banner's role to 'alert', assistive technologies will interrupt other processes and provide users with immediate notification.
-
-1. The `role` attribute is set to `status` by default. This can be changed.
-2. The `aria-live` attribute is set to `polite` by default. This can be changed.
-3. The banner can be dismissed by hitting the `escape` key when it is in focus.
-
-```html preview
-<vwc-banner role="status"
-            aria-live="polite"
-            text="Here's some information that you may find important!"></vwc-banner>
-```
-
-## Events
-
-| Event name           | Description                                                     |
-|----------------------|-----------------------------------------------------------------|
-| `vwc-banner:removing`| Fires whenever the the banner has started its removing animation|
-| `vwc-banner:removed` | Fires when the removing animation is done                       |

package/src/lib/banner/banner.scss

@@ -1,71 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: success info alert announcement warning,
-	$shades: strong,
-	$default: info,
-);
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-@use '../../../../shared/src/lib/sass/mixins/appearance/config' as appearance-config with (
-	$appearances: filled,
-	$default: filled,
-);
-@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
-
-$banner-transition-delay: --transition-delay;
-
-.control {
-	@include connotation.connotation;
-	@include appearance.appearance;
-
-	overflow: hidden;
-	max-height: 10rem;
-	background-color: var(#{appearance.get-variable(fill)});
-	color: var(#{appearance.get-variable(text)});
-	transition: max-height var(#{$banner-transition-delay}, 200ms);
-
-	&.removing {
-		max-height: 0;
-	}
-
-	> .header {
-		@include typography.typography-cat-shorthand('body-2-bold');
-
-		display: flex;
-		min-height: 60px;
-		align-items: center;
-		justify-content: flex-start;
-
-		> .user-content {
-			display: flex;
-			flex: 1 0;
-			align-items: center;
-			justify-content: center;
-			padding-inline: 16px;
-
-			> .icon {
-				flex: 0 0 auto;
-				font-size: 20px;
-				margin-inline-end: 15px;
-			}
-
-			> .action-items {
-				display: inline-block;
-				flex: 0 0 auto;
-				padding-inline-start: 15px;
-			}
-
-			> .message {
-				padding: 20px 0;
-			}
-		}
-
-		> .dismiss-button {
-			--vvd-icon-button-color: inherit;
-
-			flex: 0 0 auto;
-			margin-inline-end: 8px;
-		}
-	}
-}
-