scu-web-components 0.0.1

package/dist/tokens/apps/cheatsheet/layouts-section/events/layouts-fill-children-events.js

@@ -0,0 +1,34 @@
+import { 
+  STNK_CLIPBOARD_REGISTER_TEMPLATE,
+  STNK_CLIPBOARD_UPDATE
+} from '../../../clipboard/clipboard.js';
+
+export function registerFillChildrenTemplate() {
+  document.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_REGISTER_TEMPLATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill-children',
+          template: '[name]'
+        }
+      }
+    )
+  )
+}
+
+export function dispatchEvent(evt, name) {
+  evt.target.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_UPDATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill-children',
+          properties: {
+            name
+          }
+        }
+      }
+    )
+  )
+}

package/dist/tokens/apps/cheatsheet/layouts-section/events/layouts-fill-container-events.js

@@ -0,0 +1,34 @@
+import { 
+  STNK_CLIPBOARD_REGISTER_TEMPLATE,
+  STNK_CLIPBOARD_UPDATE
+} from '../../../clipboard/clipboard.js';
+
+export function registerFillContainerTemplate() {
+  document.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_REGISTER_TEMPLATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill-container',
+          template: '[name]'
+        }
+      }
+    )
+  )
+}
+
+export function dispatchEvent(evt, name) {
+  evt.target.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_UPDATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill-container',
+          properties: {
+            name
+          }
+        }
+      }
+    )
+  )
+}

package/dist/tokens/apps/cheatsheet/layouts-section/events/layouts-fill-events.js

@@ -0,0 +1,35 @@
+import { 
+  STNK_CLIPBOARD_REGISTER_TEMPLATE,
+  STNK_CLIPBOARD_UPDATE
+} from '../../../clipboard/clipboard.js';
+
+export function registerFillTemplate() {
+  document.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_REGISTER_TEMPLATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill',
+          template: '[css]-[size]'
+        }
+      }
+    )
+  )
+}
+
+export function dispatchFillEvent(evt, css, size) {
+  evt.target.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_UPDATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'fill',
+          properties: {
+            size,
+            css
+          }
+        }
+      }
+    )
+  )
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-alignment.js

@@ -0,0 +1,57 @@
+import {
+  dispatchAlignmentValuesetEvent,
+  dispatchAlignmentCssEvent
+} from './events/layouts-alignment-events.js';
+
+export function renderAlignmentNames (tokens) {
+  const ele = document.createElement('div');
+  const itemEle = document.createElement('div');
+  itemEle.classList.add('section-item', 'section-pattern-button');
+  itemEle.addEventListener('click', async (evt) => {
+    dispatchAlignmentCssEvent(evt, `${tokens.prefix}-alignment`);
+  });
+  itemEle.innerHTML = 'alignment';
+  ele.appendChild(itemEle);
+  return ele;
+}
+
+export function renderAlignmentExamples ( cssApi, tokens ) {
+  const ele = document.createElement('div');
+  const cssApiAlignment = cssApi['alignment'];
+  const alignmentKeys = Object.keys(cssApiAlignment);
+  alignmentKeys.sort();
+  alignmentKeys.map(alignment => {
+    if (alignment !== 'fill-children') {
+      const itemEle = document.createElement('div');
+      itemEle.classList.add('section-item', 'section-valueset-button');
+      itemEle.addEventListener('click', async (evt) => {
+        dispatchAlignmentValuesetEvent(evt, alignment, `${tokens.prefix}-alignment` );
+      });
+      itemEle.innerHTML = alignment;
+      ele.appendChild(itemEle);
+    }
+  });
+  return ele;
+}
+
+export function renderAlignmentClasses ( tokens ) {
+  const ele = document.createElement('div');
+
+  let leftRightEle = document.createElement('div');
+  leftRightEle.classList.add('section-item', 'section-css-button');
+  leftRightEle.addEventListener('click', async (evt) => {
+    dispatchAlignmentCssEvent(evt, `${tokens.prefix}-alignment`);
+  });
+  leftRightEle.innerHTML = `${tokens.prefix}-alignment-<span class="section-highlight">[left]</span><span class="section-highlight-secondary">-[right?]</span>`;
+  ele.appendChild(leftRightEle);
+
+  const rightLeftEle = document.createElement('div');
+  rightLeftEle.classList.add('section-item', 'section-css-button');
+  rightLeftEle.addEventListener('click', async (evt) => {
+    dispatchAlignmentCssEvent(evt, `${tokens.prefix}-alignment`);
+  });
+  rightLeftEle.innerHTML = `${tokens.prefix}-alignment-<span class="section-highlight">[right]</span><span class="section-highlight-secondary">-[left?]</span>`;
+  ele.appendChild(rightLeftEle);
+
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-fill-children.js

@@ -0,0 +1,39 @@
+import {
+  dispatchEvent
+} from './events/layouts-fill-children-events.js';
+
+export function renderFillChildrenNames ( tokens ) {
+  const ele = document.createElement('div');
+  const fillChildrenEle = document.createElement('div');
+  fillChildrenEle.classList.add('section-item', 'section-pattern-button');
+  fillChildrenEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-children`);
+  });
+  fillChildrenEle.innerHTML = 'fill-children';
+  ele.appendChild(fillChildrenEle);
+  return ele;
+}
+
+export function renderFillChildrenExamples ( tokens ) {
+  const ele = document.createElement('div');
+  let childEle = document.createElement('div');
+  childEle.classList.add('section-item', 'section-valueset-button');
+  childEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-children` );
+  });
+  childEle.innerHTML = '<span class="cheatsheet-note">Tell all children to be scu-fill</span>';
+  ele.appendChild(childEle);
+  return ele;
+}
+
+export function renderFillChildrenClasses ( tokens ) {
+  const ele = document.createElement('div');
+  const fillChildrenEle = document.createElement('div');
+  fillChildrenEle.classList.add('section-item', 'section-css-button');
+  fillChildrenEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-children` );
+  });
+  fillChildrenEle.innerHTML = `${tokens.prefix}-fill-children`;
+  ele.appendChild(fillChildrenEle);
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-fill-container.js

@@ -0,0 +1,39 @@
+import {
+  dispatchEvent
+} from './events/layouts-fill-container-events.js';
+
+export function renderFillContainerNames (tokens) {
+  const ele = document.createElement('div');
+  const fillEle = document.createElement('div');
+  fillEle.classList.add('section-item', 'section-pattern-button');
+  fillEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-container`);
+  });
+  fillEle.innerHTML = 'fill-container';
+  ele.appendChild(fillEle);
+  return ele;
+}
+
+export function renderFillContainerExamples ( tokens ) {
+  const ele = document.createElement('div');
+  let childEle = document.createElement('div');
+  childEle.classList.add('section-item', 'section-valueset-button');
+  childEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-container` );
+  });
+  childEle.innerHTML = `<span class="cheatsheet-note">fill the parent's entire space...provides a stable positioning base</span>`;
+  ele.appendChild(childEle);
+  return ele;
+}
+
+export function renderFillContainerClasses ( tokens ) {
+  const ele = document.createElement('div');
+  let fillEle = document.createElement('div');
+  fillEle.classList.add('section-item', 'section-css-button');
+  fillEle.addEventListener('click', async (evt) => {
+    dispatchEvent(evt, `${tokens.prefix}-fill-container` );
+  });
+  fillEle.innerHTML = `${tokens.prefix}-fill-container`;
+  ele.appendChild(fillEle);
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-fill.js

@@ -0,0 +1,45 @@
+import {
+  dispatchFillEvent
+} from './events/layouts-fill-events.js';
+
+export function renderFillNames (tokens) {
+  const ele = document.createElement('div');
+  const fillEle = document.createElement('div');
+  fillEle.classList.add('section-item', 'section-pattern-button');
+  fillEle.addEventListener('click', async (evt) => {
+    dispatchFillEvent(evt, `${tokens.prefix}-fill`, '');
+  });
+  fillEle.innerHTML = 'fill';
+  ele.appendChild(fillEle);
+  return ele;
+}
+
+export function renderFillExamples ( cssApi, tokens ) {
+  const ele = document.createElement('div');
+  ele.classList.add('section-item', 'fill-section');
+  const cssApiFill = cssApi['fill'];
+  const fillKeys = Object.keys(cssApiFill);
+  fillKeys.sort();
+  fillKeys.map(fill => {
+    const itemEle = document.createElement('div');
+    itemEle.classList.add('section-item', 'fill-item', 'section-valueset-button');
+    itemEle.addEventListener('click', async (evt) => {
+      dispatchFillEvent(evt, `${tokens.prefix}-fill`, fill );
+    });
+    itemEle.innerHTML = fill !== '' ? fill : '--';
+    ele.appendChild(itemEle);
+  });
+  return ele;
+}
+
+export function renderFillClasses ( tokens ) {
+  const ele = document.createElement('div');
+  let fillEle = document.createElement('div');
+  fillEle.classList.add('section-item', 'section-css-button');
+  fillEle.addEventListener('click', async (evt) => {
+    dispatchFillEvent(evt, `${tokens.prefix}-fill`, '');
+  });
+  fillEle.innerHTML = `${tokens.prefix}-fill<span class="section-highlight">-[size?]</span>`;
+  ele.appendChild(fillEle);
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-layouts.js

@@ -0,0 +1,45 @@
+import {
+  dispatchLayoutEvent
+} from './events/layouts-events.js';
+
+export function renderLayoutsNames (cssApi, tokens) {
+  const ele = document.createElement('div');
+  Object.keys(cssApi['layouts']).map(async name => {
+    const itemEle = document.createElement('div');
+    itemEle.classList.add('section-item', 'section-pattern-button');
+    itemEle.addEventListener('click', async (evt) => {
+      dispatchLayoutEvent(evt, `${tokens.prefix}-${name}`);
+    });
+    itemEle.innerHTML = name;
+    ele.appendChild(itemEle);
+  });
+  return ele;
+}
+
+export function renderLayoutsExamples (cssApi) {
+  const ele = document.createElement('div');
+  Object.values(cssApi['layouts']).map(async values => {
+    const itemEle = document.createElement('div');
+    itemEle.classList.add('section-item', 'section-valueset-button');
+    itemEle.addEventListener('click', async (evt) => {
+      dispatchLayoutEvent(evt, values.selectorTemplate );
+    });
+    itemEle.innerHTML = `<span class="cheatsheet-note">${values.description ? values.description : ''}</span>`;
+    ele.appendChild(itemEle);
+  });
+  return ele;
+}
+
+export function renderLayoutsClasses (cssApi) {
+  const ele = document.createElement('div');
+  Object.values(cssApi['layouts']).map(async values => {
+    const itemEle = document.createElement('div');
+    itemEle.classList.add('section-item', 'section-css-button');
+    itemEle.addEventListener('click', async (evt) => {
+      dispatchLayoutEvent(evt, values.selectorTemplate );
+    });
+    itemEle.innerHTML = values.selectorTemplate;
+    ele.appendChild(itemEle);
+  });
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-section.css

@@ -0,0 +1,22 @@
+
+
+.fill-section {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+  .fill-item,
+  .section-item.fill-item {
+    margin-right: var( --spacing-1 );
+    width: var( --spacing-4 );
+    height: var( --spacing-6 );
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  

package/dist/tokens/apps/cheatsheet/layouts-section/layouts-section.js

@@ -0,0 +1,89 @@
+import fetchCss from '../../utils/fetchCss.js';
+import {
+  renderLayoutsNames,
+  renderLayoutsExamples,
+  renderLayoutsClasses
+} from './layouts-layouts.js';
+import {
+  renderAlignmentNames,
+  renderAlignmentExamples,
+  renderAlignmentClasses
+} from './layouts-alignment.js';
+import {
+  renderFillNames,
+  renderFillExamples,
+  renderFillClasses
+} from './layouts-fill.js';
+import {
+  renderFillChildrenNames,
+  renderFillChildrenExamples,
+  renderFillChildrenClasses
+} from './layouts-fill-children.js';
+import {
+  renderFillContainerNames,
+  renderFillContainerExamples,
+  renderFillContainerClasses
+} from './layouts-fill-container.js';
+import { registerLayoutTemplate } from './events/layouts-events.js';
+import { registerAlignmentTemplate } from './events/layouts-alignment-events.js';
+import { registerFillTemplate } from './events/layouts-fill-events.js';
+import { registerFillChildrenTemplate } from './events/layouts-fill-children-events.js';
+import { registerFillContainerTemplate } from './events/layouts-fill-container-events.js';
+
+export default async function render(tokens, cssApi) {
+  fetchCss('./layouts-section.css', import.meta );
+  const ele = document.createElement('div');
+
+  const section = await import('../section/section.js')
+    .then(js => js.default(
+      "Layouts",
+      renderLayoutsNames(cssApi, tokens),
+      renderLayoutsExamples(cssApi, tokens),
+      renderLayoutsClasses(cssApi, tokens)
+    ));
+  ele.appendChild(section);
+  registerLayoutTemplate();
+
+  const alignmentSection = await import('../section/section.js')
+    .then(js => js.default(
+      false,
+      renderAlignmentNames(tokens),
+      renderAlignmentExamples(cssApi, tokens),
+      renderAlignmentClasses(tokens)
+  ));
+  ele.appendChild(alignmentSection);
+  registerAlignmentTemplate();
+
+  const fillSection = await import('../section/section.js')
+    .then(js => js.default(
+      false,
+      renderFillNames(tokens),
+      renderFillExamples(cssApi, tokens),
+      renderFillClasses(tokens)
+  ));
+  ele.appendChild(fillSection);
+  registerFillTemplate();
+
+  const fillChildrenSection = await import('../section/section.js')
+    .then(js => js.default(
+      false,
+      renderFillChildrenNames(tokens),
+      renderFillChildrenExamples(tokens),
+      renderFillChildrenClasses(tokens)
+  ));
+  ele.appendChild(fillChildrenSection);
+  registerFillChildrenTemplate();
+
+  const fillContainerChildrenSection = await import('../section/section.js')
+    .then(js => js.default(
+      false,
+      renderFillContainerNames(tokens),
+      renderFillContainerExamples(tokens),
+      renderFillContainerClasses(tokens)
+  ));
+  ele.appendChild(fillContainerChildrenSection);
+  registerFillContainerTemplate();
+
+  return ele;
+}
+

package/dist/tokens/apps/cheatsheet/main-nav/main-nav.css

@@ -0,0 +1,35 @@
+
+
+.main-nav-container {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%;
+  background-color: var( --grey-10 );
+  z-index: 200;
+}
+
+.main-nav {
+  height: var( --spacing-6 );
+  width: var( --col-7 );
+  margin: 0 auto;
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+  .main-nav-item {
+    flex: 1;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+    font: var( --text-04 );
+    color: var( --grey-02 );
+    text-transform: uppercase;
+
+    text-decoration: none;
+  }

package/dist/tokens/apps/cheatsheet/main-nav/main-nav.js

@@ -0,0 +1,24 @@
+import fetchCss from '../../utils/fetchCss.js';
+
+const html = `
+  <div class="main-nav">
+    <a href="#colors" class="colors main-nav-item">colors</a>
+    <a href="#typography" class="typography main-nav-item">typography</a>
+    <a href="#effects" class="effects main-nav-item">effects</a>
+    <a href="#spacing" class="spacing main-nav-item">spacing</a>
+    <a href="#columns" class="columns main-nav-item">columns</a>
+    <a href="#layouts" class="layouts main-nav-item">layouts</a>
+    <a href="#icons" class="icons main-nav-item">icons</a>
+    <a href="#graphics" class="icons main-nav-item">graphics</a>
+  </div>
+`;
+
+export default function render(tokens) {
+  fetchCss('./main-nav.css', import.meta );
+  
+  const ele = document.createElement('div');
+  ele.classList.add('main-nav-container');
+  ele.innerHTML = html;
+
+  return ele;
+}

package/dist/tokens/apps/cheatsheet/main.css

@@ -0,0 +1,60 @@
+
+body, html {
+  width: 100%; 
+  height: 100%;
+  margin: 0; padding: 0;
+  font: var( --text-05 );
+  color: var( --grey-4 );
+  background-color: var( --grey-10 );
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0); 
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #ccc; 
+  border: 4px solid #fff;
+}
+
+  body.active #main {
+    display: block;
+  }
+
+  body.active #main-loading {
+    display: none;
+  }
+
+  #main {
+    /* adjust for fixed header */
+    padding-top: var( --spacing-10 );
+    padding-bottom: var( --spacing-10 );
+  }
+
+  .clearfix { display:block; }
+  .clearfix:after {
+    content:'';
+    display:block;
+    height:0;
+    clear:both;
+    visibility:hidden;
+  }
+
+  .cheatsheet-note {
+    font: var( --text-italic-05 );
+  }
+
+  .version {
+    position: fixed;
+    bottom: 20px; right: 20px;
+    color: var( --grey-05 );
+    font: var( --text-04 );
+  }
+  
+
+  

package/dist/tokens/apps/cheatsheet/main.js

@@ -0,0 +1,78 @@
+import fetchCss from '../utils/fetchCss.js';
+
+let state = {};
+
+export default function run(tokenDir, meta, version, testingTokenDir ) {
+  const finalTokenDir = tokenDir !== '{FINAL_DIR}' ? tokenDir : testingTokenDir;
+  state.version = version;
+
+  const cacheId = '';// Math.random();
+
+  fetchCss('../theme.css', import.meta );
+  fetchCss('./main.css', import.meta );
+  fetchCss(`${finalTokenDir}/theme.css`, meta );
+
+  Promise.all([
+    fetch(`${finalTokenDir}/source/tokens.json`).then(response => response.json()),
+    fetch(`${finalTokenDir}/source/cssApi.css.json`).then(response => response.json())
+  ]).then(async (result) => {
+    const tokens = result.shift();
+    const cssApi = result.shift();
+
+    document.querySelector('body').classList.add('active');
+    const mainEle = document.querySelector('#main');
+    mainEle.classList.add('clearfix');
+
+    // clipboard first...it has to listen for template registrations.
+    mainEle.appendChild(
+      await import('../clipboard/clipboard.js').then(js => js.default())
+    );
+
+    mainEle.appendChild(
+      await import('./main-nav/main-nav.js').then(js => js.default(tokens))
+    );
+
+    mainEle.appendChild(
+      await import(`./colors-section/colors-section.js?${cacheId}`).then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./typography-section/typography-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./effects-section/effects-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./spacing-section/spacing-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./columns-section/columns-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./layouts-section/layouts-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./icons-section/icons-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    mainEle.appendChild(
+      await import('./graphics-section/graphics-section.js').then(js => js.default(tokens, cssApi))
+    );
+
+    const versionEle = document.createElement('div');
+    versionEle.classList.add('version');
+    versionEle.innerHTML = state.version;
+    mainEle.appendChild(versionEle);
+
+    // fix hash issue b/c loading javascript
+    const tmpHash = location.hash;
+    location.hash = "#reseting";
+    location.hash = tmpHash;
+
+  });
+}