chore(site): UIP updated to 2.1.0-beta.2 (UIP 2 April), ESL Togglea…

…ble examples migration (#2319) Co-authored-by: Yuliya Adamska <yadamska@exadel.com>
exadel-inc · Apr 4, 2024 · eef8faf · eef8faf
1 parent 266329e
commit eef8faf
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 306 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -33,7 +33,7 @@
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-dev-server": "^1.0.4",
     "@exadel/esl": "../",
-    "@exadel/ui-playground": "2.1.0-beta.1",
+    "@exadel/ui-playground": "2.1.0-beta.2",
     "@juggle/resize-observer": "^3.4.0",
     "@types/prismjs": "^1.26.3",
     "@types/smoothscroll-polyfill": "^0.3.4",

diff --git a/site/src/playground/ui-playground.less b/site/src/playground/ui-playground.less
@@ -29,6 +29,11 @@ html {
   border: 1px solid #112a47;
   border-radius: 0.5rem;
 
+  // Stylistic update for "readonly" label
+  .uip-editor-title::after {
+    opacity: 0.5;
+  }
+
   .uip-plugin-header {
     font-size: 1.1rem;
   }

diff --git a/site/views/examples/menu.njk b/site/views/examples/menu.njk
@@ -16,7 +16,11 @@ aside:
 <section class="row">
   <div class="col-12">
     <uip-root>
-      <script type="text/html" uip-snippet uip-isolated label="Simple Menu">
+      <script type="text/html"
+              label="Simple Menu"
+              uip-snippet
+              uip-snippet-js="js-snippet-simple-menu"
+              uip-isolated>
         <ul class="esl-example-menu">
           <li class="menu-item">
             <esl-trigger class="menu-item-btn" target="::next">Menu 1</esl-trigger>
@@ -61,12 +65,16 @@ aside:
           </li>
         </ul>
       </script>
-      <script type="text/plain" uip-js-snippet label="Simple Menu">
+      <script id="js-snippet-simple-menu" type="text/plain">
         import { ESLPanel, ESLTrigger } from '@exadel/esl';
         ESLPanel.register();
         ESLTrigger.register();
       </script>
-      <script type="text/html" uip-snippet label="Popup Menu">
+
+      <script type="text/html"
+              label="Popup Menu"
+              uip-snippet
+              uip-snippet-js="js-snippet-popup-menu">
         <ul class="esl-example-menu">
           <li class="menu-item">
             <esl-trigger mode="toggle" class="menu-item-btn" target="::next">Menu 1</esl-trigger>
@@ -102,18 +110,19 @@ aside:
           </li>
         </ul>
       </script>
-      <script type="text/plain" uip-js-snippet label="Popup Menu">
+      <script id="js-snippet-popup-menu" type="text/plain">
         import { ESLPopup, ESLTrigger } from '@exadel/esl';
         ESLPopup.register();
         ESLTrigger.register();
       </script>
+
       <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
       <uip-preview></uip-preview>
       <uip-settings target="esl-trigger" label="Settings" resizable vertical="@+sm">
         <uip-bool-setting target=".menu-item-btn" label="Hover" attribute="track-hover"></uip-bool-setting>
       </uip-settings>
       <uip-editor label="Source code" collapsible copy></uip-editor>
-      <uip-editor source="js" copy collapsible label="JavaScript"></uip-editor>
+      <uip-editor label="JavaScript" source="js" copy collapsible></uip-editor>
     </uip-root>
   </div>
 </section>

diff --git a/site/views/examples/tabs.njk b/site/views/examples/tabs.njk
@@ -21,7 +21,11 @@ aside:
 <section class="row">
   <div class="col-12">
     <uip-root>
-      <script type="text/html" uip-snippet uip-isolated label="Simple Tabs">
+      <script type="text/html"
+              label="Simple Tabs"
+              uip-snippet
+              uip-snippet-js="js-snippet-only-tabs"
+              uip-isolated>
         <div class="esl-d-tabs">
           <esl-tabs class="esl-d-tab-control tabs-alignment">
             <esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>
@@ -61,15 +65,12 @@ aside:
           </esl-panel-group>
         </div>
       </script>
-      <script type="text/plain" uip-js-snippet label="Simple Tabs">
-        import { ESLPanelGroup, ESLPanel, ESLTab, ESLTabs } from '@exadel/esl';
-        ESLPanelGroup.register();
-        ESLPanel.register();
-        ESLTab.register();
-        ESLTabs.register();
-      </script>
 
-      <script type="text/html" uip-snippet uip-isolated label="Tabs overflow">
+      <script type="text/html"
+              label="Tabs overflow"
+              uip-snippet
+              uip-snippet-js="js-snippet-only-tabs"
+              uip-isolated>
         <div class="esl-d-tabs">
           <esl-tabs class="esl-d-tab-control multiple-tabs" scrollable="side">
             <esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>
@@ -172,15 +173,12 @@ aside:
           </esl-panel-group>
         </div>
       </script>
-      <script type="text/plain" uip-js-snippet label="Tabs overflow">
-        import { ESLPanelGroup, ESLPanel, ESLTab, ESLTabs } from '@exadel/esl';
-        ESLPanelGroup.register();
-        ESLPanel.register();
-        ESLTab.register();
-        ESLTabs.register();
-      </script>
 
-      <script type="text/html" uip-snippet uip-isolated label="Tabs/Accordion transformation">
+      <script type="text/html"
+              label="Tabs/Accordion transformation"
+              uip-snippet
+              uip-snippet-js="js-snippet-tabs-n-accordion"
+              uip-isolated>
         <div class="esl-d-tabs">
           <esl-tabs class="esl-d-tab-control">
             <esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>
@@ -249,16 +247,12 @@ aside:
         <div class="alert alert-info mt-2">Example with a simple tab mode that transforms to accordion on XS and SM. Accordion restores last state, tabs
           restore initial state</div>
       </script>
-      <script type="text/plain" uip-js-snippet label="Tabs/Accordion transformation">
-        import { ESLPanelGroup, ESLPanel, ESLTab, ESLTabs, ESLTrigger } from '@exadel/esl';
-        ESLPanelGroup.register();
-        ESLPanel.register();
-        ESLTab.register();
-        ESLTabs.register();
-        ESLTrigger.register();
-      </script>
 
-      <script type="text/html" uip-snippet uip-isolated label="Tabs/Open state transformation">
+      <script type="text/html"
+              label="Tabs/Open state transformation"
+              uip-snippet
+              uip-snippet-js="js-snippet-only-tabs"
+              uip-isolated>
         <div class="esl-d-tabs">
           <esl-tabs class="esl-d-tab-control tabs-alignment">
             <esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>
@@ -279,15 +273,15 @@ aside:
 
           <esl-panel-group class="esl-d-tab-group"
                            mode="accordion | @+MD => tabs"
-                           min-open-items="@-SM => all | @+MD => 1"
-                           max-open-items="@+MD => 1"
+                           min-open-items="all | @+MD => 1"
+                           max-open-items="all | @+MD => 1"
                            mode-cls-target="::parent">
             <esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
               <div class="esl-d-tab-body">
                 <!-- text 100 -->
               </div>
             </esl-panel>
-            <esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
+            <esl-panel open class="esl-d-tab-panel tab-2 open" tabindex="0">
               <div class="esl-d-tab-body">
                 <!-- text 150 -->
               </div>
@@ -301,13 +295,23 @@ aside:
         </div>
         <div class="alert alert-info mt-2">Example with a simple tab mode. It transforms to default (open) cards on XS and SM</div>
       </script>
-      <script type="text/plain" uip-js-snippet label="Tabs/Open state transformation">
+
+      <script id="js-snippet-only-tabs" type="text/plain">
         import { ESLPanelGroup, ESLPanel, ESLTab, ESLTabs } from '@exadel/esl';
         ESLPanelGroup.register();
         ESLPanel.register();
         ESLTab.register();
         ESLTabs.register();
       </script>
+      <script id="js-snippet-tabs-n-accordion" type="text/plain">
+        import { ESLPanelGroup, ESLPanel, ESLTab, ESLTabs, ESLTrigger } from '@exadel/esl';
+        ESLPanelGroup.register();
+        ESLPanel.register();
+        ESLTab.register();
+        ESLTabs.register();
+        ESLTrigger.register();
+      </script>
+
 
       <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
       <uip-preview></uip-preview>