@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.22",
+  "version": "0.1.0-beta.0",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -22,13 +22,14 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "docs:dev": "vitepress dev docs-src",
-    "docs:build": "vitepress build docs-src",
-    "docs:preview": "vitepress preview docs-src",
-    "docs:update:scss": "node ./docs-src/.vitepress/sassdoc.js",
-    "docs:update:scss:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js",
-    "docs:update:js": "node ./docs-src/.vitepress/jsdoc.js",
-    "types": "npx tsc"
+    "types": "npx tsc",
+    "docs": "npx @11ty/eleventy --serve --config=docs.eleventy.js",
+    "docs:incremental": "npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
+    "docs:nogen": "NO_DOC_GEN=true npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
+    "docs:inspect": "node --inspect-brk ./node_modules/.bin/eleventy --serve --config=docs.eleventy.js",
+    "docs:build": "npx @11ty/eleventy --config=docs.eleventy.js",
+    "docs:assets": "vite --config docs.vite.config.js --force",
+    "docs:assets:build": "vite build --config docs.vite.config.js"
   },
   "repository": {
     "type": "git",
@@ -54,19 +55,39 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "devDependencies": {
+    "@11ty/eleventy": "^3.0.0-alpha.6",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@ulu/markdown-output-utils": "^0.0.6",
+    "@ulu/sassdoc-to-markdown": "^0.0.15",
+    "@ulu/vite-config-cms-theme": "^0.0.10",
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.9",
+    "algoliasearch": "^4.23.3",
+    "chokidar": "^3.6.0",
+    "eleventy-plugin-nesting-toc": "^1.3.0",
     "fs-extra": "^11.2.0",
+    "instantsearch.js": "^4.68.1",
     "jsdoc": "^4.0.2",
     "jsdoc-to-markdown": "^8.0.0",
-    "sass": "^1.51.0",
+    "markdown-it-anchor": "^8.6.7",
+    "markdown-it-attrs": "^4.1.6",
+    "micromodal": "^0.4.10",
+    "sass-embedded": "^1.81.0",
+    "sharp": "^0.33.4",
+    "svgo": "^3.3.2",
     "typescript": "^5.3.3",
     "vitepress": "^1.0.0-rc.27"
   },
   "dependencies": {
-    "@ulu/utils": "^0.0.6",
+    "@floating-ui/dom": "^1.6.5",
+    "@ulu/utils": "^0.0.17",
     "aria-tablist": "^1.2.2",
     "autoprefixer": "^10.4.16",
-    "vite": "^5.0.10"
+    "vite": "^5.4.11"
+  },
+  "optionalDependencies": {
+    "ally.js": "^1.4.1"
   }
 }

package/resources/drupal/twig-macros/accordion.twig

@@ -0,0 +1,99 @@
+{#
+* ==============================================================================
+* Accordion / Details
+* ==============================================================================
+*
+* @version 1.0.1
+*
+* @example
+  {% import directory ~ '/templates/_macros/accordion.twig' as accordionMacros %}
+
+* @param {Markup} toggle Markup to include in the toggle button
+* @param {Markup} body Markup to include in the body (hidden area)
+* @param {Object} options Configuration object
+* @param {String} options.icon Add icon classes
+* @param {Boolean} options.open Open by default
+* @param {String} options.modifier Modifer class (needs to correspond with styling)
+
+Notes:
+  - don't worry about headings in summary it doesn't work on screenreaders
+  - I wouldn't reset the headline order within (ie. no  sectioning root, I think this will not work for SRs)
+#}
+
+{% macro accordion(toggle, body, options = {}) %}
+  {% set defaults = {
+    open: false,
+    modifier: "default",
+    icon: null,
+    attributes: null
+  } %}
+  {% set options = defaults|merge(options) %}
+  {% set classes = [
+    "site-details",
+    'site-details--' ~ options.modifier 
+  ] %}
+  {% set attributes = options.attributes ?: create_attribute()  %}
+  <details {{ attributes.addClass(classes).setAttribute("open", options.open) }}>
+    <summary class="site-details__summary">
+      {{ toggle }}
+      <span class="site-details__icon {{ options.icon }}" aria-hidden="true"></span>
+    </summary>
+    <div class="site-details__content">
+      {{ body }}
+    </div>
+  </details>
+{% endmacro %}
+
+{% macro accordionGroup(title, accordions, options = {}) %}
+  {% set defaults = {
+    titleHidden: true,
+    modifier:    "default",
+    textOpen:    "Expand All",
+    textClose:   "Close All",
+    icon:        null
+  } %}
+  {% set uid = ctwig_uniqid("site-details-group") %}
+  {% set id = {
+    container:  uid ~ '--container',
+    title:      uid ~ '--title',
+    expand:     uid ~ '--expand'
+  } %}
+  {% set options = defaults|merge(options) %}
+
+  <div class="site-details-group {{ 'site-details-group--' ~ options.modifier }}">
+    <h2 
+      id="{{ id.title }}"
+      class="{{ options.titleHidden ? 'hidden-visually' : 'site-details-group__title' }}" 
+    >
+      {{ title }}
+    </h2>
+    <div 
+      id="{{ id.container }}" 
+      class="site-details-group__inner" 
+      aria-multiselectable="true"
+    >
+      <div class="site-details-group__controls">
+        <button 
+          class="site-details-group__control"
+          id="{{ id.expand }}"
+          type="button"
+          aria-expanded="false"
+          aria-controls="{{ id.container }}"
+          aria-labelledby="{{ id.title }} {{ id.expand }}"
+          data-site-details-group="{{ { 
+            textOpen: options.textOpen, 
+            textClose: options.textClose 
+          }|json_encode }}"
+          hidden
+        >
+          <span 
+            class="site-details-group__controls-all-icon {{ options.icon }}" 
+            aria-hidden="true"
+          ></span>
+          {{ options.textOpen }}
+        </button>
+      </div>
+      
+    </div>
+  </div>
+{% endmacro %}

package/resources/drupal/twig-macros/dropdown.twig

@@ -0,0 +1,44 @@
+{#
+* ==============================================================================
+* Dropdown
+* ==============================================================================
+*
+* @version 1.0.0
+*
+* @example
+*  {% import directory ~ '/templates/_macros/dropdown.twig' as dropdownMacros %}
+#} 
+
+{#
+* @param {Markup} toggle Markup to include in the toggle button
+* @param {Markup} body Markup to include in the body (hidden area)
+* @param {Object} options Configuration object
+* @param {String} options.modifier Modifer class (needs to correspond with styling)
+* @param {Boolean} options.isMenu The content of this dropdown should be styled as a menu
+* @param {Boolean} options.placement Placement suggestion, possible values:
+    auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, 
+    bottom-end, right, right-start, right-end, left, left-start, left-end
+#}
+
+{% macro dropdown(toggle, body, options = {}) %}
+  {% set defaults = {
+    isMenu:    false,
+    modifier:  "default",
+    placement: "bottom-end"
+  } %}
+  {% set options = defaults|merge(options) %}
+  <div 
+    class="site-dropdown {{ 'site-dropdown--' ~ options.modifier }}" 
+    data-cc-placement="{{ options.placement }}"
+  >
+    <button class="site-dropdown__toggle" type="button">
+      {{ toggle }}
+      <span class="site-dropdown__toggle-icon" aria-hidden="true"></span>
+    </button> 
+    <div class="site-dropdown__content">
+      <div class="{{ options.isMenu ? 'site-dropdown__menu' : 'site-dropdown__content-inner' }}">
+        {{ body }}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

package/resources/drupal/twig-macros/flipcard.twig

@@ -0,0 +1,69 @@
+{#
+* ==============================================================================
+* Flipcard
+* ==============================================================================
+*
+* @version 1.0.0
+*
+* @example
+*  {% import directory ~ '/templates/_macros/flipcard.twig' as flipcardMacros %}
+#} 
+
+{# 
+ * @param {Array} flipcards Array of flipcards (markup from flipcard macro below)
+ #}
+
+{% macro flipcardLayout(flipcards) %}
+  <div class="flipcard-grid">
+    {% for flipcard in flipcards %}
+      <div class="flipcard-grid__item">
+        {{ flipcard }}
+      </div>
+    {% endfor %}
+  </div>
+{% endmacro %}
+
+{# 
+ * @param {Markup} front Markup for front
+ * @param {Markup} back Markup for back
+ * @param {Markup} image Image for the front
+ * @param {Object} options Configuration
+ * @param {Object} options.modifier Modifer class (needs to correspond with styling)
+ * @param {Boolean} options.frontOnBack Include a duplicate of the front content on back (no interactive elements, aria-hidden)
+ #}
+
+{% macro flipcard(front, back, image = false, options = {}) %}
+  {% set var = value %}
+  {% set defaults = {
+    modifier:      "default",
+    frontOnBack:   false
+  } %}
+  {% set options = defaults|merge(options) %}
+
+  <div class="flipcard {{ image ? 'flipcard--w-image' }}" data-site-flipcard>
+    <h3 class="flipcard__front" data-site-flipcard-front>
+      {% if image %}
+        <span class="flipcard__front-image">{{ image }}</span>
+      {% endif %}
+      <span class="flipcard__front-content">
+        {{ front }}
+        <span class="flipcard__icon flipcard__icon--front" aria-hidden="true"></span>
+      </span>
+    </h3>
+    <div class="flipcard__back" data-site-flipcard-back>
+      {% if frontOnBack %}
+        <div class="flipcard__back-front-content" aria-hidden="true">
+          {{ front }}
+        </div>
+      {% endif %}
+      <div class="flipcard__back-content">
+        {{ back }}
+      </div>
+      <span class="flipcard__icon flipcard__icon--back" aria-hidden="true"></span>
+    </div>
+    {# Site styling can choose to use this if wanted or it can remain empty #}
+    <div class="flipcard__icon-footer">
+      <span class="flipcard__icon flipcard__icon--footer"  aria-hidden="true"></span>
+    </div>
+  </div>
+{% endmacro %}

package/resources/drupal/twig-macros/image.twig

@@ -0,0 +1,30 @@
+
+{# 
+==================================================================================
+Image Macros
+==================================================================================
+
+Version:            1.0.0
+
+Description:        Reusable interactive elements, correspond with styling and scripting
+
+Usage:              
+  {% import directory ~ '/templates/_macros/image.twig' as imageMacros %}
+
+#}
+
+{#
+* @param {Markup} field Image field
+* @param {Markup} options Configruation
+* @param {Markup} options.alt Custom alt text (default to field)
+* @param {Markup} options.class (default to full-width-image)
+#}
+
+{% macro large(field, options = {}) %}
+  {% if field.value is not empty %}
+    {{ drupal_image(field.entity.uri.value, 'large', { 
+      alt: options.alt|default(field.alt),
+      class: options.class|default("full-width-image")
+    }) }}
+  {% endif %}
+{% endmacro %}

package/resources/drupal/twig-macros/layout.twig

@@ -0,0 +1,338 @@
+{# 
+  Usage: 
+  {% import directory ~ '/templates/_macros/layout.twig' as layoutMacros %}
+#}
+
+{% macro quote(options) %}
+  {% set defaults = {
+    body: null,
+    author: null,
+    authorTitle: null,
+    authorPhoto: null,
+    bodyClasses: "type-large-x"
+  } %}
+  {% set options = defaults|merge(options) %}
+  <figure class="site-quote">
+    {# inline all was added incase editor field is output in here #}
+    <blockquote class="site-quote__body display-inline-all {{ options.bodyClasses }}">
+      {{ options.body }}
+    </blockquote>
+    {% if options.author %}
+      <figcaption class="site-quote__author">
+        {% if options.authorPhoto %}
+          <div class="site-quote__author-photo">
+            <div class="badge badge--small">
+              <div class="badge__inner">
+                {{ options.authorPhoto }}
+              </div>
+            </div>
+          </div>
+        {% endif %}
+        <strong class="site-quote__author-name">
+          {{ options.author }}
+        </strong>
+        {% if options.authorTitle %}
+          <span class="site-quote__author-title">
+            <span class="visually-hidden">, </span>
+            {{ options.authorTitle }}
+          </span>
+        {% endif %}
+        
+      </figcaption>
+    {% endif %}
+  </figure>
+{% endmacro %}
+
+{% macro videoSection(options) %}
+  {% set defaults = {
+    title: null,
+    body: null,
+    url: null,
+    image: null
+  } %}
+  {% set options = defaults|merge(options) %}
+  <div class="video-section">
+    <div data-grid="columns: 12, gutters-row: true">
+      <div data-grid-item="width: 6">
+        {% if options.title %}
+          <h2 class="h2">{{ options.title }}</h2>
+        {% endif %}
+        {% if options.body %}
+          <div class="wysiwyg crop-margins margin-bottom">
+            {{ options.body }}
+          </div>
+        {% endif %}
+        <a class="button" href="{{ options.url }}">
+          Watch Video
+          <span class="fas fa-play-circle" aria-hidden="true"></span>
+        </a>
+      </div>
+      {% if options.image %}
+        <div data-grid-item="width: 5, offset: 1">
+          <a class="video-section__link-image" href="{{ options.url }}">
+            {{ options.image }}
+          </a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}
+
+{% macro card(ctx, options) %}
+  {% set defaults = {
+    class: null,
+    title: null,
+    titleElement: "h3",
+    titleHref: null,
+    titleLabel: null,
+    titleClass: null,
+    aboveTitle: null,
+    content: null,
+    footer: null,
+    image: null,
+    iconClass: null,
+    proxyClick: true
+  } %}
+  {% set options = defaults|merge(options) %}
+  {% set hasProxyClick = options.proxyClick and options.titleHref %}
+  {% set attributes = create_attribute({ class: [ "card", "site-card", options.class ] }) %}
+  {% if hasProxyClick %}
+    {% set attributes = attributes.setAttribute("data-proxy-click", "") %}
+  {% endif %}
+  
+  {% set title %}
+    {% if options.titleLabel %}
+      <span class="site-card__label">{{  options.titleLabel }}</span>
+    {% endif %}
+    {{ options.aboveTitle }}
+    <span class="site-card__title">{{ options.title }}</span>
+  {% endset %}
+
+  <article {{ attributes }}>
+    <div class="card__body">
+      <{{ options.titleElement }} class="site-card__header">
+        {% if options.titleHref %}
+
+          {% set linkAttrs = create_attribute({ class: "site-card__link", href: options.titleHref }) %}
+          {% if options.proxyClick %}
+             {% set linkAttrs = linkAttrs.setAttribute("data-proxy-click-source", "") %}
+          {% endif %}
+          
+          <a {{ linkAttrs }}>{{ title  }}</a>
+        {% else %}
+          {{ title  }}
+        {% endif %}
+      </{{ options.titleElement }}>
+      {% if options.content %}
+        <div class="site-card__body">
+          {{ options.content }}
+        </div>
+      {% endif %}
+    </div>
+    <div class="card__image site-card__image">
+      {% if options.image %}
+        {{ options.image }}
+      {% else %}
+        <img src="/{{ ctx.directory }}/dist/images/default-card.svg"  alt="">
+      {% endif %}
+      {% if options.iconClass %}
+        <span class="site-card__image-icon {{ options.iconClass }}" aria-hidden="true"></span>
+      {% endif %}
+    </div>
+    {% if options.footer %}
+      <div class="card__footer">
+        {{ options.footer }}
+      </div>
+    {% endif %}
+  </article>
+{% endmacro %}
+
+{% macro sidebar(body, sidebar, options = {}) %}
+  {% set defaults = {
+    reversed: false,
+    reversedMobile: false,
+    bodyClasses: "",
+    sidebarClasses: "",
+    large: false
+  } %}
+  {% set options = defaults|merge(options) %}
+
+  {% set sidebarWidth = options.large ?  "width: 5" : "width: 4" %}
+  {% set bodyWidth = options.large ?  "width: 7" : "width: 8" %}
+  {% set classes = [
+    "layout-sidebar",
+    options.reversed ? "layout-sidebar--reversed",
+    options.reversedMobile ? "layout-sidebar--reversed-mobile",
+  ]|join(" ") %}
+  {% set bodyClasses = ["layout-sidebar__body", "crop-margins", options.bodyClasses]|join(" ") %}
+  {% set sidebarClasses = ["layout-sidebar__sidebar", "crop-margins", options.sidebarClasses ]|join(" ") %}
+  <div 
+    class="{{ classes }}"
+    data-grid="columns: 12; align: start, gutters-row: true, rules-column: right"
+  >
+    {% if options.reversed or options.reversedMobile %}
+      {# note: reversedMobile will set the order so that when the grid is active display: flex it
+      will appear on the side but on mobile non-grid sizes the order will not be used (on top) #}
+      <div 
+        class="{{ sidebarClasses }}" 
+        data-grid-item="{{ sidebarWidth }}"
+        style="{{ options.reversedMobile ? 'order: 2' }}"
+      >
+        {{ sidebar }}
+      </div>
+      <div class="{{ bodyClasses }}" data-grid-item="{{ bodyWidth }}">
+        {{ body }}
+      </div>
+    {% else %}
+      <div class="{{ bodyClasses }}" data-grid-item="{{ bodyWidth }}">
+        {{ body }}
+      </div>
+      {% if sidebar %}
+        <div class="{{ sidebarClasses }}" data-grid-item="{{ sidebarWidth }}">
+          {{ sidebar }}
+        </div>
+      {% endif %}
+    {% endif %}
+  </div>
+{% endmacro %}
+
+{% macro node(ctx, options = {}) %}
+  {% from _self import sidebar, responsiveImage %}
+  {% set defaults = {
+    label:              ctx.label,
+    
+    attributes:         ctx.attributes ? 
+                          ctx.attributes|without("role") : create_attribute(),
+    content_attributes: ctx.content_attributes ? 
+                          ctx.content_attributes : create_attribute(),
+    title_attributes:   ctx.title_attributes ? 
+                          ctx.title_attributes : create_attribute(),
+    parentTitle:        not ctx.menu_parent_title is empty ? 
+                          ctx.menu_parent_title : null,
+    body:               ctx.content.body|field_value is not empty ? 
+                          ctx.content.body|field_value : null,
+    sectioned_header:     ctx.content.field_header is not empty ? 
+                          ctx.content.field_header : null,
+    sectioned_body:     ctx.content.field_sectioned_content is not empty ? 
+                          ctx.content.field_sectioned_content : null,
+    sidebar:                  null,
+    sidebarOptions:           {},
+    badgeImage:               null,
+    bodyClass:                null,
+    belowBody:                null,
+    aboveBody:                null,
+    beforeBody:               null,
+    afterBody:                null,
+    beforeHeader:             null,
+    afterHeader:              null,
+    bodyContained:            true,
+    showBodyField:            true,
+    showSectionedBodyField:   true,
+    showHeaderField:          true,
+    showParentTitle:          true,
+  } %}
+
+  {% set options = defaults|merge(options) %}
+  {% set hasFieldBody = options.showBodyField and options.body %}
+  {% set hasFieldSectionedHeader = options.showHeaderField and options.sectioned_header %}
+  {% set hasFieldSectionedBody = options.showSectionedBodyField and options.sectioned_body %}
+  {% set hasBodyContent = hasFieldBody or hasFieldSectionedBody or options.aboveBody or options.belowBody  %}
+
+
+  {% set body %}
+    {{ options.aboveBody }}
+    {% if hasFieldSectionedBody %}
+      {{ options.sectioned_body }}
+    {% endif %}
+    {% if hasFieldBody %}
+      <div class="wysiwyg crop-margins crop-margins--first">
+        {{ options.body }}
+      </div>
+    {% endif %}
+    {{ options.belowBody }}
+  {% endset %}
+
+
+  {% set introClasses = [
+    "page__intro",
+  ] %}
+  <div{{ options.attributes }}>
+    <div class="{{ introClasses|join(' ') }}">
+      {% if hasFieldSectionedHeader %}
+        {{ options.beforeHeader }}
+        {{ options.sectioned_header }}
+        {{ options.afterHeader }}
+      {% else %}
+        {{ options.beforeHeader }}
+        <div class="">
+          <div class="">
+            <h1 {{ options.title_attributes.addClass("h1 page-title") }}>
+              {% if options.showParentTitle and options.parentTitle %}
+                <span class="headline-label">
+                  {{ options.parentTitle }}<span class="hidden-visually">:</span>
+                </span>
+              {% endif %}
+              {{ options.label }}
+            </h1>
+          </div>
+        </div>
+        {{ options.afterHeader }}
+      {% endif %}
+    </div>
+
+    <div class="page__content">
+      {{ options.beforeBody }}
+      {% if options.sidebar or hasBodyContent %}
+        <div class="page__content-body {{ options.bodyClass }}">
+          <div {{ options.content_attributes.addClass([
+            'page__content-body-inner', 
+            options.bodyContained and not hasFieldSectionedBody ? 'container'
+          ]) }}>
+            {% if options.sidebar %}
+              {{ sidebar(body, options.sidebar, options.sidebarOptions) }}
+            {% else %}
+              {{ body }}
+            {% endif %}
+          </div>
+        </div>
+      {% endif %}
+      {{ options.afterBody }}
+    </div>
+  </div>
+{% endmacro %} 
+
+
+{% macro responsiveImage(options) %}
+  {% set defaults = {
+    alt: "",
+    class: null,
+    classImage: null,
+    src: null,
+    srcMedium: null,
+    srcLarge: null
+  } %}
+  {% set options = defaults|merge(options) %}
+  {% if options.src %}
+    <picture class="{{ options.class }}">
+      {# These line up to the breakpoints in Sass #}
+      {% if options.srcMedium %}
+        <source srcset="{{ options.srcMedium }}" media="(min-width: 53.5em)">
+      {% endif %}
+      {% if options.srcLarge %}
+        <source srcset="{{ options.srcLarge }}" media="(min-width: 76em)">
+      {% endif %}
+      <img 
+        class="{{ options.classImage }}" 
+        src="{{ options.src }}" 
+        alt="{{ options.alt }}"
+      >
+    </picture>
+  {% elseif options.debug %}
+    {{ kint(options) }}
+  {% endif %}
+{% endmacro %}
+
+{#
+Usage:
+{% import directory ~ '/templates/_macros/element.twig' as elementMacros %}
+#}