@tacc/core-styles 0.7.0 → 0.8.0

package/dist/trumps/tacc-search-bar.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.7.0+ | MIT | github.com/TACC/Core-Styles */
-:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);font-size:var(--input-font-size)}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}
+/*! @tacc/core-styles 0.8.0+ | MIT | github.com/TACC/Core-Styles */
+:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);font-size:var(--input-font-size)}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]:-ms-input-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 0.7.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.7.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.0+ | MIT | github.com/TACC/Core-Styles */
 .u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;border:none;padding:0}

package/dist/trumps/u-nested-text-content.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.7.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.0+ | MIT | github.com/TACC/Core-Styles */
 .u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/docs/_fractal.md

@@ -0,0 +1,41 @@
+# TACC Core Styles - Tips for Fractal Component Library
+
+## Debugging
+
+### Preview Templates
+
+To see values available in a preview template, adapt this template code:
+
+```html
+<dl>
+  {{#each _target}}
+  <dt>
+    <strong><code>{{@key}}</code></strong>
+  </dt>
+  <dd><code>{{this}}</code></dd>
+  {{/each}}
+</dl>
+```
+
+### Console Logging
+
+To output values (like objects) in the console, adapt this config code:
+
+```js
+const hbs = require('@frctl/handlebars')({
+  helpers: {
+    debug: function (optionalValue) {
+      console.log('Current Context');
+      console.log('====================');
+      console.log(this);
+
+      if (optionalValue) {
+        console.log('Value');
+        console.log('====================');
+        console.log(optionalValue);
+      }
+    },
+  },
+});
+fractal.components.engine(hbs);
+```

package/docs/index.md

@@ -0,0 +1,26 @@
+---
+title: TACC UI Patterns
+---
+
+This is the UI pattern library for TACC.
+
+The CSS for these patterns is available from [@tacc/core-styles].
+
+---
+
+Known Clients:
+
+- [TACC/Core-CMS]
+- [TACC/Core-Portal]
+- [@tacc/core-components]
+
+[tacc/core-cms]: https://github.com/TACC/Core-CMS
+[tacc/core-portal]: https://github.com/TACC/Core-Portal
+[@tacc/core-components]: https://www.npmjs.com/package/@tacc/core-components
+[@tacc/core-styles]: https://www.npmjs.com/package/@tacc/core-styles
+
+<script type="module">
+Array.from(document.body.querySelectorAll('a'))
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/fractal.config.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const mandelbrot = require('@frctl/mandelbrot');
+const fractal = require('@frctl/fractal').create();
+
+// Get base theme
+const themeConfig = require('./fractal.theme.js');
+const theme = mandelbrot(themeConfig);
+
+// Configure UI
+fractal.set('project.title', 'TACC UI Patterns');
+fractal.components.set('label', 'Patterns'); // default is 'Components'
+fractal.components.set('title', 'Patterns'); // default is 'Components'
+fractal.components.set('default.status', 'wip'); // default is 'ready'
+
+// Set source paths
+// (for components)
+fractal.components.set('path', __dirname + '/src/lib/_imports');
+fractal.components.set('resources', {
+  // Render assets from component folders in a panel
+  // WARNING: Undocumented feature
+  // https://github.com/frctl/fractal/issues/150#issuecomment-254642411
+  // https://github.com/frctl/fractal/issues/93#issuecomment-236429871
+  assets: {
+    label: 'Assets',
+    match: ['**/*.css', '**/*.js'],
+  },
+});
+// (for stylesheets)
+fractal.components.set('default.context', {
+  styles: {
+    internal: {
+      local: [
+        '/settings/border.css',
+        '/settings/color.css',
+        '/settings/font.css',
+        '/settings/max-width.css',
+        '/settings/space.css',
+      ],
+    },
+  },
+});
+
+// Set website paths
+fractal.docs.set('path', __dirname + '/docs');
+fractal.web.set('static.path', __dirname + '/dist');
+fractal.web.set('builder.dest', __dirname + '/demo');
+
+// Customize theme
+fractal.web.theme(theme);
+
+// Export
+module.exports = fractal;

package/fractal.theme.js

@@ -0,0 +1,12 @@
+'use strict';
+
+// To let any client extend
+module.exports = {
+  skin: {
+    accent: '#000000',
+    complement: '#ffffff',
+    links: '#784fe8',
+  },
+  panels: ['notes', 'html', 'resources', 'context', 'info'],
+  nav: ['search', 'docs', 'components'],
+};

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@tacc/core-styles",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
   "files": [
     "dist",
+    "docs",
+    "fractal.config.js",
+    "fractal.theme.js",
+    "src/cli.js",
     "src/bin",
     "src/lib",
     "src/.postcssrc.base.yml"
@@ -13,8 +17,11 @@
   "main": "src/main.js",
   "bin": "src/cli.js",
   "scripts": {
-    "build": "node src/cli.js build -i \"src/lib/_imports/**/*!(README).css\" -o \"./dist\" -m \"src/lib/_imports\"",
-    "test": "node src/cli.js build -i \"src/lib/_tests\" -o \"./dist\" -m \"src/lib\" && echo \"Test output at 'dist/_tests' (compare to test input)\"",
+    "start": "fractal start --sync",
+    "build": "npm run build:css && npm run build:demo",
+    "build:css": "bin/build.js",
+    "build:demo": "fractal build",
+    "test": "bin/test.js && echo \"Test output at 'dist/_tests' (compare to test input)\"",
     "prepublishOnly": "npm run build # && npm test && npm run lint"
   },
   "engines": {
@@ -46,5 +53,9 @@
     "postcss-import": "To import CSS files at build-time",
     "postcss-extend": "To extend CSS rule sets at build-time",
     "postcss-preset-env": "To use future CSS features now"
+  },
+  "devDependencies": {
+    "@frctl/fractal": "^1.5.13",
+    "@frctl/mandelbrot": "^1.10.1"
   }
 }

package/src/lib/_imports/_preview.hbs

@@ -0,0 +1,47 @@
+{{! styles: base (the current component) }}
+{{#unless styles.shouldSkipBase}}
+  <link
+    rel='stylesheet'
+    href='{{path "/components/{{ _target.baseHandle }}.css"}}'
+  />
+{{/unless}}
+
+{{! styles: global (for every component) }}
+{{! (manually configured) }}
+{{#each styles.external.global}}
+  <link rel='stylesheet' href='{{this}}' />
+{{/each}}
+{{#each styles.internal.global}}
+  <link rel='stylesheet' href='{{path this}}' />
+{{/each}}
+
+{{! styles: local (for current component) }}
+{{! (automatically found) }}
+{{#each _target.resources.assets}}
+  {{#if isCSS}}
+    <link
+      rel='stylesheet'
+      href='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+    />
+  {{/if}}
+{{/each}}
+{{! (manually configured) }}
+{{#each styles.external.local}}
+  <link rel='stylesheet' href='{{this}}' />
+{{/each}}
+{{#each styles.internal.local}}
+  <link rel='stylesheet' href='{{path this}}' />
+{{/each}}
+
+{{! scripts: local (for current component) }}
+{{! (automatically found) }}
+{{#each _target.resources.assets}}
+  {{#if isJS}}
+    <script
+      src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+    ></script>
+  {{/if}}
+{{/each}}
+
+{{! markup }}
+{{{yield}}}

package/src/lib/_imports/components/bootstrap.container.css

@@ -7,7 +7,7 @@ Add to Bootstrap styles. See:
 
 Styleguide Components.Bootstrap.Grid
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 @media (--x-wide-and-above) {
   .container { max-width: var(--global-max-width--x-wide); }

package/src/lib/_imports/components/bootstrap.form.css

@@ -0,0 +1,21 @@
+/*
+Form (Bootstrap)
+Override Bootstrap styles. See:
+- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
+Styleguide Components.Bootstrap.Form
+*/
+@import url('../settings/border.css');
+
+.form-control {
+  border: var(--global-border--normal);
+  border-radius: 0;
+}
+input.form-control,
+textarea.form-control {
+  /* FAQ: Vertical padding reduced by 1px each to near input height of design * 1.2 */
+  padding: 6px 12px; /* 6px 10px design * 1.2 design-to-app ratio */
+}
+.input-group-prepend {
+  z-index: 1; /* so child button border is above sibling input border */
+}

package/src/lib/_imports/components/bootstrap.modal.css

@@ -0,0 +1,74 @@
+/* TODO: Migrate any other should-be-global Portal modal styles to here */
+/* FP-344: Consider a Modal component and a CSS module */
+/*
+Modal (Bootstrap)
+
+Override Bootstrap styles. See:
+
+- [ReactStrap Forms](https://reactstrap.github.io/components/modals/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/modal/)
+
+Styleguide Components.Bootstrap.Modal
+*/
+@import url('../tools/x-truncate.css');
+
+.modal-content,
+.modal-header,
+.modal-body,
+.modal-footer {
+  border-radius: 0;
+}
+.modal-content,
+.modal-header,
+.modal-body {
+  border: none;
+}
+.modal-footer {
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.modal-header {
+  background-color: var(--global-color-primary--x-light);
+  padding: 1.35rem 1.75rem; /* (18px 23.5px design * 1.2 design-to-app ratio) */
+}
+.modal-title {
+  color: var(--global-color-primary--xx-dark);
+  font-weight: normal;
+  font-size: 1.2rem; /* 16px design * 1.2 design-to-app ratio */
+
+  @extend .x-truncate--one-line;
+}
+
+/* To darken close button */
+.modal-header .close {
+  color: var(--global-color-primary--x-dark);
+  opacity: 1;
+}
+/* FAQ: The specificity matches Bootstrap */
+.modal-header .close:not(:disabled):not(.disabled):focus,
+.modal-header .close:not(:disabled):not(.disabled):hover {
+  color: var(--global-color-primary--xx-dark);
+  opacity: 1;
+}
+
+/* To render modal close button icon as a Cortal icon */
+/* CAVEAT: Pass `charCode="&#xe912;"` to `<ModalHeader>` */
+.modal-header .close span {
+  /* To mimic `.icon` styles without `@extend` or `composes` (unavailable) */
+  /* HACK: Copied (and reduced and edited) from `src/styles/trumps/icon...` */
+  font-size: 1.5rem; /* bigger to match header text font height (like design) */
+  font-family: Cortal-Icons !important;
+}
+
+.modal-header.has-MuiTabs {
+  flex-direction: row;
+  position: relative;
+  height: 63.5px;
+  border-bottom: 1px solid #afafaf;
+  padding: 5px;
+}
+.modal-header.has-MuiTabs .close {
+  transform: translate(-25%, 25%);
+}

package/src/lib/_imports/components/bootstrap.pagination.css

@@ -7,7 +7,7 @@ Style Bootstrap pagination. See:
 
 Styleguide Components.Bootstrap.Pagination
 */
-@import url("_imports/components/c-page.css");
+@import url("../components/c-page.css");
 
 
 

package/src/lib/_imports/components/c-button/c-button.config.yml

@@ -0,0 +1,69 @@
+context:
+  supports:
+    states: true
+    icons: true
+    width: true
+    size: true
+    size-small: true
+variants:
+  # type
+  - name: default
+    label: (Unstyled)
+    hidden: true
+    notes: Incomplete implementation; a type is required
+  - name: primary
+    notes: For the only or primary action
+    context:
+      supports:
+        size-small: false
+  - name: secondary
+    notes: For an optional user action
+  - name: tertiary
+    notes: For inactive buttons among many buttons
+      (e.g. pagination buttons to other pages)
+  - name: is-active
+    notes: For the one active button among many buttons
+      (e.g. pagination button for current page)
+  - name: as-link
+    notes: For a button that resembles a link
+    context:
+      supports:
+        width: false
+        size: false
+  # state
+  - name: is-busy
+    notes: For a button whose being clicked started an incomplete process (should have `disabled` attribute)
+    context:
+      supports:
+        states: false
+        type: true
+      type: c-button--secondary
+      disabled: true
+  # width
+  - name: width-short
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  - name: width-medium
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  - name: width-long
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  # size
+  - name: size-small
+    notes: For a button in a condensed layout
+    context:
+      supports:
+        size: false
+        type: true
+      type: c-button--secondary
+      small: true

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -0,0 +1,185 @@
+<dl>
+  {{#if supports.type}}
+  <dt>Type</dt>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--secondary</span>
+      </button>
+      {{#if small}}
+        <small>(no small primary allowed)</small>
+      {{else}}
+        <button class="c-button c-button--{{this._self.name}} c-button--primary"
+        {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--primary</span>
+        </button>
+      {{/if}}
+      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--tertiary</span>
+      </button>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--secondary</span>
+      </a>
+      {{#if small}}
+        <small>(no small primary allowed)</small>
+      {{else}}
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
+        {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--primary</span>
+        </a>
+      {{/if}}
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--tertiary</span>
+      </a>
+    </dd>
+  </dl><dd>
+  {{/if}}
+
+  {{#if supports.states}}
+  <dt>States</dt>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">default</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}"
+        disabled>
+        <span class="c-button__text">--is-busy</span>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">default</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}"
+        disabled>
+        <span class="c-button__text">--is-busy</span>
+      </a>
+    </dd>
+  </dl><dd>
+  {{/if}}
+
+  {{#if supports.icons}}
+  <dt>Icons</dt>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <i class="c-button__icon--before" aria-description="validate input">…</i>
+        <span class="c-button__text">__icon--before</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">__icon--after</span>
+        <i class="c-button__icon--after" aria-description="exit page">X</i>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <i class="c-button__icon--before" aria-description="validate input">…</i>
+        <span class="c-button__text">__icon--before</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">__icon--after</span>
+        <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </a>
+    </dd>
+  </dl><dd>
+  {{/if}}
+
+  {{#if supports.width}}
+  <dt>Width</dt>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-short</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-medium</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-long</span>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-short</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-medium</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-long</span>
+      </a>
+    </dd>
+  </dl><dd>
+  {{/if}}
+
+  {{#if supports.size}}
+  <dt>Size</dt>
+  <dd>
+    {{#if supports.size-small}}
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--size-small
+          {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--size-small</span>
+        </button>
+      </dd>
+
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
+          {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--size-small</span>
+        </a>
+      </dd>
+    </dl>
+    {{else}}
+    <small>(no small size allowed)</small>
+    {{/if}}
+  <dd>
+  {{/if}}
+</dl>

package/src/lib/_imports/components/c-button/c-button_docs.css

@@ -0,0 +1,8 @@
+dd > * {
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+.c-button > i {
+  font-style: normal;
+}