From e931e14e47890ebbd26f74f0cc3a377dab447db1 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Tue, 22 Nov 2022 15:25:15 +0100 Subject: [PATCH 01/35] DS-889: TEmplates --- .../_drupal-admin-ui-template.twig | 24 +++++++++++++++++++ .../_main-content.twig | 18 ++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig new file mode 100644 index 0000000000..e15ba72a25 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig @@ -0,0 +1,24 @@ +
+ {% if block('ui_component_name') is not empty %} +

+ {% block ui_component_name %}{% endblock %} +

+ {% endif %} + {% if block('description') is not empty %} +

+ {% block description %}{% endblock %} +

+ {% endif %} + + {% block main %}{% endblock %} + + {% if block('code_snippet') is not empty %} +

Output markup

+
+ 
{% block code_snippet %}{% endblock %}
+
+ {% endif %} + + {% block dev_notes %}{% endblock %} +
+ diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig new file mode 100644 index 0000000000..9cea7a8aed --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig @@ -0,0 +1,18 @@ +{% block ui_component_info %}{% endblock %} +{% if block('ui_component_info') is not empty %} +
+{% endif %} +{% block ui_component_showcase %}{% endblock %} +{% if block('ui_component_showcase') is not empty %} +
+{% endif %} +{% block settings_title %}{% endblock %} +
+
+ {% block fieldset_inner %}{% endblock %} +
+

+ + +

+
From 4cfe1502c4738f90b7980f173639962001760114 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Tue, 22 Nov 2022 15:25:59 +0100 Subject: [PATCH 02/35] DS-889: Tabs includings --- .../tabs/_tab-action.twig | 35 +++++++ .../tabs/_tab-animation.twig | 56 ++++++++++++ .../tabs/_tab-icon-only.twig | 17 ++++ .../tabs/_tab-modal.twig | 31 +++++++ .../tabs/_tab-overrides.twig | 91 +++++++++++++++++++ .../tabs/_tab-shape.twig | 41 +++++++++ .../tabs/_tab-visual.twig | 35 +++++++ .../tabs/_tabs-set.twig | 3 + 8 files changed, 309 insertions(+) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action.twig new file mode 100644 index 0000000000..5bdd58b8ef --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action.twig @@ -0,0 +1,35 @@ +
+
    +
  • +
      +
    • +
      Action Type
      +
      + +
      +
      + +
      +
      + +
      +
      +
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      • +
    +
    • +
+
+Action diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig new file mode 100644 index 0000000000..d594f0d3e6 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -0,0 +1,56 @@ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+Animation diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig new file mode 100644 index 0000000000..6763e181ff --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig @@ -0,0 +1,17 @@ +
+ +
+ Note: icon options are not available within buttons and Icon Only will override Icon Before and Icon After. +
+ +
    +
  • +
    Choose an icon from the library
    +
    + + +
    +
    • +
+
+Icon Only diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig new file mode 100644 index 0000000000..860a5568a3 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig @@ -0,0 +1,31 @@ + +Modal diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig new file mode 100644 index 0000000000..d0aab3002b --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig @@ -0,0 +1,91 @@ +
+
    +
  • +

    Spacing Overrides

    + + + + + + +
    • +
  • +

    Additional Attributes

    + +
    + Note: HTML and aria attributes are allowed. +
    +     + +
    + +
    +
    + +
    +     +

    + + Add another attribute +

    +
    • +
+
+Overrides diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig new file mode 100644 index 0000000000..38cceb076d --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig @@ -0,0 +1,41 @@ +
+ +
Note: color theme handles both icon and shape colors, icon color will be ignored when shape color theme is used.
+ + +
+ +
+
+ +
+ +
+ Shape diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig new file mode 100644 index 0000000000..c7235b71df --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig @@ -0,0 +1,35 @@ +
+ +
+ +
+
+ +
+
+ +
+ +
+Visual diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig new file mode 100644 index 0000000000..3aa5021e1f --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig @@ -0,0 +1,3 @@ + + {% block tabs %}{% endblock %} + From a12540694aa3d5010087d5df0afa51228234a1b6 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Tue, 22 Nov 2022 15:26:17 +0100 Subject: [PATCH 03/35] DS-889: ui docs --- .../00-icon-paragraph.twig | 113 ++++++++++++++ .../05-image-paragraph.twig | 104 +++++++++++++ .../10-button-paragraph.twig | 141 ++++++++++++++++++ .../15-blockquote-paragraph.twig | 75 ++++++++++ 4 files changed, 433 insertions(+) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig new file mode 100644 index 0000000000..dacbcd0f82 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig @@ -0,0 +1,113 @@ +{% 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 fieldset_inner %} + Icon +
    +
  • +
    Choose an icon from the library
    +
    + + +
    +
    • +
  • +
      +
    • + +
      + +
      +
      + +
      +       +
      • +
    +
    • +
+ {% embed 'tabs/_tabs-set.twig' %} + {% block tabs %} + {% include 'tabs/_tab-shape.twig' %} + {% include 'tabs/_tab-animation.twig' %} + {% include 'tabs/_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + {% endembed %} + {% embed '_main-content.twig' %} + {% block settings_title %} +

Custom icon workflow

+ {% endblock %} + {% block fieldset_inner %} + Icon + + {% endblock %} + {% endembed %} +{% endblock %} + +{% block code_snippet %} +... + + + + ... + + +{% endblock %} + +{% block dev_notes %} + +

Dev Notes

+
    +
  1. Clicking "Select icon" will bring up the icon library for user to select a specific icon.
    2. +
  2. 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.
    3. +
  3. 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).
    4. +
  4. In the Custom Icon Workflow, clicking "remove custom icon" will bring back the view with 2 buttons ("select icon" and "use custom icon").
    5. +
+ +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig new file mode 100644 index 0000000000..2e8a1b8ce5 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig @@ -0,0 +1,104 @@ +{% 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 fieldset_inner %} + Image +
    +
  • + +
    • +
  • +
    + +
    +
    • +
+ {% embed 'tabs/_tabs-set.twig' %} + {% block tabs %} + {% include 'tabs/_tab-modal.twig' %} + {% include 'tabs/_tab-animation.twig' %} + {% include 'tabs/_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + {% endembed %} + {% embed '_main-content.twig' %} + {% block settings_title %} +

Custom image workflow

+ {% endblock %} + {% block fieldset_inner %} + Image +
    +
  • + +
    • +
  • +
    Image size
    + + +
    • +
  • + +
    +

    Note: the pixel value will be set as the max-wdith for the responsive image to display at.

    +
    Legacy sizes
    +
      +
    1. 80px (small)
      2. +
    2. 150px (medium)
      3. +
    3. 250px (large)
      4. +
    4. 550px (xlarge)
      5. +
    5. 170px (ABM headshot)
      6. +
    6. 400px
      7. +
    +
    +     +
    • +
+ ... + {% endblock %} + {% endembed %} +{% endblock %} + +{% block code_snippet %} + + +
+ +
...
+
+{% endblock %} + +{% block dev_notes %} + +

Dev Notes

+
    +
  1. Source image size will set the width and height attributes according to the source file's dimentions.
    2. +
  2. Stretch image size will set the fill prop on the image element to true.
    3. +
  3. If custom image size is set, it would override the width attribute, the value for height attribute would need to be updated programatically.
    4. +
+ +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig new file mode 100644 index 0000000000..8e70f84175 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig @@ -0,0 +1,141 @@ +{% extends "_drupal-admin-ui-template.twig" %} + +{% block ui_component_name %} + Button Paragraph +{% endblock %} + +{% block description %} + The button paragraph combines the list component and the button element. +{% endblock %} + +{% block main %} + {% embed '_main-content.twig' %} + {% block fieldset_inner %} + Button(s) +
+ Display Options + +
+ +
+
+ +
+
+ +
+ +
+
+ Button 1 +
    +
  • + +
    • +
  • + +
    • +
  • + +
    + +
    +
    + +
    +
    + +
    +     +
    • +
+ {% embed 'tabs/_tabs-set.twig' %} + {% block tabs %} + {% include 'tabs/_tab-action.twig' %} + {% include 'tabs/_tab-icon-only.twig' %} + {% include 'tabs/_tab-animation.twig' %} + {% include 'tabs/_tab-overrides.twig' %} + {% endblock %} + {% endembed %} +
+

+ +

+ {% endblock %} + {% endembed %} +{% endblock %} + +{% block code_snippet %} + + + + + +{% endblock %} + +{% block dev_notes %} + +

Dev Notes

+
    +
  1. Regardless of how many buttons are created, always render a list. This removes the need to have two paragraphs (button and button group).
    2. +
  2. List Options section should be a conditional based on how many buttons are created. It does not appear if only 1 button is created.
    3. +
+ +{% endblock %} + diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig new file mode 100644 index 0000000000..999aaa50ce --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig @@ -0,0 +1,75 @@ +{% extends "_drupal-admin-ui-template.twig" %} + +{% block ui_component_name %} + Blockquote Paragraph +{% endblock %} + +{% block description %} + Blockquote is a sub-layout paragraph. +{% endblock %} + +{% block main %} + {% embed '_main-content.twig' %} + + {% block ui_component_info %} +

1. Blockquote can be added to any layout items.

+ {% endblock %} + + {% block ui_component_showcase %} +

2. After adding Blockquote to a layout item. Render the blockquote as you do for other types of content.

+

Blockquote (edit)

+
+

Simplicity is the ultimate sophistication.

+ —Someone smart +
+ {% endblock %} + + {% block settings_title %} +

3. Editing the Blockquote will bring up these options in a modal.

+ {% endblock %} + + {% block fieldset_inner %} + Blockquote +
    +
  • +
    + +
    +
    • +
  • + +
    + +
    +
    + +
    +
    + +
    +     +
    • +
+ {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-visual.twig' %} + {% include '_tab-animation.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + + {% endembed %} +{% endblock %} From 718b588a16423a94e441005c33eebb3290d6104b Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 14:05:19 +0100 Subject: [PATCH 04/35] DS-889: Update template --- .../_drupal-admin-ui-template.twig | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig index e15ba72a25..20b87695be 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_drupal-admin-ui-template.twig @@ -10,15 +10,22 @@

{% endif %} - {% block main %}{% endblock %} + {% block main %} + {# Here goes the main content #} + {% endblock %} - {% if block('code_snippet') is not empty %} + {% if block('code_snippet') is not empty %}

Output markup

{% block code_snippet %}{% endblock %}
{% endif %} - {% block dev_notes %}{% endblock %} + {% if block('dev_notes') is not empty %} + +

Dev Notes

+ {% block dev_notes %}{% endblock %} + + {% endif %} From ef4c54d5c8101b79830260483a5ea0db67bfb2f6 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 14:05:44 +0100 Subject: [PATCH 05/35] DS-889: Create new tabs --- .../tabs/_tab-avatar.twig | 6 + .../tabs/_tab-icon-after.twig | 17 ++ .../tabs/_tab-icon-before.twig | 17 ++ .../tabs/_tab-item-alignment.twig | 27 +++ .../tabs/_tab-item-options-accordion.twig | 73 +++++++++ .../tabs/_tab-item-options-tabs.twig | 59 +++++++ .../tabs/_tab-item-options.twig | 155 ++++++++++++++++++ .../tabs/_tab-logo.twig | 6 + .../tabs/_tab-spacing.twig | 24 +++ .../tabs/_tab-visual-accordion.twig | 36 ++++ .../tabs/_tab-visual-tabs.twig | 50 ++++++ 11 files changed, 470 insertions(+) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-avatar.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-alignment.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-logo.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-spacing.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-tabs.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-avatar.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-avatar.twig new file mode 100644 index 0000000000..d08abc416b --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-avatar.twig @@ -0,0 +1,6 @@ +
+

+ +

+
+Avatar diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig new file mode 100644 index 0000000000..69183eb9ed --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig @@ -0,0 +1,17 @@ +
+ +
+ Note: icon options are not available within buttons. +
+ +
    +
  • +
    Choose an icon from the library
    +
    + + +
    +
    • +
+
+Icon After diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig new file mode 100644 index 0000000000..31043616f1 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig @@ -0,0 +1,17 @@ +
+ +
+ Note: icon options are not available within buttons. +
+ +
    +
  • +
    Choose an icon from the library
    +
    + + +
    +
    • +
+
+Icon Before diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-alignment.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-alignment.twig new file mode 100644 index 0000000000..f84287ca21 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-alignment.twig @@ -0,0 +1,27 @@ +
+
    +
  • + +
    • +
  • + +
    • +
+
+Item alignment diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig new file mode 100644 index 0000000000..92500c0d79 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig @@ -0,0 +1,73 @@ +
+ +
+ Note: if Allow only 1 item to be expanded at once is checked, only 1 item will be expanded on page load. Do not check multiple items to expand on page load in such scenario. +
+ +

Overall Options

+
    +
  • + +
    • +
+

Individual Options

+
    +
  • +
    + Item 1 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
  • +
    + Item 2 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
  • +
    + Item 3 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
+
+Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig new file mode 100644 index 0000000000..be68dcd088 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig @@ -0,0 +1,59 @@ +
+
    +
  • +
    + Item 1 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
  • +
    + Item 2 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
  • +
    + Item 3 +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    • +
+
+Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig new file mode 100644 index 0000000000..cd585e97ee --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig @@ -0,0 +1,155 @@ +
+
    +
  • +
    + Item 1 +
      +
    • +
        +
      • + +
        • +
      • +
        Action Type
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        • +
      • +
        Choose an icon from the library
        +
        + + +
        +
        • +
      +
      • +
    +
    +
    • +
  • +
    + Item 2 +
      +
    • +
        +
      • + +
        • +
      • +
        Action Type
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        • +
      • +
        Choose an icon from the library
        +
        + + +
        +
        • +
      +
      • +
    +
    +
    • +
  • +
    + Item 3 +
      +
    • +
        +
      • + +
        • +
      • +
        Action Type
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        + +
        + +
        +
        +
        + +
        + +
        +
        +
        • +
      • +
        Choose an icon from the library
        +
        + + +
        +
        • +
      +
      • +
    +
    +
    • +
+
+Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-logo.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-logo.twig new file mode 100644 index 0000000000..7264731c3e --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-logo.twig @@ -0,0 +1,6 @@ + +Logo diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-spacing.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-spacing.twig new file mode 100644 index 0000000000..028d1ab83d --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-spacing.twig @@ -0,0 +1,24 @@ +
+
    +
  • + +
    • +
  • + +
    • +
+
+Spacing diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig new file mode 100644 index 0000000000..a0bf8dd577 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig @@ -0,0 +1,36 @@ +
+
    +
  • + + + + +
    • +
  • + +
    • +
  • + +
    • +
+
+ Visual diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-tabs.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-tabs.twig new file mode 100644 index 0000000000..ef6a2d9184 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-tabs.twig @@ -0,0 +1,50 @@ +
+ +
+ Note: Inset spacing adds consistent spacing on all 4 sides of an item; disabling it adds consistent spacing only in-between items. When set to auto, there is inset spacing around labels and no inset spacing around panels. See Tabs documentation. +
+ +
    +
  • + + + + + + +
    • +
+
+Visual From 53fb0b4feb100434b7ba8c566f3a2b4114a5a8be Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 14:06:14 +0100 Subject: [PATCH 06/35] DS-889: Create new docs + update numbering --- .../00-text-paragraph.twig | 55 ++++++++ ...-paragraph.twig => 05-icon-paragraph.twig} | 15 +-- ...paragraph.twig => 10-image-paragraph.twig} | 13 +- ...aragraph.twig => 15-button-paragraph.twig} | 13 +- ...raph.twig => 20-blockquote-paragraph.twig} | 2 + .../25-list-paragraph.twig | 80 +++++++++++ .../30-action-blocks-paragraph.twig | 126 +++++++++++++++++ .../35-tabs-and-accrodion-paragraph.twig | 127 ++++++++++++++++++ 8 files changed, 407 insertions(+), 24 deletions(-) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{00-icon-paragraph.twig => 05-icon-paragraph.twig} (85%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{05-image-paragraph.twig => 10-image-paragraph.twig} (86%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{10-button-paragraph.twig => 15-button-paragraph.twig} (91%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{15-blockquote-paragraph.twig => 20-blockquote-paragraph.twig} (96%) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig new file mode 100644 index 0000000000..3589a6f241 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig @@ -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 fieldset_inner %} + Text +
+ + + + + About text format + + +
+ {% endblock %} + {% endembed %} +{% endblock %} + +{% block code_snippet %} +

H1 and xxxlarge headline

+

H2 and xxlarge headline

+

H3 and xlarge headline

+

H4 and large headline

+
H5 and small headline
+
H6 and xsmall headline
+

Paragraph.

+{% endblock %} + +{% block dev_notes %} +
    +
  1. Plain Text format: escape all special characters, print as exactly typed.
    2. +
  2. 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).
    3. +
  3. Raw HTML format: print HTML.
    4. +
+{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig similarity index 85% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig index dacbcd0f82..aa73aff85c 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-icon-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig @@ -101,13 +101,10 @@ {% endblock %} {% block dev_notes %} - -

Dev Notes

-
    -
  1. Clicking "Select icon" will bring up the icon library for user to select a specific icon.
    2. -
  2. 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.
    3. -
  3. 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).
    4. -
  4. In the Custom Icon Workflow, clicking "remove custom icon" will bring back the view with 2 buttons ("select icon" and "use custom icon").
    5. -
- +
    +
  1. Clicking "Select icon" will bring up the icon library for user to select a specific icon.
    2. +
  2. 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.
    3. +
  3. 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).
    4. +
  4. In the Custom Icon Workflow, clicking "remove custom icon" will bring back the view with 2 buttons ("select icon" and "use custom icon").
    5. +
{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig similarity index 86% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig index 2e8a1b8ce5..cbe8377de5 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-image-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig @@ -93,12 +93,9 @@ {% endblock %} {% block dev_notes %} - -

Dev Notes

-
    -
  1. Source image size will set the width and height attributes according to the source file's dimentions.
    2. -
  2. Stretch image size will set the fill prop on the image element to true.
    3. -
  3. If custom image size is set, it would override the width attribute, the value for height attribute would need to be updated programatically.
    4. -
- +
    +
  1. Source image size will set the width and height attributes according to the source file's dimentions.
    2. +
  2. Stretch image size will set the fill prop on the image element to true.
    3. +
  3. If custom image size is set, it would override the width attribute, the value for height attribute would need to be updated programatically.
    4. +
{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig similarity index 91% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig index 8e70f84175..f680ab764b 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-button-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig @@ -108,6 +108,8 @@ {% embed 'tabs/_tabs-set.twig' %} {% block tabs %} {% include 'tabs/_tab-action.twig' %} + {% include 'tabs/_tab-icon-before.twig' %} + {% include 'tabs/_tab-icon-after.twig' %} {% include 'tabs/_tab-icon-only.twig' %} {% include 'tabs/_tab-animation.twig' %} {% include 'tabs/_tab-overrides.twig' %} @@ -130,12 +132,9 @@ {% endblock %} {% block dev_notes %} - -

Dev Notes

-
    -
  1. Regardless of how many buttons are created, always render a list. This removes the need to have two paragraphs (button and button group).
    2. -
  2. List Options section should be a conditional based on how many buttons are created. It does not appear if only 1 button is created.
    3. -
- +
    +
  1. Regardless of how many buttons are created, always render a list. This removes the need to have two paragraphs (button and button group).
    2. +
  2. List Options section should be a conditional based on how many buttons are created. It does not appear if only 1 button is created.
    3. +
{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig similarity index 96% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig index 999aaa50ce..a25d9d0f3f 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-blockquote-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig @@ -65,6 +65,8 @@ {% embed '_tabs-set.twig' %} {% block tabs %} {% include '_tab-visual.twig' %} + {% include '_tab-avatar.twig' %} + {% include '_tab-logo.twig' %} {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig new file mode 100644 index 0000000000..127eaa768c --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig @@ -0,0 +1,80 @@ +{% extends "_drupal-admin-ui-template.twig" %} + +{% block ui_component_name %} + List Paragraph +{% endblock %} + +{% block description %} + The list paragraph is a sub-layout paragraph. It acts similarly to Layout but can be only added on a Layout Item level rather than on the blank canvas level. +{% endblock %} + +{% block main %} + {% embed '_main-content.twig' %} + + {% block ui_component_info %} +

1. List will be similar to a nested Layout.

+ {% endblock %} + + {% block ui_component_showcase %} +

2. After adding a list to a layout, placeholder spaces will be reserved for each list item. User can add other paragraphs inside each item.

+

List (edit)

+ + + + + + {% endblock %} + + {% block settings_title %} +

3. Editing the list will bring up these options in a modal.

+ {% endblock %} + + {% block fieldset_inner %} + List Options +
    +
  • + +
    + +
    +
    + +
    +     +
    • +
+ {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-spacing.twig' %} + {% include '_tab-item-alignment.twig' %} + {% include '_tab-animation.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + + {% endembed %} +{% endblock %} + +{% block code_snippet %} + + + ... + + +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig new file mode 100644 index 0000000000..458a99efc4 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig @@ -0,0 +1,126 @@ +{% extends "_drupal-admin-ui-template.twig" %} + +{% block ui_component_name %} + Action Blocks Paragraph +{% endblock %} + +{% block description %} + Action Blocks is a sub-layout paragraph. +{% endblock %} + +{% block main %} + {% embed '_main-content.twig' %} + + {% block ui_component_info %} +

1. Action Blocks can be added to any layout items.

+ {% endblock %} + + {% block ui_component_showcase %} +

2. After adding Action Blocks to a layout item. Render the action blocks as you do for other types of content.

+

Action Blocks (edit)

+ + + + + +

Item 1

+ + + + + +

Item 2

+ + + + + +

Item 3

+ + + {% endblock %} + + {% block settings_title %} +

3. Editing the Action Blocks will bring up these options in a modal.

+ {% endblock %} + + {% block fieldset_inner %} + Action Blocks +
    +
  • + +
    + +
    +
    + +
    +     +
    • +
  • + +
    + +
    +
    + +
    +     +
    • +
+ {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-item-options.twig' %} + {% include '_tab-animation.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + + {% endembed %} +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig new file mode 100644 index 0000000000..7a28eda819 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig @@ -0,0 +1,127 @@ +{% extends "_drupal-admin-ui-template.twig" %} + +{% block ui_component_name %} + Tabs/Accordion Paragraph +{% endblock %} + +{% block description %} + The tabs/accordion paragraph is a sub-layout paragraph. It acts similarly to Layout but can be only added on a Layout Item level rather than on the blank canvas level. +{% endblock %} + +{% block main %} + {% embed '_main-content.twig' %} + + {% block ui_component_info %} +

1. Tabs/accordion be added to any layout items.

+ {% endblock %} + + {% block ui_component_showcase %} +

2. After adding a tabs/accordion to a layout item. The plus icon button in each tabs/accordion item adds content, the same workflow as in layout items.

+

Tabs/Accordion (edit)

+ +
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+ + {% endblock %} + + {% block settings_title %} +

3. Editing the tabs/accordion will bring up these options in a modal.

+ {% endblock %} + + {% block fieldset_inner %} + Tabs/Accordion Options +
    +
  • + + + + +
    • +
+ {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-visual-accordion.twig' %} + {% include '_tab-item-options-accordion.twig' %} + {% include '_tab-animation.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + + {% endembed %} + + {% embed '_main-content.twig' %} + {% block fieldset_inner %} + Tabs/Accordion Options +
    +
  • + + + + +
    • +
+ {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-visual-tabs.twig' %} + {% include '_tab-item-options-tabs.twig' %} + {% include '_tab-animation.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + + {% endembed %} +{% endblock %} From 4f39666b814474a1d175bf09d813095129155923 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 15:23:33 +0100 Subject: [PATCH 07/35] DS-889: Replace custom tags --- .../00-text-paragraph.twig | 4 ++-- .../05-icon-paragraph.twig | 8 ++++---- .../10-image-paragraph.twig | 4 ++-- .../15-button-paragraph.twig | 8 ++++---- .../20-blockquote-paragraph.twig | 4 ++-- .../25-list-paragraph.twig | 4 ++-- .../30-action-blocks-paragraph.twig | 12 ++++++------ .../35-tabs-and-accrodion-paragraph.twig | 12 ++++++------ .../tabs/_tab-animation.twig | 4 ++-- .../tabs/_tab-overrides.twig | 8 ++++---- .../tabs/_tab-shape.twig | 4 ++-- .../tabs/_tab-visual-accordion.twig | 4 ++-- .../tabs/_tab-visual-tabs.twig | 4 ++-- .../tabs/_tab-visual.twig | 4 ++-- .../tabs/_tabs-set.twig | 4 ++-- 15 files changed, 44 insertions(+), 44 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig index 3589a6f241..585a1aa513 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/00-text-paragraph.twig @@ -19,7 +19,7 @@ - +
- + @@ -80,9 +80,9 @@ - +
Note: follow the instructions on saving custom SVG icons.
- +
  • ...
    • diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig index cbe8377de5..e0242302b5 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig @@ -62,7 +62,7 @@
  • - +

    Note: the pixel value will be set as the max-wdith for the responsive image to display at.

    Legacy sizes
    @@ -75,7 +75,7 @@
  • 400px
    • -     + ... diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig index f680ab764b..8844e00a84 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig @@ -14,7 +14,7 @@ Button(s)
    Display Options - +
    - +
    Button 1 @@ -69,7 +69,7 @@
  • - +
    - +
    • {% embed 'tabs/_tabs-set.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig index a25d9d0f3f..e5e1751d18 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig @@ -40,7 +40,7 @@
  • - +
    - +
    • {% embed '_tabs-set.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig index 127eaa768c..f5b9a90f88 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig @@ -33,7 +33,7 @@ List Options
    • - +
      - +
    {% embed '_tabs-set.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig index 458a99efc4..bf548da385 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig @@ -18,7 +18,7 @@ {% block ui_component_showcase %}

    2. After adding Action Blocks to a layout item. Render the action blocks as you do for other types of content.

    Action Blocks (edit)

    - +
    @@ -37,7 +37,7 @@

    Item 3

     - +
    {% endblock %} {% block settings_title %} @@ -48,7 +48,7 @@ Action Blocks
    • - +
      - +
    • - +
      - +
    {% embed '_tabs-set.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig index 7a28eda819..a04993df71 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig @@ -18,7 +18,7 @@ {% block ui_component_showcase %}

    2. After adding a tabs/accordion to a layout item. The plus icon button in each tabs/accordion item adds content, the same workflow as in layout items.

    Tabs/Accordion (edit)

    - +
    Item 1 @@ -31,7 +31,7 @@ Item 3
    - +
    {% endblock %} {% block settings_title %} @@ -42,7 +42,7 @@ Tabs/Accordion Options
    • - +
      - +
    {% embed '_tabs-set.twig' %} @@ -86,7 +86,7 @@ Tabs/Accordion Options
    • - +
      - +
    {% embed '_tabs-set.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index d594f0d3e6..0dd6351e82 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -1,5 +1,5 @@
    - +
    - +
    Animation diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig index d0aab3002b..171d43518a 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig @@ -2,7 +2,7 @@

    • Spacing Overrides

      - +
      - +

    • Additional Attributes

      @@ -68,7 +68,7 @@ Note: HTML and aria attributes are allowed. - +
      - +

      + Add another attribute

      diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig index 38cceb076d..b57539c814 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig @@ -2,7 +2,7 @@
      Note: color theme handles both icon and shape colors, icon color will be ignored when shape color theme is used.
       - +
      - +
      Shape diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig index a0bf8dd577..097786e704 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-accordion.twig @@ -1,7 +1,7 @@
      • - +
        - +
      diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig index c7235b71df..8862095802 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig @@ -1,5 +1,5 @@
      - +
      - +
      Visual diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig index 3aa5021e1f..a6f95c3549 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tabs-set.twig @@ -1,3 +1,3 @@ - +
      {% block tabs %}{% endblock %} - +
      From d80d41ccbb90d63b975e083a7767f88552756ce3 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 15:32:34 +0100 Subject: [PATCH 08/35] DS-889: Styles + replace custom tag --- docs-site/src/index.scss | 1 + .../25-list-paragraph.twig | 10 +- .../styles/index.scss | 218 ++++++++++++++++++ 3 files changed, 224 insertions(+), 5 deletions(-) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss diff --git a/docs-site/src/index.scss b/docs-site/src/index.scss index 75ba199d41..2eaabb4ff6 100644 --- a/docs-site/src/index.scss +++ b/docs-site/src/index.scss @@ -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'; diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig index f5b9a90f88..efc4fad058 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig @@ -18,11 +18,11 @@ {% block ui_component_showcase %}

      2. After adding a list to a layout, placeholder spaces will be reserved for each list item. User can add other paragraphs inside each item.

      List (edit)

      - - - - - +
      +
      +
      +
      +
      {% endblock %} {% block settings_title %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss new file mode 100644 index 0000000000..7aa7a6bbaa --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss @@ -0,0 +1,218 @@ +:root { + --page-padding-x: calc((100vw - min(80vw, 75ch)) / 2); +} + +.c-drupal-admin-ui { + padding: 2rem var(--page-padding-x); + + form { + margin-bottom: 1.35rem; + } + + form ul { + margin-left: 0; + list-style: none; + } + + form li { + margin-bottom: 0.33rem; + } + + &__grid { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 0.25rem; + grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr)); + } + + fieldset { + padding: 1.65rem 2rem; + border: 1px solid rgba(105, 105, 105, 0.2); + border-radius: 0.5rem; + } + + fieldset > ul > li > details { + padding-bottom: 0.5rem; + + &[open] { + padding-bottom: 1rem; + } + } + + legend { + display: table; + box-sizing: border-box; + max-width: 100%; + margin-bottom: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, sans-serif; + font-size: 0.67rem; + font-weight: 700; + color: inherit; + white-space: normal; + line-height: 1; + text-transform: uppercase; + letter-spacing: 0.05rem; + } + + small { + display: inline-block; + line-height: 1.35; + } + + [indented] { + padding-left: 1rem; + } + + input, + textarea, + select { + width: 100%; + } + + input[type='radio'], + input[type='checkbox'] { + width: auto; + } + + &__info { + display: block; + padding: 3px; + font-size: 0.8rem; + border-left: 3px solid #0076d1; + background-color: #d6edff; + + &:not(:last-child) { + margin-bottom: 0.25rem; + } + } + + &__tabs { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + width: 100%; + min-height: 324px; + border: 1px solid lightgray; + background-color: #f4f4f4; + + &:before { + content: 'Select a tab on the side'; + display: grid; + place-items: center; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: calc(100% - 180px); + color: gray; + } + + > section { + display: none; + position: absolute; + top: 0; + right: 0; + width: calc(100% - 180px); + height: 100%; + overflow-y: auto; + padding: 0.75rem 1rem; + background-color: white; + + &:target { + display: block; + + & + a { + color: black; + text-decoration: none; + border-right-color: white; + background-color: white; + } + } + } + + > a { + width: 180px; + padding: 0.75rem 1rem; + white-space: nowrap; + text-overflow: ellipsis; + border-right: inherit; + + & ~ a { + border-top: inherit; + } + } + } + + small { + display: inline; + } + + i { + vertical-align: middle; + + svg { + width: auto; + height: 0.9em; + } + } + + &__placeholder { + display: block; + padding: 0.5rem; + text-align: center; + word-break: break-word; + hyphens: auto; + border: 1px dashed #0076d1; + + &[inline] { + display: flex; + gap: 0.5rem; + } + } + + &__action-blocks { + display: grid; + gap: 1px; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + + > a { + padding: 2rem; + color: white; + text-align: center; + text-decoration: none; + background: #0076d1; + } + + svg { + width: 2rem; + height: 2rem; + fill: currentColor; + } + } + + &__accordion { + display: block; + padding: 0.5rem; + border: 1px solid; + + details + details { + border-top: inherit; + } + + details { + margin: 0; + padding: 0; + + &[open] { + padding-bottom: 1rem; + } + } + + summary { + padding: 0.5rem; + } + } +} From c699e6ea976e957720b1a0d286a35cda366c8a35 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 23 Nov 2022 16:36:45 +0100 Subject: [PATCH 09/35] DS-889: Replace custom tag --- .../70-drupal-admin-user-interface/tabs/_tab-icon-after.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-icon-before.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-icon-only.twig | 4 ++-- .../tabs/_tab-item-options-accordion.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-modal.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-overrides.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-shape.twig | 4 ++-- .../70-drupal-admin-user-interface/tabs/_tab-visual-tabs.twig | 4 ++-- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig index 69183eb9ed..499986edcb 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after.twig @@ -1,9 +1,9 @@
      - +
      Note: icon options are not available within buttons.
      - +
      • Choose an icon from the library
        diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig index 31043616f1..cb22e02e33 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before.twig @@ -1,9 +1,9 @@
        - +
        Note: icon options are not available within buttons.
        - +
        • Choose an icon from the library
          diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig index 6763e181ff..bf69c1252c 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-only.twig @@ -1,9 +1,9 @@
          - +
          Note: icon options are not available within buttons and Icon Only will override Icon Before and Icon After.
          - +
          • Choose an icon from the library
            diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig index 92500c0d79..ecf22563fc 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig @@ -1,9 +1,9 @@
            - +
            Note: if Allow only 1 item to be expanded at once is checked, only 1 item will be expanded on page load. Do not check multiple items to expand on page load in such scenario.
            - +

            Overall Options

            • diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig index 860a5568a3..f12cfb1c74 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-modal.twig @@ -1,7 +1,7 @@
    diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig index e5e1751d18..3e3ef09b6b 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig @@ -28,7 +28,7 @@

    3. Editing the Blockquote will bring up these options in a modal.

    {% endblock %} - {% block fieldset_inner %} + {% block settings %} Blockquote
    • @@ -64,11 +64,11 @@
    {% embed '_tabs-set.twig' %} {% block tabs %} - {% include '_tab-visual.twig' %} + {% include '_tab-visual-blockquote.twig' %} {% include '_tab-avatar.twig' %} - {% include '_tab-logo.twig' %} + {# {% include '_tab-logo.twig' %} {% include '_tab-animation.twig' %} - {% include '_tab-overrides.twig' %} + {% include '_tab-overrides.twig' %} #} {% endblock %} {% endembed %} {% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig index efc4fad058..d7798bef4b 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig @@ -19,9 +19,9 @@

    2. After adding a list to a layout, placeholder spaces will be reserved for each list item. User can add other paragraphs inside each item.

    List (edit)

    -
    -
    -
    + {% for item in 1..3 %} +
    + {% endfor %}
    {% endblock %} @@ -29,7 +29,7 @@

    3. Editing the list will bring up these options in a modal.

    {% endblock %} - {% block fieldset_inner %} + {% block settings %} List Options
    • diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig index bf548da385..22c2ad97cc 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig @@ -44,7 +44,7 @@

      3. Editing the Action Blocks will bring up these options in a modal.

      {% endblock %} - {% block fieldset_inner %} + {% block settings %} Action Blocks
      • @@ -115,7 +115,7 @@
      {% embed '_tabs-set.twig' %} {% block tabs %} - {% include '_tab-item-options.twig' %} + {% include '_tab-item-options-action-blocks.twig' %} {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig index a04993df71..147e165891 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig @@ -18,19 +18,13 @@ {% block ui_component_showcase %}

      2. After adding a tabs/accordion to a layout item. The plus icon button in each tabs/accordion item adds content, the same workflow as in layout items.

      Tabs/Accordion (edit)

      -
      -
      - Item 1 - -
      -
      - Item 2 - -
      -
      - Item 3 - -
      +
      + {% for item in 1..3 %} +
      + Item {{loop.index}} + +
      + {% endfor %}
      {% endblock %} @@ -38,7 +32,7 @@

      3. Editing the tabs/accordion will bring up these options in a modal.

      {% endblock %} - {% block fieldset_inner %} + {% block settings %} Tabs/Accordion Options
      • @@ -82,7 +76,7 @@ {% endembed %} {% embed '_main-content.twig' %} - {% block fieldset_inner %} + {% block settings %} Tabs/Accordion Options
        • diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig index 9cea7a8aed..9918357923 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/_main-content.twig @@ -9,7 +9,7 @@ {% block settings_title %}{% endblock %}
          - {% block fieldset_inner %}{% endblock %} + {% block settings %}{% endblock %}

          From a754dc59a8d6c91f8e1544a277a5f280b327ba7a Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 25 Nov 2022 10:34:46 +0100 Subject: [PATCH 14/35] DS-889: Tab names + loop --- .../tabs/_tab-item-options-accordion.twig | 74 +++------ .../tabs/_tab-item-options-action-blocks.twig | 57 +++++++ .../tabs/_tab-item-options-tabs.twig | 42 +---- .../tabs/_tab-item-options.twig | 155 ------------------ ...isual.twig => _tab-visual-blockquote.twig} | 0 5 files changed, 81 insertions(+), 247 deletions(-) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-action-blocks.twig delete mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/{_tab-visual.twig => _tab-visual-blockquote.twig} (100%) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig index ecf22563fc..f014f4b146 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-accordion.twig @@ -14,60 +14,26 @@

        Individual Options

          -
        • -
          - Item 1 -
            -
          • - -
            • -
          • - -
            • -
          -
          -
          • -
        • -
          - Item 2 -
            -
          • - -
            • -
          • - -
            • -
          -
          -
          • -
        • -
          - Item 3 -
            -
          • - -
            • -
          • - -
            • -
          -
          -
          • + {% for item in 1..3 %} +
        • +
          + Item {{ loop.index }} +
            +
          • + +
            • +
          • + +
            • +
          +
          +
          • + {% endfor %}
        Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-action-blocks.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-action-blocks.twig new file mode 100644 index 0000000000..ee41deb9b7 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-action-blocks.twig @@ -0,0 +1,57 @@ +
        +
          + {% for item in 1..3 %} +
        • +
          + Item {{ loop.index }} +
            +
          • +
              +
            • + +
              • +
            • +
              Action Type
              +
              + +
              +
              + +
              +
              + +
              +
              +
              +
              + +
              + +
              +
              +
              + +
              + +
              +
              +
              • +
            • +
              Choose an icon from the library
              +
              + + +
              +
              • +
            +
            • +
          +
          +
          • + {% endfor %} +
        +
        +Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig index be68dcd088..3eb0dbea30 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options-tabs.twig @@ -1,8 +1,9 @@
          + {% for item in 1..3 %}
        • - Item 1 + Item {{ loop.index }}
          • -
            • -
          -
          -
          • -
        • -
          - Item 2 -
            -
          • - -
            • -
          • - -
            • -
          -
          -
          • -
        • -
          - Item 3 -
            -
          • - -
            • -
          • -
          • + {% endfor %}
        Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig deleted file mode 100644 index cd585e97ee..0000000000 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-item-options.twig +++ /dev/null @@ -1,155 +0,0 @@ -
        -
          -
        • -
          - Item 1 -
            -
          • -
              -
            • - -
              • -
            • -
              Action Type
              -
              - -
              -
              - -
              -
              - -
              -
              -
              -
              - -
              - -
              -
              -
              - -
              - -
              -
              -
              • -
            • -
              Choose an icon from the library
              -
              - - -
              -
              • -
            -
            • -
          -
          -
          • -
        • -
          - Item 2 -
            -
          • -
              -
            • - -
              • -
            • -
              Action Type
              -
              - -
              -
              - -
              -
              - -
              -
              -
              -
              - -
              - -
              -
              -
              - -
              - -
              -
              -
              • -
            • -
              Choose an icon from the library
              -
              - - -
              -
              • -
            -
            • -
          -
          -
          • -
        • -
          - Item 3 -
            -
          • -
              -
            • - -
              • -
            • -
              Action Type
              -
              - -
              -
              - -
              -
              - -
              -
              -
              -
              - -
              - -
              -
              -
              - -
              - -
              -
              -
              • -
            • -
              Choose an icon from the library
              -
              - - -
              -
              • -
            -
            • -
          -
          -
          • -
        -
        -Item options diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-blockquote.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-visual-blockquote.twig From 3aa582ae1e91a0d74f257b222f35acb84a05b140 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 25 Nov 2022 10:35:02 +0100 Subject: [PATCH 15/35] DS-889: Remove inline style --- .../70-drupal-admin-user-interface/tabs/_tab-overrides.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig index 0ea2624781..d578e86cff 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig @@ -88,4 +88,4 @@
      -Overrides +Overrides From 969549ce7c1c24056e60eebb1eb2be1ae524588c Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 25 Nov 2022 15:24:42 +0100 Subject: [PATCH 16/35] DS-889: Add select option to the animation tab --- .../70-drupal-admin-user-interface/tabs/_tab-animation.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index 1c7a0d10c9..b19fbc787e 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -28,6 +28,7 @@
      From 4831f5cb71b70e566be0505e2952d9ad2b849ef7 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 25 Nov 2022 19:13:40 +0100 Subject: [PATCH 21/35] DS-889: Update animation tab --- .../tabs/_tab-animation.twig | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index 8176000955..e38429308b 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -1,6 +1,7 @@ -
      - - +{% set id = random() %} +
      + +
      Note: Animation options are currently in beta and subject to change.
      @@ -66,4 +67,4 @@
      -Animation +Animation From 1e4078a924c2411267056c1f25db831386496721 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 25 Nov 2022 19:18:49 +0100 Subject: [PATCH 22/35] DS-889: Update overrides tab --- .../70-drupal-admin-user-interface/tabs/_tab-overrides.twig | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig index d578e86cff..7536dfcd21 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-overrides.twig @@ -1,4 +1,5 @@ -
      +{% set id = random() %} +

      • Spacing Overrides

        @@ -88,4 +89,4 @@
      -Overrides +Overrides From fad0a966df2969c03939948f27ee66b515af6ebe Mon Sep 17 00:00:00 2001 From: Mroczko Date: Mon, 28 Nov 2022 13:46:00 +0100 Subject: [PATCH 23/35] DS-889: Update CSS --- .../70-drupal-admin-user-interface/styles/index.scss | 2 +- .../tabs/_tab-animation.twig | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss index c3c448c775..db170c4fd4 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/styles/index.scss @@ -1,5 +1,5 @@ :root { - --page-padding-x: calc((100vw - min(80vw, 90ch)) / 2); + --page-padding-x: calc((100vw - min(80vw, 86ch)) / 2); } .c-drupal-admin-ui { diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index e38429308b..97ee1e66eb 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -50,6 +50,7 @@
      From 208149681b59019acd678c6891716f2275b937b9 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Mon, 28 Nov 2022 13:53:13 +0100 Subject: [PATCH 24/35] DS-889: Update animation tab --- .../70-drupal-admin-user-interface/tabs/_tab-animation.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index 97ee1e66eb..707da53e09 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -65,7 +65,7 @@ -

      When cascade is enabled, animations will run in sequence rather than all at once.

      + When cascade is enabled, animations will run in sequence rather than all at once.
      From dbb538517f27837e741591d8bb6c54cb9db3c961 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Tue, 29 Nov 2022 11:38:38 +0100 Subject: [PATCH 25/35] DS-889: indentation --- .../tabs/_tab-shape.twig | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig index 3e0a8adc27..3fd5e2ce2f 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-shape.twig @@ -1,41 +1,41 @@
      -
      -
      Note: color theme handles both icon and shape colors, icon color will be ignored when shape color theme is used.
      +
      +
      Note: color theme handles both icon and shape colors, icon color will be ignored when shape color theme is used.
      +
      +
      +
      +
      -
      -
      - -
      -
      - -
      +
      +
      -
      - Shape + + +Shape From c1e2b4243d880f54dfd057b90535f2e1d4abebaa Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 30 Nov 2022 14:59:33 +0100 Subject: [PATCH 26/35] DS-889: Remove type in the animation tab --- .../tabs/_tab-animation.twig | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig index 707da53e09..e9e731c272 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-animation.twig @@ -6,22 +6,12 @@
      Note: Animation options are currently in beta and subject to change.
      -
      - -
      From 51ce78112482c49a5d4490e4c72671b9ec72412d Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 30 Nov 2022 15:00:39 +0100 Subject: [PATCH 27/35] DS-889: Remove animation tab from specific pragraph examples --- .../70-drupal-admin-user-interface/05-icon-paragraph.twig | 1 - .../70-drupal-admin-user-interface/10-image-paragraph.twig | 1 - .../70-drupal-admin-user-interface/15-button-paragraph.twig | 1 - .../70-drupal-admin-user-interface/20-blockquote-paragraph.twig | 1 - .../30-action-blocks-paragraph.twig | 1 - .../35-tabs-and-accrodion-paragraph.twig | 1 - 6 files changed, 6 deletions(-) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig index 3125dce33d..b29aa9a6ef 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig @@ -60,7 +60,6 @@ {% embed '_tabs-set.twig' %} {% block tabs %} {% include '_tab-shape.twig' %} - {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} {% endembed %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig index 0eadb10f90..eb76942726 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig @@ -32,7 +32,6 @@ {% embed 'tabs/_tabs-set.twig' %} {% block tabs %} {% include 'tabs/_tab-modal.twig' %} - {% include 'tabs/_tab-animation.twig' %} {% include 'tabs/_tab-overrides.twig' %} {% endblock %} {% endembed %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig index 29d1eb47b4..045abf3b84 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig @@ -111,7 +111,6 @@ {% include '_tab-icon-before.twig' %} {% include '_tab-icon-after.twig' %} {% include '_tab-icon-only.twig' %} - {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} {% endembed %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig index 7aa145844f..1260eb37cd 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig @@ -67,7 +67,6 @@ {% include '_tab-visual-blockquote.twig' %} {% include '_tab-avatar.twig' %} {% include '_tab-logo.twig' %} - {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} {% endembed %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig index 22c2ad97cc..d76afae6fc 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig @@ -116,7 +116,6 @@ {% embed '_tabs-set.twig' %} {% block tabs %} {% include '_tab-item-options-action-blocks.twig' %} - {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} {% endembed %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig index 147e165891..b42a4eabdc 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig @@ -67,7 +67,6 @@ {% block tabs %} {% include '_tab-visual-accordion.twig' %} {% include '_tab-item-options-accordion.twig' %} - {% include '_tab-animation.twig' %} {% include '_tab-overrides.twig' %} {% endblock %} {% endembed %} From 37969cee548b3060a10d693e20df1fa7434a9742 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Wed, 30 Nov 2022 15:02:22 +0100 Subject: [PATCH 28/35] DS-889: Fix the typo in the doc page name --- ...rodion-paragraph.twig => 35-tabs-and-accordion-paragraph.twig} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{35-tabs-and-accrodion-paragraph.twig => 35-tabs-and-accordion-paragraph.twig} (100%) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accordion-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accrodion-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accordion-paragraph.twig From 83e440f962d60868d469b7d09eb4e6db5d6a9826 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 09:51:38 +0100 Subject: [PATCH 29/35] DS-889: Add advanced paragraph doc + renumber all doc pages --- .../05-advanced-text-paragraph.twig | 121 ++++++++++++++++++ ...-paragraph.twig => 10-icon-paragraph.twig} | 100 +++++++-------- ...paragraph.twig => 15-image-paragraph.twig} | 0 ...aragraph.twig => 20-button-paragraph.twig} | 0 ...raph.twig => 25-blockquote-paragraph.twig} | 0 ...-paragraph.twig => 30-list-paragraph.twig} | 0 ...h.twig => 35-action-blocks-paragraph.twig} | 0 ...g => 40-tabs-and-accordion-paragraph.twig} | 0 8 files changed, 171 insertions(+), 50 deletions(-) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{05-icon-paragraph.twig => 10-icon-paragraph.twig} (56%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{10-image-paragraph.twig => 15-image-paragraph.twig} (100%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{15-button-paragraph.twig => 20-button-paragraph.twig} (100%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{20-blockquote-paragraph.twig => 25-blockquote-paragraph.twig} (100%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{25-list-paragraph.twig => 30-list-paragraph.twig} (100%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{30-action-blocks-paragraph.twig => 35-action-blocks-paragraph.twig} (100%) rename docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/{35-tabs-and-accordion-paragraph.twig => 40-tabs-and-accordion-paragraph.twig} (100%) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig new file mode 100644 index 0000000000..493db20195 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig @@ -0,0 +1,121 @@ +{% 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 %} + Advanced Text +
        +
      • + +
        + + + About text format + +
        +
        • +
      • +
        +
        + +
        +
        + +
        +
        + +
        +
        +
        • +
      + {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} + {% endembed %} +{% endblock %} + +{% block code_snippet %} +

      + Content goes here +

      +{% endblock %} + +{% block dev_notes %} +
        +
      1. + Rich Text (CKEditor) format provides limited options: +
          +
        • + align +
            +
          • left (add u-bolt-text-align-left class to container)
            • +
          • center (add u-bolt-text-align-center class to container)
            • +
          • right (add u-bolt-text-align-right class to container)
            • +
          +
          • +
        • italic (wrap <em> around selected text)
          • +
        • bold (wrap <strong> around selected text)
          • +
        • superscript (wrap <sup> around selected text)
          • +
        • subscript (wrap <sub> around selected text)
          • +
        • quote (wrap <q> around selected text)
          • +
        • inline code (wrap <code> around selected text)
          • +
        +
        2. +
      2. Plain Text format: escape all special characters, print as exactly typed.
        3. +
      3. Raw HTML format: print HTML.
        4. +
      4. If eyebrow is selected for Hierarchy, disable Size select input, because Eyebrow only has one size.
        5. +
      +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-icon-paragraph.twig similarity index 56% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-icon-paragraph.twig index b29aa9a6ef..7cc0913427 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-icon-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-icon-paragraph.twig @@ -12,57 +12,57 @@ {% embed '_main-content.twig' %} {% block settings %} Icon -
        -
      • -
        Choose an icon from the library
        -
        - - -
        -
        • -
      • -
          -
        • -
          -
          - -
          -
          - -
          +
            +
          • +
            Choose an icon from the library
            +
            + + +
            +
            • +
          • +
              +
            • +
              +
              + +
              +
              +
              -
              • -
            -
            • -
          - {% embed '_tabs-set.twig' %} - {% block tabs %} - {% include '_tab-shape.twig' %} - {% include '_tab-overrides.twig' %} - {% endblock %} - {% endembed %} +
          +
          • +
        +
        • +
      + {% embed '_tabs-set.twig' %} + {% block tabs %} + {% include '_tab-shape.twig' %} + {% include '_tab-overrides.twig' %} + {% endblock %} + {% endembed %} {% endblock %} {% endembed %} {% embed '_main-content.twig' %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-image-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/10-image-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-image-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-button-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/15-button-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-button-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-blockquote-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/20-blockquote-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-blockquote-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-list-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/25-list-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-list-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-action-blocks-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/30-action-blocks-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-action-blocks-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accordion-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/40-tabs-and-accordion-paragraph.twig similarity index 100% rename from docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/35-tabs-and-accordion-paragraph.twig rename to docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/40-tabs-and-accordion-paragraph.twig From 8ba35b5213681d61d5b399cba83e2f7005c41259 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 12:00:25 +0100 Subject: [PATCH 30/35] DS-889: Change the patternlab tab name --- .../pl-toggle-hidden-folders/pl-toggle-hidden-folders.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js index 3d69ce83ad..9f1e0ab2c0 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js +++ b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js @@ -83,7 +83,7 @@ class HiddenFoldersToggle extends LitElement { class="pl-c-tools__action pl-c-toggle-hidden-folders__action" title="Toggle Hidden Folders" @click="${() => this.toggleFolders()}" - >${this.testMode ? 'Hide' : 'Show'} Archive and Test Folders + >${this.testMode ? 'Hide' : 'Show'} Internal Tabs `; From fbff2ca11c3184c9055bfc91644cb8aad0e1a6ae Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 13:34:59 +0100 Subject: [PATCH 31/35] DS-889: Add new tabs --- .../tabs/_tab-action-advanced-paragraph.twig | 48 +++++++++++++++++++ .../_tab-icon-after-advanced-paragraph.twig | 37 ++++++++++++++ .../_tab-icon-before-advanced-paragraph.twig | 38 +++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action-advanced-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after-advanced-paragraph.twig create mode 100644 docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before-advanced-paragraph.twig diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action-advanced-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action-advanced-paragraph.twig new file mode 100644 index 0000000000..eb8b701574 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-action-advanced-paragraph.twig @@ -0,0 +1,48 @@ +
      +
      +
      Note: enabling action will make the entire headline or text paragraph clickable.
      +
      +
        +
      • +
          +
        • +
          Action Type
          +
          + +
          +
          + +
          +
          + +
          +
          +
          +
          + +
          + +
          +
          +
          + +
          + +
          +
          +
          • +
        +
        • +
      • +
          +
        • + +
          • +
        +
        • +
      +
      +Action diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after-advanced-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after-advanced-paragraph.twig new file mode 100644 index 0000000000..20bd76d08e --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-after-advanced-paragraph.twig @@ -0,0 +1,37 @@ +
      + +
      + Note: size and shape are not available for inline icons with text. +
      +       +
        +
      • +
        Choose an icon from the library
        +
        + + +
        +
        • +
      • +
          +
        • + +
          • +
        +
        • +
      +
      +Icon After diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before-advanced-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before-advanced-paragraph.twig new file mode 100644 index 0000000000..087b067ca3 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/tabs/_tab-icon-before-advanced-paragraph.twig @@ -0,0 +1,38 @@ +
      +
      +
      + Note: size and shape are not available for inline icons with text. +
      +
      +
        +
      • +
        Choose an icon from the library
        +
        + + +
        +
        • +
      • +
          +
        • + +
          • +
        +
        • +
      +
      +Icon Before From eeb799d7d42394a94634e8acc489072c03e20a3d Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 13:35:26 +0100 Subject: [PATCH 32/35] DS-889: Add tabs to advanced text-paragraph --- .../05-advanced-text-paragraph.twig | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig index 493db20195..92249acd58 100644 --- a/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig +++ b/docs-site/src/pages/pattern-lab/_patterns/70-drupal-admin-user-interface/05-advanced-text-paragraph.twig @@ -80,6 +80,9 @@
    {% 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 %} From 4bdb2f59237bf721de6c2178e6154b243dddbba5 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 14:04:27 +0100 Subject: [PATCH 33/35] DS-899: toggle admin ui folder --- .../uikit-workshop/src/scripts/actions/app.js | 12 +++++++++++- .../src/scripts/components/pl-nav/nav.js | 17 +++++++++++++++++ .../pl-toggle-hidden-folders.js | 11 +++++++++++ .../uikit-workshop/src/scripts/localstorage.js | 10 ++++++++++ .../uikit-workshop/src/scripts/reducers/app.js | 6 ++++++ 5 files changed, 55 insertions(+), 1 deletion(-) diff --git a/packages/website-ui/uikit-workshop/src/scripts/actions/app.js b/packages/website-ui/uikit-workshop/src/scripts/actions/app.js index 299e0258c6..98157497f8 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/actions/app.js +++ b/packages/website-ui/uikit-workshop/src/scripts/actions/app.js @@ -1,6 +1,7 @@ export const UPDATE_THEME_MODE = 'UPDATE_THEME_MODE'; export const UPDATE_TEST_MODE = 'UPDATE_TEST_MODE'; -export const UPDATE_ARCHIVE_MODE = 'UPDATE_ARCHIVE_MODE'; +export const UPDATE_ARCHIVE_MODE = 'UPDATE_DRUPAL_MODE'; +export const UPDATE_DRUPAL_MODE = 'UPDATE_ARCHIVE_MODE'; export const UPDATE_LAYOUT_MODE = 'UPDATE_LAYOUT_MODE'; export const UPDATE_DRAWER_ANIMATION_STATE = 'UPDATE_DRAWER_ANIMATION_STATE'; export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE'; @@ -83,6 +84,15 @@ export const updateArchiveMode = archiveMode => (dispatch, getState) => { } }; +export const updateDrupalMode = drupalMode => (dispatch, getState) => { + if (getState().app.drupalMode !== drupalMode) { + dispatch({ + type: UPDATE_DRUPAL_MODE, + drupalMode, + }); + } +}; + export const updateDrawerState = opened => (dispatch, getState) => { if (getState().app.drawerOpened !== opened) { dispatch({ diff --git a/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js b/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js index bd0610c6e4..b8ecfee9e6 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js +++ b/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js @@ -66,6 +66,7 @@ class Nav extends BaseComponent { this.layoutMode = state.app.layoutMode || ''; this.testMode = state.app.testMode || false; this.archiveMode = state.app.archiveMode || false; + this.drupalMode = state.app.drupalMode || false; this.currentPattern = state.app.currentPattern || ''; this.elem = this; this.previouslyActiveLinks = []; @@ -104,6 +105,10 @@ class Nav extends BaseComponent { this.archiveMode = state.app.archiveMode || false; } + if (this.drupalMode !== state.app.drupalMode) { + this.drupalMode = state.app.drupalMode || false; + } + if ( state.app.currentPattern && this.currentPattern !== state.app.currentPattern @@ -114,6 +119,7 @@ class Nav extends BaseComponent { this.handleTestFolder(); this.handleArchiveFolder(); + this.handleDrupalFolder(); } handleTestFolder() { @@ -132,6 +138,14 @@ class Nav extends BaseComponent { } } + handleDrupalFolder() { + if (this.drupalElem !== undefined) { + this.drupalMode + ? this.drupalElem.classList.remove('pl-c-nav__list-item--hidden') + : this.drupalElem.classList.add('pl-c-nav__list-item--hidden'); + } + } + receiveIframeMessage(event) { const self = this; @@ -265,6 +279,9 @@ class Nav extends BaseComponent { this.archiveElem = document.querySelector('.pl-c-nav__list-item--archive'); this.handleArchiveFolder(); + + this.drupalElem = document.querySelector('.pl-c-nav__list-item--drupal'); + this.handleDrupalFolder(); } render({ layoutMode }) { diff --git a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js index 9f1e0ab2c0..e57e08a67f 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js +++ b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js @@ -3,6 +3,7 @@ import { LitElement, html, customElement } from 'lit-element'; import { store } from '../../store.js'; // connect to the Redux store. import { updateTestMode } from '../../actions/app.js'; // redux actions needed import { updateArchiveMode } from '../../actions/app.js'; // redux actions needed +import { updateDrupalMode } from '../../actions/app.js'; // redux actions needed import styles from './pl-toggle-hidden-folders.scss?external'; @customElement('pl-toggle-hidden-folders') @@ -28,6 +29,10 @@ class HiddenFoldersToggle extends LitElement { attribute: true, type: Boolean, }, + drupalMode: { + attribute: true, + type: Boolean, + }, }; } @@ -44,6 +49,7 @@ class HiddenFoldersToggle extends LitElement { const state = store.getState(); this.testMode = state.app.testMode || false; this.archiveMode = state.app.archiveMode || false; + this.drupalMode = state.app.drupalMode || false; this.__storeUnsubscribe = store.subscribe(() => this._stateChanged(store.getState()), @@ -52,11 +58,13 @@ class HiddenFoldersToggle extends LitElement { store.dispatch(updateTestMode(this.testMode)); store.dispatch(updateArchiveMode(this.archiveMode)); + store.dispatch(updateDrupalMode(this.drupalMode)); } toggleFolders() { store.dispatch(updateTestMode(!this.testMode)); store.dispatch(updateArchiveMode(!this.archiveMode)); + store.dispatch(updateDrupalMode(!this.drupalMode)); } disconnectedCallback() { @@ -75,6 +83,9 @@ class HiddenFoldersToggle extends LitElement { if (this.archiveMode !== state.app.archiveMode) { this.archiveMode = state.app.archiveMode; } + if (this.drupalMode !== state.app.drupalMode) { + this.drupalMode = state.app.drupalMode; + } } render() { diff --git a/packages/website-ui/uikit-workshop/src/scripts/localstorage.js b/packages/website-ui/uikit-workshop/src/scripts/localstorage.js index 718e7a8a34..5f341d7e6d 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/localstorage.js +++ b/packages/website-ui/uikit-workshop/src/scripts/localstorage.js @@ -71,6 +71,16 @@ export const loadState = () => { } } + if (state.app.drupalMode === undefined) { + try { + if (window.config.theme.drupal !== undefined) { + state.app.drupalMode = window.config.theme.drupal; + } + } catch (e) { + state.app.drupalMode = false; + } + } + if (state.app.layoutMode === undefined) { try { if (window.config.theme.layout !== undefined) { diff --git a/packages/website-ui/uikit-workshop/src/scripts/reducers/app.js b/packages/website-ui/uikit-workshop/src/scripts/reducers/app.js index 65cb252c63..895e8f9fe3 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/reducers/app.js +++ b/packages/website-ui/uikit-workshop/src/scripts/reducers/app.js @@ -8,6 +8,7 @@ import { UPDATE_THEME_MODE, UPDATE_TEST_MODE, UPDATE_ARCHIVE_MODE, + UPDATE_DRUPAL_MODE, IS_VIEWALL_PAGE, UPDATE_CURRENT_URL, UPDATE_CURRENT_PATTERN, @@ -55,6 +56,11 @@ const app = (state = {}, action) => { ...state, archiveMode: action.archiveMode, }; + case UPDATE_DRUPAL_MODE: + return { + ...state, + drupalMode: action.drupalMode, + }; case UPDATE_DRAWER_STATE: return { ...state, From ccec9af05031af823dad9d73dcb6a6b69453adb0 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 14:10:57 +0100 Subject: [PATCH 34/35] DS-899: update toggling --- .../pl-toggle-hidden-folders/pl-toggle-hidden-folders.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js index e57e08a67f..740835ceca 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js +++ b/packages/website-ui/uikit-workshop/src/scripts/lit-components/pl-toggle-hidden-folders/pl-toggle-hidden-folders.js @@ -94,7 +94,10 @@ class HiddenFoldersToggle extends LitElement { class="pl-c-tools__action pl-c-toggle-hidden-folders__action" title="Toggle Hidden Folders" @click="${() => this.toggleFolders()}" - >${this.testMode ? 'Hide' : 'Show'} Internal Tabs + >${this.testMode || this.archiveMode || this.drupalMode + ? 'Hide' + : 'Show'} + Internal Tabs `; From a3249f52e5e902a334f5fb72598596e647a979a5 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 1 Dec 2022 16:35:52 +0100 Subject: [PATCH 35/35] DS-899: update hiding folders --- .../src/scripts/components/pl-nav/nav.js | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js b/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js index b8ecfee9e6..5b17c984fc 100644 --- a/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js +++ b/packages/website-ui/uikit-workshop/src/scripts/components/pl-nav/nav.js @@ -117,29 +117,23 @@ class Nav extends BaseComponent { this.handleURLChange(); // so the nav logic is always correct (ex. layout changes) } - this.handleTestFolder(); - this.handleArchiveFolder(); - this.handleDrupalFolder(); + this.handleHiddenFolders(); } - handleTestFolder() { - if (this.testElem !== undefined) { + handleHiddenFolders() { + if (this.testElem) { this.testMode ? this.testElem.classList.remove('pl-c-nav__list-item--hidden') : this.testElem.classList.add('pl-c-nav__list-item--hidden'); } - } - handleArchiveFolder() { - if (this.archiveElem !== undefined) { + if (this.archiveElem) { this.archiveMode ? this.archiveElem.classList.remove('pl-c-nav__list-item--hidden') : this.archiveElem.classList.add('pl-c-nav__list-item--hidden'); } - } - handleDrupalFolder() { - if (this.drupalElem !== undefined) { + if (this.drupalElem) { this.drupalMode ? this.drupalElem.classList.remove('pl-c-nav__list-item--hidden') : this.drupalElem.classList.add('pl-c-nav__list-item--hidden'); @@ -275,13 +269,12 @@ class Nav extends BaseComponent { } this.testElem = document.querySelector('.pl-c-nav__list-item--tests'); - this.handleTestFolder(); this.archiveElem = document.querySelector('.pl-c-nav__list-item--archive'); - this.handleArchiveFolder(); this.drupalElem = document.querySelector('.pl-c-nav__list-item--drupal'); - this.handleDrupalFolder(); + + this.handleHiddenFolders(); } render({ layoutMode }) {