@ilo-org/twig 1.1.6 → 1.2.0

package/src/patterns/components/readmore/readmore.js

@@ -1,121 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The ReadMore module which handles rendering field labels inline on a form.
- *
- * @class ReadMore
- */
-export default class ReadMore {
-  /**
-   * ReadMore constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-
-    // get the theme prefix
-    this.prefix = this.element.dataset.prefix;
-
-    // set some values
-    this.openclass = `${this.prefix}--read-more--open`;
-    this.buttonopenclass = `${this.prefix}--read-more--button--open`;
-
-    // grab our HTML text to swap
-    this.fulltext = this.element.dataset.fulltext;
-
-    // cache the excerpt
-    this.excerpt = this.element.dataset.excerpt;
-
-    // grab out button labels to swap
-    this.buttonlabel = {
-      closed: this.element.dataset.closed,
-      opened: this.element.dataset.opened,
-    };
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
-    this.ReadMoreButton = this.element.querySelector(
-      `.${this.prefix}--read-more--button`
-    );
-    this.RichText = this.element.querySelector(`.${this.prefix}--richtext`);
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} ReadMore A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onClick = this.onClick.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.ReadMoreButton.addEventListener(EVENTS.CLICK, () => this.onClick());
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction with the ReadMore button
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  onClick() {
-    if (this.element.classList.contains(this.openclass)) {
-      this.RichText.innerHTML = this.excerpt;
-      this.ReadMoreButton.innerHTML = this.buttonlabel.closed;
-    } else {
-      this.RichText.innerHTML = this.fulltext;
-      this.ReadMoreButton.innerHTML = this.buttonlabel.opened;
-    }
-    this.element.classList.toggle(this.openclass);
-    this.ReadMoreButton.classList.toggle(this.buttonopenclass);
-
-    return this;
-  }
-}

package/src/patterns/components/readmore/readmore.stories.jsx

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./readmore.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/readmore/readmore.twig

@@ -1,16 +0,0 @@
-{#
-  READ MORE COMPONENT
-#}
-{% set content = excerpt %}
-{% set btnlabel = buttonlabel.closed %}
-{% if openatstart|boolval %}
-  {% set content = fulltext %}
-  {% set btnlabel = buttonlabel.opened %}
-{% endif %}
-
-<div class="{{prefix}}--read-more" data-excerpt="{{excerpt|escape}}" data-fulltext="{{fulltext|escape}}" data-closed="{{buttonlabel.closed}}" data-opened="{{buttonlabel.opened}}" data-loadcomponent="ReadMore" data-prefix="{{prefix}}">
-  {% include "@components/richtext/richtext.twig" with {
-    content: content,
-  } %}
-  <button class="{{prefix}}--read-more--button">{{btnlabel}}</button>
-</div>

package/src/patterns/components/richtext/index.js

@@ -1,6 +0,0 @@
-/**
- * rich text
- */
-// Module template
-import "./richtext.twig";
-import "./richtext.wingsuit.yml";

package/src/patterns/components/richtext/richtext.stories.jsx

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./richtext.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/richtext/richtext.twig

@@ -1,6 +0,0 @@
-{#
-  RICH TEXT COMPONENT
-#}
-<div class="{{prefix}}--richtext">
-  {{content}}
-</div>

package/src/patterns/components/search/index.js

@@ -1,7 +0,0 @@
-/**
- * Search Field
- */
-// Module template
-import "./search.twig";
-import "./search.wingsuit.yml";
-import "./search.behavior";

package/src/patterns/components/search/search.behavior.js

@@ -1,15 +0,0 @@
-import Search from "./search";
-
-Drupal.behaviors.search = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Search"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          new Search(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

package/src/patterns/components/search/search.js

@@ -1,103 +0,0 @@
-import { EVENTS, ARIA } from "@ilo-org/utils";
-
-/**
- * The Search module which handles the clear button.
- *
- * @class Search
- */
-export default class Search {
-  /**
-   * Search constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-    this.multipleExpanded = false;
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} Search A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} Search A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The field that a user interacts with on a form
-     * @type {Object}
-     */
-    this.searchButton = this.element.querySelector(
-      ".ilo--searchfield--clear-button"
-    );
-    this.searchInputField = this.element.querySelector(".ilo--input");
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Search A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onClick = this.onClick.bind(this);
-    this.KeyPressHandler = this.onKeyPress.bind(this);
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Search A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.searchButton.addEventListener(EVENTS.CLICK, this.onClick.bind(this));
-    this.searchInputField.addEventListener(
-      "keyup",
-      this.onKeyPress.bind(this, this.searchButton)
-    );
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction with the clear button
-   */
-  onClick(e) {
-    this.searchInputField.value = "";
-    this.searchButton.classList.remove("show");
-  }
-
-  onKeyPress(searchButton, e) {
-    const inputValue = e.target.value.trim();
-    if (inputValue !== "") {
-      this.searchButton.classList.add("show");
-    } else {
-      this.searchButton.classList.remove("show");
-    }
-  }
-}

package/src/patterns/components/search/search.stories.jsx

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./search.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/search/search.twig

@@ -1,31 +0,0 @@
-{# dropdown.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{% set baseClass = prefix ~ "--searchfield" %}
-{% set searchClass = [baseClass, class] %}
-{% set inputClass = prefix ~ "--input" %}
-{% set buttonClass = baseClass ~ "--button" %}
-{% set fieldSetClass = prefix ~ "--fieldset" %}
-{% set clearButtonClass = baseClass ~ "--clear-button" %}
-
-{% if error %}
-	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
-{% endif %}
-
-{% block formfield %}
-	<div data-loadcomponent="Search" class="{{ searchClass|join(" ") }}" {% if style %} style={{ style }} {% endif %}>
-		<div class="{{fieldSetClass}}">
-		<input name="{{name}}" type="{{type}}" class="{{ inputClass }}{% if error %} error{% endif %}" {% if placeholder %} placeholder="{{placeholder}}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}"/>
-		<span class="{{clearButtonClass}}" >
-			{% include "@components/icon/icon.twig" with {
-  				"name": "Close",
-  				"size": "24",
-  				"color": "#230050"
-			} %}
-		</span>
-		</div>
-		<input class="{{ buttonClass }}" type="submit"/>
-
-	</div>
-{% endblock %}

package/src/patterns/components/socialmedia/index.js

@@ -1,6 +0,0 @@
-/**
- * SocialMedia COMPONENT
- */
-// Module template
-import "./socialmedia.twig";
-import "./socialmedia.wingsuit.yml";

package/src/patterns/components/socialmedia/socialmedia.mdx

@@ -1,48 +0,0 @@
-import { Title, Subtitle } from "@storybook/addon-docs/blocks";
-import {
-  PatternLoad,
-  PatternPreview,
-  PatternProperties,
-  PatternInclude,
-  PatternDoc,
-} from "@wingsuit-designsystem/storybook";
-import brandTokens from "@ilo-org/themes/tokens/brand/base.json";
-
-<PatternLoad patternId="socialmedia">
-  {(pattern) => {
-    return (
-      <>
-        <Title />
-        <Subtitle>{pattern.description}</Subtitle>
-        <div style={{ margin: "30px 0" }}>
-          <div
-            style={{
-              padding: "30px 20px",
-              border: "1px solid rgba(0,0,0,.1)",
-              boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
-            }}
-          >
-            <PatternPreview variant={pattern.getDefaultVariant()} />
-          </div>
-          <div
-            style={{
-              padding: "30px 20px",
-              border: "1px solid rgba(0,0,0,.1)",
-              boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
-              background: "rgba(35, 0, 80, 1)",
-            }}
-          >
-            <PatternPreview
-              variant={pattern.getDefaultVariant()}
-              theme="dark"
-            />
-          </div>
-        </div>
-        <h3>Properties</h3>
-        <PatternProperties variant={pattern.getDefaultVariant()} />
-        <h3>Basic usage</h3>
-        <PatternInclude variant={pattern.getDefaultVariant()} />
-      </>
-    );
-  }}
-</PatternLoad>

package/src/patterns/components/socialmedia/socialmedia.stories.jsx

@@ -1,15 +0,0 @@
-import "./index";
-import mdx from "./socialmedia.mdx";
-
-export default {};
-const patternDefinition = require("./socialmedia.wingsuit.yml");
-
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};

package/src/patterns/components/socialmedia/socialmedia.twig

@@ -1,17 +0,0 @@
-{#
-  SOCIALMEDIA COMPONENT
-#}
-<div class="{{ prefix }}--social-media {{ prefix }}--social-media__theme__{{ theme|default("light") }} {{ prefix }}--social-media__justify__{{ align|default("start") }}">
-    {% if headline %}
-        <h5 class="{{ prefix }}--social-media--headline">{{ headline }}</h5>
-    {% endif %}
-    <ul class="{{ prefix }}--social-media--list">
-        {% for item in icons %}
-            <li class="{{ prefix }}--social-media--list--item">
-                <a class="{{ prefix }}--social-media--list--item--icon {{ prefix }}--social-media--list--item--icon__{{ iconSize|default("normal") }} {{ prefix }}--social-media--list--item--icon__{{ item.icon }}" href={{ item.url }} title={{ item.label|capitalize }} target="_blank">
-                    {{item.label|capitalize}}
-                </a>
-            </li>
-        {% endfor %}
-    </ul>
-</div>

package/src/patterns/components/table/index.js

@@ -1,7 +0,0 @@
-/**
- * Table
- */
-// Module template
-import "./table.twig";
-import "./table.wingsuit.yml";
-import "./table.behavior.js";

package/src/patterns/components/table/table.behavior.js

@@ -1,16 +0,0 @@
-import Table from "./table";
-
-Drupal.behaviors.table = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Table"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Table(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};