Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DS 889: Drupal Admin UI Paternlab Section #2579

Merged
merged 37 commits into from Dec 2, 2022
Merged

DS 889: Drupal Admin UI Paternlab Section #2579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
e931e14
DS-889: TEmplates
Nov 22, 2022
4cfe150
DS-889: Tabs includings
Nov 22, 2022
a125406
DS-889: ui docs
Nov 22, 2022
718b588
DS-889: Update template
Nov 23, 2022
ef4c54d
DS-889: Create new tabs
Nov 23, 2022
53fb0b4
DS-889: Create new docs + update numbering
Nov 23, 2022
4f39666
DS-889: Replace custom tags
Nov 23, 2022
d80d41c
DS-889: Styles + replace custom tag
Nov 23, 2022
c699e6e
DS-889: Replace custom tag
Nov 23, 2022
52869f9
DS-889: Update animation tag
Nov 24, 2022
2155c8b
DS-889: Update tabs
Nov 24, 2022
93fb9d5
DS-889: Update css
Nov 24, 2022
28e2673
DS-889: Update block name + loop
Nov 25, 2022
a754dc5
DS-889: Tab names + loop
Nov 25, 2022
3aa582a
DS-889: Remove inline style
Nov 25, 2022
969549c
DS-889: Add select option to the animation tab
Nov 25, 2022
106ff04
DS-889: Revert commented code
Nov 25, 2022
dd600fe
DS-889: Update CSS
Nov 25, 2022
44b867e
DS-889: Update CSS
Nov 25, 2022
e714a04
DS-889: Update animation tab
Nov 25, 2022
4831f5c
DS-889: Update animation tab
Nov 25, 2022
1e4078a
DS-889: Update overrides tab
Nov 25, 2022
fad0a96
DS-889: Update CSS
Nov 28, 2022
2081496
DS-889: Update animation tab
Nov 28, 2022
dbb5385
DS-889: indentation
Nov 29, 2022
3b715b8
Merge branch 'master' of https://github.com/boltdesignsystem/bolt int…
Nov 29, 2022
c1e2b42
DS-889: Remove type in the animation tab
Nov 30, 2022
51ce781
DS-889: Remove animation tab from specific pragraph examples
Nov 30, 2022
37969ce
DS-889: Fix the typo in the doc page name
Nov 30, 2022
83e440f
DS-889: Add advanced paragraph doc + renumber all doc pages
Dec 1, 2022
8ba35b5
DS-889: Change the patternlab tab name
Dec 1, 2022
fbff2ca
DS-889: Add new tabs
Dec 1, 2022
eeb799d
DS-889: Add tabs to advanced text-paragraph
Dec 1, 2022
4bdb2f5
DS-899: toggle admin ui folder
Dec 1, 2022
ccec9af
DS-899: update toggling
Dec 1, 2022
a3249f5
DS-899: update hiding folders
Dec 1, 2022
945384b
Merge branch 'master' of https://github.com/boltdesignsystem/bolt int…
Dec 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs-site/src/index.scss
View file
Open in desktop
Expand Up @@ -25,4 +25,5 @@
@import './pages/pattern-lab/_patterns/50-pages/75-optimized-campaign-landing/oclp';
@import './pages/pattern-lab/_patterns/50-pages/80-portal/portal';
@import './pages/pattern-lab/_patterns/50-pages/99999-bolt-dev-sandbox/styles/index';
@import './pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index';
@import './pages/pattern-lab/_patterns/999-archive/academy/index';
55 changes: 55 additions & 0 deletions ...ite/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig
View file
Open in desktop
@@ -0,0 +1,55 @@
{% extends "_drupal-admin-ui-template.twig" %}

{% block ui_component_name %}
Text Paragraph
{% endblock %}

{% block description %}
Text is for writing multiple headlines or text paragraphs, however, there is no support for advanced icon and link options.
{% endblock %}

{% block main %}
{% embed '_main-content.twig' %}
{% block settings %}
<legend>Text</legend>
<div>
<label>
<div><strong><small>Content</small></strong></div>
<div>
<textarea cols="30" rows="5" placeholder="Enter content."></textarea>
</div>
</label>
<div class="c-drupal-admin-ui__grid" style="align-items: center;">
<label>
<select name="format">
<option value="rich-text">Rich text (CKEditor)</option>
<option value="plain-text">Plain text</option>
<option value="raw-html">Raw HTML</option>
</select>
</label>
<small style="text-align: right;">
About text format <i><svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg></i>
</small>
</div>
</div>
{% endblock %}
{% endembed %}
{% endblock %}

{% block code_snippet %}
<h1 class="e-bolt-text e-bolt-text--headline e-bolt-text--xxxlarge">H1 and xxxlarge headline</h1>
<h2 class="e-bolt-text e-bolt-text--headline e-bolt-text--xxlarge">H2 and xxlarge headline</h2>
<h3 class="e-bolt-text e-bolt-text--headline e-bolt-text--xlarge">H3 and xlarge headline</h3>
<h4 class="e-bolt-text e-bolt-text--headline e-bolt-text--large">H4 and large headline</h4>
<h5 class="e-bolt-text e-bolt-text--headline e-bolt-text--small">H5 and small headline</h5>
<h6 class="e-bolt-text e-bolt-text--headline e-bolt-text--xsmall">H6 and xsmall headline</h6>
<p>Paragraph.</p>
{% endblock %}

{% block dev_notes %}
<ol>
<li>Plain Text format: escape all special characters, print as exactly typed.</li>
<li>Overrides maps up to utility classes, these classes will either go on the svg element or the span element with the shape classes (if a shape is chosen).</li>
<li>Raw HTML format: print HTML.</li>
</ol>
{% endblock %}
124 changes: 124 additions & 0 deletions ...ages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig
View file
Open in desktop
@@ -0,0 +1,124 @@
{% extends "_drupal-admin-ui-template.twig" %}

{% block ui_component_name %}
Advanced Text Paragraph
{% endblock %}

{% block description %}
Advanced Text is specialized paragraph for creating single headline or text paragraph. It serves the purpose of layout building rather than long form writing. It does not support multiple paragraphs and general content like lists, table, and codeblock.
{% endblock %}

{% block main %}
{% embed '_main-content.twig' %}
{% block settings %}
<legend>Advanced Text</legend>
<ul>
<li>
<label>
<div><strong><small>Content</small></strong></div>
<div>
<textarea cols="30" rows="5" placeholder="Enter content."></textarea>
</div>
</label>
<div class="c-drupal-admin-ui__grid" style="align-items: center;">
<label>
<select name="format">
<option value="rich-text">Rich text (CKEditor)</option>
<option value="plain-text">Plain text</option>
<option value="raw-html">Raw HTML</option>
</select>
</label>
<small style="text-align: right;">
About text format <i><svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg></i>
</small>
</div>
</li>
<li>
<div class="c-drupal-admin-ui__grid">
<div>
<label>
<div><strong><small>Hierarchy</small></strong></div>
<select name="size">
<option value="Body" selected>Body</option>
<option value="Headline">Headline</option>
<option value="Subheadline">Subheadline</option>
<option value="Eyebrow">Eyebrow</option>
</select>
</label>
</div>
<div>
<label>
<div><strong><small>Size</small></strong></div>
<select name="size">
<option value="xxsmall">xxsmall</option>
<option value="xsmall">xsmall</option>
<option value="small">small</option>
<option value="medium" selected>medium</option>
<option value="large">large</option>
<option value="xlarge">xlarge</option>
<option value="xxlarge">xxlarge</option>
<option value="xxxlarge">xxxlarge</option>
</select>
</label>
</div>
<div>
<label>
<div><strong><small>Tag</small></strong></div>
<select name="tag">
<option value="div" selected>div</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</label>
</div>
</div>
</li>
</ul>
{% embed '_tabs-set.twig' %}
{% block tabs %}
{% include '_tab-action-advanced-paragraph.twig'%}
{% include '_tab-icon-before-advanced-paragraph.twig'%}
{% include '_tab-icon-after-advanced-paragraph.twig'%}
{% include '_tab-overrides.twig' %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% endblock %}

{% block code_snippet %}
<h1 class="e-bolt-text e-bolt-text--headline e-bolt-text--xxxlarge u-bolt-text-align-center">
Content goes here
</h1>
{% endblock %}

{% block dev_notes %}
<ol>
<li>
Rich Text (CKEditor) format provides limited options:
<ul>
<li>
align
<ul>
<li>left (add <code>u-bolt-text-align-left</code> class to container)</li>
<li>center (add <code>u-bolt-text-align-center</code> class to container)</li>
<li>right (add <code>u-bolt-text-align-right</code> class to container)</li>
</ul>
</li>
<li>italic (wrap <code>&lt;em&gt;</code> around selected text)</li>
<li>bold (wrap <code>&lt;strong&gt;</code> around selected text)</li>
<li>superscript (wrap <code>&lt;sup&gt;</code> around selected text)</li>
<li>subscript (wrap <code>&lt;sub&gt;</code> around selected text)</li>
<li>quote (wrap <code>&lt;q&gt;</code> around selected text)</li>
<li>inline code (wrap <code>&lt;code&gt;</code> around selected text)</li>
</ul>
</li>
<li>Plain Text format: escape all special characters, print as exactly typed.</li>
<li>Raw HTML format: print HTML.</li>
<li>If <code>eyebrow</code> is selected for Hierarchy, disable Size select input, because Eyebrow only has one size.</li>
</ol>
{% endblock %}
109 changes: 109 additions & 0 deletions ...ite/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-icon-paragraph.twig
View file
Open in desktop
@@ -0,0 +1,109 @@
{% extends "_drupal-admin-ui-template.twig" %}

{% block ui_component_name %}
Icon Paragraph
{% endblock %}

{% block description %}
Icon paragraph can be stand-alone content and nested within other paragraphs that requires icons such as Button, Text Link, Action Blocks, etc.
{% endblock %}

{% block main %}
{% embed '_main-content.twig' %}
{% block settings %}
<legend>Icon</legend>
<ul>
<li>
<div><strong><small>Choose an icon from the library</small></strong></div>
<div>
<button>Select icon</button>
<button>Use custom icon</button>
</div>
</li>
<li>
<ul>
<li>
<div class="c-drupal-admin-ui__grid">
<div>
<label>
<div><strong><small>Icon Size</small></strong></div>
<select name="size">
<option value="none">Inherit from text size</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Xlarge">Xlarge</option>
</select>
</label>
</div>
<div>
<label>
<div><strong><small>Icon Color</small></strong></div>
<select name="gutter">
<option value="none">Inherit from text color</option>
<option value="Teal">Teal</option>
<option value="Navy">Navy</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
<option value="Pink">Pink</option>
<option value="Berry">Berry</option>
<option value="Wine">Wine</option>
<option value="Violet">Violet</option>
</select>
</label>
</div>
</div>
</li>
</ul>
</li>
</ul>
{% embed '_tabs-set.twig' %}
{% block tabs %}
{% include '_tab-shape.twig' %}
{% include '_tab-overrides.twig' %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '_main-content.twig' %}
{% block settings_title %}
<h3>Custom icon workflow</h3>
{% endblock %}
{% block settings %}
<legend>Icon</legend>
<ul>
<li>
<div><strong><small>Choose an icon from the library</small></strong> (<a href="#!"><small>remove custom icon</small></a>)</div>
<div>
<label>
<textarea cols="30" rows="4" placeholder="Enter SVG code"></textarea>
</label>
</div>
<div class="c-drupal-admin-ui__info">
<div indented><i><svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg></i> Note: follow the instructions on <a href="https://boltdesignsystem.com/pattern-lab/?p=elements-icon-use-case-custom-svg">saving custom SVG icons</a>.</div>
</div>
</li>
<li>...</li>
</ul>
{% endblock %}
{% endembed %}
{% endblock %}

{% block code_snippet %}
<svg class="e-bolt-icon">...</svg>

<span class="e-bolt-shape">
<span class="e-bolt-shape__content">
<svg class="e-bolt-icon">...</svg>
</span>
</span>
{% endblock %}

{% block dev_notes %}
<ol>
<li>Clicking "Select icon" will bring up the icon library for user to select a specific icon.</li>
<li>Clicking "Use custom icon" will bring up an extra textarea input for raw SVG code. Appropriate icon and shape classes will be added to this custom code in the back-end.</li>
<li>Overrides maps up to utility classes, these classes will either go on the svg element or the span element with the shape classes (if a shape is chosen).</li>
<li>In the Custom Icon Workflow, clicking "remove custom icon" will bring back the view with 2 buttons ("select icon" and "use custom icon").</li>
</ol>
{% endblock %}
100 changes: 100 additions & 0 deletions ...te/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-image-paragraph.twig
View file
Open in desktop
@@ -0,0 +1,100 @@
{% extends "_drupal-admin-ui-template.twig" %}

{% block ui_component_name %}
Image paragraph
{% endblock %}

{% block description %}
Image paragraph can be stand-alone content and nested within other paragraphs that requires images.
{% endblock %}

{% block main %}
{% embed '_main-content.twig' %}
{% block settings %}
<legend>Image</legend>
<ul>
<li>
<button>Select an image</button>
</li>
<li>
<div>
<label>
<div><strong><small>Image size</small></strong></div>
<select name="image-size">
<option value="Source">Source</option>
<option value="Stretch">Stretch</option>
<option value="Custom">Custom</option>
</select>
</label>
</div>
</li>
</ul>
{% embed 'tabs/_tabs-set.twig' %}
{% block tabs %}
{% include 'tabs/_tab-modal.twig' %}
{% include 'tabs/_tab-overrides.twig' %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '_main-content.twig' %}
{% block settings_title %}
<h3>Custom image workflow</h3>
{% endblock %}
{% block settings %}
<legend>Image</legend>
<ul>
<li>
<button>Select an image</button>
</li>
<li>
<div><strong><small>Image size</small></strong></div>
<label>
<select name="image-size">
<option value="Source">Source</option>
<option value="Stretch">Stretch</option>
<option value="Custom" selected>Custom</option>
</select>
</label>
<label>
<input type="text" placeholder="eg. 320px">
</label>
</li>
<li>
<div class="c-drupal-admin-ui__info">
<div indented>
<p><i><svg viewBox="0 0 512 512" width="100" title="info-circle"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" /></svg></i> Note: the pixel value will be set as the max-wdith for the responsive image to display at.</p>
<div><strong>Legacy sizes</strong></div>
<ol>
<li>80px (small)</li>
<li>150px (medium)</li>
<li>250px (large)</li>
<li>550px (xlarge)</li>
<li>170px (ABM headshot)</li>
<li>400px</li>
</ol>
</div>
</idivnfo>
</li>
</ul>
...
{% endblock %}
{% endembed %}
{% endblock %}

{% block code_snippet %}
<img src="image.jpg" class="e-bolt-image" width=500 height=500>

<figure>
<img src="image.jpg" class="e-bolt-image" width=500 height=500>
<figcaption>...</figcaption>
</figure>
{% endblock %}

{% block dev_notes %}
<ol>
<li>Source image size will set the <code>width</code> and <code>height</code> attributes according to the source file's dimentions.</li>
<li>Stretch image size will set the <code>fill</code> prop on the image element to <code>true</code>.</li>
<li>If custom image size is set, it would override the <code>width</code> attribute, the value for <code>height</code> attribute would need to be updated programatically.</li>
</ol>
{% endblock %}