Merge remote-tracking branch 'origin/vivid-all-package-generator' int…

…o vivid-all-package-generator

.storybook/preview.js

@@ -3,10 +3,9 @@ import '@storybook/addon-console';
 import { addParameters, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
 
 vvdCore.settled
- .then(() => console.info('init Vivid context done (preview frame)'))
+ .then(() => console.info('init Vivid core done (preview frame)'))
  .catch(e => console.error(e));
 
 async function run() {

.storybook/vivid-theme.js

@@ -1,20 +1,19 @@
 import { create } from '@storybook/theming/create';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import vvdCore from '@vonage/vvd-core';
 
 vvdCore.settled
- .then(() => console.info('init Vivid context done (main page)'));
+ .then(() => console.info('init Vivid core done (main page)'));
+
+vvdContext.install()
+ .then(() => console.log('init Vivid context into main document done'));
 
 export default create({
  base: 'light',
  colorSecondary: 'black',
 
  appBorderRadius: 6,
 
- fontBase: 'var(--vvd-font-family-spezia), sans-serif',
- fontCode: 'monospace',
-
- textColor: '#131415',
  barSelectedColor: 'black',
 
  brandTitle: 'Vivid, the Vonage Design System',

common/context/package.json

@@ -30,6 +30,7 @@
  },
  "devDependencies": {
  "@vonage/vvd-design-tokens": "^0.16.2",
+ "@vonage/vvd-foundation": "^0.16.2",
  "@vonage/vvd-typography": "^0.16.2"
  }
-}
+}

common/context/src/partials/_layout.scss

@@ -2,5 +2,10 @@
  body {
  margin: 0;
  padding: 0;
- }
+ }
+
+ code {
+ padding: 3px 4px;
+ border-radius: 6px;
+ }
 }

common/context/src/partials/_theme.scss

@@ -1,8 +1,18 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
 
 @mixin scheme-variables-coupling {
  body {
  background-color: var(#{scheme-variables.$vvd-color-base});
  color: var(#{scheme-variables.$vvd-color-on-base});
- }
+ }
+
+ code {
+ background-color:var(#{scheme-variables.$vvd-color-surface});
+ color: color-base.$orange-600;
+ }
+
+ a {
+ color: color-base.$purple-600;
+ }
 }

common/context/src/partials/_typography.scss

@@ -32,10 +32,22 @@
  p {
  width: 60ch;
  max-width: 100%;
- }
+ }
+
+ code {
+ @include typography.typography-cat-shorthand('body-1-code');
+ }
+
+ b,
+ strong {
+ @include typography.typography-cat-shorthand('body-1-bold');
+ }
+
+ a {
+ @include typography.typography-cat-shorthand('body-1-link');
+ }
 
- code,
- samp,
+ samp,
  kbd,
  var {
  @include typography.typography-cat-shorthand('body-1-code');

common/context/src/vvd-context.ts

@@ -1,14 +1,30 @@
 import '@vonage/vvd-core';
-import { style } from './vvd-context.css';
 
-init();
+export default {
+ install,
+};
 
-function init(): void {
- injectGlobalStyle();
-}
+const CONTEXT_STYLE_IDENTIFIER = 'vivid-context-style';
+
+/**
+ * installs Vivid context (styles) into the target scope
+ */
+async function install(target = document): Promise<void> {
+ if (
+ !target ||
+ (target.nodeType !== Node.DOCUMENT_NODE &&
+ target.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)
+ ) {
+ throw new Error(`target document expected; got ${target}`);
+ }
+
+ const { style } = await import('./vvd-context.css');
+
+ let styleElement = target.querySelector(`.${CONTEXT_STYLE_IDENTIFIER}`);
+ if (!styleElement) {
+ styleElement = (target.ownerDocument ?? target).createElement('style');
+ }
 
-function injectGlobalStyle() {
- const globalStyleSheet = document.createElement('style');
- globalStyleSheet.innerHTML = style.cssText;
- document.head.appendChild(globalStyleSheet);
+ styleElement.innerHTML = style.cssText;
+ (target.head || target).appendChild(styleElement);
 }

common/context/stories/context-basic.stories.js

@@ -1,5 +1,4 @@
-import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import '@vonage/vwc-theme-switch';
 import '@vonage/vwc-top-app-bar';
 import { html } from 'lit-element';
@@ -21,6 +20,10 @@ export const basic = () => html`
 
  <h2>Overview (H2)</h2>
 
+ <p>
+ The contents of this page are an excerps from <a href="https://developer.nexmo.com/voice/voice-api/guides/call-flow">this API docs</a>.
+ </p>
+
  <p>
  The Nexmo Voice API handles two types of phone call:
  <b>inbound</b> and <b>outbound</b>.
@@ -43,6 +46,6 @@ export const basic = () => html`
  </main>
 `;
 
-vvdCore.settled
+vvdContext.install()
  .then(() => console.log('Vivid context initialised for the context demo story'))
  .catch(e => console.error(e));

common/design-tokens/package.json

@@ -24,7 +24,7 @@
  "url": "https://github.com/Vonage/vivid/issues"
  },
  "devDependencies": {
- "@vonage/vvd-design-tokens-properties": "^0.4.10",
+ "@vonage/vvd-design-tokens-properties": "^0.5.0",
  "lodash": "^4.17.20",
  "ramda": "^0.27.1",
  "style-dictionary": "^2.10.2"

common/foundation/scss/variable-names/_color-base-variable-names.scss

@@ -2,3 +2,4 @@ $purple-600: #871EFF;
 $red-100: #fdecec;
 $red-600: #CD0D0D;
 $green-600: #167629;
+$orange-600: rgb(187,55,0);

components/note/src/vwc-note.scss

@@ -4,6 +4,7 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 
 :host {
+ position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;

components/note/test/note.test.js

@@ -1,5 +1,9 @@
 import '../vwc-note.js';
-import { waitNextTask, textToDomToParent } from '../../../test/test-helpers.js';
+import {
+ waitNextTask,
+ textToDomToParent,
+ assertComputedStyle,
+} from '../../../test/test-helpers.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 import { isolatedElementsCreation } from '../../../test/test-helpers';
 
@@ -34,6 +38,15 @@ describe('note', () => {
  expect(note.shadowRoot.innerHTML).to.equalSnapshot();
  });
 
+ it('should have connotation strip constrained', async () => {
+ const [note] = addElement(
+ textToDomToParent(`<${COMPONENT_NAME}>Internal contents</${COMPONENT_NAME}>`)
+ );
+ await waitNextTask();
+ assertComputedStyle(note, { width: '8px' }, '::before');
+ assertComputedStyle(note, { height: `${note.offsetHeight}px` }, '::before');
+ });
+
  describe('header', () => {
  it('should have header when header is set', async () => {
  const [note] = addElement(

yarn.lock

@@ -4409,10 +4409,10 @@
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
  integrity sha1-qlgEJxHW4ydd033Fl+XTHowpCkQ=
 
-"@vonage/vvd-design-tokens-properties@^0.4.10":
- version "0.4.10"
- resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@vonage/vvd-design-tokens-properties/0.4.10/e240994873dcd9d336fc58abd8bd10280b099a81feda1a137d6d5cee6724d1ab#4cb450fd71b1ca6e3bbec922422c3c2e3203c586"
- integrity sha1-TLRQ/XGxym47vskiQiw8LjIDxYY=
+"@vonage/vvd-design-tokens-properties@^0.5.0":
+ version "0.5.0"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@vonage/vvd-design-tokens-properties/0.5.0/1dfb524691b59ed15e9ab45ff4ba43ae4fbd1ecf0e015b90d5715164f25605ce#6b616e60965df1b4ebc6f5dc1c97f0bd6c3d4710"
+ integrity sha1-a2FuYJZd8bTrxvXcHJfwvWw9RxA=
 
 "@webassemblyjs/ast@1.9.0":
  version "1.9.0"